npm - fb-slides - Versions diffs - 0.1.2 - Mend

fb-slides 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/LICENSE +21 -0
package/README.md +225 -0
package/bin/fb-slides.mjs +111 -0
package/lib/build.mjs +98 -0
package/lib/config.mjs +90 -0
package/lib/create.mjs +59 -0
package/lib/decks.mjs +13 -0
package/lib/dev.mjs +94 -0
package/lib/render.mjs +52 -0
package/lib/server.mjs +168 -0
package/lib/vendor.mjs +32 -0
package/package.json +51 -0
package/runtime/annotate.js +458 -0
package/runtime/deck.js +299 -0
package/runtime/index.html +37 -0
package/runtime/outline.js +354 -0
package/runtime/shortcuts.js +53 -0
package/runtime/spotlight.js +293 -0
package/runtime/theme.base.css +879 -0
package/templates/starter/README.md +27 -0
package/templates/starter/_gitignore +4 -0
package/templates/starter/_package.json +14 -0
package/templates/starter/assets/.gitkeep +0 -0
package/templates/starter/decks/01-intro.md +44 -0
package/templates/starter/decks/02-demos.md +34 -0
package/templates/starter/demo/angular-hello/README.md +15 -0
package/templates/starter/demo/angular-hello/_package.json +24 -0
package/templates/starter/demo/angular-hello/angular.json +34 -0
package/templates/starter/demo/angular-hello/src/index.html +12 -0
package/templates/starter/demo/angular-hello/src/main.ts +18 -0
package/templates/starter/demo/angular-hello/src/styles.css +22 -0
package/templates/starter/demo/angular-hello/tsconfig.app.json +5 -0
package/templates/starter/demo/angular-hello/tsconfig.json +17 -0
package/templates/starter/demo/counter/index.html +34 -0
package/templates/starter/slides.config.js +34 -0
package/templates/starter/theme.css +14 -0

package/runtime/spotlight.js ADDED Viewed

