Skip to content

Commit

Permalink
Better hypothesis integration
Browse files Browse the repository at this point in the history
  • Loading branch information
RawKStar77 authored and RawKStar77 committed Oct 28, 2015
1 parent 08afe67 commit b5b3d9d
Show file tree
Hide file tree
Showing 8 changed files with 584 additions and 74 deletions.
4 changes: 2 additions & 2 deletions build/libs/localforage.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/reader.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/reader.min.map

Large diffs are not rendered by default.

156 changes: 119 additions & 37 deletions examples/hypothesis.html
Original file line number Diff line number Diff line change
Expand Up @@ -42,29 +42,115 @@
<script src="../reader_src/plugins/hypothesis.js"></script>

<style>
#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%;
}
#hypothesis {
overflow: hidden;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 34%;
z-index: -2;
}

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

.annotator-frame {
display: none;
}

#hypothesis .annotator-frame iframe html {
overflow: hidden;
}

#main.single {
width: 66%;
}

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

#searchBox {
width: 140px;
}

#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;
}

#annotation-controls {
position: absolute;
top: -7px;
right: 0;
}

#annotation-controls ul {
list-style-type: none;
}

#annotation-controls ul li button {
font-size: 1.5em;
margin-bottom: 10px;
background: #fff;
border: none;
opacity: .5;
}

#annotation-controls ul li button:hover {
opacity: .8;
}

#annotation-controls ul li button:focus {
border: none !important;
}

.topbar {
border: none !important;
}

.topbar .inner {
margin: 0px 1.72em 0 0.72em;
}

#hypothesis .annotator-frame body {
background: #fff !important;
}

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

#main {
left: 0;
top: 0;
border: none !important;
border-radius: 0px !important;
box-shadow: none !important;
}

#main.single {
right: 34%;
width: 66%;
}
</style>
</head>
<body>
Expand All @@ -74,20 +160,17 @@

<a id="show-Search" class="show_view icon-search" data-view="Search">Search</a>
<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">
</div>

<!-- Table of Contents -->
<div id="tocView"></div>
<!-- / Table of Contents -->

<div id="searchView">
<ul id="searchResults"></ul>
</div>
<div id="bookmarksView">
<ul id="bookmarks"></ul>
</div>
<div id="notesView">
</div>
</div>
<div id="main">

Expand All @@ -100,12 +183,11 @@
<span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
<span id="chapter-title"></span>
</div>
<div id="title-controls">
<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="icon-edit"></a>
</div>

<!-- Annotation Controls -->
<div id="annotation-controls"></div>
<!-- / Annotation Controls -->

</div>

<div id="divider"></div>
Expand Down
156 changes: 156 additions & 0 deletions hooks/extensions/embedh.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
(function () {
// Prevent double embedding
if (typeof(window.annotator) === 'undefined') {
window.annotator = {};
} else {
return;
}

// Injects the hypothesis dependencies. These can be either js or css, the
// file extension is used to determine the loading method. This file is
// pre-processed in order to insert the wgxpath, url and inject scripts.
//
// Custom injectors can be provided to load the scripts into a different
// environment. Both script and stylesheet methods are provided with a url
// and a callback fn that expects either an error object or null as the only
// argument.
//
// For example a Chrome extension may look something like:
//
// window.hypothesisInstall({
// script: function (src, fn) {
// chrome.tabs.executeScript(tab.id, {file: src}, fn);
// },
// stylesheet: function (href, fn) {
// chrome.tabs.insertCSS(tab.id, {file: href}, fn);
// }
// });

window.hypothesisInstall = function (inject) {
inject = inject || {};

var resources = [];
var injectStylesheet = inject.stylesheet || function injectStylesheet(href, fn) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = href;

document.head.appendChild(link);
fn(null);
};

var injectScript = inject.script || function injectScript(src, fn) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.onload = function () { fn(null) };
script.onerror = function () { fn(new Error('Failed to load script: ' + src)) };
script.src = src;

document.head.appendChild(script);
};

if (!window.document.evaluate) {
resources.push('https://hypothes.is/assets/scripts/vendor/wgxpath.install.min.js?0cd5ec8a');
}

if (typeof window.Annotator === 'undefined') {
resources.push('https://hypothes.is/assets/styles/hypothesis.min.css?a1f13d87');
resources.push('https://hypothes.is/assets/scripts/vendor/url.min.js?2a5acbac');
resources.push('https://hypothes.is/assets/scripts/hypothesis.min.js?3af1f37d');
}

window.hypothesisConfig = function() {
var Annotator = window.Annotator;
function MyGuest(elem, options) {
var self = this;

// options = {
// showHighlights: true,
// Toolbar: {container: '#annotation-controls'}
// }

Annotator.Guest.call(this, elem, options);

self.createAnnotation = function(annotation) {
var getSelectors, info, metadata, ranges, ref, root, selectors, self, setDocumentInfo, setTargets, targets;
if (annotation == null) {
annotation = {};
}
self = this;
root = this.element[0];
ranges = (ref = this.selectedRanges) != null ? ref : [];
this.selectedRanges = null;
var toggleEpubjsSideBar = new Event('toggle-sidebar');
window.dispatchEvent(toggleEpubjsSideBar);
getSelectors = function(range) {
var options;
options = {
cache: self.anchoringCache,
ignoreSelector: '[class^="annotator-"]'
};
return self.anchoring.describe(root, range, options);
};
setDocumentInfo = function(info) {
annotation.document = info.metadata;
return annotation.uri = info.uri;
};
setTargets = function(arg) {
var info, selector, selectors, source;
info = arg[0], selectors = arg[1];
source = info.uri;
return annotation.target = (function() {
var i, len, results;
results = [];
for (i = 0, len = selectors.length; i < len; i++) {
selector = selectors[i];
results.push({
source: source,
selector: selector
});
}
return results;
})();
};
info = this.getDocumentInfo();
selectors = Promise.all(ranges.map(getSelectors));
metadata = info.then(setDocumentInfo);
targets = Promise.all([info, selectors]).then(setTargets);
targets.then(function() {
return self.publish('beforeAnnotationCreated', [annotation]);
});
targets.then(function() {
return self.anchor(annotation);
});
return annotation;
}

}

MyGuest.prototype = Object.create(Annotator.Guest.prototype);

return {
constructor: MyGuest,
}
};

(function next(err) {
if (err) { throw err; }

if (resources.length) {
var url = resources.shift();
var ext = url.split('?')[0].split('.').pop();
var fn = (ext === 'css' ? injectStylesheet : injectScript);
fn(url, next);
}
})();
}

var baseUrl = document.createElement('link');
baseUrl.rel = 'sidebar';
baseUrl.href = 'https://hypothes.is/app.html';
baseUrl.type = 'application/annotator+html';
document.head.appendChild(baseUrl);

window.hypothesisInstall();
})();
Loading

0 comments on commit b5b3d9d

Please sign in to comment.