@jungherz-de/glasskit-elements 1.26.0 → 1.28.0

package/dist/components/glk-tab-bar.js

@@ -1,9 +1,16 @@
 import { GlkElement } from './base.js';
+import { a as attachDroplet } from './shared/glasskit-droplet-3vJVXB3u.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
+// droplet (since 1.27.0): the active item sits on a drop of glass that glides
+// to the next one and can be dragged — GlassKit's .glass-tab-bar--droplet,
+// moved by its glasskit-droplet.js. The items live in shadow roots of their
+// own, so the bar hands its state down to them (see glk-tab-item _syncBar)
+// and tells the drop when the active item changed.
+
 class GlkTabBar extends GlkElement {
   static get observedAttributes() {
-    return ['static', 'floating'];
+    return ['static', 'floating', 'droplet'];
   }
 
   render() {
@@ -15,6 +22,7 @@ class GlkTabBar extends GlkElement {
     if (this.getBoolAttr('floating')) {
       nav.classList.add('glass-tab-bar--floating');
     }
+    nav.classList.toggle('glass-tab-bar--droplet', this.getBoolAttr('droplet'));
 
     if (this.getBoolAttr('static')) {
       this._applyStatic();
@@ -27,6 +35,10 @@ class GlkTabBar extends GlkElement {
       this._applyStatic();
     } else if (name === 'floating') {
       this._nav.classList.toggle('glass-tab-bar--floating', this.getBoolAttr('floating'));
+      this._syncItems();
+    } else if (name === 'droplet') {
+      this._nav.classList.toggle('glass-tab-bar--droplet', this.getBoolAttr('droplet'));
+      this._applyDroplet();
     }
   }
 
@@ -35,24 +47,79 @@ class GlkTabBar extends GlkElement {
     this._nav.style.borderRadius = '16px';
   }
 
-  setupEvents() {
-    // Listen for tab selection events from child glk-tab-item elements
-    this._onTabSelect = (e) => {
-      // Deactivate all other tabs
-      const items = this.querySelectorAll('glk-tab-item');
-      items.forEach(item => {
-        if (item !== e.target) {
-          item.removeAttribute('active');
-        }
-      });
-      this.emit('glk-tab-change', { tab: e.target });
+  _items() {
+    return [...this.children].filter(el => el.localName === 'glk-tab-item');
+  }
+
+  /** Hands the bar's floating and droplet state to every item's wrapper. */
+  _syncItems() {
+    const state = {
+      floating: this.getBoolAttr('floating'),
+      droplet: this.getBoolAttr('droplet'),
+      placed: Boolean(this._nav?.hasAttribute('data-droplet')),
+      drag: Boolean(this._nav?.hasAttribute('data-droplet-drag')),
     };
-    this.addEventListener('glk-tab-select', this._onTabSelect);
+    for (const item of this._items()) item._syncBar?.(state);
+  }
+
+  /** Called by an item that rendered or changed its active state. */
+  _itemChanged() {
+    this._syncItems();
+    this._droplet?.update();
+  }
+
+  _applyDroplet() {
+    const on = this.getBoolAttr('droplet') && this.isConnected;
+    if (on && !this._droplet) {
+      // The drop measures and marks the items' own buttons; picking one clicks
+      // it, which is what a tap does.
+      this._droplet = attachDroplet(this._nav, {
+        items: () => this._items().map(item => item._btn).filter(Boolean),
+      });
+    } else if (!on && this._droplet) {
+      this._droplet.destroy();
+      this._droplet = null;
+    }
+    this._syncItems();
+  }
+
+  /**
+   * Called by an item the user selected once its glk-tab-select went through
+   * uncancelled; the item is active already. Until 1.27.0 the bar did this
+   * while the event was still on its way, so a listener further up could not
+   * have kept the current tab.
+   */
+  _selected(tab) {
+    for (const item of this.querySelectorAll('glk-tab-item')) {
+      if (item !== tab) item.removeAttribute('active');
+    }
+    this.emit('glk-tab-change', { tab });
+  }
+
+  setupEvents() {
+    // The drop's state lives on the nav; the items carry it on their wrappers.
+    this._navObserver = new MutationObserver(() => this._syncItems());
+    this._navObserver.observe(this._nav, { attributes: true, attributeFilter: ['data-droplet', 'data-droplet-drag'] });
+    // Items added or removed.
+    this._itemObserver = new MutationObserver(() => this._itemChanged());
+    this._itemObserver.observe(this, { childList: true });
+    this._applyDroplet();
   }
 
   teardownEvents() {
-    this.removeEventListener('glk-tab-select', this._onTabSelect);
+    this._navObserver?.disconnect();
+    this._itemObserver?.disconnect();
+    this._droplet?.destroy();
+    this._droplet = null;
   }
+
+  // Properties as well (since 1.28.0): `bar.droplet = true` set an own
+  // property before and changed nothing.
+  get floating() { return this.getBoolAttr('floating'); }
+  set floating(v) { this.setBoolAttr('floating', v); }
+
+  get droplet() { return this.getBoolAttr('droplet'); }
+  set droplet(v) { this.setBoolAttr('droplet', v); }
 }
 
 customElements.define('glk-tab-bar', GlkTabBar);

package/dist/components/glk-tab-item.js

@@ -1,6 +1,19 @@
 import { GlkElement } from './base.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
+// The icon: an inline <svg> child is copied into the shadow root, where
+// GlassKit's rules reach it. Anything else — a font icon such as Material
+// Icons, an <img>, an element of the page's own — goes into slot="icon"
+// (since 1.28.0) and takes the state colour from GlassKit's icon box: active,
+// hover, the lens of the drop and the drag. With a slotted icon no SVG is
+// copied.
+//
+// glk-tab-select (cancelable since 1.28.0) comes before `active` changes:
+// preventDefault() keeps the current tab — for an item that opens a drawer
+// or a link — and the bar then neither moves `active` nor its drop, nor
+// emits glk-tab-change. A drag of the drop that ends on the item clicks it,
+// so it takes the same path.
+
 class GlkTabItem extends GlkElement {
   static get observedAttributes() {
     return ['label', 'active', 'badge'];
@@ -12,8 +25,10 @@ class GlkTabItem extends GlkElement {
     this._btn = this.createElement('button', ['glass-tab-bar__item']);
     if (this.getBoolAttr('active')) this._btn.classList.add('is-active');
 
-    // Icon — clone SVG from light DOM into shadow DOM so GlassKit CSS applies
+    // Icon — clone SVG from light DOM into shadow DOM so GlassKit CSS applies,
+    // or show what is slotted as icon
     this._iconEl = this.createElement('span', ['glass-tab-bar__icon']);
+    this._iconEl.appendChild(this.createElement('slot', [], { name: 'icon' }));
 
     // Label
     this._labelEl = this.createElement('span', ['glass-tab-bar__label']);
@@ -37,7 +52,8 @@ class GlkTabItem extends GlkElement {
   }
 
   projectLightDom() {
-    const svg = this.querySelector('svg');
+    // A slotted icon wins; only without one is an <svg> copied.
+    const svg = this.querySelector(':scope > [slot="icon"]') ? null : this.querySelector('svg');
     const signature = svg ? svg.outerHTML : '';
     if (signature === this._iconSignature) return;
     this._iconSignature = signature;
@@ -63,10 +79,32 @@ class GlkTabItem extends GlkElement {
 
   setupEvents() {
     this._onClick = () => {
+      if (!this.emit('glk-tab-select', null, { cancelable: true })) return;
       this.setAttribute('active', '');
-      this.emit('glk-tab-select');
+      this.closest('glk-tab-bar')?._selected?.(this);
     };
     this._btn.addEventListener('click', this._onClick);
+    this._tellBar();
+  }
+
+  /**
+   * The bar's look reaches the item through its wrapper. GlassKit's rules for
+   * floating and droplet items are descendant selectors of the bar's classes,
+   * and this button sits in a shadow root of its own, so <glk-tab-bar> hands
+   * its state down and the wrapper carries it. Before 1.27.0 the items of a
+   * floating bar kept the fixed bar's look: no spotlight, no pill, the dot.
+   */
+  _syncBar({ floating, droplet, placed, drag }) {
+    if (!this._wrapper) return;
+    this._wrapper.classList.toggle('glass-tab-bar--floating', floating);
+    this._wrapper.classList.toggle('glass-tab-bar--droplet', droplet);
+    this._wrapper.toggleAttribute('data-droplet', placed);
+    this._wrapper.toggleAttribute('data-droplet-drag', drag);
+  }
+
+  /** Tells the bar that this item rendered or changed its active state. */
+  _tellBar() {
+    this.closest('glk-tab-bar')?._itemChanged?.();
   }
 
   teardownEvents() {
@@ -78,6 +116,7 @@ class GlkTabItem extends GlkElement {
     switch (name) {
       case 'active':
         this._btn.classList.toggle('is-active', this.getBoolAttr('active'));
+        this._tellBar();
         break;
       case 'label':
         this._labelEl.textContent = this.getAttribute('label') || '';

package/dist/components/shared/glasskit-droplet-3vJVXB3u.js

@@ -0,0 +1,237 @@
+// ============================================================
+// GlassKit – Droplet
+//
+// The motion behind .glass-tab-bar--droplet and .glass-segmented--droplet.
+// The stylesheet draws the drop of glass; this module puts it on the chosen
+// item, lets it run to a new one, and lets a finger drag it along the row.
+// Optional and dependency-free: without it a --droplet row keeps its usual
+// look, the tab bar its spotlight and the segmented row its raised option.
+//
+//   import { attachDroplets } from '@jungherz-de/glasskit/glasskit-droplet.js';
+//   attachDroplets();                    // every --droplet row in the page
+//
+//   import { attachDroplet } from '@jungherz-de/glasskit/glasskit-droplet.js';
+//   const drop = attachDroplet(row);     // one row; drop.update(), drop.destroy()
+//
+// The chosen item is the tab with .is-active or the option with
+// aria-pressed="true". The page keeps setting them its own way and the drop
+// follows. Dragged onto another item, the drop clicks it, so the page's own
+// click handler makes the choice. In a row that scrolls sideways a swipe
+// still scrolls: only the drop itself is dragged, and the row scrolls along
+// at its edges.
+//
+// It writes what glasskit.css reads: data-droplet on the row, the chosen
+// item's box as --gl-droplet-left, -right, -top and -bottom, data-droplet-dir
+// and data-droplet-lift while the drop travels, data-droplet-drag while a
+// finger holds it, and .is-under-droplet on the item below it.
+//
+// Options of attachDroplet, for rows whose items live elsewhere (GlassKit
+// Elements uses them): items() returns the items, isChosen(item) tells the
+// chosen one, choose(item) picks one, lens(item, on) marks the item below
+// the drop. Without a MutationObserver reaching the items, call update()
+// after the choice changed.
+// ============================================================
+
+const ITEMS = '.glass-tab-bar__item, .glass-segmented__item';
+const attached = new WeakMap();
+
+function attachDroplet(row, options = {}) {
+  if (attached.has(row)) return attached.get(row);
+
+  const items = options.items || (() => [...row.querySelectorAll(ITEMS)]);
+  const isChosen = options.isChosen
+    || (it => it.classList.contains('is-active') || it.getAttribute('aria-pressed') === 'true');
+  const choose = options.choose || (it => it.click());
+  const mark = options.lens || ((it, on) => it.classList.toggle('is-under-droplet', on));
+  const usable = it => !it.disabled && it.getAttribute('aria-disabled') !== 'true';
+  const scrolls = () => row.scrollWidth > row.clientWidth + 1;
+  const motion = matchMedia('(prefers-reduced-motion: no-preference)');
+  const set = (k, px) => row.style.setProperty(`--gl-droplet-${k}`, `${px}px`);
+
+  let chosen = null, left = 0, placed = null, liftTimer = 0, lensFrame = 0, edgeFrame = 0;
+  let drag = null, eatClick = false, under = null;
+
+  // The row on screen and its scale there. Rects are viewport pixels, scaled
+  // by every transform on an ancestor — an app that zooms in on start, a
+  // popover that opens from scale(0.96) — while the drop's lengths are the
+  // row's own. So distances on screen are divided by the scale: the drop
+  // sits right at rest and while such a transform runs, and nothing needs
+  // measuring again when it ends (before 1.28.0 it stayed beside the item).
+  // The layout size is the computed one under GlassKit's border-box,
+  // unscaled and nearly unrounded, else the offset size, rounded to whole
+  // pixels. A difference within that rounding is no transform: the rects
+  // are then taken as they are, as before.
+  const frame = () => {
+    const n = row.getBoundingClientRect(), cs = getComputedStyle(row);
+    const exact = cs.boxSizing === 'border-box', tolerance = exact ? 0.05 : 0.5;
+    const w = exact ? parseFloat(cs.width) : row.offsetWidth;
+    const h = exact ? parseFloat(cs.height) : row.offsetHeight;
+    const scale = (onScreen, own) => onScreen > 0 && own > 0 && Math.abs(onScreen - own) > tolerance ? onScreen / own : 1;
+    return { n, sx: scale(n.width, w), sy: scale(n.height, h) };
+  };
+  // An item's box in the row's padding box; in a row that scrolls, in its
+  // scrolled content, where the drop scrolls along with the items.
+  const boxOf = (it, f = frame()) => {
+    const r = it.getBoundingClientRect();
+    const l = (r.left - f.n.left) / f.sx - row.clientLeft + row.scrollLeft;
+    const t = (r.top - f.n.top) / f.sy - row.clientTop + row.scrollTop;
+    const height = r.height / f.sy;
+    return { left: l, width: r.width / f.sx, top: t, bottom: row.clientHeight - t - height };
+  };
+  const put = (l, width, b) => {
+    left = l;
+    set('left', l); set('right', row.clientWidth - l - width);
+    set('top', b.top); set('bottom', b.bottom);
+  };
+
+  // The usable item nearest a point of the row lights up as under a lens.
+  const lens = centre => {
+    let below = null, best = Infinity;
+    const f = centre == null ? null : frame();
+    if (f) for (const it of items()) {
+      if (!usable(it)) continue;
+      const b = boxOf(it, f), d = Math.abs(b.left + b.width / 2 - centre);
+      if (d < best) { best = d; below = it; }
+    }
+    if (below !== under) {
+      if (under) mark(under, false);
+      if (below) mark(below, true);
+      under = below;
+    }
+    return below;
+  };
+  // While the drop travels, the lens follows its centre.
+  const follow = () => {
+    cancelAnimationFrame(lensFrame);
+    const start = performance.now();
+    const step = now => {
+      if (now - start > 620) { lens(null); return; }
+      const cs = getComputedStyle(row, '::before');
+      const l = parseFloat(cs.left), r = parseFloat(cs.right);
+      lens(l + (row.clientWidth - l - r) / 2);
+      lensFrame = requestAnimationFrame(step);
+    };
+    lensFrame = requestAnimationFrame(step);
+  };
+
+  const place = (it, travel) => {
+    const b = boxOf(it);
+    row.dataset.droplet = '';
+    if (travel && motion.matches && Math.abs(b.left - left) > 1) {
+      row.dataset.dropletDir = b.left > left ? 'right' : 'left';
+      row.dataset.dropletLift = '';
+      clearTimeout(liftTimer);
+      liftTimer = setTimeout(() => { delete row.dataset.dropletLift; }, 280);
+      follow();
+    } else {
+      delete row.dataset.dropletDir;
+    }
+    put(b.left, b.width, b);
+    placed = { ...b, rowWidth: row.clientWidth, rowHeight: row.clientHeight };
+    chosen = it;
+  };
+
+  // Follow the choice. Nothing chosen, no drop. A new item is watched for
+  // its size too; a size that changed moves the drop without a journey.
+  const update = () => {
+    for (const it of items()) if (!watched.has(it)) { watched.add(it); ro.observe(it); }
+    const it = items().find(isChosen);
+    if (!it) {
+      if (chosen) { chosen = null; placed = null; delete row.dataset.droplet; }
+      return;
+    }
+    if (it !== chosen) place(it, chosen !== null && row.dataset.droplet !== undefined);
+  };
+  const ro = new ResizeObserver(() => {
+    if (!chosen || drag?.moved) return;
+    const b = { ...boxOf(chosen), rowWidth: row.clientWidth, rowHeight: row.clientHeight };
+    if (!placed || Object.keys(b).some(k => Math.abs(b[k] - placed[k]) > 0.5)) place(chosen, false);
+  });
+  const watched = new Set();
+  ro.observe(row);
+  const mo = new MutationObserver(update);
+  mo.observe(row, { subtree: true, childList: true, attributes: true, attributeFilter: ['class', 'aria-pressed'] });
+
+  // Dragging: past 8px the drop slides under the finger and grows into a
+  // lens; let go, the item below it is chosen and the drop settles on it.
+  const at = clientX => {
+    const f = frame();
+    const x = (clientX - f.n.left) / f.sx - row.clientLeft + row.scrollLeft;
+    const boxes = items().map(it => boxOf(it, f));
+    const min = Math.min(...boxes.map(b => b.left));
+    const max = Math.max(...boxes.map(b => b.left + b.width)) - drag.width;
+    return Math.min(max, Math.max(min, x - drag.width / 2));
+  };
+  const track = () => {
+    const l = at(drag.clientX);
+    put(l, drag.width, boxOf(chosen));
+    drag.below = lens(l + drag.width / 2);
+    cancelAnimationFrame(edgeFrame);
+    if (!scrolls()) return;
+    const n = row.getBoundingClientRect(), zone = 32;
+    const v = drag.clientX < n.left + zone ? -1 : drag.clientX > n.right - zone ? 1 : 0;
+    if (v) edgeFrame = requestAnimationFrame(() => { row.scrollLeft += v * 6; if (drag?.moved) track(); });
+  };
+  const down = e => {
+    if (!chosen || drag || !usable(chosen) || (e.pointerType === 'mouse' && e.button !== 0)) return;
+    if (scrolls() && !e.composedPath().includes(chosen)) return;
+    drag = { id: e.pointerId, x: e.clientX, clientX: e.clientX, width: boxOf(chosen).width, moved: false, below: null };
+  };
+  const move = e => {
+    if (!drag || e.pointerId !== drag.id) return;
+    drag.clientX = e.clientX;
+    if (!drag.moved) {
+      if (Math.abs(e.clientX - drag.x) < 8) return;
+      drag.moved = true;
+      row.setPointerCapture(e.pointerId);
+      delete row.dataset.dropletDir;
+      row.dataset.dropletDrag = '';
+    }
+    track();
+  };
+  const up = e => {
+    if (!drag || e.pointerId !== drag.id) return;
+    const d = drag;
+    drag = null;
+    cancelAnimationFrame(edgeFrame);
+    if (!d.moved) return;                         // a tap: the item's own click does it
+    delete row.dataset.dropletDrag;
+    lens(null);
+    const target = d.below || chosen;
+    if (e.type === 'pointerup' && target !== chosen) choose(target);
+    // Settle where the choice is, unless it already set the drop on its way.
+    const next = items().find(isChosen) || chosen;
+    if (next !== chosen || row.dataset.dropletDir === undefined) place(next, true);
+    eatClick = true;                              // the click the drag ends in
+    setTimeout(() => { eatClick = false; }, 400);
+  };
+  const click = e => { if (eatClick) { eatClick = false; e.stopPropagation(); e.preventDefault(); } };
+  row.addEventListener('pointerdown', down);
+  row.addEventListener('pointermove', move);
+  row.addEventListener('pointerup', up);
+  row.addEventListener('pointercancel', up);
+  row.addEventListener('click', click, true);
+
+  update();
+
+  const handle = {
+    update,
+    destroy() {
+      mo.disconnect(); ro.disconnect();
+      clearTimeout(liftTimer); cancelAnimationFrame(lensFrame); cancelAnimationFrame(edgeFrame);
+      row.removeEventListener('pointerdown', down);
+      row.removeEventListener('pointermove', move);
+      row.removeEventListener('pointerup', up);
+      row.removeEventListener('pointercancel', up);
+      row.removeEventListener('click', click, true);
+      lens(null);
+      for (const k of ['droplet', 'dropletDir', 'dropletLift', 'dropletDrag']) delete row.dataset[k];
+      for (const k of ['left', 'right', 'top', 'bottom']) row.style.removeProperty(`--gl-droplet-${k}`);
+      attached.delete(row);
+    },
+  };
+  attached.set(row, handle);
+  return handle;
+}
+
+export { attachDroplet as a };