@@ -0,0 +1,293 @@
+// ---------------------------------------------------------------------------
+// RevealSpotlight — light up one part of the slide, put the rest behind glass.
+//
+// A reveal.js plugin, built like annotate.js: `init()` gets the deck, the file
+// owns its chrome and key bindings, and index.html stays a page of slides.
+//
+// The whole effect is one full-viewport div with a backdrop-filter, wearing a
+// `clip-path: path(evenodd, …)` whose outer subpath is the viewport and whose
+// inner one is the spotlit rectangle. Even-odd punches the rectangle out as a
+// hole, so the blur and the dimming apply everywhere except inside it — one
+// element, no seams, and the browser does the compositing. The rectangle lives
+// in screen pixels like the pen's ink, clear of the CSS transform reveal
+// scales slides with.
+// ---------------------------------------------------------------------------
+import { listShortcutAfter } from './shortcuts.js';
+const RADIUS = 10; // px, the hole's corner rounding
+const MIN_DRAG = 6; // px in either axis before a press counts as a drag
+const EDGE = 10; // px inside the rectangle's edge that resizes rather than moves
+const MIN_SIZE = 24; // px, the smallest a resize can squeeze the light to
+// The resize cursors, by the zone's name. The middle ('') is not listed: there
+// the inline style is cleared and the stylesheet's grab/grabbing pair applies.
+const CURSORS = {
+  n: 'ns-resize',
+  s: 'ns-resize',
+  e: 'ew-resize',
+  w: 'ew-resize',
+  nw: 'nwse-resize',
+  se: 'nwse-resize',
+  ne: 'nesw-resize',
+  sw: 'nesw-resize',
+};
+const SPOT_ICON = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"
+  stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M4 8V6a2 2 0 0 1 2-2h2" /><path d="M16 4h2a2 2 0 0 1 2 2v2" />
+  <path d="M20 16v2a2 2 0 0 1-2 2h-2" /><path d="M8 20H6a2 2 0 0 1-2-2v-2" />
+  <rect x="9" y="9.5" width="6" height="5" rx="1" />
+</svg>`;
+// The evenodd path: the viewport, then the hole as a rounded rectangle. The
+// radius is clamped so a sliver of a rectangle still closes into a valid path.
+const holePath = (rect, width, height) => {
+  const { x, y, w, h } = rect;
+  const r = Math.min(RADIUS, w / 2, h / 2);
+  return `path(evenodd, "M0 0H${width}V${height}H0Z \
+M${x + r} ${y}h${w - 2 * r}a${r} ${r} 0 0 1 ${r} ${r}v${h - 2 * r}\
+a${r} ${r} 0 0 1 -${r} ${r}h${2 * r - w}a${r} ${r} 0 0 1 -${r} -${r}\
+v${2 * r - h}a${r} ${r} 0 0 1 ${r} -${r}Z")`;
+};
+const RevealSpotlight = () => ({
+  id: 'spotlight',
+  init(deck) {
+    // ---- chrome ---------------------------------------------------------
+    // Fixed overlays on <body>, outside `.reveal` and its transforms. The veil
+    // sits under the ink canvas, so the pen can still draw inside the light.
+    const veil = document.createElement('div');
+    veil.id = 'deck-spot';
+    veil.setAttribute('aria-hidden', 'true');
+    // clip-path clips the veil's own border too, so the hole's edge is a
+    // second element laid over it — a thin ring that traces the rectangle.
+    // It earns its keep twice over: clipping cuts the hole out of the veil's
+    // hit-testing along with its paint, so pointer events inside the light
+    // would fall through to the slide — the ring, sized to the rectangle, is
+    // what catches them, and dragging it moves the spotlight.
+    const ring = document.createElement('div');
+    ring.id = 'deck-spot-ring';
+    ring.setAttribute('aria-hidden', 'true');
+    document.body.append(veil, ring);
+    // The toolbar is annotate's; this plugin registers after it in deck.js and
+    // hangs its button there. A deck running without the pen still gets one.
+    let toolbar = document.querySelector('#deck-tools');
+    if (!toolbar) {
+      toolbar = document.createElement('div');
+      toolbar.id = 'deck-tools';
+      toolbar.setAttribute('role', 'toolbar');
+      toolbar.setAttribute('aria-label', 'Slide tools');
+      document.body.append(toolbar);
+    }
+    const button = document.createElement('button');
+    button.id = 'tool-spot';
+    button.className = 'deck-tool';
+    button.type = 'button';
+    button.setAttribute('aria-pressed', 'false');
+    button.title = 'Spotlight — drag to light up part of the slide (Shift)';
+    button.setAttribute('aria-label', 'Spotlight');
+    button.innerHTML = SPOT_ICON;
+    toolbar.append(button);
+    // ---- state ----------------------------------------------------------
+    let armed = false;
+    let rect = null; // {x, y, w, h} in screen px, or null when the veil is clear
+    let press = null; // where the current drag started, or null
+    let grab = null; // the pointer's offset into a rectangle being moved, or null
+    const layout = () => {
+      if (!rect) return;
+      veil.style.clipPath = holePath(rect, window.innerWidth, window.innerHeight);
+      ring.style.left = `${rect.x}px`;
+      ring.style.top = `${rect.y}px`;
+      ring.style.width = `${rect.w}px`;
+      ring.style.height = `${rect.h}px`;
+      ring.style.borderRadius = `${Math.min(RADIUS, rect.w / 2, rect.h / 2)}px`;
+    };
+    const show = () => {
+      layout();
+      veil.classList.add('has-hole');
+      ring.classList.add('has-hole', 'is-live');
+    };
+    // The clip-path stays as it was, so the hole holds its place while the
+    // veil fades out around it.
+    const clear = () => {
+      rect = null;
+      press = null;
+      grab = null;
+      veil.classList.remove('has-hole');
+      ring.classList.remove('has-hole', 'is-live');
+      ring.style.cursor = '';
+    };
+    const setSpot = (on) => {
+      armed = on;
+      button.setAttribute('aria-pressed', String(on));
+      toolbar.classList.toggle('is-armed', on);
+      // Only an armed veil takes the pointer; the rest of the time clicks fall
+      // through to the slide underneath — same contract as the pen's canvas.
+      veil.classList.toggle('is-live', on);
+      if (on) document.dispatchEvent(new CustomEvent('deck:tool-armed', { detail: 'spotlight' }));
+      else clear();
+    };
+    // Two tools, one pointer: arming either disarms the other. The handshake
+    // is a DOM event rather than an import either way round, so each plugin
+    // works alone.
+    document.addEventListener('deck:tool-armed', (event) => {
+      if (event.detail !== 'spotlight' && armed) setSpot(false);
+    });
+    // ---- the drag -------------------------------------------------------
+    veil.addEventListener('pointerdown', (event) => {
+      if (!armed || event.button !== 0) return;
+      veil.setPointerCapture(event.pointerId);
+      press = { id: event.pointerId, x: event.clientX, y: event.clientY, dragging: false };
+    });
+    veil.addEventListener('pointermove', (event) => {
+      if (!press || event.pointerId !== press.id) return;
+      const w = Math.abs(event.clientX - press.x);
+      const h = Math.abs(event.clientY - press.y);
+      // Below the threshold it is still a click; past it the veil comes down
+      // and the rectangle follows the pointer.
+      if (!press.dragging && w < MIN_DRAG && h < MIN_DRAG) return;
+      press.dragging = true;
+      rect = {
+        x: Math.min(press.x, event.clientX),
+        y: Math.min(press.y, event.clientY),
+        w: Math.max(w, 1),
+        h: Math.max(h, 1),
+      };
+      show();
+    });
+    const release = (event) => {
+      if (!press || event.pointerId !== press.id) return;
+      // A plain click switches the light back off; a drag leaves its rectangle.
+      if (!press.dragging) clear();
+      press = null;
+    };
+    veil.addEventListener('pointerup', release);
+    veil.addEventListener('pointercancel', release);
+    // ---- the move and the resize ----------------------------------------
+    // Grabbing the light and drawing it never race: the ring owns the inside
+    // of the rectangle, the veil owns everything around it. Within the ring, a
+    // band along the edge resizes and the middle moves — the zone is named by
+    // the edges the pointer is near ('n', 'se', …; '' is the middle), and the
+    // same name picks the arrow cursor and says which edges follow the drag.
+    const zoneAt = (event) => {
+      const x = event.clientX - rect.x;
+      const y = event.clientY - rect.y;
+      // A small rectangle keeps a third of itself in the middle, or it could
+      // only ever be resized, never picked up.
+      const band = Math.min(EDGE, rect.w / 3, rect.h / 3);
+      return (
+        (y < band ? 'n' : y > rect.h - band ? 's' : '') +
+        (x < band ? 'w' : x > rect.w - band ? 'e' : '')
+      );
+    };
+    ring.addEventListener('pointerdown', (event) => {
+      if (!armed || !rect || event.button !== 0) return;
+      ring.setPointerCapture(event.pointerId);
+      grab = {
+        id: event.pointerId,
+        zone: zoneAt(event),
+        dx: event.clientX - rect.x,
+        dy: event.clientY - rect.y,
+        from: { ...rect },
+      };
+    });
+    ring.addEventListener('pointermove', (event) => {
+      if (!grab || event.pointerId !== grab.id) {
+        // Just hovering: wear the zone's cursor. The middle clears the inline
+        // style so the stylesheet's grab/grabbing pair takes over.
+        if (!grab && rect) ring.style.cursor = CURSORS[zoneAt(event)] ?? '';
+        return;
+      }
+      if (!grab.zone) {
+        rect.x = event.clientX - grab.dx;
+        rect.y = event.clientY - grab.dy;
+        layout();
+        return;
+      }
+      // Each named edge follows the pointer while its opposite stays anchored
+      // where the drag found it, clamped so the light never collapses.
+      const { from } = grab;
+      if (grab.zone.includes('w')) {
+        rect.x = Math.min(event.clientX, from.x + from.w - MIN_SIZE);
+        rect.w = from.x + from.w - rect.x;
+      }
+      if (grab.zone.includes('e')) rect.w = Math.max(event.clientX - from.x, MIN_SIZE);
+      if (grab.zone.includes('n')) {
+        rect.y = Math.min(event.clientY, from.y + from.h - MIN_SIZE);
+        rect.h = from.y + from.h - rect.y;
+      }
+      if (grab.zone.includes('s')) rect.h = Math.max(event.clientY - from.y, MIN_SIZE);
+      layout();
+    });
+    const drop = (event) => {
+      if (grab && event.pointerId === grab.id) grab = null;
+    };
+    ring.addEventListener('pointerup', drop);
+    ring.addEventListener('pointercancel', drop);
+    button.addEventListener('click', () => setSpot(!armed));
+    // The shortcut is a tap of Shift on its own — not through addKeyBinding,
+    // which knows nothing of keyup. Toggling on the keydown would fire on
+    // every Shift+Space and Shift+arrow reveal already answers, so the toggle
+    // waits for the release, and stands down the moment any other key shows
+    // Shift was there as a modifier.
+    let shiftTap = false;
+    document.addEventListener('keydown', (event) => {
+      shiftTap = event.key === 'Shift' && !event.repeat;
+    });
+    document.addEventListener('keyup', (event) => {
+      if (event.key === 'Shift' && shiftTap) setSpot(!armed);
+    });
+    // Hand-rolled keys are invisible to reveal's help overlay; shortcuts.js
+    // writes the row the binding above cannot.
+    deck.on('ready', () =>
+      listShortcutAfter(deck, { key: 'SHIFT', action: 'Toggle the spotlight', after: /overview/i }),
+    );
+    // Escape is reveal's overview toggle; take it back only while armed, in the
+    // capture phase, exactly as the pen does.
+    document.addEventListener(
+      'keydown',
+      (event) => {
+        if (event.key !== 'Escape' || !armed) return;
+        setSpot(false);
+        event.stopPropagation();
+        event.preventDefault();
+      },
+      true,
+    );
+    // A spotlight aims at one slide's content; the next slide starts dark-free.
+    deck.on('slidechanged', clear);
+    deck.on('overviewshown', () => setSpot(false));
+    // The rectangle is screen pixels: on resize it keeps its place on screen,
+    // only the outer path has to learn the new viewport.
+    window.addEventListener('resize', layout);
+  },
+});
+export default RevealSpotlight;