Make sidenotes more resilient to dynamic changes

assets/js/sidenotes.js

@@ -11,6 +11,11 @@
  * ---
  *
  *  Changelog:
+ *  - 2020-12-26, Michal Jirku
+ *    - switch to resizing (rather than removing and re-initializing)
+ *    - run resize triggers via setInterval and from resize/font hooks
+ *    - setInterval finally fixes iOS sizing issues for stlviewer
+ *    - remove bunch of "global" vars
  *  - 2020-11-23, Michal Jirku
  *    - make sidenotes flexible width
  *    - make sidenotes not overlap one another
@@ -21,87 +26,97 @@
  *
  */
 (function () {
-
+    function showSidenote(index, sup, fnli, prev) {
-    function showSidenote(index, sup, ww, $fnli, minh) {
-
         // construct sidenote div
-        let content = $fnli.eq(index).html();
+        let content = fnli.eq(index).html();
-        let div = $(document.createElement('div'));
+        let div = $(document.createElement("div"));
-        div.html("<span class=\"sidenote-header\">" + (index+1) + ". </span>" +
+        div.html("<span class=\"sidenote-header\">" + (index+1) + ". </span>" + content);
-            content);
         div.addClass("sidenote");
-        let position = sup.offset();
 
-        div.css({
+        let sizeit = function() {
-            position: "absolute",
+            let ww = $("main").outerWidth() + $("main").offset().left;
-            left: ww,
+            let position = sup.offset();
-            top: minh > position["top"] ? minh : position["top"],
+            let minh = 0;
-            'min-width': ww > 420 ? ww/4 : ww/3,
+            if (prev != null) {
-            'max-width': ww/3,
+                minh = prev.position().top + prev.height() + 5;
-        });
+            }
 
-        if (ww > 420) {
+            div.css({
-            sup.hover(function() {
+                "position": "absolute",
-                div.addClass("sidenote-hover");
+                "left": ww,
-            }, function () {
+                "top": minh > position["top"] ? minh : position["top"],
-                div.removeClass("sidenote-hover");
+                "min-width": ww > 420 ? ww/4 : ww/3,
+                "max-width": ww/3,
             });
-        } else {
-            div.addClass("sidenote-hover");
-        }
 
-        // console.log("props " + ww + " fn: " + $fnli.text());
+            if (ww > 420) {
+                if (div.hasClass("sidenote-perma-hover")) {
+                    div.removeClass("sidenote-hover");
+                    div.removeClass("sidenote-perma-hover");
+                }
+                sup.hover(function() {
+                    div.addClass("sidenote-hover");
+                }, function () {
+                    div.removeClass("sidenote-hover");
+                });
+            } else {
+                div.addClass("sidenote-hover");
+                div.addClass("sidenote-perma-hover");
+            }
+
+        };
+
+        sizeit();
+
+        div.data("sizing-func", sizeit); // called from hooks
+        setInterval(sizeit, 3000); // last resort, but also fix for dynamic pages
 
         $(document.body).append(div);
 
-        // console.log("sidenote: " + index + " top: " + div.position().top + " height: " + div.height());
+        return div;
-
-        return div.position().top + div.height() + 5;
-    }
-
-    function loadSidenotes(ww, $fnli, fncount, $fn) {
-        let minh = 0;
-        // kramdown
-        $("sup[role='doc-noteref']").each(function(index, el) {
-            minh = showSidenote(el.textContent - 1, $(this), ww, $fnli, minh);
-        });
-        // commonmark
-        $("sup[class='footnote-ref']").each(function(index, el) {
-            minh = showSidenote(el.textContent - 1, $(this), ww, $fnli, minh);
-        });
-        if (ww > 420) {
-            $fn.hide();
-        } else {
-            $fn.show();
-        }
-
     }
 
     $(window).on("load", function() {
-        let $fn = $(".footnotes"),
+        let fnli = $(".footnotes").find("ol li");
-            $fnli = $fn.find("ol li"),
-            fncount = $fnli.length,
-            ww = $("main").outerWidth() + $("main").offset().left;
 
-        // load first time
+        // Load sidenotes
-        loadSidenotes(ww, $fnli, fncount, $fn);
+        let prev = null;
-
+        // kramdown
-        $(window).resize(function() {
+        $("sup[role='doc-noteref']").each(function(index, el) {
-            const new_ww = $("main").outerWidth() + $("main").offset().left;
+            prev = showSidenote(el.textContent - 1, $(this), fnli, prev);
-            if (new_ww === ww) return;
+        });
-
+        // commonmark
-            // console.log(" XXX -- RESIZE -- XXX ");
+        $("sup[class='footnote-ref']").each(function(index, el) {
-            ww = new_ww;
+            prev = showSidenote(el.textContent - 1, $(this), fnli, prev);
-            $(".sidenote").remove();
+        });
-            loadSidenotes(ww, $fnli, fncount, $fn);
+
+
+        // Helper functions
+        let hideNotes = function() {
+            const ww = $("main").outerWidth() + $("main").offset().left;
+            if (ww > 420) {
+                $(".footnotes").hide();
+            } else {
+                $(".footnotes").show();
+            }
+        };
+
+        let resizeNotes = function() {
+            $(".sidenote").each(function(index, el) {
+                $(this).data("sizing-func")();
+            });
+        };
+
+        // Run + bind them to triggers
+        hideNotes();
+
+        $(window).resize(function() {
+            hideNotes();
+            resizeNotes();
         });
 
-        // fonts have a power to blow up the size of the sidenotes, hence the
-        // need to adjust
         document.fonts.onloadingdone = function(fss) {
-            ww = $("main").outerWidth() + $("main").offset().left;
+            resizeNotes();
-            $(".sidenote").remove();
-            loadSidenotes(ww, $fnli, fncount, $fn);
         };
     });