Add metatags for annotations

examples/hypothesis.html

@@ -8,15 +8,28 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.1/jszip.min.js"></script>
   <script src="../dist/epub.js"></script>
 
-  <script>
+  <!-- <script>
   window.hypothesisConfig = function () {
     return {
-      constructor: this.Annotator.Sidebar,
-      app: 'http://45.55.144.135:5000/app.html',
+      // constructor: this.Annotator.Sidebar,
+      app: 'https://hypothes.is/app.html',
     };
   };
+  </script> -->
+
+  <script type="text/javascript">
+    window.hypothesisConfig = function () {
+      return {
+        // Open the sidebar when the page loads
+        openSidebar: true,
+
+        // Needed for multi frame support
+        enableMultiFrameSupport: true,
+        embedScriptUrl: "https://cdn.hypothes.is/hypothesis"
+      };
+    };
   </script>
-  <script src="http://45.55.144.135:5000/embed.js"></script>
+  <script src="https://cdn.hypothes.is/hypothesis"></script>
 
   <style type="text/css">
     body {
@@ -82,19 +95,14 @@
     }
 
     #viewer {
-
       overflow: hidden;
-      width: 800px;
+      width: 620px;
       margin: 0 50px;
-      background: url('ajax-loader.gif') center center no-repeat;
-
-    }
-
-    #viewer .epub-view {
-        background: white;
-        box-shadow: 0 0 4px #ccc;
-        margin: 10px;
-        padding: 40px 80px;
+      /*background: url('ajax-loader.gif') center center no-repeat;*/
+      background-color: white;
+      box-shadow: 0 0 4px #ccc;
+      margin: 20px;
+      padding: 40px 80px;
     }
 
     #main {
@@ -112,7 +120,7 @@
 
     #pagination {
       text-align: center;
-      margin-left: 80px;
+      margin: 20px;
       /*padding: 0 50px;*/
     }
 
@@ -179,10 +187,12 @@
   </div>
 
   <script>
-    var currentSectionIndex = 8;
     // Load the opf
     var book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf");
-    var rendition = book.renderTo("viewer");
+    var rendition = book.renderTo("viewer", {
+      flow: "scrolled-doc",
+      ignoreClass: "annotator-hl"
+    });
 
     // var hash = window.location.hash.slice(2);
     var loc = window.location.href.indexOf("?loc=");
@@ -190,7 +200,7 @@
       var href =  window.location.href.slice(loc + 5);
       var hash = decodeURIComponent(href);
     }
-    rendition.display(hash || 1);
+    rendition.display(hash || undefined);
 
 
     var next = document.getElementById("next");
@@ -316,30 +326,22 @@
       }, 100);
     }
 
-    book.rendition.hooks.content.register(function(view) {
-
-      view.window.hypothesisConfig = function () {
-
-    		return {
-    			constructor: this.Annotator.Guest,
-          app: 'http://45.55.144.135:5000/app.html'
-    		};
-    	};
-
-      view.contents.addScript("http://45.55.144.135:5000/embed.js").then(function() {
+    book.rendition.hooks.content.register(function(contents, view) {
 
         checkForAnnotator(function () {
 
-          var annotator = view.window.annotator;
+          var annotator = contents.window.annotator;
 
-          annotator.on("scrollToAnnotation", function (node) {
-            var cfi = view.section.cfiFromElement(node);
-            // var selectors = ev.target[0].selector;
-            // var range = selectors[0];
-            console.log("scrollToAnnotation", cfi);
-            book.rendition.display(cfi);
+          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();
@@ -350,16 +352,17 @@
             window.annotator.show();
           })
 
-        }, view.window);
-
-      });
+        }, contents.window);
 
     });
 
     checkForAnnotator(function () {
       var main = document.querySelector('#main');
+      var target = document.querySelector('.annotator-frame');
+
 
       if(window.innerWidth < 1400) {
+        /*
         window.annotator.on("show", function () {
           main.classList.add("open");
         });
@@ -367,7 +370,25 @@
         window.annotator.on("hide", function () {
           main.classList.remove("open");
         });
+        */
+
+        // create an observer instance
+        var observer = new MutationObserver(function(mutations) {
+          mutations.forEach(function(mutation) {
+            if (mutation.attributeName === "class") {
+              if (target.classList.contains("annotator-collapsed")) {
+                main.classList.remove("open");
+              } else {
+                main.classList.add("open");
+              }
+            }
+          });
+        });
+
+        observer.observe(target, { attributes: true });
+
       }
+
     });
 
   </script>

examples/index.html

@@ -41,6 +41,10 @@
             line-height: 1.33em;
             color: #000;
           }
