Skip to content

Commit

Permalink
Merge pull request #275 from tilgovi/hypothesis-integration-update
Browse files Browse the repository at this point in the history
Update Hypothesis integration
  • Loading branch information
fchasen committed Sep 23, 2015
2 parents 80dc89d + 4f3532e commit b288148
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 301 deletions.
127 changes: 39 additions & 88 deletions examples/hypothesis.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,11 @@
<link rel="stylesheet" href="../reader/css/normalize.css">
<link rel="stylesheet" href="../reader/css/main.css">
<link rel="stylesheet" href="../reader/css/popup.css">
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../reader/js/libs/jquery-2.1.0.min.js"></script>

<script>
"use strict";

var reader = null;

window.hypothesisConfig = function () {
return {
"app": "https://hypothes.is/app.html"
}
};

document.onreadystatechange = function () {
if (document.readyState == "complete") {
EPUBJS.VERSION = "0.1.6";
Expand All @@ -47,76 +39,38 @@
<!-- Reader -->
<script src="../reader/js/reader.min.js"></script>

<!-- Plugins -->
<!-- <script src="../reader/plugins/search.js"></script> -->

<!-- Full Screen -->
<script src="../reader/js/libs/screenfull.min.js"></script>

<!-- Highlights -->
<script src="./bower_components/jquery-highlight/jquery.highlight.js"></script>
<script src="../hooks/extensions/highlight.js"></script>

<!-- Hypothes.is -->
<script async src="../hooks/extensions/hypothesis.js"></script>
<!-- Hypothesis -->
<script src="../hooks/extensions/hypothesis.js"></script>
<script src="../reader_src/plugins/hypothesis.js"></script>
<script src="https://hypothes.is/app/embed.js"></script>


<style>
#hypothesis {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 33%;
margin: 0 .5%;
overflow: hidden;
z-index: 0;
background: #4e4e4e;
}

#hypothesis .annotator-frame {
background: none;
position: absolute;
left: 0;
margin: auto !important;
width: 100%;
z-index: auto;
}

#annotator-notice {
display: none;
}

#main {
left: 0;
}

#main.single {
width: 66%;
}

#main.single.closed {
-webkit-transform: translate(51.6%, 0);
-moz-transform: translate(51.6%, 0);
}

#sidebar {
width: 34%
}

.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

#hypothesis {
overflow: hidden;
position: absolute;
right: 0;
height: 100%;
width: 34%;
z-index: -2;
}

#hypothesis iframe {
position: absolute;
width: 100%;
height: 100%;
}

#main {
left: 0;
}

#main.single {
right: 34%;
width: 66%;
}
</style>

</head>
<body>
<div id="sidebar">
Expand All @@ -127,24 +81,19 @@
<a id="show-Toc" class="show_view icon-list-1 active" data-view="Toc">TOC</a>
<a id="show-Bookmarks" class="show_view icon-bookmark" data-view="Bookmarks">Bookmarks</a>
<a id="show-Notes" class="show_view icon-edit" data-view="Notes">Notes</a>

</div>
<div id="tocView" class="view">
<div id="tocView">
</div>
<div id="searchView" class="view">
<div id="searchView">
<ul id="searchResults"></ul>
</div>
<div id="bookmarksView" class="view">
<div id="bookmarksView">
<ul id="bookmarks"></ul>
</div>
<div id="notesView" class="view">
<div id="new-note">
<textarea id="note-text"></textarea>
<button id="note-anchor">Anchor</button>
</div>
<ol id="notes"></ol>
<div id="notesView">
</div>
</div>
<div id="hypothesis"></div>
<div id="main">

<div id="titlebar">
Expand All @@ -160,24 +109,26 @@
<a id="bookmark" class="icon-bookmark-empty">Bookmark</a>
<a id="setting" class="icon-cog">Settings</a>
<a id="fullscreen" class="icon-resize-full">Fullscreen</a>
<a id="annotations" class="h-icon-comment"></a>
<a id="annotations" class="icon-edit"></a>
</div>
</div>

<div id="divider"></div>
<div id="prev" class="arrow noselect"></div>
<div id="prev" class="arrow"></div>
<div id="viewer"></div>
<div id="next" class="arrow noselect"></div>
<div id="next" class="arrow"></div>

<div id="loader"><img src="../reader/img/loader.gif"></div>
</div>

<div id="hypothesis">
<iframe src="//hypothes.is/app.html" seamless></iframe>
</div>

<div class="modal md-effect-1" id="settings-modal">
<div class="md-content">
<h3>Settings</h3>
<div>
<p>
<input type="checkbox" id="sidebarReflow" name="sidebarReflow">Reflow text when sidebars are open.</input>
</p>
</div>
<div class="closer icon-cancel-circled"></div>
</div>
Expand Down
9 changes: 0 additions & 9 deletions hooks/extensions/embedh.js

