bookclub-advr

line-highlight.js (11549B)

---

 window.QuartoLineHighlight = function () {
   function isPrintView() {
     return /print-pdf/gi.test(window.location.search) || /view=print/gi.test(window.location.search);
   }
 
   const delimiters = {
     step: "|",
     line: ",",
     lineRange: "-",
   };
 
   const regex = new RegExp(
     "^[\\d" + Object.values(delimiters).join("") + "]+$"
   );
 
   function handleLinesSelector(deck, attr) {
     // if we are in printview with pdfSeparateFragments: false
     // then we'll also want to supress
     if (regex.test(attr)) {
       if (isPrintView() && deck.getConfig().pdfSeparateFragments !== true) {
         return false;
       } else {
         return true;
       }
     } else {
       return false;
     }
   }
 
   const kCodeLineNumbersAttr = "data-code-line-numbers";
   const kFragmentIndex = "data-fragment-index";
 
   function initQuartoLineHighlight(deck) {
     const divSourceCode = deck
       .getRevealElement()
       .querySelectorAll("div.sourceCode");
     // Process each div created by Pandoc highlighting - numbered line are already included.
     divSourceCode.forEach((el) => {
       if (el.hasAttribute(kCodeLineNumbersAttr)) {
         const codeLineAttr = el.getAttribute(kCodeLineNumbersAttr);
         el.removeAttribute(kCodeLineNumbersAttr);
         if (handleLinesSelector(deck, codeLineAttr)) {
           // Only process if attr is a string to select lines to highlights
           // e.g "1|3,6|8-11"
           const codeBlock = el.querySelectorAll("pre code");
           codeBlock.forEach((code) => {
             // move attributes on code block
             code.setAttribute(kCodeLineNumbersAttr, codeLineAttr);
 
             const scrollState = { currentBlock: code };
 
             // Check if there are steps and duplicate code block accordingly
             const highlightSteps = splitLineNumbers(codeLineAttr);
             if (highlightSteps.length > 1) {
               // If the original code block has a fragment-index,
               // each clone should follow in an incremental sequence
               let fragmentIndex = parseInt(
                 code.getAttribute(kFragmentIndex),
                 10
               );
               fragmentIndex =
                 typeof fragmentIndex !== "number" || isNaN(fragmentIndex)
                   ? null
                   : fragmentIndex;
 
               let stepN = 1;
               highlightSteps.slice(1).forEach(
                 // Generate fragments for all steps except the original block
                 (step) => {
                   var fragmentBlock = code.cloneNode(true);
                   fragmentBlock.setAttribute(
                     "data-code-line-numbers",
                     joinLineNumbers([step])
                   );
                   fragmentBlock.classList.add("fragment");
 
                   // Pandoc sets id on spans we need to keep unique
                   fragmentBlock
                     .querySelectorAll(":scope > span")
                     .forEach((span) => {
                       if (span.hasAttribute("id")) {
                         span.setAttribute(
                           "id",
                           span.getAttribute("id").concat("-" + stepN)
                         );
                       }
                     });
                   stepN = ++stepN;
 
                   // Add duplicated <code> element after existing one
                   code.parentNode.appendChild(fragmentBlock);
 
                   // Each new <code> element is highlighted based on the new attributes value
                   highlightCodeBlock(fragmentBlock);
 
                   if (typeof fragmentIndex === "number") {
                     fragmentBlock.setAttribute(kFragmentIndex, fragmentIndex);
                     fragmentIndex += 1;
                   } else {
                     fragmentBlock.removeAttribute(kFragmentIndex);
                   }
 
                   // Scroll highlights into view as we step through them
                   fragmentBlock.addEventListener(
                     "visible",
                     scrollHighlightedLineIntoView.bind(
                       this,
                       fragmentBlock,
                       scrollState
                     )
                   );
                   fragmentBlock.addEventListener(
                     "hidden",
                     scrollHighlightedLineIntoView.bind(
                       this,
                       fragmentBlock.previousSibling,
                       scrollState
                     )
                   );
                 }
               );
               code.removeAttribute(kFragmentIndex);
               code.setAttribute(
                 kCodeLineNumbersAttr,
                 joinLineNumbers([highlightSteps[0]])
               );
             }
 
             // Scroll the first highlight into view when the slide becomes visible.
             const slide =
               typeof code.closest === "function"
                 ? code.closest("section:not(.stack)")
                 : null;
             if (slide) {
               const scrollFirstHighlightIntoView = function () {
                 scrollHighlightedLineIntoView(code, scrollState, true);
                 slide.removeEventListener(
                   "visible",
                   scrollFirstHighlightIntoView
                 );
               };
               slide.addEventListener("visible", scrollFirstHighlightIntoView);
             }
 
             highlightCodeBlock(code);
           });
         }
       }
     });
   }
 
   function highlightCodeBlock(codeBlock) {
     const highlightSteps = splitLineNumbers(
       codeBlock.getAttribute(kCodeLineNumbersAttr)
     );
 
     if (highlightSteps.length) {
       // If we have at least one step, we generate fragments
       highlightSteps[0].forEach((highlight) => {
         // Add expected class on <pre> for reveal CSS
         codeBlock.parentNode.classList.add("code-wrapper");
 
         // Select lines to highlight
         spanToHighlight = [];
         if (typeof highlight.last === "number") {
           spanToHighlight = [].slice.call(
             codeBlock.querySelectorAll(
               ":scope > span:nth-of-type(n+" +
                 highlight.first +
                 "):nth-of-type(-n+" +
                 highlight.last +
                 ")"
             )
           );
         } else if (typeof highlight.first === "number") {
           spanToHighlight = [].slice.call(
             codeBlock.querySelectorAll(
               ":scope > span:nth-of-type(" + highlight.first + ")"
             )
           );
         }
         if (spanToHighlight.length) {
           // Add a class on <code> and <span> to select line to highlight
           spanToHighlight.forEach((span) =>
             span.classList.add("highlight-line")
           );
           codeBlock.classList.add("has-line-highlights");
         }
       });
     }
   }
 
   /**
    * Animates scrolling to the first highlighted line
    * in the given code block.
    */
   function scrollHighlightedLineIntoView(block, scrollState, skipAnimation) {
     window.cancelAnimationFrame(scrollState.animationFrameID);
 
     // Match the scroll position of the currently visible
     // code block
     if (scrollState.currentBlock) {
       block.scrollTop = scrollState.currentBlock.scrollTop;
     }
 
     // Remember the current code block so that we can match
     // its scroll position when showing/hiding fragments
     scrollState.currentBlock = block;
 
     const highlightBounds = getHighlightedLineBounds(block);
     let viewportHeight = block.offsetHeight;
 
     // Subtract padding from the viewport height
     const blockStyles = window.getComputedStyle(block);
     viewportHeight -=
       parseInt(blockStyles.paddingTop) + parseInt(blockStyles.paddingBottom);
 
     // Scroll position which centers all highlights
     const startTop = block.scrollTop;
     let targetTop =
       highlightBounds.top +
       (Math.min(highlightBounds.bottom - highlightBounds.top, viewportHeight) -
         viewportHeight) /
         2;
 
     // Make sure the scroll target is within bounds
     targetTop = Math.max(
       Math.min(targetTop, block.scrollHeight - viewportHeight),
       0
     );
 
     if (skipAnimation === true || startTop === targetTop) {
       block.scrollTop = targetTop;
     } else {
       // Don't attempt to scroll if there is no overflow
       if (block.scrollHeight <= viewportHeight) return;
 
       let time = 0;
 
       const animate = function () {
         time = Math.min(time + 0.02, 1);
 
         // Update our eased scroll position
         block.scrollTop =
           startTop + (targetTop - startTop) * easeInOutQuart(time);
 
         // Keep animating unless we've reached the end
         if (time < 1) {
           scrollState.animationFrameID = requestAnimationFrame(animate);
         }
       };
 
       animate();
     }
   }
 
   function getHighlightedLineBounds(block) {
     const highlightedLines = block.querySelectorAll(".highlight-line");
     if (highlightedLines.length === 0) {
       return { top: 0, bottom: 0 };
     } else {
       const firstHighlight = highlightedLines[0];
       const lastHighlight = highlightedLines[highlightedLines.length - 1];
 
       return {
         top: firstHighlight.offsetTop,
         bottom: lastHighlight.offsetTop + lastHighlight.offsetHeight,
       };
     }
   }
 
   /**
    * The easing function used when scrolling.
    */
   function easeInOutQuart(t) {
     // easeInOutQuart
     return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t;
   }
 
   function splitLineNumbers(lineNumbersAttr) {
     // remove space
     lineNumbersAttr = lineNumbersAttr.replace("/s/g", "");
     // seperate steps (for fragment)
     lineNumbersAttr = lineNumbersAttr.split(delimiters.step);
 
     // for each step, calculate first and last line, if any
     return lineNumbersAttr.map((highlights) => {
       // detect lines
       const lines = highlights.split(delimiters.line);
       return lines.map((range) => {
         if (/^[\d-]+$/.test(range)) {
           range = range.split(delimiters.lineRange);
           const firstLine = parseInt(range[0], 10);
           const lastLine = range[1] ? parseInt(range[1], 10) : undefined;
           return {
             first: firstLine,
             last: lastLine,
           };
         } else {
           return {};
         }
       });
     });
   }
 
   function joinLineNumbers(splittedLineNumbers) {
     return splittedLineNumbers
       .map(function (highlights) {
         return highlights
           .map(function (highlight) {
             // Line range
             if (typeof highlight.last === "number") {
               return highlight.first + delimiters.lineRange + highlight.last;
             }
             // Single line
             else if (typeof highlight.first === "number") {
               return highlight.first;
             }
             // All lines
             else {
               return "";
             }
           })
           .join(delimiters.line);
       })
       .join(delimiters.step);
   }
 
   return {
     id: "quarto-line-highlight",
     init: function (deck) {
       initQuartoLineHighlight(deck);
 
       // If we're printing to PDF, scroll the code highlights of
       // all blocks in the deck into view at once
       deck.on("pdf-ready", function () {
         [].slice
           .call(
             deck
               .getRevealElement()
               .querySelectorAll(
                 "pre code[data-code-line-numbers].current-fragment"
               )
           )
           .forEach(function (block) {
             scrollHighlightedLineIntoView(block, {}, true);
           });
       });
     },
   };
 };