Merge branch 'master' of https://github.com/distillpub/distill-template

2026-07-21 12:50:11 +08:00 · 2017-04-13 12:34:29 -07:00
parent f362584a74 a8c29e227a
commit 7a5a9bbe74
4 changed files with 128 additions and 107 deletions
@@ -35,6 +35,25 @@ export default function(dom, data) {
      return a.author.localeCompare(b.author);
    });
  }*/
+  
+  var appendCiteHoverDiv = (function() {
+    function nodeFromString(str) {
+      var div = dom.createElement("div");
+      div.innerHTML = str;
+      return div.firstChild;
+    }
+    var hover_boxes_container = nodeFromString(`<div id="cite-hover-boxes-container"></div>`)
+    dom.querySelector("body").appendChild(hover_boxes_container);
+    var hover_n = 0;
+    return function appendHoverDiv(content) {
+      var id = `dt-cite-hover-box-${hover_n}`;
+      hover_n += 1;
+      var str = `<div style="display:none;" class="dt-hover-box" id="${id}" >${content}</div>`;
+      var div = nodeFromString(str);
+      hover_boxes_container.appendChild(div);
+      return id;
+    }
+  })();

  var citeTags = [].slice.apply(dom.querySelectorAll("dt-cite"));
  citeTags.forEach((el,n) => {
@@ -47,10 +66,11 @@ export default function(dom, data) {
        if (n>0) cite_hover_str += "<br><br>";
        cite_hover_str += hover_cite(data.bibliography[key]);
      });
-      cite_hover_str = cite_hover_str.replace(/"/g, "&#39;")
+      var ref_id = appendCiteHoverDiv(cite_hover_str);
+      //cite_hover_str = cite_hover_str.replace(/"/g, "&#39;")
      var orig_string = el.innerHTML;
      if (orig_string != "") orig_string += " ";
-      el.innerHTML = `<span id="citation-${n}" data-hover="${cite_hover_str}">${orig_string}<span class="citation-number">${cite_string}</span></span>`;
+      el.innerHTML = `<span id="citation-${n}" data-hover-ref="${ref_id}">${orig_string}<span class="citation-number">${cite_string}</span></span>`;
    }
  });

