contour-deck 0.3.1 → 0.3.2

package/README.md

@@ -116,7 +116,7 @@ deck.prev();
 deck.open("4.2");       // put a block on the stage
 deck.go("4.4.2");       // or deck.go("slide-id")
 deck.overview();        // back to the outline
-deck.slideBy(1);        // the next slide, as the right arrow key; -1 for the one before
+deck.slideBy(1);        // the next slide, as the right arrow key once the page's steps are shown; -1 for the one before
 deck.pageBy(1);         // one stop down inside the slide, as the down arrow key
 deck.state;             // { mode, block, slide, page, step }; ordinals are 1-based
 deck.on("change", ({ mode, at, step }) => {});
@@ -201,7 +201,7 @@ The phone must be able to open the page's URL, so a deck on `localhost` needs a
 | --- | --- | --- |
 | `Space`, `Enter`, `PageDown` | advance one step | open the current slide |
 | `Shift+Space`, `PageUp`, `Backspace` | back one step | |
-| `←` `→` | previous, next slide | move between thumbnails |
+| `←` `→` | hide or show the current page's steps first, then the previous or next slide | move between thumbnails |
 | `↑` `↓` | previous, next stop | move between thumbnails |
 | `Home`, `End` | first, last slide of the block | |
 | `N` | notes panel | |

package/dist/core/deck.js

@@ -302,6 +302,15 @@ export function createDeck(root, options = {}) {
             slide.el.scrollBy({ top: below + 32, behavior: smooth() });
         render();
     }
+    /** The arrow keys: reveal or hide the current page's steps first, then move to the next or previous slide. */
+    function stepOrSlide(direction) {
+        readScroll();
+        const steps = pageAt().steps;
+        const pending = direction > 0 ? steps.some(item => !item.hasAttribute(ON)) : steps.some(item => item.hasAttribute(ON));
+        if (pending)
+            return direction > 0 ? next() : prev();
+        slideBy(direction);
+    }
     function prev() {
         if (busy || mode !== "stage")
             return;
@@ -509,8 +518,8 @@ export function createDeck(root, options = {}) {
                 PageDown: next,
                 PageUp: prev,
                 Backspace: prev,
-                ArrowRight: () => slideBy(1),
-                ArrowLeft: () => slideBy(-1),
+                ArrowRight: () => stepOrSlide(1),
+                ArrowLeft: () => stepOrSlide(-1),
                 ArrowDown: () => stepV(1),
                 ArrowUp: () => stepV(-1),
                 Escape: toOverview,

package/dist/remote/presenter.js

@@ -24,6 +24,16 @@ const KEYS = {
     Escape: "overview",
     o: "overview",
 };
+/** The arrow keys reveal or hide the current page's steps before they move to another slide, as on the deck. */
+function arrowStep(key, state) {
+    if (!state || state.mode !== "stage")
+        return undefined;
+    if (key === "ArrowRight" && state.step < state.steps)
+        return "next";
+    if (key === "ArrowLeft" && state.step > 0)
+        return "prev";
+    return undefined;
+}
 export function presenterView(root, options = {}) {
     injectStyle(options.nonce);
     const labels = { ...defaultRemoteLabels, ...options.labels };
@@ -94,7 +104,7 @@ export function presenterView(root, options = {}) {
         const onButton = !!event.target.closest?.("button,a");
         if (onButton && (key === " " || key === "Enter"))
             return;
-        const command = key === " " && event.shiftKey ? "prev" : KEYS[key];
+        const command = key === " " && event.shiftKey ? "prev" : arrowStep(key, guest.state) ?? KEYS[key];
         if (!command)
             return;
         event.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contour-deck",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Outline-first slide decks on real DOM: blocks, slides, pages.",
   "keywords": [
     "slides",