Update hypothesis example

examples/hypothesis.js

@@ -0,0 +1,191 @@
+(function() {
+
+  function start() {
+    var params = URLSearchParams && new URLSearchParams(document.location.search.substring(1));
+    var url = params && params.get("url") && decodeURIComponent(params.get("url"));
+
+    // Load the opf
+    var book = ePub(url || window.location.protocol + "//s3.amazonaws.com/epubjs.org/books/moby-dick-hypothesis-demo.epub");
+    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");
+      }
+      // Add CFI fragment to the history
+      history.pushState({}, '', "?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();
+
+      toc.forEach(function(chapter, index) {
+        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);
+        docfrag.appendChild(item);
+
+        link.onclick = function(){
+          var url = link.getAttribute("href");
+          console.log(url)
+          rendition.display(url);
+          return false;
+        };
+
+      });
+
+      $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);
+})();