+
+          #book-wrapper {
+            position: inherit;
+          }
         </style>
 
 

examples/spreads.html

@@ -20,13 +20,14 @@
   <script>
     var params = URLSearchParams && new URLSearchParams(document.location.search.substring(1));
     var url = params && params.get("url") && decodeURIComponent(params.get("url"));
-    var currentSectionIndex = (params && params.get("loc")) ? params.get("loc") : 0;
+    var currentSectionIndex = (params && params.get("loc")) ? params.get("loc") : 6;
 
     // Load the opf
     var book = ePub(url || "https://s3.amazonaws.com/moby-dick/moby-dick.epub");
     var rendition = book.renderTo("viewer", {
       width: "100%",
-      height: 600
+      height: 600,
+      spread: "always"
     });
 
     rendition.display(currentSectionIndex);

libs/url/url-polyfill.js

@@ -11,7 +11,6 @@
     }
     if (typeof module === 'object' && module.exports) {
         // Node
-        console.log("root", root);
         module.exports = factory(root);
     } else if (typeof define === 'function' && define.amd) {
         // AMD. Register as an anonymous module.

src/layout.js

@@ -182,7 +182,7 @@ class Layout {
 	 */
 	count(totalWidth) {
 		// var totalWidth = contents.scrollWidth();
-		var spreads = Math.ceil( totalWidth / this.spreadWidth);
+		var spreads = Math.ceil( totalWidth / this.delta);
 
 		return {
 			spreads : spreads,

src/managers/default/index.js

@@ -594,7 +594,6 @@ class DefaultViewManager {
 		this.scrollLeft = scrollLeft;
 
 		if(!this.ignore) {
-			console.log("scroll", scrollLeft, scrollTop);
 			this.emit("scroll", {
 				top: scrollTop,
 				left: scrollLeft

src/rendition.js

@@ -76,6 +76,8 @@ class Rendition {
 		this.hooks.content.register(this.passEvents.bind(this));
 		this.hooks.content.register(this.adjustImages.bind(this));
 
+		this.book.spine.hooks.content.register(this.injectSource.bind(this));
+
 		if (this.settings.stylesheet) {
 			this.book.spine.hooks.content.register(this.injectStylesheet.bind(this));
 		}
@@ -661,10 +663,12 @@ class Rendition {
 	}
 
 	handleLinks(contents) {
-		contents.on("link", (href) => {
-			let relative = this.book.path.relative(href);
-			this.display(relative);
-		});
+		if (contents) {
+			contents.on("link", (href) => {
+				let relative = this.book.path.relative(href);
+				this.display(relative);
+			});
+		}
 	}
 
 	injectStylesheet(doc, section) {
@@ -683,6 +687,16 @@ class Rendition {
 		doc.getElementsByTagName("head")[0].appendChild(script);
 	}
 
+	injectSource(doc, section) {
+		let ident = this.book.package.metadata.identifier;
+		let meta = doc.createElement("meta");
+		meta.setAttribute("property", "dc:source");
+		if (ident) {
+			meta.setAttribute("contents", ident);
+		}
+		doc.getElementsByTagName("head")[0].appendChild(meta);
+	}
+
 }
 
 //-- Enable binding events to Renderer

src/spine.js

@@ -1,7 +1,7 @@
 import EpubCFI from "./epubcfi";
 import Hook from "./utils/hook";
 import Section from "./section";
-import {replaceBase, replaceCanonical} from "./utils/replacements";
+import {replaceBase, replaceCanonical, replaceMeta} from "./utils/replacements";
 
 /**
  * A collection of Spine Items
@@ -19,6 +19,7 @@ class Spine {
 		// Register replacements
 		this.hooks.content.register(replaceBase);
 		this.hooks.content.register(replaceCanonical);
+		this.hooks.content.register(replaceMeta);
 
 		this.epubcfi = new EpubCFI();
 

src/utils/replacements.js

@@ -44,6 +44,28 @@ export function replaceCanonical(doc, section){
 		head.appendChild(link);
 	}
 }
+
+export function replaceMeta(doc, section){
+	var head;
+	var meta;
+	var id = section.idref;
+	if(!doc){
+		return;
+	}
+
+	head = qs(doc, "head");
+	meta = qs(head, "link[property='dc:identifier']");
+
+	if (meta) {
+		meta.setAttribute("content", id);
+	} else {
+		meta = doc.createElement("meta");
+		meta.setAttribute("property", "dc:identifier");
+		meta.setAttribute("content", id);
+		head.appendChild(meta);
+	}
+}
+
 // TODO: move me to Contents
 export function replaceLinks(contents, fn) {