@dodlhuat/basix 1.2.7 → 1.2.9

package/js/gallery.ts

@@ -1,237 +0,0 @@
-import { escapeHtml } from './utils.js';
-
-interface ImageData {
-  src: string;
-  title: string;
-  desc: string;
-}
-
-interface MasonryGalleryOptions {
-  fetchFunction: () => Promise<ImageData[]>;
-  minColumnWidth?: number;
-  scrollThreshold?: number;
-  loaderSelector?: string;
-  reload?: number;
-}
-
-class MasonryGallery {
-  private container: HTMLElement;
-  private readonly loader: HTMLElement | null;
-  private options: Required<Omit<MasonryGalleryOptions, "loaderSelector">>;
-  private columns: HTMLDivElement[] = [];
-  private isFetching: boolean = false;
-  private resizeObserver: ResizeObserver | null = null;
-  private abortController: AbortController | null = null;
-  private reloaded = 0;
-
-  constructor(containerId: string, options: MasonryGalleryOptions) {
-    const container = document.getElementById(containerId);
-    if (!container) {
-      throw new Error(`Container with id "${containerId}" not found`);
-    }
-    this.container = container;
-    this.loader = document.querySelector(options.loaderSelector || ".loader");
-
-    this.options = {
-      minColumnWidth: options.minColumnWidth ?? 250,
-      scrollThreshold: options.scrollThreshold ?? 100,
-      reload: 2,
-      fetchFunction: options.fetchFunction,
-    };
-
-    this.init();
-  }
-
-  private init(): void {
-    this.setupLayout();
-    this.loadMoreImages();
-    this.addEventListeners();
-  }
-
-  private setupLayout(): void {
-    const containerWidth = this.container.getBoundingClientRect().width;
-    const numColumns = Math.max(
-      1,
-      Math.floor(containerWidth / this.options.minColumnWidth),
-    );
-
-    if (this.columns.length !== numColumns) {
-      this.container.innerHTML = "";
-      this.columns = [];
-
-      for (let i = 0; i < numColumns; i++) {
-        const col = document.createElement("div");
-        col.className = "masonry-column";
-        this.container.appendChild(col);
-        this.columns.push(col);
-      }
-    }
-  }
-
-  private addEventListeners(): void {
-    let resizeTimeout: number;
-    window.addEventListener("resize", () => {
-      clearTimeout(resizeTimeout);
-      resizeTimeout = setTimeout(() => {
-        this.reLayout();
-      }, 200);
-    });
-
-    this.abortController = new AbortController();
-    window.addEventListener("scroll", this.handleScroll, {
-      passive: true,
-      signal: this.abortController.signal,
-    });
-  }
-
-  private reLayout(): void {
-    const items: HTMLElement[] = [];
-    this.columns.forEach((col) => {
-      Array.from(col.children).forEach((child) => {
-        items.push(child as HTMLElement);
-      });
-      col.innerHTML = "";
-    });
-
-    const availableWidth = Math.min(1200, window.innerWidth - 40);
-    const numColumns = Math.max(
-      1,
-      Math.floor(availableWidth / this.options.minColumnWidth),
-    );
-
-    if (this.columns.length !== numColumns) {
-      this.container.innerHTML = "";
-      this.columns = [];
-
-      for (let i = 0; i < numColumns; i++) {
-        const col = document.createElement("div");
-        col.className = "masonry-column";
-        this.container.appendChild(col);
-        this.columns.push(col);
-      }
-    }
-
-    items.forEach((item) => {
-      this.addToShortestColumn(item);
-    });
-  }
-
-  private handleScroll = (): void => {
-    if (this.isFetching) return;
-
-    const rect = this.container.getBoundingClientRect();
-    if (rect.bottom > 0 && rect.bottom <= window.innerHeight + this.options.scrollThreshold) {
-      this.loadMoreImages();
-    }
-  };
-
-  private async loadMoreImages(isAutoFill = false): Promise<void> {
-    if (!isAutoFill) this.reloaded++;
-    if (this.options.reload > 0 && this.reloaded > this.options.reload) {
-      console.warn("Maximum reload limit reached.");
-      return;
-    }
-    if (this.isFetching) return;
-
-    this.isFetching = true;
-    this.toggleLoader(true);
-
-    try {
-      const newImages = await this.options.fetchFunction();
-      this.renderImages(newImages);
-    } catch (error) {
-      throw new Error("Error loading images: " + error);
-    } finally {
-      this.isFetching = false;
-      this.toggleLoader(false);
-      // If the rendered content doesn't fill the viewport, auto-load the next
-      // batch without waiting for a scroll event (multi-column layout is shorter)
-      requestAnimationFrame(() => {
-        const rect = this.container.getBoundingClientRect();
-        if (rect.bottom <= window.innerHeight + this.options.scrollThreshold) {
-          this.loadMoreImages(true);
-        }
-      });
-    }
-  }
-
-  private toggleLoader(show: boolean): void {
-    if (this.loader) {
-      this.loader.classList.toggle("hidden", !show);
-    }
-  }
-
-  private renderImages(imageDataList: ImageData[]): void {
-    // Sort columns by current height so we start filling from the shortest.
-    // Then round-robin across them — this avoids the problem where unloaded
-    // images (0 height) cause offsetHeight-based distribution to pile all
-    // new items into a single column.
-    const sorted = [...this.columns].sort(
-      (a, b) => a.offsetHeight - b.offsetHeight,
-    );
-
-    imageDataList.forEach((data, index) => {
-      const item = this.createCard(data);
-      const col = sorted[index % sorted.length];
-      col.appendChild(item);
-
-      requestAnimationFrame(() => {
-        const img = item.querySelector("img");
-        if (img) {
-          img.addEventListener("load", () => img.classList.add("loaded"), {
-            once: true,
-          });
-          if (img.complete) {
-            img.classList.add("loaded");
-          }
-        }
-      });
-    });
-  }
-
-  private createCard(data: ImageData): HTMLDivElement {
-    const div = document.createElement("div");
-    div.className = "masonry-item";
-
-    div.innerHTML = `
-      <img src="${escapeHtml(data.src)}" alt="${escapeHtml(data.title)}" loading="lazy">
-      <div class="masonry-item-info">
-        <h3 class="masonry-item-title">${escapeHtml(data.title)}</h3>
-        <p class="masonry-item-desc">${escapeHtml(data.desc)}</p>
-      </div>
-    `;
-
-    return div;
-  }
-
-  private addToShortestColumn(element: HTMLElement): void {
-    if (this.columns.length === 0) return;
-
-    let shortestCol = this.columns[0];
-    let minHeight = shortestCol.offsetHeight;
-
-    for (let i = 1; i < this.columns.length; i++) {
-      const h = this.columns[i].offsetHeight;
-      if (h < minHeight) {
-        minHeight = h;
-        shortestCol = this.columns[i];
-      }
-    }
-
-    shortestCol.appendChild(element);
-  }
-
-  public destroy(): void {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
-
-    if (this.abortController) {
-      this.abortController.abort();
-      this.abortController = null;
-    }
-  }
-}
-
-export { MasonryGallery, ImageData };