This file was deleted.

21 changes: 9 additions & 12 deletions hooks/extensions/hypothesis.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
EPUBJS.Hooks.register("beforeChapterDisplay").hypothesis = function(callback, renderer){
var folder = EPUBJS.core.folder(location.pathname);
var cssPath = (folder + EPUBJS.cssPath) || folder;

if(!renderer) return;
EPUBJS.Hooks.register("beforeChapterDisplay").hypothesis = function(callback, renderer) {
renderer.render.window.hypothesisConfig = function () {
return {
constructor: this.Annotator.Guest
};
};

EPUBJS.core.addScript("/hooks/extensions/embedh.js", null, renderer.doc.head);
EPUBJS.core.addScript("//hypothes.is/embed.js", null, renderer.doc.head);

EPUBJS.core.addScript("https://hypothes.is/embed.js", null, renderer.doc.head);

EPUBJS.core.addCss( cssPath + "annotations.css", null, renderer.doc.head);

if(callback) callback();
};
if(callback) callback();
};
129 changes: 33 additions & 96 deletions reader/js/plugins/hypothesis.js
Original file line number Diff line number Diff line change
@@ -1,109 +1,46 @@
EPUBJS.reader.plugins.HypothesisController = function(Book) {
EPUBJS.reader.plugins.HypothesisController = function (Book) {
var reader = this;
var book = reader.book;
var element = document.getElementById("hypothesis");
var body = window.document.body;
var annotator;
var $main = $("#main");

var updateAnnotations = function() {
var annotatations = [],
guestAnnotator = reader.book.renderer.render.window.annotator,
_$,
$annotations, width;

if(!guestAnnotator) {
if(annotator) annotator.updateViewer([]);
return;
};

_$ = guestAnnotator.constructor.$;

$annotations = _$(".annotator-hl");
width = reader.book.renderer.render.iframe.clientWidth;

//-- Find visible annotations
$annotations.each(function(){
var $this = _$(this),

var updateAnnotations = function () {
var annotator = Book.renderer.render.window.annotator;
if (annotator && annotator.constructor.$) {
var annotations = getVisibleAnnotations(annotator.constructor.$);
annotator.showAnnotations(annotations)
}
};

var getVisibleAnnotations = function ($) {
var width = Book.renderer.render.iframe.clientWidth;
return $('.annotator-hl').map(function() {
var $this = $(this),
left = this.getBoundingClientRect().left;
if(left >= 0 && left <= width) {
annotatations.push($this.data('annotation'));

if (left >= 0 && left <= width) {
return $this.data('annotation');
}
});

//-- Update viewer
annotator.updateViewer(annotatations);
}).get();
};

var attach = function(){
annotator = window.annotator;
annotator.frame.appendTo(element);

annotator.subscribe('annotationEditorShown', function () {
showAnnotations(true);
});
annotator.subscribe('annotationViewerShown', function () {
showAnnotations(true);
});

annotator.subscribe("annotationsLoaded", function(e){
var _$ = reader.book.renderer.render.window.annotator.constructor.$;


reader.annotator = annotator;
updateAnnotations();

_$(reader.book.renderer.contents).on("click", ".annotator-hl", function(event){
var $this = _$(this);

reader.annotator.updateViewer([$this.data('annotation')]);

// $scope.$apply(function(){
// $scope.single = true;
// $scope.noUpdate = true;
// });

});
});

$(".h-icon-comment").on("click", function () {
if ($main.hasClass("single")) {
showAnnotations(false);
} else {
showAnnotations(true);
}
});

reader.book.on("renderer:locationChanged", function(){
updateAnnotations();
});

}

var showAnnotations = function(single) {
var currentPosition = reader.currentLocationCfi;
reader.settings.sidebarReflow = false;
$("#annotations").on("click", function () {
var annotator = Book.renderer.render.window.annotator;
var currentPosition = Book.getCurrentLocationCfi();

if(single) {
$main.addClass("single");
window.annotator.setVisibleHighlights(true);
} else {
if ($main.hasClass("single")) {
$main.removeClass("single");
window.annotator.setVisibleHighlights(false);
annotator.setVisibleHighlights(false);
} else {
$main.addClass("single");
annotator.setVisibleHighlights(true);
}

$main.one("transitionend", function(){
book.gotoCfi(currentPosition);
Book.gotoCfi(currentPosition);
});

};

book.ready.all.then(function() {
reader.HypothesisController.attach();
});

return {
'attach': attach
};
};
Book.on("renderer:locationChanged", updateAnnotations);
Book.on("renderer:chapterDisplayed", updateAnnotations);

return {}
};
Loading

0 comments on commit b288148

Please sign in to comment.