@gemboss/website-ui 0.10.0 → 0.12.0

package/js/website.js

@@ -1,11 +1,11 @@
-/*! @gemboss/website-ui 0.10.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 */
+/*! @gemboss/website-ui 0.12.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;
 
-var version = '0.10.0';
+var version = '0.12.0';
 var api = { version: version, init: init, destroy: destroy };
-var doc, root, mine, fine, sys, wide, mid, live = [], megaOpen = null, megaTimer = 0, queued = false;
+var doc, root, mine, fine, sys, wide, desk, mid, live = [], queued = false;
 var still, lights;
 var READY = 'data-gw-ready';
 
@@ -46,46 +46,286 @@ function drop(r) {
 }
 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();
+var hydrated = new WeakSet();
+function hydrate(card) {
+  if (!card || hydrated.has(card)) return;
+  hydrated.add(card);
+  within('[data-gw-bg]', card).forEach(function (el) {
+    el.style.backgroundImage = 'url("' + attr(el, 'data-gw-bg', '') + '")';
+    el.classList.add('is-hydrated');
+  });
+  within('template[data-gw-hydrate]', card).forEach(function (t) {
+    t.parentNode.appendChild(t.content.cloneNode(true));
+    t.parentNode.classList.add('is-hydrated');
+  });
 }
-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); }
+  each(ctx, '.gw-header', 'mega', function (header, on) {
+    var items = [];
+    all('.gw-nav__item', header).forEach(function (item) {
+      var t = item.querySelector('[data-gw-mega], .gw-nav__trigger');
+      var p = t && doc.getElementById(attr(t, 'data-gw-mega', attr(t, 'aria-controls', '')));
+      if (p) items.push({ item: item, t: t, p: p, body: p.querySelector('.gw-mega__body'), foot: p.querySelector('.gw-mega__foot'),
+        grid: p.querySelector('.gw-mega__grid'), rows: all('.gw-mega__link', p), pane: p.querySelector('.gw-mega__aside') });
+    });
+    if (!items.length) return;
+    var nav = header.querySelector('.gw-nav') || header;
+    var bar = header.querySelector('.gw-header__bar') || header;
+    var mk = function (tag, cls) { var n = doc.createElement(tag); n.className = cls; n.setAttribute('aria-hidden', 'true'); return n; };
+    var scrim = mk('div', 'gw-scrim'), bg = mk('div', 'gw-mega-surface'), caret = mk('div', 'gw-mega-caret'), pill = mk('span', 'gw-nav__pill');
+    var made = [scrim, bg, caret, pill], cards = new Map(), cur = null, openT = 0, closeT = 0, pvT = 0, pvTok = 0, quiet = false, rec;
+    doc.body.appendChild(scrim);
+    header.appendChild(pill);
+    header.appendChild(bg);
+    header.appendChild(caret);
+    header.classList.add('has-mega');
+    items.forEach(function (m) {
+      m.hid = m.p.hidden;
+      m.p.hidden = false;
+      m.p.inert = true;
+      m.feat = m.pane && m.pane.querySelector('.gw-mega__card');
+    });
+    var still2 = function () { return still.matches; };
+    function snap(els, fn) {
+      els.forEach(function (n) { if (n) n.style.transition = 'none'; });
+      fn();
+      void header.offsetWidth;
+      els.forEach(function (n) { if (n) n.style.transition = ''; });
+    }
+    function cardFor(m, row) {
+      var k = attr(row, 'data-gw-preview', '');
+      if (k === 'feature') return m.feat || null;
+      if (cards.has(row)) return cards.get(row);
+      var tpl = k && doc.getElementById(k);
+      if (!tpl || !tpl.content || !m.pane) return null;
+      var a = doc.createElement('a'), art = doc.createElement('span'), txt = doc.createElement('span'), go = doc.createElement('span');
+      var b = row.querySelector('b'), t = b ? b.cloneNode(true) : doc.createElement('b'), line = row.querySelector('i');
+      a.className = 'gw-mega__card';
+      a.href = attr(row, 'href', '#');
+      if (row.rel) a.rel = row.rel;
+      a.tabIndex = -1;
+      a.setAttribute('aria-hidden', 'true');
+      within('[aria-hidden="true"]', t).forEach(function (n) { if (n !== t) n.remove(); });
+      go.className = 'gw-mega__go';
+      go.textContent = /^https?:/.test(a.getAttribute('href')) ? '\u2197' : '\u2192';
+      t.appendChild(go);
+      art.className = 'gw-mega__art';
+      art.appendChild(tpl.content.cloneNode(true));
+      txt.className = 'gw-mega__card-text';
+      txt.appendChild(t);
+      if (line) txt.appendChild(line.cloneNode(true));
+      a.appendChild(art);
+      a.appendChild(txt);
+      m.pane.appendChild(a);
+      cards.set(row, a);
+      return a;
+    }
+    function build(m) {
+      if (m.built) return;
+      m.built = true;
+      if (m.grid) { m.hl = mk('span', 'gw-mega__hl'); m.grid.insertBefore(m.hl, m.grid.firstChild); made.push(m.hl); }
+      hydrate(m.feat);
+      if (m.pane && !m.feat && m.rows[0]) m.feat = cardFor(m, m.rows[0]);
+      var idle = window.requestIdleCallback || function (f) { return setTimeout(f, 200); };
+      if (m.pane) idle(function () { if (header.classList.contains('has-mega')) m.rows.forEach(function (row) { cardFor(m, row); }); });
+    }
+    function preview(m, row, now) {
+      clearTimeout(pvT);
+      var tok = ++pvTok;
+      var go = function () {
+        var c = row ? cardFor(m, row) : m.feat;
+        if (!c || c === m.on) return;
+        var swap = function () {
+          if (tok !== pvTok || m.on === c) return;
+          if (m.on) m.on.classList.remove('is-on');
+          c.classList.add('is-on');
+          m.on = c;
+        };
+        var wait = [].filter.call(c.querySelectorAll('img'), function (i) { return !i.complete && i.decode; });
+        if (!wait.length || !window.Promise) { swap(); return; }
+        var t = setTimeout(swap, 240);
+        Promise.all(wait.map(function (i) { return i.decode().catch(function () {}); })).then(function () { clearTimeout(t); swap(); });
+      };
+      if (now) go(); else pvT = setTimeout(go, 80);
+    }
+    function light(m, row) {
+      if (!m.hl) return;
+      if (!row) { m.hl.classList.remove('is-on'); return; }
+      var place = function () {
+        m.hl.style.translate = row.offsetLeft + 'px ' + row.offsetTop + 'px';
+        m.hl.style.width = row.offsetWidth + 'px';
+        m.hl.style.height = row.offsetHeight + 'px';
+      };
+      if (m.hl.classList.contains('is-on') && !still2()) place(); else snap([m.hl], place);
+      m.hl.classList.add('is-on');
+    }
+    function movePill(t) {
+      if (!t) { pill.classList.remove('is-on'); return; }
+      var hr = header.getBoundingClientRect(), r = t.getBoundingClientRect();
+      var place = function () {
+        pill.style.translate = Math.round(r.left - hr.left) + 'px ' + Math.round(r.top - hr.top) + 'px';
+        pill.style.width = Math.round(r.width) + 'px';
+        pill.style.height = Math.round(r.height) + 'px';
+      };
+      if (pill.classList.contains('is-on') && !still2()) place(); else snap([pill], place);
+      pill.classList.add('is-on');
+    }
+    function measure() {
+      var hr = header.getBoundingClientRect(), inner = bar.getBoundingClientRect();
+      var lo = inner.left - hr.left + 8, hi = inner.right - hr.left - 8;
+      header.style.setProperty('--gw-mega-top', (header.clientHeight + 8) + 'px');
+      items.forEach(function (m) {
+        var t = m.t.getBoundingClientRect(), w = m.p.offsetWidth, h = m.p.offsetHeight;
+        var cx = t.left + t.width / 2 - hr.left;
+        var x = Math.round(Math.max(lo, Math.min(cx - w / 2, hi - w)));
+        m.x = x; m.w = w; m.h = h;
+        m.cx = Math.round(Math.max(x + 24, Math.min(cx, x + w - 24)));
+        m.p.style.left = x + 'px';
+        m.p.style.transformOrigin = (m.cx - x) + 'px 0';
       });
-      on(el, 'mouseleave', function () {
-        if (fine.matches) { clearTimeout(megaTimer); if (megaOpen === m && m.mode === 'hover') megaTimer = setTimeout(hideMega, 160); }
+    }
+    function clipTo(m, r) {
+      if (!r) return 'inset(0px 0px 0px 0px round 20px)';
+      var l = Math.max(0, r.x - m.x), rt = Math.max(0, m.x + m.w - (r.x + r.w)), b = Math.max(0, m.h - r.h);
+      return 'inset(0px ' + Math.round(rt) + 'px ' + Math.round(b) + 'px ' + Math.round(l) + 'px round 20px)';
+    }
+    function surface(m, y) {
+      bg.style.left = m.x + 'px';
+      bg.style.translate = '0px ' + y + 'px';
+      bg.style.width = m.w + 'px';
+      bg.style.height = m.h + 'px';
+      bg.style.transformOrigin = (m.cx - m.x) + 'px 0';
+      caret.style.translate = (m.cx - 6) + 'px ' + y + 'px';
+    }
+    function show(m) {
+      clearTimeout(closeT);
+      if (cur === m) return;
+      var prev = cur;
+      cur = m;
+      if (prev) {
+        prev.pinned = false;
+        prev.item.classList.remove('is-open');
+        prev.t.setAttribute('aria-expanded', 'false');
+        prev.p.inert = true;
+        emit(prev.t, 'gw:mega', { id: prev.p.id, open: false });
+      }
+      if (!m) {
+        header.classList.remove('is-mega-open');
+        scrim.classList.remove('is-on');
+        if (prev) { bg.style.translate = '0px -6px'; caret.style.translate = (prev.cx - 6) + 'px -6px'; }
+        movePill(nav.querySelector('.gw-nav__trigger:hover, .gw-nav__link:hover'));
+        return;
+      }
+      build(m);
+      records('mega', function (o) { if (o !== rec && o.open()) o.close(); });
+      preview(m, null, true);
+      light(m, null);
+      if (!prev) {
+        measure();
+        snap([bg, caret, m.p, m.body, m.foot], function () {
+          surface(m, -6);
+          m.p.style.clipPath = clipTo(m, null);
+          m.p.style.setProperty('--gw-mega-dx', '0px');
+        });
+        header.classList.add('is-mega-open');
+        surface(m, 0);
+      } else {
+        var hr = header.getBoundingClientRect(), br = bg.getBoundingClientRect();
+        var from = { x: br.left - hr.left, w: br.width, h: br.height };
+        var dir = items.indexOf(m) > items.indexOf(prev) ? 1 : -1;
+        if (!still2()) {
+          snap([m.p, m.body, m.foot], function () {
+            m.p.style.clipPath = clipTo(m, from);
+            m.p.style.setProperty('--gw-mega-dx', (dir * 8) + 'px');
+          });
+          prev.p.style.clipPath = clipTo(prev, m);
+          prev.p.style.setProperty('--gw-mega-dx', (-dir * 8) + 'px');
+        }
+        m.p.style.clipPath = clipTo(m, null);
+        m.p.style.setProperty('--gw-mega-dx', '0px');
+        surface(m, 0);
+      }
+      m.p.inert = false;
+      m.item.classList.add('is-open');
+      m.t.setAttribute('aria-expanded', 'true');
+      scrim.classList.add('is-on');
+      movePill(m.t);
+      emit(m.t, 'gw:mega', { id: m.p.id, open: true });
+    }
+    function hideSoon() { clearTimeout(openT); clearTimeout(closeT); closeT = setTimeout(function () { show(null); }, 350); }
+    items.forEach(function (m) {
+      on(m.p, 'transitionend', function (e) {
+        if (e.target === m.p && e.propertyName === 'opacity' && !m.item.classList.contains('is-open')) m.p.style.clipPath = '';
+      });
+      on(m.item, 'pointerenter', function (e) {
+        if (!desk.matches || e.pointerType === 'touch') return;
+        clearTimeout(closeT);
+        clearTimeout(openT);
+        openT = setTimeout(function () { show(m); }, cur ? 90 : 200);
+      });
+      on(m.item, 'pointerleave', function () { if (desk.matches && !m.pinned) hideSoon(); });
+      on(m.item, 'focusin', function () { if (desk.matches && !quiet) show(m); });
+      on(m.item, 'focusout', function (e) { if (desk.matches && !m.item.contains(e.relatedTarget)) hideSoon(); });
+      on(m.t, 'keydown', function (e) {
+        if (!desk.matches || e.key !== 'ArrowDown') return;
+        e.preventDefault();
+        show(m);
+        if (m.rows[0]) m.rows[0].focus();
       });
+      if (m.t.tagName === 'BUTTON') on(m.t, 'click', function () {
+        if (!desk.matches) return;
+        clearTimeout(openT);
+        if (cur === m && m.pinned) { show(null); return; }
+        show(m);
+        m.pinned = true;
+      });
+      on(m.p, 'click', function (e) { if (link(e)) show(null); });
+      m.rows.forEach(function (row) {
+        on(row, 'pointerenter', function () { if (!desk.matches || cur !== m) return; light(m, row); preview(m, row, false); });
+        on(row, 'focus', function () { if (!desk.matches) return; if (cur !== m) show(m); light(m, row); preview(m, row, true); });
+      });
+      if (m.feat && m.feat.tagName === 'A') on(m.feat, 'focus', function () { if (!desk.matches) return; light(m, null); preview(m, null, true); });
+    });
+    all('.gw-nav__trigger, .gw-nav__link', nav).forEach(function (t) {
+      on(t, 'pointerenter', function (e) { if (desk.matches && e.pointerType !== 'touch') movePill(t); });
+      on(t, 'focus', function () { if (desk.matches) movePill(t); });
     });
-    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;
+    on(nav, 'pointerleave', function () { if (desk.matches && !cur) movePill(null); });
+    on(nav, 'focusout', function (e) { if (desk.matches && !cur && !nav.contains(e.relatedTarget)) movePill(null); });
+    on(window, 'resize', function () {
+      if (!desk.matches) { show(null); movePill(null); return; }
+      if (cur) { measure(); snap([bg, caret], function () { surface(cur, 0); }); movePill(cur.t); }
+    });
+    rec = {
+      open: function () { return !!cur; },
+      has: function (el) { return !!cur && !!el && (cur.item.contains(el) || cur.p.contains(el)); },
+      close: function (focus) {
+        if (!cur) return;
+        var t = cur.t;
+        quiet = true;
+        show(null);
+        if (focus) t.focus();
+        quiet = false;
+        if (focus) movePill(t);
+      },
+      stop: function () {
+        clearTimeout(openT); clearTimeout(closeT); clearTimeout(pvT);
+        if (cur) show(null);
+        made.forEach(function (n) { n.remove(); });
+        cards.forEach(function (c) { c.remove(); });
+        items.forEach(function (m) {
+          m.p.hidden = m.hid;
+          m.p.inert = false;
+          ['left', 'transformOrigin', 'clipPath'].forEach(function (k) { m.p.style[k] = ''; });
+          m.p.style.removeProperty('--gw-mega-dx');
+          if (m.on) m.on.classList.remove('is-on');
+          m.built = false;
+        });
+        header.style.removeProperty('--gw-mega-top');
+        header.classList.remove('has-mega', 'is-mega-open');
+      }
+    };
+    return rec;
   });
 }
 
@@ -117,6 +357,7 @@ function mobile(ctx) {
         if (g === cur) return;
         cur = g;
         groups.forEach(function (x) { x.open = x === g; });
+        if (g) hydrate(g.querySelector('.gw-mega__card'));
         menu.classList.toggle('is-drilled', !!g);
         menu.classList.toggle('is-back', !g && r.open());
         menu.scrollTop = 0;
@@ -242,17 +483,41 @@ function theme(ctx) {
   relabel();
 }
 
+var REVEAL = { threshold: 0.12, margin: '0px 0px -6% 0px', stagger: 70, staggerMax: 380, failsafe: 1600, count: 1100 };
+function countUp(el) {
+  var n = el.firstChild, m = n && n.nodeType === 3 && /^(\s*\D*?)(\d[\d,]*(?:\.\d+)?)(.*)$/.exec(n.nodeValue), t0;
+  if (!m) return;
+  var num = m[2].replace(/,/g, ''), dec = (num.split('.')[1] || '').length;
+  function fmt(v) { v = v.toFixed(dec); return m[1] + (num !== m[2] ? Number(v).toLocaleString('en-US') : v) + m[3]; }
+  n.nodeValue = fmt(0);
+  requestAnimationFrame(function step(ts) {
+    var p = Math.min((ts - (t0 = t0 || ts)) / REVEAL.count, 1);
+    n.nodeValue = fmt(p < 1 ? num * (1 - Math.pow(1 - p, 3)) : +num);
+    if (p < 1) requestAnimationFrame(step);
+  });
+}
 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(); }
+  var els = [], io, calm = still.matches;
+  each(ctx, '.gw-reveal', 'reveal', function (el) {
+    els.push(el);
+    return { stop: function () { if (io) io.unobserve(el); el.style.transitionDelay = ''; } };
+  });
+  function show(el) {
+    if (el.classList.contains('is-in')) return;
+    el.classList.add('is-in');
+    if (!calm) [].forEach.call(el.querySelectorAll('[data-gw-count]'), countUp);
+  }
   if (!els.length) return;
-  if (!window.IntersectionObserver || mq('(prefers-reduced-motion: reduce)').matches) return showAll();
+  if (!window.IntersectionObserver || calm) return els.forEach(show);
+  els.forEach(function (el) {
+    var i = [].filter.call(el.parentNode.children, function (c) { return c.classList.contains('gw-reveal'); }).indexOf(el);
+    if (i > 0) el.style.transitionDelay = Math.min(i * REVEAL.stagger, REVEAL.staggerMax) + 'ms';
+  });
   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 });
+    list.forEach(function (en) { if (en.isIntersecting) { show(en.target); io.unobserve(en.target); } });
+  }, { threshold: REVEAL.threshold, rootMargin: REVEAL.margin });
   els.forEach(function (el) { io.observe(el); });
-  setTimeout(showAll, 2500);
+  setTimeout(function () { els.forEach(show); io.disconnect(); }, REVEAL.failsafe);
 }
 
 function scrolled() {
@@ -428,13 +693,15 @@ function install() {
   fine = mq('(hover: hover) and (pointer: fine)'); sys = mq('(prefers-color-scheme: dark)');
   var stored = null;
   wide = mq('(min-width: 1080px)');
+  desk = mq('(min-width: 1081px)');
   mid = mq('(min-width: 621px)');
-  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, 'click', function (e) { records('mega', function (r) { if (r.open() && !r.has(e.target)) r.close(); }); });
+  on(doc, 'keydown', function (e) { if (esc(e)) records('mega', function (r) { if (r.open()) r.close(true); }); });
   on(doc, 'keydown', function (e) { if (esc(e)) closeMenus(true); });
   on(doc, 'keydown', function (e) { if (e.key === 'Tab') records('menu', function (r) { if (r.trap && r.open()) r.trap(e); }); });
   on(doc, 'click', function (e) { records('lang', function (r) { if (r.open() && !r.el.contains(e.target)) r.set(false); }); });
-  watch(wide, function () { if (wide.matches) closeMenus(); records('toc', function (r) { r.fit(); }); });
+  watch(wide, function () { records('toc', function (r) { r.fit(); }); });
+  watch(desk, function () { if (desk.matches) closeMenus(); });
   watch(mid, function () { records('fold', function (r) { r.fit(); }); });
   still = mq('(prefers-reduced-motion: reduce)');
   var css = window.CSS;