wassname/template
1
0
Fork 0
mirror of https://github.com/wassname/template.git synced 2026-09-12 13:00:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

better hover box system

Browse Source
This commit is contained in:
Christopher Olah
2017-04-06 15:10:35 -07:00
parent a85517e61b
commit 22fd0e2b21
3 changed files with 127 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/footnote.js
+22 -1
View File
@@ -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");