port hover box to node

components/citation.js

@@ -13,15 +13,12 @@ export default function(dom, data) {
     if (key) {
       var keys = key.split(",");
       var cite_string = inline_cite_short(keys);
-      el.innerHTML = `<span id="citation-${n}" class="citation">${cite_string}</span>`;
-      DistillHoverBox.bind(`#citation-${n}`, key)
-
-      DistillHoverBox.contentMap[key] = "";
+      var cite_hover_str = "";
       keys.map((key,n) => {
-        if (n>0) DistillHoverBox.contentMap[key] += "<br>";
-        var cite_str = bibliography_cite(data.bibliography[key], true);
-        DistillHoverBox.contentMap[key] += cite_str;
-      })
+        if (n>0) cite_hover_str += "<br>";
+        cite_hover_str += bibliography_cite(data.bibliography[key], true);
+      });
+      el.innerHTML = `<span id="citation-${n}" class="citation" data-hover="${cite_hover_str}">${cite_string}</span>`;
     }
   });
 
@@ -122,100 +119,3 @@ export default function(dom, data) {
 
   }
 }
-
-// DistillHoverBox
-//=====================================
-
-function DistillHoverBox(key, pos){
-
-  if (!(key in DistillHoverBox.contentMap)){
-    console.error("No DistillHoverBox content registered for key", key);
-  }
-  if (key in DistillHoverBox.liveBoxes) {
-    console.error("There already exists a DistillHoverBox for key", key);
-  } else {
-    for (var k in DistillHoverBox.liveBoxes)
-      DistillHoverBox.liveBoxes[k].remove();
-    DistillHoverBox.liveBoxes[key] = this;
-  }
-  this.key = key;
-
-  var pretty = window.innerWidth > 600;
-
-  var padding = pretty? 18 : 12;
-  var outer_padding = pretty ? 18 : 0;
-  var bbox = document.querySelector("body").getBoundingClientRect();
-  var left = pos[0] - bbox.left, top = pos[1] - bbox.top;
-  var width = Math.min(window.innerWidth-2*outer_padding, 648);
-  left = Math.min(left, window.innerWidth-width-outer_padding);
-  width = width - 2*padding;
-
-  var str = `<div style="position: absolute;
-                          background-color: #FFF;
-                          opacity: 0.95;
-                          width: ${width}px;
-                          top: ${top}px;
-                          left: ${left}px;
-                          padding: ${padding}px;
-                          border-radius: ${pretty? 6 : 0}px;
-                          box-shadow: 0px 0px 18px 6px #777;" >
-              ${DistillHoverBox.contentMap[key]}
-              </div>`;
-
-  this.div = appendBody(str);
-
-  DistillHoverBox.bind (this.div, key);
-}
-
-DistillHoverBox.prototype.remove = function remove(){
-  if (this.div) this.div.remove();
-  if (this.timeout) clearTimeout(this.timeout);
-  delete DistillHoverBox.liveBoxes[this.key];
-}
-
-DistillHoverBox.prototype.stopTimeout = function stopTimeout() {
-  if (this.timeout) clearTimeout(this.timeout);
-}
-
-DistillHoverBox.prototype.extendTimeout = function extendTimeout(T) {
-  //console.log("extend", T)
-  var this_ = this;
-  this.stopTimeout();
-  this.timeout = setTimeout(() => this_.remove(), T);
-}
-
-DistillHoverBox.liveBoxes = {};
-DistillHoverBox.contentMap = {abc: "hello world!"};
-
-DistillHoverBox.bind = function bind(node, key) {
-  if (typeof node == "string"){
-    node = document.querySelector(node);
-  }
-  node.addEventListener("mouseover", () => {
-    var bbox = node.getBoundingClientRect();
-    if (!(key in DistillHoverBox.liveBoxes)){
-      new DistillHoverBox(key, [bbox.right, bbox.bottom]);
-    }
-    DistillHoverBox.liveBoxes[key].stopTimeout();
-  });
-  node.addEventListener("mouseout", () => {
-    if (key in DistillHoverBox.liveBoxes){
-      DistillHoverBox.liveBoxes[key].extendTimeout(250);
-    }
-  });
-
-}
-
-
-function appendBody(str){
-  var node = nodeFromString(str);
-  var body = document.querySelector("body");
-  body.appendChild(node);
-  return node;
-}
-
-function nodeFromString(str) {
-  var div = document.createElement("div");
-  div.innerHTML = str;
-  return div.firstChild;
-}

