@jungherz-de/glasskit-elements 1.15.2 → 1.16.1

package/src/components/forms/glk-image-picker.js

@@ -0,0 +1,173 @@
+import { GlkElement } from '../../base.js';
+
+// One image with a preview, resized on the client before it goes anywhere.
+// Came back from EhrenPfoten in 1.16.0, where it was the photo picker.
+//
+// Attributes: src (starting image: URL or data URL), label (visible; names
+//             the group), hint (small muted line; none by default), round
+//             (circular preview, for avatars), max (longest edge after
+//             resizing, default 1024), type (output MIME, default
+//             image/jpeg; image/webp where the browser encodes it, PNG
+//             otherwise), quality (0–1, default 0.82), accept (file dialog
+//             filter, default image/*), choose-label, change-label,
+//             remove-label (button texts, English by default)
+// Property:   src — the current image as a data URL or the given URL; set
+//             it to swap the preview. Not reflected to the attribute, so a
+//             data URL of megabytes never lands in the DOM.
+// Events:     glk-change { dataUrl, width, height, size } — after a pick;
+//             on remove with an empty dataUrl and zeros
+//             glk-error { message, name } — when the file cannot be decoded
+//             (Chrome cannot read HEIC; a corrupt file)
+// Parts:      picker, preview, meta, label, hint, actions
+//
+// Decoding goes through createImageBitmap with imageOrientation 'from-image',
+// which applies the EXIF rotation of a phone photo without a library, then
+// onto a canvas no larger than max. The file input is hidden and opened from
+// a real button — a <label> around a hidden input cannot be reached by
+// keyboard — and cleared after every pick, so the same file can be chosen
+// again. Not form-associated: the form value would be either the original
+// file, which is not what gets uploaded, or a data URL of megabytes. Listen
+// to glk-change and upload, or copy the data URL into a hidden field.
+
+const PLACEHOLDER = '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 15l-5-4-8 8"/></svg>';
+
+function dataUrlBytes(url) {
+  const b64 = url.slice(url.indexOf(',') + 1);
+  const padding = b64.endsWith('==') ? 2 : b64.endsWith('=') ? 1 : 0;
+  return Math.floor((b64.length * 3) / 4) - padding;
+}
+
+class GlkImagePicker extends GlkElement {
+  static get observedAttributes() {
+    return ['src', 'label', 'hint', 'round', 'max', 'type', 'quality', 'accept', 'choose-label', 'change-label', 'remove-label'];
+  }
+
+  constructor() {
+    super();
+    this._src = '';
+  }
+
+  render() {
+    this._src = this.getAttribute('src') || '';
+    this._root = this.createElement('div', ['glass-image-picker'], { part: 'picker', role: 'group' });
+    this._preview = this.createElement('div', ['glass-image-picker__preview'], { part: 'preview' });
+    const meta = this.createElement('div', ['glass-image-picker__meta'], { part: 'meta' });
+    this._label = this.createElement('span', ['glass-image-picker__label'], { part: 'label', id: 'label' });
+    this._hint = this.createElement('span', ['glass-image-picker__hint'], { part: 'hint', id: 'hint' });
+    const actions = this.createElement('div', ['glass-image-picker__actions'], { part: 'actions' });
+    this._choose = this.createElement('button', ['glass-btn', 'glass-btn--secondary', 'glass-btn--sm', 'glass-btn--auto'], { type: 'button' });
+    this._remove = this.createElement('button', ['glass-btn', 'glass-btn--tertiary', 'glass-btn--sm', 'glass-btn--auto'], { type: 'button' });
+    this._input = this.createElement('input', [], { type: 'file', tabindex: '-1' });
+    this._input.hidden = true;
+    actions.append(this._choose, this._remove, this._input);
+    meta.append(this._label, this._hint, actions);
+    this._root.append(this._preview, meta);
+    this._wrapper.appendChild(this._root);
+    this._update();
+  }
+
+  get _max() { return Math.max(1, Math.floor(Number(this.getAttribute('max'))) || 1024); }
+  get _type() { return this.getAttribute('type') || 'image/jpeg'; }
+  get _quality() {
+    const q = Number(this.getAttribute('quality'));
+    return this.hasAttribute('quality') && q >= 0 && q <= 1 ? q : 0.82;
+  }
+
+  _update() {
+    if (!this._root) return;
+    const label = this.getAttribute('label') || '';
+    const hint = this.getAttribute('hint') || '';
+    this._preview.classList.toggle('glass-image-picker__preview--round', this.getBoolAttr('round'));
+    if (!this._src) {
+      this._img = null;
+      this._preview.innerHTML = PLACEHOLDER;
+    } else if (!this._img || this._img.getAttribute('src') !== this._src) {
+      this._img = this.createElement('img', [], { alt: '', src: this._src });
+      this._preview.replaceChildren(this._img);
+    }
+    this._label.textContent = label;
+    this._label.hidden = !label;
+    this._hint.textContent = hint;
+    this._hint.hidden = !hint;
+    if (label) this._root.setAttribute('aria-labelledby', 'label');
+    else this._root.removeAttribute('aria-labelledby');
+    if (hint) this._root.setAttribute('aria-describedby', 'hint');
+    else this._root.removeAttribute('aria-describedby');
+    this._choose.textContent = this._src
+      ? (this.getAttribute('change-label') || 'Change')
+      : (this.getAttribute('choose-label') || 'Choose');
+    this._remove.textContent = this.getAttribute('remove-label') || 'Remove';
+    this._remove.hidden = !this._src;
+    this._input.accept = this.getAttribute('accept') || 'image/*';
+  }
+
+  async _pick(file) {
+    if (!file) return;
+    try {
+      const bitmap = await createImageBitmap(file, { imageOrientation: 'from-image' });
+      const scale = Math.min(1, this._max / Math.max(bitmap.width, bitmap.height));
+      const canvas = document.createElement('canvas');
+      canvas.width = Math.max(1, Math.round(bitmap.width * scale));
+      canvas.height = Math.max(1, Math.round(bitmap.height * scale));
+      const ctx = canvas.getContext('2d');
+      if (this._type === 'image/jpeg') {
+        // JPEG has no alpha; without this a transparent PNG comes out on black.
+        ctx.fillStyle = '#fff';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      }
+      ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+      bitmap.close();
+      const dataUrl = canvas.toDataURL(this._type, this._quality);
+      this.src = dataUrl;
+      this.emit('glk-change', { dataUrl, width: canvas.width, height: canvas.height, size: dataUrlBytes(dataUrl) });
+    } catch (error) {
+      this.emit('glk-error', { message: error?.message || String(error), name: file.name });
+    }
+  }
+
+  setupEvents() {
+    this._onChoose = () => this._input.click();
+    this._onChange = (event) => {
+      const file = event.target.files?.[0];
+      event.target.value = '';
+      this._pick(file);
+    };
+    this._onRemove = () => {
+      this.src = '';
+      this._choose.focus();   // the remove button just went away under the focus
+      this.emit('glk-change', { dataUrl: '', width: 0, height: 0, size: 0 });
+    };
+    this._choose.addEventListener('click', this._onChoose);
+    this._input.addEventListener('change', this._onChange);
+    this._remove.addEventListener('click', this._onRemove);
+  }
+
+  teardownEvents() {
+    this._choose?.removeEventListener('click', this._onChoose);
+    this._input?.removeEventListener('change', this._onChange);
+    this._remove?.removeEventListener('click', this._onRemove);
+  }
+
+  onAttributeChanged(name, _old, value) {
+    if (name === 'src') this._src = value || '';
+    this._update();
+  }
+
+  get src() { return this._src; }
+  set src(v) {
+    this._src = v || '';
+    this._update();
+  }
+
+  get label() { return this.getAttribute('label') || ''; }
+  set label(v) {
+    if (v) this.setAttribute('label', v);
+    else this.removeAttribute('label');
+  }
+
+  get round() { return this.getBoolAttr('round'); }
+  set round(v) { this.setBoolAttr('round', v); }
+}
+
+customElements.define('glk-image-picker', GlkImagePicker);
+export { GlkImagePicker };

