ferris buffer code cleanup

Author: Nitai Sasson

ferris.css

@@ -19,6 +19,11 @@ body.ayu .not_desired_behavior {
   background: #501f21;
 }
 
+:root {
+  --ferris-large-width: 4.5em;
+  --ferris-small-width: 2.3em;
+}
+
 .ferris-container {
   position: absolute;
   z-index: 99;
@@ -33,11 +38,19 @@ body.ayu .not_desired_behavior {
 }
 
 .ferris-large {
-  width: 4.5em;
+  width: var(--ferris-large-width);
 }
 
 .ferris-small {
-  width: 2.3em;
+  width: var(--ferris-small-width);
+}
+
+.ferris-buffer-large {
+  margin-right: calc(var(--ferris-large-width) + 1.0em);
+}
+
+.ferris-buffer-small {
+  margin-right: calc(var(--ferris-small-width) + 0.5em);
 }
 
 .ferris-explain {
@@ -65,7 +78,3 @@ pre:hover > .buttons button {
   visibility: visible;
   opacity: 1;
 }
-
-.ferris-buffer {
-  margin-right: 5em;
-}

ferris.js

@@ -54,7 +54,7 @@ function attachFerrises(type) {
 
     let ferris = createFerris(type, size)
     container.appendChild(ferris);
-    addPadding(codeBlock, ferris);
+    giveFerrisSpace(codeBlock, ferris, size);
   }
 }
 
@@ -104,75 +104,70 @@ function createFerris(type, size) {
 }
 
 /**
- *
+ * Put each line ending in a span. For each of those spans,
+ * if Ferris might hide it, give it a safety buffer.
  * @param {HTMLElement} codeBlock
  * @param {HTMLAnchorElement} ferris
+ * @param {'small' | 'large'} size
  */
-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());
+function giveFerrisSpace(codeBlock, ferris, size) {
+  // sanity checking + lint awareness
+  const ferrisImage = ferris.firstChild;
+  if (!(ferrisImage instanceof HTMLImageElement)) {
+    console.error("ferris should be <a> containing <img>", ferris);
+    return;
+  }
 
-  const suspects = [];  // array of spans which *might* be hidden by Ferris
+  /** @type {HTMLSpanElement[]} */
+  const lineEndings = [];  // line endings 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()) {
+  while (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");
+    // sanity checking + lint awareness
+    if (!(current instanceof Text) || !parent) {
       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; }
+    while (re_results = current.textContent.match(re)) {
+      // text node contains newline
+      const [_, beforeNewline, afterNewline] = re_results;
 
-      let [_, before, after] = re_results;
+      // line ending gets a span
+      const lineEnd = document.createElement("span");
+      lineEnd.textContent = beforeNewline;
+      lineEndings.push(lineEnd);
+      parent.insertBefore(lineEnd, current);
 
-      let elemBefore = document.createElement("span");
-      elemBefore.innerText = before;
-      suspects.push(elemBefore);
-
-      parent.insertBefore(elemBefore, current);
+      // newline now stands alone
       parent.insertBefore(document.createTextNode("\n"), current);
-      current.nodeValue = after;
+
+      // rest of the text
+      current.textContent = afterNewline;
+      // current might still contain newlines, so we go again until it doesn't
     }
   }
 
   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");
-    }
+  // setTimeout so getBoundingClientRect returns valid results
+  setTimeout(() => {
+    const f = ferrisImage.getBoundingClientRect();
+    lineEndings.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)
+      ) {
+        // buffer needed!
+        s.classList.add("ferris-buffer-" + size);
+      }
+    });
   });
 }