@fluid-theme/core 0.4.3 → 2.0.0

package/assets/js/lightbox.js

@@ -0,0 +1,153 @@
+/**
+ * Lightbox
+ *
+ * Opens the links in a [data-lightbox] gallery in a full-screen native
+ * <dialog>: previous / next buttons, arrow keys, Escape to close (native),
+ * swipe left / right, a "3 of 12" counter and the caption. Focus moves into
+ * the dialog and returns to the thumbnail that opened it.
+ *
+ * Progressive enhancement: without this script every thumbnail is a plain
+ * link to the full-size image, so nothing is lost.
+ *
+ * Usage (markup and options in src/components/gallery.css):
+ *   <ul class="gallery" role="list" data-lightbox> … <a class="gallery__link" href="full.jpg"><img …></a> … </ul>
+ *   <script src="assets/js/lightbox.js" defer></script>
+ *
+ * The caption comes from the figure's .gallery__caption, else the link's
+ * data-caption, else the image's alt text. Dynamic galleries: call
+ * window.fluidLightbox() after adding them (idempotent).
+ */
+
+(function () {
+  'use strict';
+
+  var dialog, img, caption, counter, prevBtn, nextBtn, items = [], index = 0, opener = null, startX = null, swiped = false;
+
+  function button(cls, label, text) {
+    var b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'lightbox__button ' + cls;
+    b.setAttribute('aria-label', label);
+    // A variant keeps the presets' default button skins off these controls.
+    b.setAttribute('data-variant', 'ghost');
+    b.textContent = text;
+    return b;
+  }
+
+  function build() {
+    dialog = document.createElement('dialog');
+    dialog.className = 'lightbox';
+    dialog.setAttribute('aria-label', 'Photo viewer');
+
+    var bar = document.createElement('div');
+    bar.className = 'lightbox__bar';
+    counter = document.createElement('p');
+    counter.className = 'lightbox__counter';
+    counter.setAttribute('aria-live', 'polite');
+    var close = button('lightbox__close', 'Close photo viewer', '×');
+    close.addEventListener('click', function () { dialog.close(); });
+    bar.append(counter, close);
+
+    var stage = document.createElement('div');
+    stage.className = 'lightbox__stage';
+    img = document.createElement('img');
+    img.className = 'lightbox__image';
+    img.decoding = 'async';
+    img.draggable = false; // a mouse drag must swipe, not start the browser's image drag
+    prevBtn = button('lightbox__prev', 'Previous photo', '‹');
+    nextBtn = button('lightbox__next', 'Next photo', '›');
+    prevBtn.addEventListener('click', function () { show(index - 1); });
+    nextBtn.addEventListener('click', function () { show(index + 1); });
+    stage.append(prevBtn, img, nextBtn);
+
+    caption = document.createElement('p');
+    caption.className = 'lightbox__caption';
+
+    dialog.append(bar, stage, caption);
+    document.body.appendChild(dialog);
+
+    dialog.addEventListener('keydown', function (e) {
+      if (e.key === 'ArrowLeft') { e.preventDefault(); show(index - 1); }
+      else if (e.key === 'ArrowRight') { e.preventDefault(); show(index + 1); }
+    });
+    // A click on the dark area around the photo closes, as people expect.
+    dialog.addEventListener('click', function (e) {
+      if (swiped) { swiped = false; return; } // the click that ends a swipe is not a close
+      if (e.target === dialog || e.target === stage) dialog.close();
+    });
+    stage.addEventListener('pointerdown', function (e) { startX = e.clientX; swiped = false; });
+    stage.addEventListener('pointercancel', function () { startX = null; });
+    stage.addEventListener('pointerup', function (e) {
+      if (startX === null) return;
+      var dx = e.clientX - startX;
+      startX = null;
+      if (Math.abs(dx) > 40) { swiped = true; show(index + (dx < 0 ? 1 : -1)); }
+    });
+    dialog.addEventListener('close', function () {
+      img.removeAttribute('src');
+      if (opener) opener.focus();
+      opener = null;
+    });
+  }
+
+  function captionFor(link) {
+    var fig = link.closest('figure');
+    var cap = fig && fig.querySelector('.gallery__caption');
+    if (cap && cap.textContent.trim()) return cap.textContent.trim();
+    if (link.dataset.caption) return link.dataset.caption;
+    var thumb = link.querySelector('img');
+    return thumb ? thumb.alt : '';
+  }
+
+  function preload(i) {
+    if (i < 0 || i >= items.length) return;
+    var p = new Image();
+    p.src = items[i].href;
+  }
+
+  function show(i) {
+    if (i < 0 || i >= items.length) return;
+    index = i;
+    var link = items[i];
+    var thumb = link.querySelector('img');
+    img.src = link.href;
+    img.alt = thumb ? thumb.alt : '';
+    var text = captionFor(link);
+    caption.textContent = text;
+    caption.hidden = !text || text === img.alt;
+    counter.textContent = items.length > 1 ? (i + 1) + ' of ' + items.length : '';
+    prevBtn.hidden = i === 0;
+    nextBtn.hidden = i === items.length - 1;
+    preload(i + 1);
+    preload(i - 1);
+  }
+
+  function open(gallery, link) {
+    if (!dialog) build();
+    items = Array.prototype.slice.call(gallery.querySelectorAll('a[href]'));
+    opener = link;
+    show(items.indexOf(link));
+    dialog.showModal();
+    // Start on the next button so arrow keys and Enter both move forward.
+    (nextBtn.hidden ? dialog.querySelector('.lightbox__close') : nextBtn).focus();
+  }
+
+  function init() {
+    if (typeof HTMLDialogElement !== 'function') return; // very old browser: links stay links
+    document.querySelectorAll('[data-lightbox]').forEach(function (gallery) {
+      if (gallery.dataset.lightboxReady) return;
+      gallery.dataset.lightboxReady = '1';
+      gallery.addEventListener('click', function (e) {
+        var link = e.target.closest('a[href]');
+        if (!link || !gallery.contains(link)) return;
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return; // new tab etc.
+        e.preventDefault();
+        open(gallery, link);
+      });
+    });
+  }
+
+  window.fluidLightbox = init;
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
+  else init();
+})();