package/src/components/navigation/glk-date-strip.js

@@ -0,0 +1,178 @@
+import { GlkElement } from '../../base.js';
+import { isoDate, parseIso, addDays, parseJsonObject, resolveLocale, formatters, weekdayShort, isTone } from '../../dates.js';
+
+// A row of day chips that scrolls sideways — a booking horizon, the days
+// around today. Came back from EhrenPfoten in 1.16.0.
+//
+// Attributes: start (YYYY-MM-DD, default today), days (count, default 7),
+//             value (YYYY-MM-DD), today (YYYY-MM-DD, default the browser's
+//             day), marks (JSON {date: tone | {tone, disabled}}), locale
+//             (default the browser language), label (aria-label of the group)
+// Properties: value, marks (object or JSON text), locale, label
+// Event:      glk-change { value } — only on a change made by the user
+// Part:       strip
+//
+// The chips are buttons in a role="group" with aria-pressed on the chosen
+// one, like <glk-segmented>; each chip is named with its full date, so a
+// screen reader hears "Monday, 22 September 2026" rather than "Mo 22". One
+// tab stop: arrow keys move between chips, Home/End jump to the ends, Enter
+// or Space presses. The chosen chip is scrolled to the middle of the strip
+// after the first layout and on every value change — the strip alone
+// scrolls, never the page. A value change only re-sets state; the chips are
+// rebuilt for start, days, today, marks and locale.
+
+const KEYS = { ArrowLeft: -1, ArrowRight: 1, Home: -Infinity, End: Infinity };
+
+function readMark(entry) {
+  if (isTone(entry)) return { tone: entry, disabled: false };
+  if (entry && typeof entry === 'object') return { tone: isTone(entry.tone) ? entry.tone : '', disabled: Boolean(entry.disabled) };
+  return { tone: '', disabled: false };
+}
+
+class GlkDateStrip extends GlkElement {
+  static get observedAttributes() { return ['start', 'days', 'value', 'today', 'marks', 'locale', 'label']; }
+
+  render() {
+    this._strip = this.createElement('div', ['glass-date-strip'], { role: 'group', part: 'strip' });
+    this._wrapper.appendChild(this._strip);
+    this._build();
+    this._applyLabel();
+  }
+
+  _build() {
+    const f = formatters(resolveLocale(this.getAttribute('locale')));
+    const marks = parseJsonObject(this.getAttribute('marks'));
+    const start = parseIso(this.getAttribute('start')) ?? new Date();
+    const today = this.getAttribute('today') || isoDate(new Date());
+    const count = Math.max(1, Math.floor(Number(this.getAttribute('days'))) || 7);
+    this._strip.replaceChildren();
+    for (let i = 0; i < count; i += 1) {
+      const date = addDays(start, i);
+      const iso = isoDate(date);
+      const mark = readMark(marks[iso]);
+      const chip = this.createElement('button', ['glass-date-strip__day'], { type: 'button', 'data-value': iso, 'aria-label': f.day.format(date) });
+      if (iso === today) chip.classList.add('glass-date-strip__day--today');
+      if (mark.disabled) chip.disabled = true;
+      const wd = this.createElement('span', ['glass-date-strip__wd']);
+      wd.textContent = weekdayShort(f, date);
+      const num = this.createElement('span', ['glass-date-strip__num']);
+      num.textContent = String(date.getDate());
+      const dot = this.createElement('span', ['glass-date-strip__mark']);
+      if (mark.tone) dot.classList.add(`glass-date-strip__mark--${mark.tone}`);
+      chip.append(wd, num, dot);
+      this._strip.appendChild(chip);
+    }
+    this._syncValue();
+  }
+
+  _chips() { return [...this._strip.querySelectorAll('button[data-value]')]; }
+
+  _syncValue() {
+    const value = this.value;
+    let chosen = null;
+    for (const chip of this._chips()) {
+      const pressed = chip.dataset.value === value;
+      chip.setAttribute('aria-pressed', String(pressed));
+      if (pressed) chosen = chip;
+    }
+    const chips = this._chips();
+    this._setTabStop(chosen ?? chips.find(chip => !chip.disabled) ?? chips[0]);
+    this._reveal(this._revealedAt ? 'smooth' : 'instant');
+  }
+
+  _setTabStop(target) {
+    for (const chip of this._chips()) chip.tabIndex = chip === target ? 0 : -1;
+  }
+
+  // Scroll the chosen chip to the middle of the strip. Computed from client
+  // rects and applied to the strip's own scrollLeft, so the page never moves —
+  // scrollIntoView would scroll every ancestor. Before the first layout the
+  // strip has no width; the ResizeObserver in setupEvents centres then, and
+  // again whenever the strip's width changes — a parent that upgrades later
+  // and adds its padding, a window resize, a strip that starts out hidden. A
+  // value change glides unless the user asked for reduced motion; a size
+  // change snaps, so a settling layout never animates.
+  _reveal(behavior = 'instant') {
+    const chip = this._strip.querySelector('[aria-pressed="true"]');
+    const width = this._strip.clientWidth;
+    if (!chip || !width) return;
+    const strip = this._strip.getBoundingClientRect();
+    const box = chip.getBoundingClientRect();
+    const left = this._strip.scrollLeft + (box.left - strip.left) - (strip.width - box.width) / 2;
+    const smooth = behavior === 'smooth' && !matchMedia('(prefers-reduced-motion: reduce)').matches;
+    this._strip.scrollTo({ left: Math.max(0, left), behavior: smooth ? 'smooth' : 'instant' });
+    this._revealedAt = width;
+  }
+
+  _applyLabel() {
+    const label = this.getAttribute('label');
+    if (label) this._strip.setAttribute('aria-label', label);
+    else this._strip.removeAttribute('aria-label');
+  }
+
+  setupEvents() {
+    this._onClick = (event) => {
+      const chip = event.target.closest('button[data-value]');
+      if (!chip || chip.disabled || chip.getAttribute('aria-disabled') === 'true') return;
+      this._setTabStop(chip);
+      const { value } = chip.dataset;
+      if (value === this.value) return;
+      this.value = value;
+      this.emit('glk-change', { value });
+    };
+    this._onKeydown = (event) => {
+      const step = KEYS[event.key];
+      if (step === undefined) return;
+      const chips = this._chips().filter(chip => !chip.disabled);
+      const from = chips.indexOf(event.target.closest('button[data-value]'));
+      if (from < 0) return;
+      const to = Number.isFinite(step) ? Math.min(chips.length - 1, Math.max(0, from + step)) : (step < 0 ? 0 : chips.length - 1);
+      event.preventDefault();
+      this._setTabStop(chips[to]);
+      chips[to].focus();
+    };
+    this._onResize = () => { if (this._strip.clientWidth !== this._revealedAt) this._reveal('instant'); };
+    this._strip.addEventListener('click', this._onClick);
+    this._strip.addEventListener('keydown', this._onKeydown);
+    this._resizeObserver = new ResizeObserver(this._onResize);
+    this._resizeObserver.observe(this._strip);
+  }
+
+  teardownEvents() {
+    this._strip?.removeEventListener('click', this._onClick);
+    this._strip?.removeEventListener('keydown', this._onKeydown);
+    this._resizeObserver?.disconnect();
+    this._resizeObserver = null;
+  }
+
+  onAttributeChanged(name) {
+    if (!this._strip) return;
+    if (name === 'value') this._syncValue();
+    else if (name === 'label') this._applyLabel();
+    else this._build();
+  }
+
+  get value() { return this.getAttribute('value') ?? ''; }
+  set value(v) {
+    if (v == null || v === '') this.removeAttribute('value');
+    else this.setAttribute('value', String(v));
+  }
+
+  get marks() { return parseJsonObject(this.getAttribute('marks')); }
+  set marks(v) { this.setAttribute('marks', typeof v === 'string' ? v : JSON.stringify(v ?? {})); }
+
+  get locale() { return resolveLocale(this.getAttribute('locale')); }
+  set locale(v) {
+    if (v) this.setAttribute('locale', v);
+    else this.removeAttribute('locale');
+  }
+
+  get label() { return this.getAttribute('label') || ''; }
+  set label(v) {
+    if (v) this.setAttribute('label', v);
+    else this.removeAttribute('label');
+  }
+}
+
+customElements.define('glk-date-strip', GlkDateStrip);
+export { GlkDateStrip };