components/hover-box.txt

@@ -0,0 +1,105 @@
+// DistillHoverBox
+//=====================================
+
+function DistillHoverBox(key, pos){
+
+  if (!(key in DistillHoverBox.contentMap)){
+    console.error("No DistillHoverBox content registered for key", key);
+  }
+  if (key in DistillHoverBox.liveBoxes) {
+    console.error("There already exists a DistillHoverBox for key", key);
+  } else {
+    for (var k in DistillHoverBox.liveBoxes)
+      DistillHoverBox.liveBoxes[k].remove();
+    DistillHoverBox.liveBoxes[key] = this;
+  }
+  this.key = key;
+
+  var pretty = window.innerWidth > 600;
+
+  var padding = pretty? 18 : 12;
+  var outer_padding = pretty ? 18 : 0;
+  var bbox = document.querySelector("body").getBoundingClientRect();
+  var left = pos[0] - bbox.left, top = pos[1] - bbox.top;
+  var width = Math.min(window.innerWidth-2*outer_padding, 648);
+  left = Math.min(left, window.innerWidth-width-outer_padding);
+  width = width - 2*padding;
+
+  var str = `<div style="position: absolute;
+                          background-color: #FFF;
+                          opacity: 0.95;
+                          width: ${width}px;
+                          top: ${top}px;
+                          left: ${left}px;
+                          padding: ${padding}px;
+                          border-radius: ${pretty? 6 : 0}px;
+                          box-shadow: 0px 0px 18px 6px #777;" >
+              ${DistillHoverBox.contentMap[key]}
+              </div>`;
+
+  this.div = appendBody(str);
+
+  DistillHoverBox.bind (this.div, key);
+}
+
+DistillHoverBox.prototype.remove = function remove(){
+  if (this.div) this.div.remove();
+  if (this.timeout) clearTimeout(this.timeout);
+  delete DistillHoverBox.liveBoxes[this.key];
+}
+
+DistillHoverBox.prototype.stopTimeout = function stopTimeout() {
+  if (this.timeout) clearTimeout(this.timeout);
+}
+
+DistillHoverBox.prototype.extendTimeout = function extendTimeout(T) {
+  //console.log("extend", T)
+  var this_ = this;
+  this.stopTimeout();
+  this.timeout = setTimeout(() => this_.remove(), T);
+}
+
+DistillHoverBox.liveBoxes = {};
+DistillHoverBox.contentMap = {};
+
+DistillHoverBox.bind = function bind(node, key) {
+  if (typeof node == "string"){
+    node = document.querySelector(node);
+  }
+  node.addEventListener("mouseover", () => {
+    var bbox = node.getBoundingClientRect();
+    if (!(key in DistillHoverBox.liveBoxes)){
+      new DistillHoverBox(key, [bbox.right, bbox.bottom]);
+    }
+    DistillHoverBox.liveBoxes[key].stopTimeout();
+  });
+  node.addEventListener("mouseout", () => {
+    if (key in DistillHoverBox.liveBoxes){
+      DistillHoverBox.liveBoxes[key].extendTimeout(250);
+    }
+  });
+
+}
+
+
+function appendBody(str){
+  var node = nodeFromString(str);
+  var body = document.querySelector("body");
+  body.appendChild(node);
+  return node;
+}
+
+function nodeFromString(str) {
+  var div = document.createElement("div");
+  div.innerHTML = str;
+  return div.firstChild;
+}
+
+var hover_es = document.querySelectorAll("span[data-hover]");
+hover_es = [].slice.apply(hover_es);
+hover_es.forEach((e,n) => {
+  var key = "hover-"+n;
+  var content = e.getAttribute("data-hover");
+  DistillHoverBox.contentMap[key] = content;
+  DistillHoverBox.bind(e, key);
+});

index.js

@@ -10,7 +10,7 @@ import footer from "./components/footer";
 import citation from "./components/citation";
 import markdown from "./components/markdown";
 import code from "./components/code";
-import hoverBox from "./components/hover-box";
+import hoverBox from "./components/hover-box-include";
 import generateCrossref from "./components/generate-crossref";
 
 function renderImmediately(dom) {