add popovers for footnotes

README.org

@@ -11,6 +11,7 @@ the [[http://www.gigamonkeys.com/book/][online version]] of Practical Common Lis
    - =right-arrow-key= - next chapter
    - =left-arrow-key= - previous chapter
    - =HOME/POS1= - index page
+ - footnote popvers
 
 ** TODO
  - integrate full index into TOC

css/highlight-style.css

@@ -155,3 +155,9 @@ h2::before {
   counter-increment: chapter;                 /* Increment the value of section counter by 1 */
   content: counters(chapter, '.') ' ';                  /* Display the value of section counter */
 }
+
+.tippy-tooltip.pcl-theme {
+    background: white;
+    color: black;
+    border: solid black;
+}

js/main.js

@@ -114,12 +114,13 @@ function collectFootnotes() {
     // collect al footnotes into pairs
     for(let note of document.querySelectorAll('sup')) {
 	let index = parseInt(note.innerText) - 1;
-
+	
 	// JS forces me to do that!
-	if(footMap[index])
-	    footMap[index].push(note);
-	else
-	    footMap[index] = [ note ];
+	if(!footMap[index])
+	    footMap[index] = {};
+
+	footMap[index][note.parentElement.parentElement.classList.contains('notes') ?
+		       'target' : 'origin'] = note; 
     }
 
     return footMap;
@@ -135,17 +136,26 @@ function linkFootnotes() {
 	origin.innerHTML = '';
 	origin.appendChild(link);
     };
+
+    function createPopover(index, origin, target) {
+	let content = target.parentElement.innerHTML;
+	content = content.substring(`<sup>${index+1}</sup>`.length-1);
+	if(target.parentElement.nextSibling.tagName !== 'P')
+	    content += '&hellip;';
+	    
+	tippy(origin, { content, animateFill: false, animation: 'fade', theme: 'pcl'});
+    }
     
     let footMap = collectFootnotes();
 
     for(let index in footMap) {
 	let pair = footMap[index];
-	if(pair && pair.length == 2) {
-	    let first = pair[0];
-	    let second = pair[1];
-
-	    identifyAndLink(index, 1, 2, first, second);
-	    identifyAndLink(index, 2, 1, second, first);
+	if(pair && 'origin' in pair && 'target' in pair) {
+	    let origin = pair.origin;
+	    let target = pair.target;
+	    createPopover(index, origin, target);
+	    identifyAndLink(index, 1, 2, origin, target);
+	    identifyAndLink(index, 2, 1, target, origin);
 	}	    
     }
 }

manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Beautify Practical Common Lisp",
-    "version": "1.2",
+    "version": "1.3",
 
     "description": "Adds a simple table of contents and syntax highlighting to the web version of Practical Common Lisp by Peter Seibel.",
 
@@ -19,7 +19,7 @@
     "content_scripts": [
 	{
 	    "matches": ["*://*.gigamonkeys.com/book/*.html"],
-	    "js": ["./js/highlight-lisp.js", "./js/tocbot.js","./js/main.js"],
+	    "js": ["./js/highlight-lisp.js", "./js/tocbot.js","./js/tippy.js","./js/main.js"],
 	    "css": ["./css/highlight-style.css"]
 	}
     ],