draft: fix Ferris hiding code

Author: Nitai Sasson

ferris.css

@@ -65,3 +65,7 @@ pre:hover > .buttons button {
   visibility: visible;
   opacity: 1;
 }
+
+.ferris-buffer {
+  margin-right: 5em;
+}

ferris.js

@@ -52,7 +52,9 @@ function attachFerrises(type) {
       continue;
     }
 
-    container.appendChild(createFerris(type, size));
+    let ferris = createFerris(type, size)
+    container.appendChild(ferris);
+    addPadding(codeBlock, ferris);
   }
 }
 
@@ -100,3 +102,77 @@ function createFerris(type, size) {
 
   return a;
 }
+
+/**
+ *
+ * @param {HTMLElement} codeBlock
+ * @param {HTMLAnchorElement} ferris
+ */
+function addPadding(codeBlock, ferris) {
+  // console.log("offsetHeight:", ferris.offsetHeight, "offsetWidth:", ferris.offsetWidth, "offsetLeft", ferris.offsetLeft, "offsetTop:", ferris.offsetTop, "offsetParent:", ferris.offsetParent);
+  // console.log(ferris.getBoundingClientRect());
+
+  const suspects = [];  // array of spans which *might* be hidden by Ferris
+
+  const walker = document.createTreeWalker(codeBlock, NodeFilter.SHOW_TEXT);
+  const re = /^(.*?)\n(.*)$/s
+
+  let linebreaksToFix = 10;
+  while (linebreaksToFix > 0 && walker.nextNode()) {
+    const current = walker.currentNode;
+    const parent = current.parentNode;
+
+    // sanity checking + lint fixes
+    if (!(current instanceof Text)) {
+      console.log("!(current instanceof Text) shouldn't happen");
+      continue;
+    }
+    if (!parent) {
+      console.log("!parent shouldn't happen");
+      continue;
+    }
+
+    let re_results;
+    // I know nodeValue is not null because current is Text
+    current.splitText
+    while (re_results = current.nodeValue.match(re)) {
+      linebreaksToFix--;
+      if (!linebreaksToFix) { break; }
+
+      let [_, before, after] = re_results;
+
+      let elemBefore = document.createElement("span");
+      elemBefore.innerText = before;
+      suspects.push(elemBefore);
+
+      parent.insertBefore(elemBefore, current);
+      parent.insertBefore(document.createTextNode("\n"), current);
+      current.nodeValue = after;
+    }
+  }
+
+  codeBlock.normalize(); // not strictly necessary, but good practice to leave the DOM normalized
+
+  const actual_ferris = ferris.firstChild;
+
+  setTimeout(detectOverlap, 0, suspects, actual_ferris);
+}
+
+/**
+ *
+ * @param {[HTMLSpanElement]} suspects
+ * @param {HTMLAnchorElement} ferris
+ */
+function detectOverlap(suspects, ferris) {
+  const f = ferris.getBoundingClientRect();
+  suspects.forEach((s) => {
+    const {bottom, top} = s.getBoundingClientRect();
+    if ( // vertical overlap between ferris and span
+      (bottom >= f.top && bottom <= f.bottom)
+      || (top >= f.top && top <= f.bottom)
+      || (f.top >= top && f.top <= bottom)
+    ) {
+      s.classList.add("ferris-buffer");
+    }
+  });
+}