Versie 0.2.0

client/ui/masonry.js

@@ -0,0 +1,52 @@
+// Generated, do not edit. sha256:87d755cce2f1ccb8186c668965f676f63e76de1e6021910a7efccabd9473cc5d
+export function spreidOverKolommen(hoogtes, kolommen) {
+  const n = Math.max(1, Math.floor(kolommen) || 1);
+  const som = new Array(n).fill(0);
+  return hoogtes.map(h => {
+    let k = 0;
+    for (let j = 1; j < n; j++) if (som[j] < som[k]) k = j;
+    som[k] += h;
+    return k;
+  });
+}
+
+export function kolomAantal(el) {
+  const raw = getComputedStyle(el).getPropertyValue('--cols');
+  const n = parseInt(raw, 10);
+  return Number.isFinite(n) && n > 0 ? n : 1;
+}
+
+export function layoutMasonry(host, kaartSelector = ':scope > *') {
+  const bestaande = [...host.querySelectorAll(':scope > .masonry-col')];
+  const kaarten = bestaande.length
+    ? bestaande.flatMap(c => [...c.children])
+    : [...host.querySelectorAll(kaartSelector)];
+  if (!kaarten.length) { host.replaceChildren(); return; }
+
+  const n = kolomAantal(host);
+  const kolommen = Array.from({ length: n }, () => {
+    const c = document.createElement('div');
+    c.className = 'masonry-col';
+    return c;
+  });
+  host.replaceChildren(...kolommen);
+
+  kolommen[0].append(...kaarten);
+  if (n === 1) return;
+  const hoogtes = kaarten.map(k => k.offsetHeight);
+  const doel = spreidOverKolommen(hoogtes, n);
+  kaarten.forEach((k, i) => kolommen[doel[i]].appendChild(k));
+}
+
+export function volgMasonry(host, kaartSelector) {
+  let laatste = kolomAantal(host);
+  layoutMasonry(host, kaartSelector);
+  const onResize = () => {
+    const nu = kolomAantal(host);
+    if (nu === laatste) return;
+    laatste = nu;
+    layoutMasonry(host, kaartSelector);
+  };
+  window.addEventListener('resize', onResize);
+  return () => window.removeEventListener('resize', onResize);
+}