Versie 0.2.0

client/ui/filter.js

@@ -0,0 +1,52 @@
+// Generated, do not edit. sha256:8ff8b9a894c249281ed87f26a36d73c4e403eda8ce50d7da357c4aad90e8f817
+import { esc } from './escape.js';
+
+const DEFAULT_LABELS = Object.freeze({ all: 'All', none: 'None' });
+let labels = { ...DEFAULT_LABELS };
+
+export function configureFilter({ labels: l = null } = {}) {
+  labels = { ...DEFAULT_LABELS, ...(l || {}) };
+}
+
+export function resolveSelection({ saved, items, initial }) {
+  const ids = items.map(i => i.id);
+  const valid = new Set(ids);
+  if (Array.isArray(saved)) {
+    const kept = saved.filter(id => valid.has(id));
+    if (kept.length || saved.length === 0) return new Set(kept);
+  }
+  const init = initial ? [...initial(items)].filter(id => valid.has(id)) : ids;
+  return new Set(init.length ? init : ids);
+}
+
+export function create(host, opts) {
+  const items = opts.items || [];
+  const selected = opts.selected instanceof Set ? opts.selected : new Set(opts.selected || []);
+  const dis = opts.disabled ? ' disabled' : '';
+  const collapsedIds = opts.collapsedIds instanceof Set ? opts.collapsedIds : new Set();
+
+  host.classList.add('fbar', 'fbar--chip', ...(opts.className ? opts.className.split(' ') : []));
+
+  const allOn = items.every(i => selected.has(i.id));
+  const act = `<button type="button" class="fbar-item fbar-act" data-fact${dis}>${esc(allOn ? labels.none : labels.all)}</button>`;
+
+  const btn = (i, idx) =>
+    `<button type="button" class="fbar-item${selected.has(i.id) ? ' is-on' : ''}${collapsedIds.has(i.id) ? ' is-collapsed' : ''}" data-fi="${idx}" title="${esc(i.title || i.label)}"${dis}>${esc(i.label)}</button>`;
+
+  host.innerHTML = act + items.map(btn).join('');
+
+  host.onclick = (e) => {
+    if (opts.disabled) return;
+    if (e.target.closest('[data-fact]')) {
+      opts.onChange(allOn ? new Set() : new Set(items.map(i => i.id)));
+      return;
+    }
+    const b = e.target.closest('[data-fi]');
+    if (!b) return;
+    const id = items[Number(b.dataset.fi)].id;
+    if (typeof opts.onCycle === 'function') { opts.onCycle(id); return; }
+    const next = new Set(selected);
+    if (next.has(id)) next.delete(id); else next.add(id);
+    opts.onChange(next);
+  };
+}