package/src/dates.js

@@ -0,0 +1,74 @@
+// Date helpers shared by <glk-date-strip> and <glk-calendar>. Everything
+// works on local calendar days — a date is "YYYY-MM-DD" in the element API
+// and a local Date inside — so a day never shifts across midnight the way a
+// UTC timestamp would. Names come from Intl, keyed by the element's locale
+// attribute or the browser language.
+
+export const pad = n => String(n).padStart(2, '0');
+
+/** Local Date → "YYYY-MM-DD". */
+export const isoDate = d => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+
+/** "YYYY-MM-DD" or "YYYY-MM" → local Date, or null when unreadable. */
+export function parseIso(text) {
+  const m = /^(\d{4})-(\d{2})(?:-(\d{2}))?$/.exec(String(text ?? '').trim());
+  if (!m) return null;
+  const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3] ?? 1));
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+
+/** Days after a date; the Date constructor rolls over month and year ends. */
+export const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+
+/** A JSON object attribute → object; anything else → {}. */
+export function parseJsonObject(text) {
+  try {
+    const v = JSON.parse(text || '{}');
+    return v && typeof v === 'object' && !Array.isArray(v) ? v : {};
+  } catch {
+    return {};
+  }
+}
+
+export function resolveLocale(attr) {
+  return attr || (typeof navigator !== 'undefined' && navigator.language) || 'en';
+}
+
+// Intl formatters are cheap to keep and not to make; one set per locale.
+const cache = new Map();
+export function formatters(locale) {
+  let f = cache.get(locale);
+  if (!f) {
+    try {
+      f = {
+        weekday: new Intl.DateTimeFormat(locale, { weekday: 'short' }),
+        day: new Intl.DateTimeFormat(locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }),
+        month: new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' })
+      };
+    } catch {
+      return formatters('en');   // an unknown locale tag throws a RangeError
+    }
+    cache.set(locale, f);
+  }
+  return f;
+}
+
+/** Short weekday without the trailing dot some locales add ("Mo." → "Mo"). */
+export const weekdayShort = (f, d) => f.weekday.format(d).replace(/\.$/, '');
+
+/**
+ * First day of the week for a locale, 0 = Sunday … 6 = Saturday. Read from
+ * Intl.Locale where the browser has it (getWeekInfo(), or the older weekInfo
+ * accessor); Monday where it cannot say.
+ */
+export function firstWeekday(locale) {
+  try {
+    const loc = new Intl.Locale(locale);
+    const info = typeof loc.getWeekInfo === 'function' ? loc.getWeekInfo() : loc.weekInfo;
+    if (info && info.firstDay >= 1 && info.firstDay <= 7) return info.firstDay % 7;
+  } catch { /* no Intl.Locale, or an unknown tag */ }
+  return 1;
+}
+
+/** A tone is a short lowercase token that becomes a __mark--<tone> modifier. */
+export const isTone = v => typeof v === 'string' && /^[a-z][a-z0-9-]*$/.test(v);

package/src/index.js

@@ -15,6 +15,7 @@ export { GlkTabItem } from './components/navigation/glk-tab-item.js';
 export { GlkTabDock } from './components/navigation/glk-tab-dock.js';
 export { GlkTabAccessory } from './components/navigation/glk-tab-accessory.js';
 export { GlkSteps } from './components/navigation/glk-steps.js';
+export { GlkDateStrip } from './components/navigation/glk-date-strip.js';
 
 // Content
 export { GlkCard } from './components/content/glk-card.js';
@@ -38,6 +39,8 @@ export { GlkCheckbox } from './components/forms/glk-checkbox.js';
 export { GlkRadio } from './components/forms/glk-radio.js';
 export { GlkRange } from './components/forms/glk-range.js';
 export { GlkSegmented } from './components/forms/glk-segmented.js';
+export { GlkCalendar } from './components/forms/glk-calendar.js';
+export { GlkImagePicker } from './components/forms/glk-image-picker.js';
 
 // Feedback
 export { GlkProgress } from './components/feedback/glk-progress.js';