package/assets/js/scroll-reveal.js

@@ -0,0 +1,72 @@
+/**
+ * Scroll Reveal
+ *
+ * Lightweight scroll-triggered reveal animations using Intersection Observer.
+ * Add [data-reveal] attribute to elements you want to animate.
+ *
+ * Usage:
+ *   <div data-reveal="fade-up">Content</div>
+ *   <div data-reveal="fade-up" data-reveal-delay="200">Delayed content</div>
+ *
+ * The script adds the 'revealed' class when elements enter the viewport.
+ * Nothing is hidden until it sets data-reveal-ready on <html>
+ * (scroll-reveal.css), so a page without this script keeps its content.
+ */
+
+(function() {
+  'use strict';
+
+  // Configuration
+  const config = {
+    root: null,           // viewport
+    rootMargin: '0px',    // no margin
+    threshold: 0.1        // trigger when 10% visible
+  };
+
+  // Initialize when DOM is ready
+  function init() {
+    // Only elements that opt in with [data-reveal] animate (scroll-reveal.css).
+    const elements = document.querySelectorAll('[data-reveal]');
+
+    if (!elements.length) return;
+
+    // Check for IntersectionObserver support
+    if (!('IntersectionObserver' in window)) {
+      // Fallback: reveal all immediately
+      elements.forEach(el => el.classList.add('revealed'));
+      return;
+    }
+
+    // Content already on screen stays as it is (no blank flash while the
+    // observer starts); only what is below the fold waits to animate in.
+    const viewH = window.innerHeight || document.documentElement.clientHeight;
+    elements.forEach(el => {
+      const r = el.getBoundingClientRect();
+      if (r.top < viewH && r.bottom > 0) el.classList.add('revealed');
+    });
+    const root = document.documentElement;
+    root.setAttribute('data-reveal-init', '');
+    root.setAttribute('data-reveal-ready', '');
+    void root.offsetHeight; // apply the hidden start state without animating it
+    root.removeAttribute('data-reveal-init');
+
+    const observer = new IntersectionObserver((entries, observer) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('revealed');
+          // Stop observing once revealed (one-time animation)
+          observer.unobserve(entry.target);
+        }
+      });
+    }, config);
+
+    elements.forEach(el => { if (!el.classList.contains('revealed')) observer.observe(el); });
+  }
+
+  // Run on DOMContentLoaded
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

package/assets/js/toc-build.mjs

