@jungherz-de/glasskit-elements 1.27.0 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/glasskit-elements",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "description": "Vanilla JavaScript Web Components wrapping the GlassKit CSS glassmorphism library",
   "license": "MIT",
   "homepage": "https://glasskit-elements.jungherz.com",
@@ -49,10 +49,10 @@
     "vanilla-js"
   ],
   "peerDependencies": {
-    "@jungherz-de/glasskit": ">=1.27.0"
+    "@jungherz-de/glasskit": ">=1.28.0"
   },
   "devDependencies": {
-    "@jungherz-de/glasskit": "^1.27.0",
+    "@jungherz-de/glasskit": "^1.28.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
     "rollup": "^4.0.0"

package/src/base.js

@@ -209,8 +209,9 @@ export class GlkElement extends HTMLElement {
   /**
    * Opt in when the component copies light-DOM children into its shadow tree.
    * A MutationObserver then calls projectLightDom() again whenever those
-   * children change, so a framework that swaps them keeps the rendered element
-   * in step. Without it the copy is made once and silently goes stale.
+   * children change — their content and, since 1.28.0, their attributes — so
+   * a framework that swaps them or only binds `disabled` keeps the rendered
+   * element in step. Without it the copy is made once and silently goes stale.
    */
   static get observesLightDom() { return false; }
 
@@ -272,8 +273,13 @@ export class GlkElement extends HTMLElement {
 
     if (this.constructor.observesLightDom) {
       this._lightDomObserver ??= new MutationObserver(records => this.projectLightDom(records));
+      // Attributes too: the copies show them. Until 1.27.0 a modal action
+      // that started disabled stayed disabled in its copy after the page
+      // enabled it, and the dialog could not be confirmed. The elements'
+      // own projectLightDom() compare a signature first, so a change
+      // elsewhere in the content costs a string comparison.
       this._lightDomObserver.observe(this, {
-        childList: true, subtree: true, characterData: true
+        childList: true, subtree: true, characterData: true, attributes: true
       });
     }
   }

package/src/components/feedback/glk-modal.js

@@ -23,6 +23,33 @@ function reducedMotion() {
   return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
 
+// The copies carry no inline handlers (onclick="…"): a click on a copy is
+// handed to its original, and until 1.28.0 such a handler ran twice.
+const isHandler = name => name.startsWith('on');
+
+function copyOf(node) {
+  const copy = node.cloneNode(true);
+  if (copy.nodeType === Node.ELEMENT_NODE) {
+    for (const el of [copy, ...copy.querySelectorAll('*')]) {
+      for (const { name } of [...el.attributes]) if (isHandler(name)) el.removeAttribute(name);
+    }
+  }
+  return copy;
+}
+
+/** Gives an action's copy the attributes and the content of its original. */
+function mirror(copy, original) {
+  for (const { name } of [...copy.attributes]) {
+    if (!original.hasAttribute(name)) copy.removeAttribute(name);
+  }
+  for (const { name, value } of original.attributes) {
+    if (!isHandler(name) && copy.getAttribute(name) !== value) copy.setAttribute(name, value);
+  }
+  if (copy.innerHTML !== original.innerHTML) {
+    copy.replaceChildren(...[...original.childNodes].map(copyOf));
+  }
+}
+
 class GlkModal extends GlkElement {
   static get observedAttributes() {
     return ['open', 'title'];
@@ -68,9 +95,18 @@ class GlkModal extends GlkElement {
     if (signature === this._footerSignature) return;
     this._footerSignature = signature;
 
+    // As many actions as copies: each copy takes its original's attributes
+    // and content in place, so the one that has the focus keeps it — a
+    // confirm button that the page enables, or relabels while it works.
+    const copies = [...this._footer.children];
+    if (copies.length === buttons.length) {
+      buttons.forEach((btn, i) => mirror(copies[i], btn));
+      return;
+    }
+
     this._footer.innerHTML = '';
     buttons.forEach((btn, i) => {
-      const clone = btn.cloneNode(true);
+      const clone = copyOf(btn);
       // Look the original up again at click time instead of closing over it: a
       // framework that re-renders replaces the node, and a captured reference
       // would then forward the click to a button no longer in the document.

package/src/components/forms/glk-segmented.js

@@ -12,9 +12,16 @@ import { attachDroplet } from '@jungherz-de/glasskit/glasskit-droplet.js';
 //             disabled (the whole row; since 1.22.3, as is a disabled
 //             fieldset around it), droplet (since 1.27.0: the chosen option
 //             sits on a drop of glass that glides to the next one and can be
-//             dragged — GlassKit's .glass-segmented--droplet)
+//             dragged — GlassKit's .glass-segmented--droplet), icon-only
+//             (since 1.28.0: the options show their icons alone, each label
+//             becomes the button's aria-label and title — GlassKit's
+//             .glass-segmented--icons)
 // Properties: value, options (array or JSON text), full, overflow, label,
-//             disabled, droplet
+//             disabled, droplet, iconOnly
+// Slots:      icon-<value> (since 1.28.0) — the icon of the option with that
+//             value: an <svg>, a font icon, an <img>. It sits in GlassKit's
+//             .glass-segmented__icon before the label and takes the option's
+//             colour; an option without one has no icon box.
 // Event:      glk-change { value } — only on a change made by the user
 // Part:       group
 //
@@ -43,7 +50,7 @@ function parseList(json) {
 }
 
 class GlkSegmented extends GlkFormElement {
-  static get observedAttributes() { return ['options', 'value', 'full', 'overflow', 'label', 'droplet']; }
+  static get observedAttributes() { return ['options', 'value', 'full', 'overflow', 'label', 'droplet', 'icon-only']; }
 
   // A row of buttons with one tab stop: delegated focus would land on the
   // first button, not the chosen one.
@@ -60,20 +67,39 @@ class GlkSegmented extends GlkFormElement {
 
   _build() {
     this._group.replaceChildren();
+    const iconOnly = this.iconOnly;
     for (const option of parseList(this.getAttribute('options'))) {
       const value = String(option.value ?? '');
+      const label = String(option.label ?? value);
       const button = this.createElement('button', ['glass-segmented__item'], { type: 'button', 'data-value': value });
       if (TONES.includes(option.tone)) {
         button.classList.add(`glass-segmented__item--${option.tone}`);
         button.appendChild(this.createElement('span', ['glass-segmented__dot']));
       }
-      button.appendChild(document.createTextNode(option.label ?? value));
+      // The label names the button; an icon font's text must not join it.
+      const icon = this.createElement('span', ['glass-segmented__icon'], { 'aria-hidden': 'true' });
+      icon.appendChild(this.createElement('slot', [], { name: `icon-${value}` }));
+      button.appendChild(icon);
+      if (iconOnly) {
+        button.setAttribute('aria-label', label);
+        button.title = label;
+      } else {
+        button.appendChild(document.createTextNode(label));
+      }
       this._group.appendChild(button);
     }
+    this._syncIcons();
     this.applyDisabled(this._actuallyDisabled);
     this._syncValue();
   }
 
+  /** An option shows its icon box only while an icon is slotted into it. */
+  _syncIcons() {
+    for (const slot of this._group.querySelectorAll('.glass-segmented__icon > slot')) {
+      slot.parentElement.hidden = slot.assignedElements().length === 0;
+    }
+  }
+
   /** The whole row is disabled, or an option by its own `disabled`. */
   applyDisabled(disabled) {
     const options = this.options;
@@ -95,6 +121,7 @@ class GlkSegmented extends GlkFormElement {
     const overflow = this.overflow;
     this._group.classList.toggle('glass-segmented--full', this.getBoolAttr('full'));
     this._group.classList.toggle('glass-segmented--droplet', this.getBoolAttr('droplet'));
+    this._group.classList.toggle('glass-segmented--icons', this.iconOnly);
     for (const mode of OVERFLOWS) this._group.classList.toggle(`glass-segmented--${mode}`, overflow === mode);
     this._reveal('instant');
   }
@@ -121,14 +148,18 @@ class GlkSegmented extends GlkFormElement {
       this.emit('glk-change', { value });
     };
     this._onResize = () => { if (this._group.clientWidth !== this._revealedAt) this._reveal('instant'); };
+    this._onSlotChange = () => this._syncIcons();
     this._group.addEventListener('click', this._onClick);
+    this._group.addEventListener('slotchange', this._onSlotChange);
     this._resizeObserver = new ResizeObserver(this._onResize);
     this._resizeObserver.observe(this._group);
+    this._syncIcons();
     this._applyDroplet();
   }
 
   teardownEvents() {
     this._group?.removeEventListener('click', this._onClick);
+    this._group?.removeEventListener('slotchange', this._onSlotChange);
     this._resizeObserver?.disconnect();
     this._resizeObserver = null;
     this._droplet?.destroy();
@@ -151,6 +182,7 @@ class GlkSegmented extends GlkFormElement {
       case 'full':
       case 'overflow': this._applyLayout(); break;
       case 'droplet': this._applyLayout(); this._applyDroplet(); break;
+      case 'icon-only': this._build(); this._applyLayout(); break;
       case 'label': this._applyLabel(); break;
     }
   }
@@ -173,6 +205,9 @@ class GlkSegmented extends GlkFormElement {
   get droplet() { return this.getBoolAttr('droplet'); }
   set droplet(v) { this.setBoolAttr('droplet', v); }
 
+  get iconOnly() { return this.getBoolAttr('icon-only'); }
+  set iconOnly(v) { this.setBoolAttr('icon-only', v); }
+
   get overflow() {
     const v = this.getAttribute('overflow');
     return OVERFLOWS.includes(v) ? v : '';

package/src/components/navigation/glk-tab-bar.js

@@ -82,20 +82,20 @@ class GlkTabBar extends GlkElement {
     this._syncItems();
   }
 
-  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 });
-    };
-    this.addEventListener('glk-tab-select', this._onTabSelect);
+  /**
+   * 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'] });
@@ -106,12 +106,19 @@ class GlkTabBar extends GlkElement {
   }
 
   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/src/components/navigation/glk-tab-item.js

@@ -1,5 +1,18 @@
 import { GlkElement } from '../../base.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'];
@@ -11,8 +24,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']);
@@ -36,7 +51,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;
@@ -62,8 +78,9 @@ 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();