@@ -1,14 +1,35 @@
 export default function(dom, data) {

+  var appendFootnoteHoverDiv = (function() {
+    function nodeFromString(str) {
+      var div = dom.createElement("div");
+      div.innerHTML = str;
+      return div.firstChild;
+    }
+    var hover_boxes_container = nodeFromString(`<div id="footnote-hover-boxes-container"></div>`)
+    dom.querySelector("body").appendChild(hover_boxes_container);
+    var hover_n = 0;
+    return function appendHoverDiv(content) {
+      var id = `dt-fn-hover-box-${hover_n}`;
+      hover_n += 1;
+      var str = `<div style="display:none;" class="dt-hover-box" id="${id}" >${content}</div>`;
+      var div = nodeFromString(str);
+      hover_boxes_container.appendChild(div);
+      return id;
+    }
+  })();
+
+
  var fnTags = [].slice.apply(dom.querySelectorAll("dt-fn"));
  var fnContent = [];
  fnTags.forEach((el,n) => {
    var content = el.innerHTML;
+    var ref_id = appendFootnoteHoverDiv(content)
    fnContent.push(content);
    n = (n+1)+"";
    var key = "fn-"+n;
    var escaped_content = content.replace(/"/g, "&#39;");
-    el.innerHTML = `<sup><span id="${key}" data-hover="${escaped_content}" style="cursor:pointer">${n}</span></sup>`;
+    el.innerHTML = `<sup><span id="${key}" data-hover-ref="${ref_id}" style="cursor:pointer">${n}</span></sup>`;
  });

  let fnList = dom.querySelector("dt-fn-list");
@@ -1,101 +1,4 @@
-// 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;
-                          white-s
-                          opacity: 0.95;
-                          max-width: ${width}px;
-                          top: ${top}px;
-                          left: ${left}px;
-                          border: 1px solid rgba(0, 0, 0, 0.25);
-                          padding: ${padding}px;
-                          border-radius: ${pretty? 3 : 0}px;
-                          box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
-                          z-index: ${1e6}" >
-              ${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);
-    }
-  });
-  node.addEventListener("touchend", () => {
-    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");
@@ -103,11 +6,88 @@ function nodeFromString(str) {
  return div.firstChild;
 }

-var hover_es = document.querySelectorAll("span[data-hover]");
+function make_hover_css(pos) {
+  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;
+  return (`position: absolute;
+     background-color: #FFF;
+     opacity: 0.95;
+     max-width: ${width}px;
+     top: ${top}px;
+     left: ${left}px;
+     border: 1px solid rgba(0, 0, 0, 0.25);
+     padding: ${padding}px;
+     border-radius: ${pretty? 3 : 0}px;
+     box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
+     z-index: ${1e6};`);
+}
+
+
+function DtHoverBox(div_id) {
+  this.div = document.querySelector("#"+div_id);
+  this.visible = false;
+  this.bind(this.div);
+  DtHoverBox.box_map[div_id] = this;
+}
+
+DtHoverBox.box_map = {};
+
+DtHoverBox.get_box = function get_box(div_id) {
+  if (div_id in DtHoverBox.box_map) {
+    return DtHoverBox.box_map[div_id];
+  } else {
+    return new DtHoverBox(div_id);
+  }
+}
+
+DtHoverBox.prototype.show = function show(pos){
+  this.visible = true;
+  this.div.setAttribute("style", make_hover_css(pos) );
+  for (var box_id in DtHoverBox.box_map) {
+    var box = DtHoverBox.box_map[box_id];
+    if (box != this) box.hide();
+  }
+}
+
+DtHoverBox.prototype.hide = function hide(){
+  this.visible = false;
+  if (this.div) this.div.setAttribute("style", "display:none");
+  if (this.timeout) clearTimeout(this.timeout);
+}
+
+DtHoverBox.prototype.stopTimeout = function stopTimeout() {
+  if (this.timeout) clearTimeout(this.timeout);
+}
+
+DtHoverBox.prototype.extendTimeout = function extendTimeout(T) {
+  //console.log("extend", T)
+  var this_ = this;
+  this.stopTimeout();
+  this.timeout = setTimeout(() => this_.hide(), T);
+}
+
+DtHoverBox.prototype.bind = function bind(node) {
+  if (typeof node == "string"){
+    node = document.querySelector(node);
+  }
+  node.addEventListener("mouseover", () => {
+    var bbox = node.getBoundingClientRect();
+    if (!this.visible) this.show([bbox.right, bbox.bottom]);
+    this.stopTimeout();
+  });
+  node.addEventListener("mouseout", () => this.extendTimeout(250) );
+  node.addEventListener("touchend", () => this.extendTimeout(250) );
+}
+
+var hover_es = document.querySelectorAll("span[data-hover-ref]");
 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);
-});
+  var ref_id = e.getAttribute("data-hover-ref");
+  DtHoverBox.get_box(ref_id).bind(e);
+})
@@ -164,7 +164,7 @@
  }
  </script>
  <p>The citation is presented inline like this: <dt-cite key="gregor2015draw"></dt-cite> (a number that displays more information on hover). If you have an appendix, a bibliography is automatically created and populated in it.</p>
-  <p>Distill chose a numerical inline citation style to improve readability of citation dense articles and because many of the benefits of longer citations are obviated by dispalying more information on hover. However, we consider it good style to mention author last names if you discuss something at length and it fits into the flow well -- the authors are human and it's nice for them to have the community associate them with their work.</p>
+  <p>Distill chose a numerical inline citation style to improve readability of citation dense articles and because many of the benefits of longer citations are obviated by displaying more information on hover. However, we consider it good style to mention author last names if you discuss something at length and it fits into the flow well -- the authors are human and it's nice for them to have the community associate them with their work.</p>


  <hr>