package/js/group-picker.ts

@@ -1,451 +0,0 @@
-import { escapeHtml } from './utils.js';
-
-interface SubgroupData {
-  id: string;
-  label: string;
-}
-
-interface GroupData {
-  id: string;
-  label: string;
-  subgroups?: SubgroupData[];
-}
-
-interface GroupPickerSelection {
-  parentGroups: string[];
-  subgroups: { groupId: string; subgroupId: string }[];
-}
-
-interface GroupPickerOptions {
-  onSelectionChange?: (selection: GroupPickerSelection) => void;
-  searchPlaceholder?: string;
-  selectAllLabel?: string;
-  deselectLabel?: string;
-  emptyLabel?: string;
-  selectionPlaceholder?: string;
-}
-
-class GroupPicker {
-  private container: HTMLElement;
-  private data: GroupData[];
-  private options: Required<GroupPickerOptions>;
-  private abortController: AbortController;
-
-  // State
-  private selectedParents: Set<string> = new Set();
-  private selectedSubs: Map<string, Set<string>> = new Map();
-  private expandedGroups: Set<string> = new Set();
-  private searchQuery: string = '';
-
-  // DOM refs
-  private searchInput!: HTMLInputElement;
-  private listEl!: HTMLElement;
-  private selectionEl!: HTMLElement;
-
-  constructor(
-    selector: string | HTMLElement,
-    data: GroupData[],
-    options: GroupPickerOptions = {}
-  ) {
-    const el = typeof selector === 'string'
-      ? document.querySelector<HTMLElement>(selector)
-      : selector;
-
-    if (!el) throw new Error(`GroupPicker: Element not found for "${selector}"`);
-
-    this.container = el;
-    this.data = data;
-    this.abortController = new AbortController();
-
-    this.options = {
-      onSelectionChange: options.onSelectionChange ?? (() => {}),
-      searchPlaceholder: options.searchPlaceholder ?? 'Gruppen durchsuchen...',
-      selectAllLabel: options.selectAllLabel ?? 'Alle',
-      deselectLabel: options.deselectLabel ?? 'Abwählen',
-      emptyLabel: options.emptyLabel ?? 'Keine Ergebnisse',
-      selectionPlaceholder: options.selectionPlaceholder ?? 'Noch keine Auswahl getroffen',
-    };
-
-    this.init();
-  }
-
-  private init(): void {
-    this.container.classList.add('group-picker');
-    this.render();
-    this.attachEvents();
-  }
-
-  private render(): void {
-    this.container.innerHTML = '';
-
-    // Selection summary — Basix .chips container
-    this.selectionEl = document.createElement('div');
-    this.selectionEl.className = 'chips group-picker__selection';
-    this.selectionEl.dataset.placeholder = this.options.selectionPlaceholder;
-
-    // Search — Basix form input with font icon overlay
-    const searchWrap = document.createElement('div');
-    searchWrap.className = 'group-picker__search';
-    searchWrap.innerHTML = `
-      <span class="icon icon-search group-picker__search-icon" aria-hidden="true"></span>
-      <input type="text" />
-    `;
-    this.searchInput = searchWrap.querySelector('input')!;
-    this.searchInput.placeholder = this.options.searchPlaceholder;
-
-    // List
-    this.listEl = document.createElement('div');
-    this.listEl.className = 'group-picker__list';
-
-    this.container.append(this.selectionEl, searchWrap, this.listEl);
-    this.renderGroups();
-    this.renderSelection();
-  }
-
-  private renderGroups(): void {
-    this.listEl.innerHTML = '';
-    const query = this.searchQuery.toLowerCase().trim();
-    let visibleCount = 0;
-
-    for (const group of this.data) {
-      const subs = group.subgroups ?? [];
-      const groupMatches = group.label.toLowerCase().includes(query);
-      const matchingSubs = subs.filter(s =>
-        s.label.toLowerCase().includes(query)
-      );
-
-      if (!groupMatches && matchingSubs.length === 0 && query) continue;
-
-      visibleCount++;
-      const groupEl = this.createGroupElement(group, query, groupMatches, matchingSubs);
-      this.listEl.appendChild(groupEl);
-    }
-
-    if (visibleCount === 0) {
-      const empty = document.createElement('div');
-      empty.className = 'group-picker__empty';
-      empty.innerHTML = `
-        <span class="icon icon-search" aria-hidden="true"></span>
-        <span>${this.options.emptyLabel}</span>
-      `;
-      this.listEl.appendChild(empty);
-    }
-  }
-
-  private createGroupElement(
-    group: GroupData,
-    query: string,
-    groupMatches: boolean,
-    matchingSubs: SubgroupData[]
-  ): HTMLElement {
-    const subs = group.subgroups ?? [];
-    const hasChildren = subs.length > 0;
-
-    const el = document.createElement('div');
-    el.className = 'group-picker__group';
-    el.dataset.groupId = group.id;
-    if (!hasChildren) el.classList.add('is-leaf');
-
-    const isExpanded = hasChildren && (
-      this.expandedGroups.has(group.id) ||
-      (query.length > 0 && matchingSubs.length > 0)
-    );
-    const isParentSelected = this.selectedParents.has(group.id);
-
-    if (isExpanded) el.classList.add('is-expanded');
-    if (isParentSelected) el.classList.add('is-selected');
-
-    // Header row
-    const header = document.createElement('div');
-    header.className = 'group-picker__group-header';
-
-    const label = document.createElement('span');
-    label.className = 'group-picker__group-label';
-    label.innerHTML = query && groupMatches
-      ? this.highlightText(group.label, query)
-      : escapeHtml(group.label);
-
-    if (hasChildren) {
-      // Chevron — Basix font icon
-      const chevron = document.createElement('span');
-      chevron.className = 'icon icon-navigate_next group-picker__chevron';
-      chevron.setAttribute('aria-hidden', 'true');
-
-      // Count — Basix badge
-      const count = document.createElement('span');
-      count.className = 'badge badge-sm';
-      count.textContent = `${subs.length}`;
-
-      // Action button — Basix button, button-primary when selected
-      const actionBtn = document.createElement('button');
-      actionBtn.className = 'group-picker__group-action';
-      if (isParentSelected) {
-        actionBtn.classList.add('button-primary');
-        actionBtn.textContent = this.options.deselectLabel;
-      } else {
-        actionBtn.textContent = this.options.selectAllLabel;
-      }
-
-      actionBtn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        this.toggleParentGroup(group.id);
-      }, { signal: this.abortController.signal });
-
-      header.append(chevron, label, count, actionBtn);
-
-      header.addEventListener('click', () => {
-        this.toggleExpand(group.id);
-      }, { signal: this.abortController.signal });
-
-      // Subgroups — Basix .chips container
-      const subsContainer = document.createElement('div');
-      subsContainer.className = 'group-picker__subgroups';
-
-      const subsList = document.createElement('div');
-      subsList.className = 'chips group-picker__subgroup-list';
-
-      const displaySubs = query && !groupMatches ? matchingSubs : subs;
-
-      for (const sub of displaySubs) {
-        // Subgroup chip — Basix .chip.clickable
-        const subEl = document.createElement('span');
-        subEl.className = 'chip clickable group-picker__subgroup';
-        subEl.dataset.subId = sub.id;
-        subEl.innerHTML = query ? this.highlightText(sub.label, query) : escapeHtml(sub.label);
-
-        const isSubSelected = this.selectedSubs.get(group.id)?.has(sub.id) ?? false;
-        if (isSubSelected) subEl.classList.add('is-selected');
-        if (isParentSelected) subEl.classList.add('is-disabled');
-
-        subEl.addEventListener('click', (e) => {
-          e.stopPropagation();
-          if (!isParentSelected) {
-            this.toggleSubgroup(group.id, sub.id);
-          }
-        }, { signal: this.abortController.signal });
-
-        subsList.appendChild(subEl);
-      }
-
-      subsContainer.appendChild(subsList);
-      el.append(header, subsContainer);
-
-      if (isExpanded) {
-        requestAnimationFrame(() => {
-          subsContainer.style.height = subsContainer.scrollHeight + 'px';
-          subsContainer.addEventListener('transitionend', () => {
-            subsContainer.style.height = 'auto';
-          }, { once: true });
-        });
-      }
-    } else {
-      // Leaf group — Basix font icon check mark
-      const checkEl = document.createElement('span');
-      checkEl.className = 'icon icon-check group-picker__leaf-check';
-      checkEl.setAttribute('aria-hidden', 'true');
-
-      header.append(label, checkEl);
-
-      header.addEventListener('click', () => {
-        this.toggleParentGroup(group.id);
-      }, { signal: this.abortController.signal });
-
-      el.appendChild(header);
-    }
-
-    return el;
-  }
-
-  private renderSelection(): void {
-    this.selectionEl.innerHTML = '';
-
-    for (const groupId of this.selectedParents) {
-      const group = this.data.find(g => g.id === groupId);
-      if (!group) continue;
-      this.selectionEl.appendChild(
-        this.createChip(group.label, true, () => this.toggleParentGroup(groupId))
-      );
-    }
-
-    for (const [groupId, subs] of this.selectedSubs) {
-      const group = this.data.find(g => g.id === groupId);
-      if (!group) continue;
-      for (const subId of subs) {
-        const sub = group.subgroups?.find(s => s.id === subId);
-        if (!sub) continue;
-        this.selectionEl.appendChild(
-          this.createChip(sub.label, false, () => this.toggleSubgroup(groupId, subId))
-        );
-      }
-    }
-  }
-
-  // Basix .chip.closeable structure
-  private createChip(label: string, isParent: boolean, onRemove: () => void): HTMLElement {
-    const chip = document.createElement('span');
-    chip.className = isParent
-      ? 'chip closeable group-picker__chip--parent'
-      : 'chip closeable';
-
-    const btn = document.createElement('button');
-    btn.setAttribute('aria-label', `${label} entfernen`);
-    btn.innerHTML = `<span class="icon icon-close"></span>`;
-    btn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      onRemove();
-    }, { signal: this.abortController.signal });
-
-    chip.append(document.createTextNode(label), btn);
-    return chip;
-  }
-
-  // State management
-
-  private toggleParentGroup(groupId: string): void {
-    if (this.selectedParents.has(groupId)) {
-      this.selectedParents.delete(groupId);
-    } else {
-      this.selectedParents.add(groupId);
-      this.selectedSubs.delete(groupId);
-    }
-    this.refresh();
-    this.emitChange();
-  }
-
-  private toggleSubgroup(groupId: string, subId: string): void {
-    if (!this.selectedSubs.has(groupId)) {
-      this.selectedSubs.set(groupId, new Set());
-    }
-    const subs = this.selectedSubs.get(groupId)!;
-
-    if (subs.has(subId)) {
-      subs.delete(subId);
-      if (subs.size === 0) this.selectedSubs.delete(groupId);
-    } else {
-      subs.add(subId);
-    }
-
-    const group = this.data.find(g => g.id === groupId);
-    if (group && subs.size === (group.subgroups ?? []).length) {
-      this.selectedSubs.delete(groupId);
-      this.selectedParents.add(groupId);
-    }
-
-    this.refresh();
-    this.emitChange();
-  }
-
-  private toggleExpand(groupId: string): void {
-    const groupEl = this.listEl.querySelector(
-      `[data-group-id="${groupId}"]`
-    ) as HTMLElement | null;
-    const subsEl = groupEl?.querySelector('.group-picker__subgroups') as HTMLElement | null;
-
-    if (this.expandedGroups.has(groupId)) {
-      this.expandedGroups.delete(groupId);
-      groupEl?.classList.remove('is-expanded');
-      if (subsEl) {
-        subsEl.style.height = subsEl.scrollHeight + 'px';
-        requestAnimationFrame(() => {
-          subsEl.style.height = '0';
-        });
-      }
-    } else {
-      this.expandedGroups.add(groupId);
-      groupEl?.classList.add('is-expanded');
-      if (subsEl) {
-        subsEl.style.height = subsEl.scrollHeight + 'px';
-        subsEl.addEventListener('transitionend', () => {
-          if (this.expandedGroups.has(groupId)) {
-            subsEl.style.height = 'auto';
-          }
-        }, { once: true });
-      }
-    }
-  }
-
-  private refresh(): void {
-    this.renderGroups();
-    this.renderSelection();
-  }
-
-  private attachEvents(): void {
-    let debounceTimer: ReturnType<typeof setTimeout>;
-    this.searchInput.addEventListener('input', () => {
-      clearTimeout(debounceTimer);
-      debounceTimer = setTimeout(() => {
-        this.searchQuery = this.searchInput.value;
-        this.renderGroups();
-      }, 120);
-    }, { signal: this.abortController.signal });
-  }
-
-  private emitChange(): void {
-    const selection = this.getSelection();
-    this.options.onSelectionChange(selection);
-    this.container.dispatchEvent(new CustomEvent('group-picker-change', {
-      detail: selection,
-      bubbles: true,
-    }));
-  }
-
-  private highlightText(text: string, query: string): string {
-    const safeText = escapeHtml(text);
-    if (!query) return safeText;
-    const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    const regex = new RegExp(`(${escapedQuery})`, 'gi');
-    return safeText.replace(regex, '<mark>$1</mark>');
-  }
-
-  // Public API
-
-  public getSelection(): GroupPickerSelection {
-    const parentGroups = [...this.selectedParents];
-    const subgroups: { groupId: string; subgroupId: string }[] = [];
-    for (const [groupId, subs] of this.selectedSubs) {
-      for (const subId of subs) {
-        subgroups.push({ groupId, subgroupId: subId });
-      }
-    }
-    return { parentGroups, subgroups };
-  }
-
-  public clearSelection(): void {
-    this.selectedParents.clear();
-    this.selectedSubs.clear();
-    this.refresh();
-    this.emitChange();
-  }
-
-  public setSelection(selection: GroupPickerSelection): void {
-    this.selectedParents = new Set(selection.parentGroups);
-    this.selectedSubs.clear();
-    for (const { groupId, subgroupId } of selection.subgroups) {
-      if (!this.selectedSubs.has(groupId)) {
-        this.selectedSubs.set(groupId, new Set());
-      }
-      this.selectedSubs.get(groupId)!.add(subgroupId);
-    }
-    this.refresh();
-    this.emitChange();
-  }
-
-  public expandAll(): void {
-    this.data.forEach(g => this.expandedGroups.add(g.id));
-    this.renderGroups();
-  }
-
-  public collapseAll(): void {
-    this.expandedGroups.clear();
-    this.renderGroups();
-  }
-
-  public destroy(): void {
-    this.abortController.abort();
-    this.container.innerHTML = '';
-    this.container.classList.remove('group-picker');
-  }
-}
-
-export { GroupPicker };
-export type { GroupData, SubgroupData, GroupPickerSelection, GroupPickerOptions };