@gemboss/website-ui 0.2.0 → 0.4.0

package/js/website.js

@@ -1,186 +1,240 @@
-/*! @gemboss/website-ui website.js | spec: docs/markup-contract.md | load with defer */
+/*! @gemboss/website-ui 0.4.0 website.js | GENERATED by scripts/build.mjs from js/website.mjs (the source, with its comments): edit that file | spec: docs/markup-contract.md | load with defer */
 (function () {
-  'use strict';
-  if (window.gwWebsite) return;
-  window.gwWebsite = { version: '0.2.0' };
-  var doc = document, root = doc.documentElement;
-  function mq(q) { return window.matchMedia ? matchMedia(q) : { matches: false }; }
-  function watch(m, fn) { if (m.addEventListener) m.addEventListener('change', fn); }
-  function all(sel, ctx) { return [].slice.call((ctx || doc).querySelectorAll(sel)); }
-  function on(el, type, fn, opt) { el.addEventListener(type, fn, opt || false); }
-  function attr(el, name, dflt) { return el.getAttribute(name) || dflt; }
-  function esc(e) { return e.key === 'Escape'; }
-  function link(e) { return e.target.closest('a[href]'); }
+'use strict';
+if (window.gwWebsite) return;
 
-  // Mega menu. Opened by hover then clicked, a panel stays open: the click meant "open".
-  function mega() {
-    var fine = mq('(hover: hover) and (pointer: fine)'), open = null, timer = 0;
-    var menus = all('[data-gw-mega]').map(function (t) {
-      var p = doc.getElementById(attr(t, 'data-gw-mega', attr(t, 'aria-controls', '')));
-      return p && { t: t, p: p, item: t.closest('.gw-nav__item') || t.parentNode };
-    }).filter(Boolean);
-    if (!menus.length) return;
-    function set(m, show, mode) {
-      m.p.hidden = !show;
-      m.t.setAttribute('aria-expanded', String(show));
-      m.item.classList.toggle('is-open', show);
-      m.mode = mode;
-      open = show ? m : open === m ? null : open;
-    }
-    function show(m, mode) {
-      clearTimeout(timer);
-      if (open === m) { if (mode === 'click') m.mode = mode; return; }
-      if (open) set(open, false);
-      set(m, true, mode);
-    }
-    function hide(focus) {
-      var m = open;
-      clearTimeout(timer);
-      if (!m) return;
-      set(m, false);
-      if (focus === true) m.t.focus();
-    }
-    function inside(m, el) { return !!el && (m.item.contains(el) || m.p.contains(el)); }
-    menus.forEach(function (m) {
-      on(m.t, 'click', function () { if (open === m && m.mode !== 'hover') hide(); else show(m, 'click'); });
-      (m.item.contains(m.p) ? [m.item] : [m.item, m.p]).forEach(function (el) {
-        on(el, 'mouseenter', function () {
-          if (fine.matches) { clearTimeout(timer); if (open !== m) timer = setTimeout(function () { show(m, 'hover'); }, 80); }
-        });
-        on(el, 'mouseleave', function () {
-          if (fine.matches) { clearTimeout(timer); if (open === m && m.mode === 'hover') timer = setTimeout(hide, 160); }
-        });
+var version = '0.4.0';
+var api = { version: version, init: init, destroy: destroy };
+var doc, root, mine, fine, sys, live = [], megaOpen = null, megaTimer = 0, queued = false;
+var READY = 'data-gw-ready';
+
+function mq(q) { return window.matchMedia ? matchMedia(q) : { matches: false }; }
+function watch(m, fn) { if (m.addEventListener) m.addEventListener('change', fn); }
+function all(sel, ctx) { return [].slice.call((ctx || doc).querySelectorAll(sel)); }
+function within(sel, ctx) { var l = all(sel, ctx); if (ctx.matches && ctx.matches(sel)) l.unshift(ctx); return l; }
+function on(el, type, fn, opt) { el.addEventListener(type, fn, opt || false); }
+function attr(el, name, dflt) { return el.getAttribute(name) || dflt; }
+function esc(e) { return e.key === 'Escape'; }
+function link(e) { return e.target.closest('a[href]'); }
+function emit(el, type, detail) { if (window.CustomEvent) el.dispatchEvent(new CustomEvent(type, { bubbles: true, detail: detail })); }
+
+function each(ctx, sel, kind, fn) {
+  within(sel, ctx).forEach(function (el) {
+    if (live.some(function (r) { return r.el === el && r.kind === kind; })) return;
+    var offs = [], r = fn(el, function (t, type, f, opt) {
+      on(t, type, f, opt);
+      offs.push(function () { t.removeEventListener(type, f, opt || false); });
+    });
+    if (!r) return offs.forEach(function (f) { f(); });
+    r.el = el; r.kind = kind; r.offs = offs;
+    mark(el, kind, true);
+    live.push(r);
+  });
+}
+function mark(el, kind, add) {
+  var l = attr(el, READY, '').split(' ').filter(function (k) { return k && k !== kind; });
+  if (add) l.push(kind);
+  if (l.length) el.setAttribute(READY, l.join(' ')); else el.removeAttribute(READY);
+}
+function drop(r) {
+  if (r.stop) r.stop();
+  r.offs.forEach(function (f) { f(); });
+  mark(r.el, r.kind);
+  live.splice(live.indexOf(r), 1);
+}
+function records(kind, fn) { live.slice().forEach(function (r) { if (r.kind === kind) fn(r); }); }
+
+function setMega(m, show, mode) {
+  m.p.hidden = !show;
+  m.t.setAttribute('aria-expanded', String(show));
+  m.item.classList.toggle('is-open', show);
+  m.mode = mode;
+  megaOpen = show ? m : megaOpen === m ? null : megaOpen;
+  emit(m.t, 'gw:mega', { id: m.p.id, open: show });
+}
+function showMega(m, mode) {
+  clearTimeout(megaTimer);
+  if (megaOpen === m) { if (mode === 'click') m.mode = mode; return; }
+  if (megaOpen) setMega(megaOpen, false);
+  setMega(m, true, mode);
+}
+function hideMega(focus) {
+  var m = megaOpen;
+  clearTimeout(megaTimer);
+  if (!m) return;
+  setMega(m, false);
+  if (focus === true) m.t.focus();
+}
+function inside(m, el) { return !!el && (m.item.contains(el) || m.p.contains(el)); }
+function mega(ctx) {
+  each(ctx, '[data-gw-mega]', 'mega', function (t, on) {
+    var p = doc.getElementById(attr(t, 'data-gw-mega', attr(t, 'aria-controls', '')));
+    if (!p) return;
+    var m = { t: t, p: p, item: t.closest('.gw-nav__item') || t.parentNode };
+    on(t, 'click', function () { if (megaOpen === m && m.mode !== 'hover') hideMega(); else showMega(m, 'click'); });
+    (m.item.contains(p) ? [m.item] : [m.item, p]).forEach(function (el) {
+      on(el, 'mouseenter', function () {
+        if (fine.matches) { clearTimeout(megaTimer); if (megaOpen !== m) megaTimer = setTimeout(function () { showMega(m, 'hover'); }, 80); }
+      });
+      on(el, 'mouseleave', function () {
+        if (fine.matches) { clearTimeout(megaTimer); if (megaOpen === m && m.mode === 'hover') megaTimer = setTimeout(hideMega, 160); }
       });
-      on(m.item, 'focusout', function (e) { if (open === m && e.relatedTarget && !inside(m, e.relatedTarget)) hide(); });
-      on(m.p, 'click', function (e) { if (link(e)) hide(); });
     });
-    on(doc, 'click', function (e) { if (open && !inside(open, e.target)) hide(); });
-    on(doc, 'keydown', function (e) { if (open && esc(e)) hide(inside(open, doc.activeElement) || open.mode === 'click'); });
-  }
+    on(m.item, 'focusout', function (e) { if (megaOpen === m && e.relatedTarget && !inside(m, e.relatedTarget)) hideMega(); });
+    on(p, 'click', function (e) { if (link(e)) hideMega(); });
+    m.stop = function () { if (megaOpen === m) hideMega(); };
+    return m;
+  });
+}
 
-  // Mobile menu. Labels: data-gw-label-open/-close, else the markup's aria-label, else English.
-  function mobile() {
-    var btn = doc.querySelector('[data-gw-menu-toggle]');
-    var menu = btn && doc.getElementById(attr(btn, 'aria-controls', 'gw-mobile-menu'));
+function mobile(ctx) {
+  each(ctx, '[data-gw-menu-toggle]', 'menu', function (btn, on) {
+    var menu = doc.getElementById(attr(btn, 'aria-controls', 'gw-mobile-menu'));
     if (!menu) return;
     var label = [attr(btn, 'data-gw-label-open', attr(btn, 'aria-label', 'Open menu')), attr(btn, 'data-gw-label-close', 'Close menu')];
-    var wide = mq('(min-width: 1080px)');
-    function isOpen() { return !menu.hidden; }
-    function set(o, focus) {
-      menu.hidden = !o;
-      btn.setAttribute('aria-expanded', String(o));
-      btn.setAttribute('aria-label', label[+o]);
-      root.classList.toggle('is-menu-open', o);
-      if (focus) btn.focus();
-    }
-    on(btn, 'click', function () { set(!isOpen()); });
-    on(doc, 'keydown', function (e) { if (esc(e) && isOpen()) set(false, true); });
-    on(menu, 'click', function (e) { if (link(e)) set(false); }); // same-page anchors do not reload
-    watch(wide, function () { if (wide.matches && isOpen()) set(false); });
-    on(window, 'pageshow', function (e) { if (e.persisted && isOpen()) set(false); });
-  }
+    var r = {
+      open: function () { return !menu.hidden; },
+      set: function (o, focus) {
+        menu.hidden = !o;
+        btn.setAttribute('aria-expanded', String(o));
+        btn.setAttribute('aria-label', label[+o]);
+        root.classList.toggle('is-menu-open', o);
+        if (focus) btn.focus();
+      },
+      stop: function () { if (r.open()) r.set(false); }
+    };
+    on(btn, 'click', function () { r.set(!r.open()); });
+    on(menu, 'click', function (e) { if (link(e)) r.set(false); });
+    return r;
+  });
+}
+function closeMenus(focus) { records('menu', function (r) { if (r.open()) r.set(false, focus); }); }
 
-  // Theme toggle. Labels: data-gw-label-dark/-light, else the markup's aria-label, else English.
-  function theme() {
-    var sys = mq('(prefers-color-scheme: dark)'), stored = null;
-    try { stored = localStorage.getItem('gw-theme'); } catch (e) { /* blocked */ }
-    if (!root.hasAttribute('data-theme') && /^(light|dark)$/.test(stored)) root.setAttribute('data-theme', stored);
-    var btns = all('[data-gw-theme-toggle]'), labels = btns.map(function (b) {
-      return [attr(b, 'data-gw-label-dark', attr(b, 'aria-label', 'Switch to dark theme')), attr(b, 'data-gw-label-light', 'Switch to light theme')];
+function dark() { var t = root.getAttribute('data-theme'); return t ? t === 'dark' : sys.matches; }
+function relabel() { records('theme', function (r) { r.el.setAttribute('aria-label', r.labels[+dark()]); }); }
+function theme(ctx) {
+  each(ctx, '[data-gw-theme-toggle]', 'theme', function (b, on) {
+    var r = { labels: [attr(b, 'data-gw-label-dark', attr(b, 'aria-label', 'Switch to dark theme')), attr(b, 'data-gw-label-light', 'Switch to light theme')] };
+    on(b, 'click', function () {
+      var next = dark() ? 'light' : 'dark';
+      root.setAttribute('data-theme', next);
+      try { localStorage.setItem('gw-theme', next); } catch (e) { /* blocked */ }
+      relabel();
+      emit(root, 'gw:theme', { theme: next });
     });
-    function dark() { var t = root.getAttribute('data-theme'); return t ? t === 'dark' : sys.matches; }
-    function relabel() { btns.forEach(function (b, i) { b.setAttribute('aria-label', labels[i][+dark()]); }); }
-    btns.forEach(function (b) {
-      on(b, 'click', function () {
-        var next = dark() ? 'light' : 'dark';
-        root.setAttribute('data-theme', next);
-        try { localStorage.setItem('gw-theme', next); } catch (e) { /* blocked */ }
-        relabel();
-      });
-    });
-    watch(sys, relabel);
-    relabel();
-  }
+    r.stop = function () { b.setAttribute('aria-label', r.labels[0]); };
+    return r;
+  });
+  relabel();
+}
 
-  // Reveal at 15% visible, once. Failsafe: all shown after 2.5s, or at once without IntersectionObserver.
-  function reveal() {
-    var els = all('.gw-reveal'), io = null;
-    function showAll() { els.forEach(function (el) { el.classList.add('is-in'); }); if (io) io.disconnect(); }
-    if (!els.length) return;
-    if (!window.IntersectionObserver || mq('(prefers-reduced-motion: reduce)').matches) return showAll();
-    io = new IntersectionObserver(function (list) {
-      list.forEach(function (en) { if (en.isIntersecting) { en.target.classList.add('is-in'); io.unobserve(en.target); } });
-    }, { threshold: 0.15 });
-    els.forEach(function (el) { io.observe(el); });
-    setTimeout(showAll, 2500);
-  }
+function reveal(ctx) {
+  var els = [], io = null;
+  each(ctx, '.gw-reveal', 'reveal', function (el) { els.push(el); return { stop: function () { if (io) io.unobserve(el); } }; });
+  function showAll() { els.forEach(function (el) { el.classList.add('is-in'); }); if (io) io.disconnect(); }
+  if (!els.length) return;
+  if (!window.IntersectionObserver || mq('(prefers-reduced-motion: reduce)').matches) return showAll();
+  io = new IntersectionObserver(function (list) {
+    list.forEach(function (en) { if (en.isIntersecting) { en.target.classList.add('is-in'); io.unobserve(en.target); } });
+  }, { threshold: 0.15 });
+  els.forEach(function (el) { io.observe(el); });
+  setTimeout(showAll, 2500);
+}
 
-  // Header: .is-scrolled past 8px, read once per frame.
-  function header() {
-    var h = doc.querySelector('[data-gw-header]'), state = false, queued = false;
-    if (!h) return;
-    function update() {
-      var s = window.scrollY > 8;
-      queued = false;
-      if (s !== state) h.classList.toggle('is-scrolled', (state = s));
-    }
-    on(window, 'scroll', function () { if (!queued) { queued = true; requestAnimationFrame(update); } }, { passive: true });
-    update();
-  }
+function scrolled() {
+  var s = window.scrollY > 8;
+  queued = false;
+  records('header', function (r) { if (r.s !== s) r.el.classList.toggle('is-scrolled', (r.s = s)); });
+}
+function header(ctx) {
+  each(ctx, '[data-gw-header]', 'header', function (h) { return { s: false, stop: function () { h.classList.remove('is-scrolled'); } }; });
+  scrolled();
+}
 
-  // aria-current="page" on nav links to this path, unless the markup marked one.
-  function current() {
-    var menu = doc.getElementById('gw-mobile-menu');
-    var links = all('.gw-nav__link[href], .gw-mega__link[href]').concat(menu ? all('a[href]', menu) : []);
-    function norm(p) { return p.replace(/\/index\.html?$/, '/').replace(/\.html?$/, '').replace(/\/+$/, '') || '/'; }
-    if (links.some(function (a) { return a.hasAttribute('aria-current'); })) return;
-    links.forEach(function (a) {
-      if (a.classList.contains('gw-btn') || a.hash || a.host !== location.host) return;
-      if (norm(a.pathname) === norm(location.pathname)) a.setAttribute('aria-current', 'page');
-    });
-  }
+function current(ctx) {
+  var links = within('.gw-nav__link[href], .gw-mega__link[href]', ctx);
+  within('#gw-mobile-menu, .gw-mobile-menu', ctx).forEach(function (m) { links = links.concat(all('a[href]', m)); });
+  function norm(p) { return p.replace(/\/index\.html?$/, '/').replace(/\.html?$/, '').replace(/\/+$/, '') || '/'; }
+  links.forEach(function (a) { if (mine.has(a)) { mine.delete(a); a.removeAttribute('aria-current'); } });
+  if (links.some(function (a) { return a.hasAttribute('aria-current'); })) return;
+  links.forEach(function (a) {
+    if (a.classList.contains('gw-btn') || a.hash || a.host !== location.host) return;
+    if (norm(a.pathname) === norm(location.pathname)) { a.setAttribute('aria-current', 'page'); mine.add(a); }
+  });
+}
 
-  // Segmented control: a radio group, one Tab stop; arrows (Home, End) move and choose. What one option shows carries
-  // data-gw-show="group:value" and is hidden unless that option is chosen; without the script the markup's own choice shows.
-  function segmented() {
-    all('[data-gw-segmented]').forEach(function (g) {
-      var name = attr(g, 'data-gw-segmented', ''), opts = all('[role="radio"]', g);
-      if (!opts.length) return;
-      function pick(o, focus, said) {
-        var v = attr(o, 'value', '');
-        opts.forEach(function (x) { x.setAttribute('aria-checked', String(x === o)); x.setAttribute('tabindex', x === o ? '0' : '-1'); });
-        if (focus) o.focus();
-        all('[data-gw-show]').forEach(function (el) {
-          var mine = attr(el, 'data-gw-show', '').split(/\s+/).filter(function (t) { return t.split(':')[0] === name; });
-          if (mine.length) el.hidden = mine.indexOf(name + ':' + v) < 0;
-        });
-        if (said && window.CustomEvent) g.dispatchEvent(new CustomEvent('gw:segmented', { bubbles: true, detail: { name: name, value: v } }));
-      }
-      opts.forEach(function (o, i) {
-        on(o, 'click', function () { pick(o, false, true); });
-        on(o, 'keydown', function (e) {
-          var n = opts.length, k = { ArrowRight: i + 1, ArrowDown: i + 1, ArrowLeft: i - 1 + n, ArrowUp: i - 1 + n, Home: 0, End: n - 1 }[e.key];
-          if (k === undefined || e.altKey || e.ctrlKey || e.metaKey) return;
-          e.preventDefault();
-          pick(opts[k % n], true, true);
-        });
+function segmented(ctx) {
+  each(ctx, '[data-gw-segmented]', 'segmented', function (g, on) {
+    var name = attr(g, 'data-gw-segmented', ''), opts = all('[role="radio"]', g);
+    if (!opts.length) return;
+    function pick(o, focus, said) {
+      var v = attr(o, 'value', '');
+      opts.forEach(function (x) { x.setAttribute('aria-checked', String(x === o)); x.setAttribute('tabindex', x === o ? '0' : '-1'); });
+      if (focus) o.focus();
+      all('[data-gw-show]').forEach(function (el) {
+        var own = attr(el, 'data-gw-show', '').split(/\s+/).filter(function (t) { return t.split(':')[0] === name; });
+        if (own.length) el.hidden = own.indexOf(name + ':' + v) < 0;
+      });
+      if (said) emit(g, 'gw:segmented', { name: name, value: v });
+    }
+    opts.forEach(function (o, i) {
+      on(o, 'click', function () { pick(o, false, true); });
+      on(o, 'keydown', function (e) {
+        var n = opts.length, k = { ArrowRight: i + 1, ArrowDown: i + 1, ArrowLeft: i - 1 + n, ArrowUp: i - 1 + n, Home: 0, End: n - 1 }[e.key];
+        if (k === undefined || e.altKey || e.ctrlKey || e.metaKey) return;
+        e.preventDefault();
+        pick(opts[k % n], true, true);
       });
-      pick(opts.filter(function (o) { return attr(o, 'aria-checked', '') === 'true'; })[0] || opts[0]);
     });
-  }
+    pick(opts.filter(function (o) { return attr(o, 'aria-checked', '') === 'true'; })[0] || opts[0]);
+    return {};
+  });
+}
 
-  // A busy button (aria-busy="true") ignores presses, by mouse or keyboard: no double submit. It keeps its focus and name.
-  function busy() {
-    on(doc, 'click', function (e) {
-      var b = e.target.closest && e.target.closest('.gw-btn[aria-busy="true"]');
-      if (b) { e.preventDefault(); e.stopPropagation(); }
-    }, true);
-  }
+function install() {
+  doc = document; root = doc.documentElement; mine = new WeakSet();
+  fine = mq('(hover: hover) and (pointer: fine)'); sys = mq('(prefers-color-scheme: dark)');
+  var wide = mq('(min-width: 1080px)'), stored = null;
+  on(doc, 'click', function (e) { if (megaOpen && !inside(megaOpen, e.target)) hideMega(); });
+  on(doc, 'keydown', function (e) { if (megaOpen && esc(e)) hideMega(inside(megaOpen, doc.activeElement) || megaOpen.mode === 'click'); });
+  on(doc, 'keydown', function (e) { if (esc(e)) closeMenus(true); });
+  watch(wide, function () { if (wide.matches) closeMenus(); });
+  on(window, 'pageshow', function (e) { if (e.persisted) closeMenus(); });
+  try { stored = localStorage.getItem('gw-theme'); } catch (e) { /* blocked */ }
+  if (!root.hasAttribute('data-theme') && /^(light|dark)$/.test(stored)) root.setAttribute('data-theme', stored);
+  watch(sys, function () { relabel(); if (!root.hasAttribute('data-theme')) emit(root, 'gw:theme', { theme: dark() ? 'dark' : 'light' }); });
+  on(window, 'scroll', function () { if (!queued) { queued = true; requestAnimationFrame(scrolled); } }, { passive: true });
+  on(doc, 'click', function (e) {
+    var b = e.target.closest && e.target.closest('.gw-btn[aria-busy="true"]');
+    if (b) { e.preventDefault(); e.stopPropagation(); }
+  }, true);
+}
 
-  function init() {
-    [mega, mobile, theme, reveal, header, current, segmented, busy].forEach(function (f) {
-      try { f(); } catch (e) { console.error('[gw-website]', e); }
-    });
-  }
-  if (doc.readyState === 'loading') on(doc, 'DOMContentLoaded', init); else init();
+function run(fns, ctx) {
+  fns.forEach(function (f) { try { f(ctx); } catch (e) { console.error('[gw-website]', e); } });
+}
+function other() { var g = typeof window != 'undefined' && window.gwWebsite; return g && g !== api && g; }
+
+/** Wires the kit's markup under root (default: the whole document). Safe to call again: wires only what is new. */
+function init(ctx) {
+  if (typeof document == 'undefined') return;
+  var g = other();
+  if (g) return g.init && g.init(ctx);
+  window.gwWebsite = api;
+  if (!doc) run([install]);
+  live.slice().forEach(function (r) { if (r.el.isConnected === false) drop(r); });
+  run([mega, mobile, theme, reveal, header, current, segmented], ctx && ctx.querySelectorAll ? ctx : doc);
+}
+
+/** Takes back what init() wired under root (default: the whole document): listeners and data-gw-ready marks. */
+function destroy(ctx) {
+  var g = other();
+  if (g) return g.destroy && g.destroy(ctx);
+  if (!doc) return;
+  ctx = ctx && ctx.querySelectorAll ? ctx : doc;
+  live.slice().forEach(function (r) { if (ctx === doc || ctx.contains(r.el)) drop(r); });
+}
+
+window.gwWebsite = api;
+if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', function () { init(); }); else init();
 })();