Merge pull request #11034 from quarto-dev/revealjs/scroll-view

Author: cderv

.vscode/settings.json

@@ -15,5 +15,6 @@
   "deno.enable": true,
   "deno.lint": true,
   "deno.unstable": true,
-  "deno.importMap": "./src/import_map.json"
+  "deno.importMap": "./src/import_map.json",
+  "deno.disablePaths": ["tests/integration/playwright/"]
 }

news/changelog-1.6.md

@@ -34,6 +34,7 @@ All changes included in 1.6:
 
 - Update to Reveal JS 5.1.0.
   - Support for a [Jump To Slide](https://revealjs.com/jump-to-slide/) menu to quickly navigate between slides. Set `jump-to-slide: false` to opt out.
+  - Support for new [Scroll View](https://revealjs.com/scroll-view/) mode with configuration through new `scroll-view` revealjs's format configuration key. A new menu tool has been added to toggle scroll view mode on and off, associated with `R` key by default.
 - Prevent empty SASS built css file to be included in header.
 - Remove wrong `sourceMappingUrl` entry in SASS built css.
 - ([#7715](https://github.com/quarto-dev/quarto-cli/issues/7715)): Revealjs don't support anymore special Pandoc syntax making BulletList in Blockquotes become incremental list. This was confusing and unexpected behavior. Supported syntax for incremental list is documented at <https://quarto.org/docs/presentations/revealjs/#incremental-lists>.

src/format/reveal/constants.ts

@@ -24,3 +24,10 @@ export const kAutoAnimateUnmatched = "autoAnimateUnmatched";
 export const kAutoStretch = "auto-stretch";
 export const kCodeBlockHeight = "code-block-height";
 export const kJumpToSlide = "jumpToSlide";
+// scroll view configurations - https://revealjs.com/scroll-view/
+export const kScrollView = "scroll-view";
+export const kView = "view";
+export const kScrollProgress = "scrollProgress";
+export const kScrollSnap = "scrollSnap";
+export const kScrollActivationWidth = "scrollActivationWidth";
+export const kScrollLayout = "scrollLayout";

src/format/reveal/format-reveal-plugin.ts

@@ -420,6 +420,11 @@ function revealMenuTools(format: Format) {
       key: "e",
       handler: "togglePdfExport",
     },
+    {
+      title: "Scroll View Mode",
+      key: "r",
+      handler: "toggleScrollView",
+    },
   ];
   if (format.metadata[kRevealChalkboard]) {
     tools.push(

src/format/reveal/format-reveal.ts

@@ -62,8 +62,14 @@ import {
   kPreviewLinksAuto,
   kRevealJsConfig,
   kScrollable,
+  kScrollActivationWidth,
+  kScrollLayout,
+  kScrollProgress,
+  kScrollSnap,
+  kScrollView,
   kSlideFooter,
   kSlideLogo,
+  kView,
 } from "./constants.ts";
 import { revealMetadataFilter } from "./metadata.ts";
 import { ProjectContext } from "../../project/types.ts";
@@ -78,6 +84,36 @@ export function revealResolveFormat(format: Format) {
   if (format.metadata["navigationMode"] === "vertical") {
     format.metadata["navigationMode"] = "default";
   }
+
+  // normalize scroll-view to map to revealjs configuration
+  const scrollView = format.metadata[kScrollView];
+  if (typeof scrollView === "boolean" && scrollView) {
+    // if scroll-view is true then set view to scroll by default
+    // using all default option
+    format.metadata[kView] = "scroll";
+  } else if (typeof scrollView === "object") {
+    // if scroll-view is an object then map to revealjs configuration individually
+    const scrollViewRecord = scrollView as Record<string, unknown>;
+    // Only activate scroll by default when ask explicitly
+    if (scrollViewRecord["activate"] === true) {
+      format.metadata[kView] = "scroll";
+    }
+    if (scrollViewRecord["progress"] !== undefined) {
+      format.metadata[kScrollProgress] = scrollViewRecord["progress"];
+    }
+    if (scrollViewRecord["snap"] !== undefined) {
+      format.metadata[kScrollSnap] = scrollViewRecord["snap"];
+    }
+    if (scrollViewRecord["layout"] !== undefined) {
+      format.metadata[kScrollLayout] = scrollViewRecord["layout"];
+    }
+    if (scrollViewRecord["activation-width"] !== undefined) {
+      format.metadata[kScrollActivationWidth] =
+        scrollViewRecord["activation-width"];
+    }
+  }
+  // remove scroll-view from metadata
+  delete format.metadata[kScrollView];
 }
 
 export function revealjsFormat() {
@@ -153,6 +189,24 @@ export function revealjsFormat() {
             format.metadata[kPdfMaxPagesPerSlide];
         }
 
+        // pass scroll view settings as they are not yet in revealjs template
+        if (format.metadata[kView]) {
+          extraConfig[kView] = format.metadata[kView];
+        }
+        if (format.metadata[kScrollProgress] !== undefined) {
+          extraConfig[kScrollProgress] = format.metadata[kScrollProgress];
+        }
+        if (format.metadata[kScrollSnap] !== undefined) {
+          extraConfig[kScrollSnap] = format.metadata[kScrollSnap];
+        }
+        if (format.metadata[kScrollLayout] !== undefined) {
+          extraConfig[kScrollLayout] = format.metadata[kScrollLayout];
+        }
+        if (format.metadata[kScrollActivationWidth] !== undefined) {
+          extraConfig[kScrollActivationWidth] =
+            format.metadata[kScrollActivationWidth];
+        }
+
         // get theme info (including text highlighing mode)
         const theme = await revealTheme(
           format,

src/format/reveal/metadata.ts

@@ -13,6 +13,11 @@ import {
   kJumpToSlide,
   kPdfMaxPagesPerSlide,
   kPdfSeparateFragments,
+  kScrollActivationWidth,
+  kScrollLayout,
+  kScrollProgress,
+  kScrollSnap,
+  kView,
 } from "./constants.ts";
 
 export function optionsToKebab(options: string[]) {
@@ -120,6 +125,11 @@ const kRevealOptions = [
   kPdfSeparateFragments,
   "pdfPageHeightOffset",
   kJumpToSlide,
+  kView,
+  kScrollProgress,
+  kScrollSnap,
+  kScrollLayout,
+  kScrollActivationWidth,
 ];
 
 const kRevealKebabOptions = optionsToKebab(kRevealOptions);

src/resources/editor/tools/vs-code.mjs

@@ -18601,6 +18601,66 @@ var require_yaml_intelligence_resources = __commonJS({
               }
             ]
           }
+        },
+        {
+          name: "scroll-view",
+          description: "Control the scroll view feature of Revealjs",
+          tags: {
+            formats: [
+              "revealjs"
+            ]
+          },
+          schema: {
+            anyOf: [
+              "boolean",
+              {
+                object: {
+                  properties: {
+                    activate: {
+                      boolean: {
+                        default: true,
+                        description: "Activate scroll view by default for the presentation. Otherwise, it is manually avalaible by adding `?view=scroll` to url."
+                      }
+                    },
+                    progress: {
+                      anyOf: [
+                        "boolean",
+                        {
+                          enum: [
+                            "auto"
+                          ]
+                        }
+                      ],
+                      default: "auto",
+                      description: "Show the scrollbar while scrolling, hide while idle (default `auto`). Set to 'true' to always show, `false` to always hide."
+                    },
+                    snap: {
+                      enum: [
+                        "mandatory",
+                        "proximity",
+                        false
+                      ],
+                      default: "mandatory",
+                      description: "When scrolling, it will automatically snap to the closest slide. Only snap when close to the top of a slide using `proximity`. Disable snapping altogether by setting to `false`.\n"
+                    },
+                    layout: {
+                      enum: [
+                        "compact",
+                        "full"
+                      ],
+                      default: "full",
+                      description: "By default each slide will be sized to be as tall as the viewport. If you prefer a more dense layout with multiple slides visible in parallel, set to `compact`.\n"
+                    },
+                    "activation-width": {
+                      number: {
+                        description: "Control scroll view activation width. The scroll view is automatically unable when the viewport reaches mobile widths. Set to `0` to disable automatic scroll view.\n"
+                      }
+                    }
+                  }
+                }
+              }
+            ]
+          }
         }
       ],
       "schema/document-reveal-transitions.yml": [
@@ -23045,6 +23105,12 @@ var require_yaml_intelligence_resources = __commonJS({
         "Multiplex token server (defaults to Reveal-hosted server)",
         "Unique presentation id provided by multiplex token server",
         "Secret provided by multiplex token server",
+        "Control the scroll view feature of Revealjs",
+        "Activate scroll view by default for the presentation. Otherwise, it\nis manually avalaible by adding <code>?view=scroll</code> to url.",
+        "Show the scrollbar while scrolling, hide while idle (default\n<code>auto</code>). Set to \u2018true\u2019 to always show, <code>false</code> to\nalways hide.",
+        "When scrolling, it will automatically snap to the closest slide. Only\nsnap when close to the top of a slide using <code>proximity</code>.\nDisable snapping altogether by setting to <code>false</code>.",
+        "By default each slide will be sized to be as tall as the viewport. If\nyou prefer a more dense layout with multiple slides visible in parallel,\nset to <code>compact</code>.",
+        "Control scroll view activation width. The scroll view is\nautomatically unable when the viewport reaches mobile widths. Set to\n<code>0</code> to disable automatic scroll view.",
         {
           short: "Transition style for slides",
           long: "Transition style for slides backgrounds. (<code>none</code>,\n<code>fade</code>, <code>slide</code>, <code>convex</code>,\n<code>concave</code>, or <code>zoom</code>)"
@@ -23855,8 +23921,7 @@ var require_yaml_intelligence_resources = __commonJS({
         },
         "Disambiguating year suffix in author-date styles (e.g.&nbsp;\u201Ca\u201D in \u201CDoe,\n1999a\u201D).",
         "Manuscript configuration",
-        "internal-schema-hack",
-        "Alternative text for the logo, used for accessibility."
+        "internal-schema-hack"
       ],
       "schema/external-schemas.yml": [
         {
@@ -24085,12 +24150,12 @@ var require_yaml_intelligence_resources = __commonJS({
         mermaid: "%%"
       },
       "handlers/mermaid/schema.yml": {
-        _internalId: 190453,
+        _internalId: 192356,
         type: "object",
         description: "be an object",
         properties: {
           "mermaid-format": {
-            _internalId: 190445,
+            _internalId: 192348,
             type: "enum",
             enum: [
               "png",
@@ -24106,7 +24171,7 @@ var require_yaml_intelligence_resources = __commonJS({
             exhaustiveCompletions: true
           },
           theme: {
-            _internalId: 190452,
+            _internalId: 192355,
             type: "anyOf",
             anyOf: [
               {