diff options
Diffstat (limited to 'lib/epub.js/examples/hypothesis.js')
-rw-r--r-- | lib/epub.js/examples/hypothesis.js | 214 |
1 files changed, 214 insertions, 0 deletions
diff --git a/lib/epub.js/examples/hypothesis.js b/lib/epub.js/examples/hypothesis.js new file mode 100644 index 0000000..1a0e8e0 --- /dev/null +++ b/lib/epub.js/examples/hypothesis.js @@ -0,0 +1,214 @@ +(function() { + + function start() { + var params = URLSearchParams && new URLSearchParams(document.location.search.substring(1)); + var url = params && params.get("url") && decodeURIComponent(params.get("url")); + var defaultUrl = window.location.protocol + "//s3.amazonaws.com/epubjs.org/books/moby-dick-hypothesis-demo.epub"; + // Load the opf + var book = ePub(url || defaultUrl, { + canonical: function(path) { + var url = window.location.href.replace(/loc=([^&]*)/, "loc="+path); + return url; + } + }); + var rendition = book.renderTo("viewer", { + ignoreClass: "annotator-hl", + width: "100%", + height: "100%" + }); + + // var hash = window.location.hash.slice(2); + var loc = window.location.href.indexOf("?loc="); + if (loc > -1) { + var href = window.location.href.slice(loc + 5); + var hash = decodeURIComponent(href); + } + + rendition.display(hash || undefined); + + + var next = document.getElementById("next"); + next.addEventListener("click", function(e){ + rendition.next(); + e.preventDefault(); + }, false); + + var prev = document.getElementById("prev"); + prev.addEventListener("click", function(e){ + rendition.prev(); + e.preventDefault(); + }, false); + + var nav = document.getElementById("navigation"); + var opener = document.getElementById("opener"); + opener.addEventListener("click", function(e){ + nav.classList.add("open"); + }, false); + + var closer = document.getElementById("closer"); + closer.addEventListener("click", function(e){ + nav.classList.remove("open"); + }, false); + + // Hidden + var hiddenTitle = document.getElementById("hiddenTitle"); + + rendition.on("rendered", function(section){ + var current = book.navigation && book.navigation.get(section.href); + + if (current) { + document.title = current.label; + } + + // TODO: this is needed to trigger the hypothesis client + // to inject into the iframe + requestAnimationFrame(function () { + hiddenTitle.textContent = section.href; + }) + + var old = document.querySelectorAll('.active'); + Array.prototype.slice.call(old, 0).forEach(function (link) { + link.classList.remove("active"); + }) + + var active = document.querySelector('a[href="'+section.href+'"]'); + if (active) { + active.classList.add("active"); + } + + let urlParam = params && params.get("url"); + let url = ''; + if (urlParam) { + url = "url=" + urlParam + "&"; + } + // Add CFI fragment to the history + history.pushState({}, '', "?" + url + "loc=" + encodeURIComponent(section.href)); + // window.location.hash = "#/"+section.href + }); + + var keyListener = function(e){ + + // Left Key + if ((e.keyCode || e.which) == 37) { + rendition.prev(); + } + + // Right Key + if ((e.keyCode || e.which) == 39) { + rendition.next(); + } + + }; + + rendition.on("keyup", keyListener); + document.addEventListener("keyup", keyListener, false); + + book.loaded.navigation.then(function(toc){ + var $nav = document.getElementById("toc"), + docfrag = document.createDocumentFragment(); + + var processTocItem = function(chapter, parent) { + var item = document.createElement("li"); + var link = document.createElement("a"); + link.id = "chap-" + chapter.id; + link.textContent = chapter.label; + link.href = chapter.href; + item.appendChild(link); + parent.appendChild(item); + + if (chapter.subitems.length) { + var ul = document.createElement("ul"); + item.appendChild(ul); + chapter.subitems.forEach(function(subchapter) { + processTocItem(subchapter, ul); + }); + } + + link.onclick = function(){ + var url = link.getAttribute("href"); + console.log(url) + rendition.display(url); + return false; + }; + + } + + toc.forEach(function(chapter) { + processTocItem(chapter, docfrag); + }); + + $nav.appendChild(docfrag); + + + }); + + book.loaded.metadata.then(function(meta){ + var $title = document.getElementById("title"); + var $author = document.getElementById("author"); + var $cover = document.getElementById("cover"); + var $nav = document.getElementById('navigation'); + + $title.textContent = meta.title; + $author.textContent = meta.creator; + if (book.archive) { + book.archive.createUrl(book.cover) + .then(function (url) { + $cover.src = url; + }) + } else { + $cover.src = book.cover; + } + + // if ($nav.offsetHeight + 60 < window.innerHeight) { + // $nav.classList.add("fixed"); + // } + + }); + + var tm; + function checkForAnnotator(cb, w) { + if (!w) { + w = window; + } + tm = setTimeout(function () { + if (w && w.annotator) { + clearTimeout(tm); + cb(); + } else { + checkForAnnotator(cb, w); + } + }, 100); + } + + book.rendition.hooks.content.register(function(contents, view) { + checkForAnnotator(function () { + + var annotator = contents.window.annotator; + + contents.window.addEventListener('scrolltorange', function (e) { + var range = e.detail; + var cfi = new ePub.CFI(range, contents.cfiBase).toString(); + if (cfi) { + book.rendition.display(cfi); + } + e.preventDefault(); + }); + + + annotator.on("highlightClick", function (annotation) { + console.log(annotation); + window.annotator.show(); + }) + + annotator.on("beforeAnnotationCreated", function (annotation) { + console.log(annotation); + window.annotator.show(); + }) + + }, contents.window); + + }); + } + + document.addEventListener('DOMContentLoaded', start, false); +})(); |