@@ -0,0 +1,86 @@
+/**
+ * TOC builder: the server-side half of the TOC module (spec
+ * _docs/plans/base-v2.md §13). Writes the plain nested list that crawlers,
+ * AI fetchers and no-JS readers get; assets/js/toc.js adds the spy and the
+ * dock on top, and src/components/toc.css (dist/fluid-toc.min.css) styles it.
+ *
+ *   import { tocHtml } from "@fluid-theme/core/toc-build";
+ *   const { headings } = await render(entry);          // Astro: { depth, slug, text }[]
+ *   const toc = tocHtml(headings.map((h) => ({ ...h, id: h.slug })), { modes: "rail dock" });
+ *   // <Fragment set:html={toc} /> after the lede, before the body
+ *
+ * headings: { depth, id, text, label?, skip? }[] in document order.
+ *   - H2s are the top level; each H3 nests under the H2 before it. An H3
+ *     before the first H2 is skipped, and so are the H3s of a skipped H2.
+ *   - label: a shorter TOC entry (data-toc-label on the heading);
+ *     skip: leave it out (data-toc-skip).
+ *   - An existing id is never renamed, so links keep working when content
+ *     moves. A missing id is made with github-slugger's rule (Astro's): the
+ *     caller must put the returned ids on its headings (see tocHeadings).
+ * options:
+ *   modes   data-toc words, default "rail dock" (inline | rail | dock, + end)
+ *   depth   2 or 3 (default 3)
+ *   min     fewer H2s than this renders nothing (default 3)
+ *   label   the fold's label, default "On this page"
+ *   labelId the label's id, default "toc-label"
+ *
+ * Returns "" below min. Keep tocBody identical to the copy in toc.js:
+ * scripts/toc-check.mjs fails if the two disagree.
+ */
+
+function esc(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+/** github-slugger's rule: lower case, drop punctuation and symbols, spaces to hyphens; a repeat gets -1, -2… */
+export function slug(text, used = {}) {
+  const base = String(text).toLowerCase().replace(/[^\p{L}\p{M}\p{N}\p{Pc}\- ]/gu, '').replace(/ /g, '-');
+  let id = base;
+  let n = 0;
+  while (used[id]) id = `${base}-${++n}`;
+  used[id] = true;
+  return id;
+}
+
+/** The headings with every missing id filled in (existing ids are kept). */
+export function tocHeadings(headings) {
+  const used = {};
+  for (const h of headings) if (h.id) used[h.id] = true;
+  return headings.map((h) => (h.id ? h : { ...h, id: slug(h.text, used) }));
+}
+
+/** The fold and list: what toc.js writes into an empty nav[data-toc-build]. */
+export function tocBody(headings, opts = {}) {
+  const depth = opts.depth || 3;
+  const min = opts.min == null ? 3 : opts.min;
+  const labelId = opts.labelId || 'toc-label';
+  const label = opts.label || 'On this page';
+  const tree = [];
+  let last = null;
+  let skipping = false;
+  for (const h of tocHeadings(headings)) {
+    if (h.depth === 2) {
+      skipping = Boolean(h.skip);
+      if (skipping) continue;
+      last = { h, kids: [] };
+      tree.push(last);
+    } else if (h.depth === 3 && depth >= 3 && last && !skipping && !h.skip) {
+      last.kids.push({ h });
+    }
+  }
+  if (tree.length < min) return '';
+  const item = (n) =>
+    `<li><a href="#${esc(encodeURIComponent(n.h.id))}">${esc(n.h.label || n.h.text)}</a>` +
+    (n.kids && n.kids.length ? `<ol>${n.kids.map(item).join('')}</ol>` : '') + '</li>';
+  return `<details class="toc__fold" open><summary class="toc__label" id="${esc(labelId)}">${esc(label)}</summary>` +
+    `<ol>${tree.map(item).join('')}</ol></details>`;
+}
+
+/** The whole nav, ready to place after the lede and before the article body. */
+export function tocHtml(headings, opts = {}) {
+  const body = tocBody(headings, opts);
+  if (!body) return '';
+  const modes = opts.modes || 'rail dock';
+  const depthAttr = opts.depth === 2 ? ' data-toc-depth="2"' : '';
+  return `<nav class="toc" data-toc="${esc(modes)}"${depthAttr} aria-labelledby="${esc(opts.labelId || 'toc-label')}">${body}</nav>`;
+}