Merge branch 'main' of github.com:quarto-dev/quarto-cli into main

Author: jjallaire

src/resources/formats/revealjs/plugins/line-highlight/plugin.js

@@ -33,6 +33,8 @@ window.QuartoLineHighlight = function () {
             // 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) {
@@ -84,7 +86,23 @@ window.QuartoLineHighlight = function () {
                     fragmentBlock.removeAttribute(kFragmentIndex);
                   }
 
-                  // TODO add scrolling animation
+                  // 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);
@@ -93,7 +111,22 @@ window.QuartoLineHighlight = function () {
                 joinLineNumbers([highlightSteps[0]])
               );
             }
-            // TODO add scrolling animation: scroll the first highlight into view when the slide
+
+            // 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);
           });
@@ -143,6 +176,93 @@ window.QuartoLineHighlight = function () {
     }
   }
 
+  /**
+   * 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", "");
@@ -196,6 +316,22 @@ window.QuartoLineHighlight = function () {
     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);
+          });
+      });
     },
   };
 };

src/resources/formats/revealjs/plugins/line-highlight/styles.css

@@ -25,3 +25,7 @@ pre.numberSource code > span > a:first-child::before {
   width: 100%;
   box-sizing: border-box;
 }
+
+.reveal div.sourceCode pre code {
+  min-height: 100%;
+}