@astronox/core 0.1.0

package/src/patterns/Table/tableProgressiveController.ts

@@ -0,0 +1,319 @@
+const initializedAttribute = 'data-table-progressive-initialized';
+
+type ProgressiveState = 'idle' | 'loading' | 'error' | 'complete';
+
+export type TableRowsAppendedDetail = {
+  rows: readonly HTMLElement[];
+};
+
+export function initTableProgressive(root: HTMLElement): () => void {
+  if (root.getAttribute(initializedAttribute) === 'true') {
+    return () => undefined;
+  }
+
+  const tableKey = root.dataset.tableKey;
+  const rowsRoot = root.querySelector<HTMLElement>('[data-table-rows]');
+  const pagination = root.querySelector<HTMLElement>('[data-table-pagination]');
+  const link = pagination?.querySelector<HTMLAnchorElement>(
+    '[data-table-pagination-link]',
+  );
+  const sentinel = pagination?.querySelector<HTMLElement>(
+    '[data-table-pagination-sentinel]',
+  );
+  const status = pagination?.querySelector<HTMLElement>(
+    '[data-table-pagination-status]',
+  );
+  const skeletonTemplate = pagination?.querySelector<HTMLTemplateElement>(
+    '[data-table-skeleton-template]',
+  );
+
+  if (
+    !tableKey ||
+    !rowsRoot ||
+    !pagination ||
+    !link ||
+    !sentinel ||
+    !status ||
+    !skeletonTemplate ||
+    !('IntersectionObserver' in window)
+  ) {
+    return () => undefined;
+  }
+
+  root.setAttribute(initializedAttribute, 'true');
+  const activePagination = pagination;
+  const activeLink = link;
+  const activeStatus = status;
+  activePagination.setAttribute('data-table-progressive-enhanced', 'true');
+  activePagination.removeAttribute('data-surface');
+  setState(activePagination, activeStatus, 'idle');
+
+  const loadedUrls = new Set<string>();
+  let request: AbortController | null = null;
+  let skeletonRows: HTMLElement[] = [];
+  let batchedRows: HTMLElement[] = [];
+  let disposed = false;
+  let completed = false;
+  let loadAllRequested = false;
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        void loadNextPage();
+      }
+    },
+    { rootMargin: '600px 0px' },
+  );
+
+  const removeSkeleton = (): void => {
+    skeletonRows.forEach((row) => row.remove());
+    skeletonRows = [];
+  };
+
+  const addSkeleton = (): void => {
+    if (skeletonRows.length > 0) return;
+
+    const templateRows = skeletonTemplate.content.querySelectorAll<HTMLElement>(
+      '[data-table-skeleton-row]',
+    );
+
+    skeletonRows = Array.from(templateRows, (row) =>
+      document.importNode(row, true),
+    );
+    rowsRoot.append(...skeletonRows);
+  };
+
+  const appendRows = (rows: readonly HTMLElement[]): void => {
+    if (rows.length === 0) return;
+
+    const fragment = document.createDocumentFragment();
+    for (const row of rows) fragment.append(row);
+    rowsRoot.append(fragment);
+    root.dispatchEvent(
+      new CustomEvent<TableRowsAppendedDetail>('table:rows-appended', {
+        bubbles: true,
+        detail: { rows },
+      }),
+    );
+  };
+
+  const flushBatchedRows = (): void => {
+    if (batchedRows.length === 0) {
+      removeSkeleton();
+      return;
+    }
+
+    const rows = batchedRows;
+    batchedRows = [];
+    removeSkeleton();
+    appendRows(rows);
+  };
+
+  const complete = (): void => {
+    completed = true;
+    flushBatchedRows();
+    loadAllRequested = false;
+    observer.disconnect();
+    activePagination.removeAttribute('data-surface');
+    activePagination.hidden = true;
+    setState(activePagination, activeStatus, 'complete');
+    root.removeAttribute('data-table-progressive-loading-all');
+    root.dispatchEvent(
+      new CustomEvent('table:progressive-complete', { bubbles: true }),
+    );
+  };
+
+  const showFallback = (): void => {
+    activePagination.removeAttribute('data-table-progressive-enhanced');
+    activePagination.setAttribute('data-surface', '');
+  };
+
+  async function loadNextPage(): Promise<void> {
+    if (request || disposed || completed) {
+      return;
+    }
+
+    const nextUrl = new URL(activeLink.href, window.location.href);
+    if (nextUrl.origin !== window.location.origin) {
+      setState(activePagination, activeStatus, 'error');
+      showFallback();
+      observer.disconnect();
+      return;
+    }
+
+    const requestKey = nextUrl.href;
+    if (loadedUrls.has(requestKey)) {
+      return;
+    }
+
+    request = new AbortController();
+    setState(activePagination, activeStatus, 'loading');
+    root.setAttribute('aria-busy', 'true');
+
+    let continueLoading = false;
+
+    try {
+      addSkeleton();
+      const response = await fetch(nextUrl, {
+        credentials: 'same-origin',
+        headers: { Accept: 'text/html' },
+        signal: request.signal,
+      });
+
+      if (!response.ok) {
+        throw new Error(`Unable to load table page: ${response.status}`);
+      }
+
+      const nextDocument = new DOMParser().parseFromString(
+        await response.text(),
+        'text/html',
+      );
+      const nextTable = Array.from(
+        nextDocument.querySelectorAll<HTMLElement>('[data-table-key]'),
+      ).find((table) => table.dataset.tableKey === tableKey);
+      const nextRowsRoot =
+        nextTable?.querySelector<HTMLElement>('[data-table-rows]');
+
+      if (!nextTable || !nextRowsRoot) {
+        throw new Error(`Missing paginated table: ${tableKey}`);
+      }
+
+      const nextRows = Array.from(
+        nextRowsRoot.querySelectorAll<HTMLElement>(':scope > [data-table-row]'),
+      );
+      if (nextRows.length === 0) {
+        throw new Error(`Missing paginated table rows: ${tableKey}`);
+      }
+
+      const nextPagination = nextTable.querySelector<HTMLElement>(
+        '[data-table-pagination]',
+      );
+      const nextLink = nextPagination?.querySelector<HTMLAnchorElement>(
+        '[data-table-pagination-link]',
+      );
+
+      const importedRows = nextRows.map((row) =>
+        document.importNode(row, true),
+      );
+      if (loadAllRequested) {
+        batchedRows.push(...importedRows);
+      } else {
+        removeSkeleton();
+        appendRows(importedRows);
+      }
+      loadedUrls.add(requestKey);
+
+      if (!nextPagination || !nextLink) {
+        complete();
+        return;
+      }
+
+      const nextHref = nextLink.getAttribute('href');
+      if (!nextHref) {
+        complete();
+        return;
+      }
+
+      activeLink.href = nextHref;
+      copyDatasetValue(activePagination, nextPagination, 'tablePage');
+      copyDatasetValue(activePagination, nextPagination, 'tableTotalPages');
+      continueLoading = loadAllRequested;
+      if (!continueLoading) setState(activePagination, activeStatus, 'idle');
+    } catch (error) {
+      if (error instanceof DOMException && error.name === 'AbortError') {
+        return;
+      }
+      flushBatchedRows();
+      loadAllRequested = false;
+      root.removeAttribute('data-table-progressive-loading-all');
+      setState(activePagination, activeStatus, 'error');
+      showFallback();
+      observer.disconnect();
+    } finally {
+      request = null;
+      if (!loadAllRequested) root.removeAttribute('aria-busy');
+      if (continueLoading && !disposed) void loadNextPage();
+    }
+  }
+
+  const handleLoadAll = (): void => {
+    if (completed) return;
+    loadAllRequested = true;
+    root.setAttribute('data-table-progressive-loading-all', 'true');
+    void loadNextPage();
+  };
+
+  const handleClick = (event: MouseEvent): void => {
+    if (
+      event.defaultPrevented ||
+      event.button !== 0 ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.altKey
+    ) {
+      return;
+    }
+
+    if (activePagination.dataset.tableProgressiveState === 'error') {
+      return;
+    }
+
+    event.preventDefault();
+    observer.observe(sentinel);
+    void loadNextPage();
+  };
+
+  activeLink.addEventListener('click', handleClick);
+  root.addEventListener('table:load-all', handleLoadAll);
+  observer.observe(sentinel);
+
+  return () => {
+    disposed = true;
+    request?.abort();
+    observer.disconnect();
+    activeLink.removeEventListener('click', handleClick);
+    root.removeEventListener('table:load-all', handleLoadAll);
+    flushBatchedRows();
+    activePagination.hidden = false;
+    activePagination.setAttribute('data-surface', '');
+    activePagination.removeAttribute('data-table-progressive-enhanced');
+    activePagination.removeAttribute('data-table-progressive-state');
+    activeStatus.hidden = true;
+    activeStatus.textContent = '';
+    root.removeAttribute('data-table-progressive-loading-all');
+    root.removeAttribute('aria-busy');
+    root.removeAttribute(initializedAttribute);
+  };
+}
+
+function setState(
+  pagination: HTMLElement,
+  status: HTMLElement,
+  state: ProgressiveState,
+): void {
+  pagination.dataset.tableProgressiveState = state;
+  status.hidden = state !== 'loading' && state !== 'error';
+
+  if (state === 'loading') {
+    status.textContent = pagination.dataset.tableLoadingLabel ?? '';
+  } else if (state === 'error') {
+    status.textContent = pagination.dataset.tableErrorLabel ?? '';
+  } else {
+    status.textContent = '';
+  }
+}
+
+function copyDatasetValue(
+  target: HTMLElement,
+  source: HTMLElement,
+  key: 'tablePage' | 'tableTotalPages',
+): void {
+  const value = source.dataset[key];
+
+  if (value === undefined) {
+    delete target.dataset[key];
+  } else {
+    target.dataset[key] = value;
+  }
+}

package/src/patterns/Table/tableRowNavigationController.ts

@@ -0,0 +1,91 @@
+const interactiveSelector = [
+  'a',
+  'button',
+  'input',
+  'label',
+  'select',
+  'textarea',
+  'summary',
+  '[role="button"]',
+  '[role="checkbox"]',
+  '[role="combobox"]',
+  '[role="link"]',
+  '[role="menuitem"]',
+  '[role="menuitemcheckbox"]',
+  '[role="menuitemradio"]',
+  '[role="option"]',
+  '[role="radio"]',
+  '[role="slider"]',
+  '[role="spinbutton"]',
+  '[role="switch"]',
+  '[role="tab"]',
+  '[role="textbox"]',
+  '[role="treeitem"]',
+  '[contenteditable="true"]',
+].join(',');
+
+const initializedAttribute = 'data-table-row-navigation-initialized';
+
+function isInteractiveTarget(target: EventTarget | null): boolean {
+  return (
+    target instanceof Element && Boolean(target.closest(interactiveSelector))
+  );
+}
+
+function getNavigationUrl(row: HTMLElement): string | undefined {
+  const link = row.querySelector<HTMLAnchorElement>(
+    '[data-table-row-primary-link]',
+  );
+
+  return link?.href ?? row.dataset.tableRowHref;
+}
+
+export function initTableRowNavigation(root: HTMLElement): () => void {
+  if (root.getAttribute(initializedAttribute) === 'true') {
+    return () => undefined;
+  }
+
+  root.setAttribute(initializedAttribute, 'true');
+
+  const handleClick = (event: MouseEvent): void => {
+    if (event.defaultPrevented || event.button !== 0) {
+      return;
+    }
+
+    if (isInteractiveTarget(event.target)) {
+      return;
+    }
+
+    const target = event.target;
+
+    if (!(target instanceof Element)) {
+      return;
+    }
+
+    const row = target.closest<HTMLElement>('[data-table-row-href]');
+
+    if (!row || !root.contains(row)) {
+      return;
+    }
+
+    const url = getNavigationUrl(row);
+
+    if (!url) {
+      return;
+    }
+
+    if (event.metaKey || event.ctrlKey) {
+      window.open(url, '_blank', 'noopener');
+      return;
+    }
+
+    window.location.assign(url);
+  };
+
+  root.addEventListener('click', handleClick);
+
+  return () => {
+    root.removeEventListener('click', handleClick);
+    root.removeAttribute(initializedAttribute);
+  };
+}

package/src/patterns/Table/tableScrollController.ts

@@ -0,0 +1,192 @@
+const initializedAttribute = 'data-table-scroll-initialized';
+const headerScrollportSelector = '[data-table-scrollport="header"]';
+const bodyScrollportSelector = '[data-table-scrollport="body"]';
+const bodyColumnGridSelector = '[data-table-column-grid]';
+const headerColumnTemplateProperty = '--table-header-column-template';
+const headerInlineSizeProperty = '--table-header-content-inline-size';
+
+const noop = (): void => undefined;
+
+export function initTableScroll(root: HTMLElement): () => void {
+  if (root.getAttribute(initializedAttribute) === 'true') {
+    return noop;
+  }
+
+  const headerScrollport = root.querySelector<HTMLElement>(
+    headerScrollportSelector,
+  );
+  const bodyScrollport = root.querySelector<HTMLElement>(
+    bodyScrollportSelector,
+  );
+
+  if (!headerScrollport || !bodyScrollport) {
+    return noop;
+  }
+
+  root.setAttribute(initializedAttribute, 'true');
+
+  const bodyColumnGrid =
+    bodyScrollport.querySelector<HTMLElement>(bodyColumnGridSelector);
+  const hasStableColumns = root.dataset.tableLayout === 'index';
+  let isActive = true;
+  let layoutFrame: number | null = null;
+  let scrollFrame: number | null = null;
+  let scrollSource: HTMLElement | null = null;
+  let expectedHeaderScrollLeft: number | null = null;
+  let expectedBodyScrollLeft: number | null = null;
+
+  const syncIndexOverflowState = (): void => {
+    if (!hasStableColumns) return;
+
+    const minimumRem = Number.parseFloat(
+      root.dataset.tableIndexMinimumRem ?? '',
+    );
+    const rootFontSize = Number.parseFloat(
+      window.getComputedStyle(document.documentElement).fontSize,
+    );
+    if (!Number.isFinite(minimumRem) || !Number.isFinite(rootFontSize)) {
+      return;
+    }
+
+    root.toggleAttribute(
+      'data-table-index-overflow',
+      bodyScrollport.clientWidth + 0.5 < minimumRem * rootFontSize,
+    );
+  };
+
+  const syncScrollLeft = (source: HTMLElement, target: HTMLElement): void => {
+    if (Math.abs(target.scrollLeft - source.scrollLeft) >= 0.5) {
+      if (target === headerScrollport) {
+        expectedHeaderScrollLeft = source.scrollLeft;
+      } else {
+        expectedBodyScrollLeft = source.scrollLeft;
+      }
+      target.scrollLeft = source.scrollLeft;
+    }
+  };
+
+  const syncHeaderLayout = (): void => {
+    layoutFrame = null;
+
+    if (!bodyColumnGrid) {
+      return;
+    }
+
+    syncIndexOverflowState();
+    const inlineSize = bodyColumnGrid.getBoundingClientRect().width;
+    const columnTemplate =
+      window.getComputedStyle(bodyColumnGrid).gridTemplateColumns;
+
+    if (inlineSize <= 0 || columnTemplate === 'none') {
+      return;
+    }
+
+    root.style.setProperty(headerInlineSizeProperty, `${inlineSize}px`);
+    root.style.setProperty(headerColumnTemplateProperty, columnTemplate);
+    syncScrollLeft(bodyScrollport, headerScrollport);
+  };
+
+  const scheduleHeaderLayoutSync = (): void => {
+    if (layoutFrame !== null) {
+      return;
+    }
+
+    layoutFrame = window.requestAnimationFrame(syncHeaderLayout);
+  };
+
+  const flushScrollSync = (): void => {
+    scrollFrame = null;
+    const source = scrollSource;
+    scrollSource = null;
+    if (!source) return;
+
+    const target =
+      source === bodyScrollport ? headerScrollport : bodyScrollport;
+    syncScrollLeft(source, target);
+  };
+
+  const scheduleScrollSync = (source: HTMLElement): void => {
+    scrollSource = source;
+    if (scrollFrame === null) {
+      scrollFrame = window.requestAnimationFrame(flushScrollSync);
+    }
+  };
+
+  const handleHeaderScroll = (): void => {
+    if (
+      expectedHeaderScrollLeft !== null &&
+      Math.abs(headerScrollport.scrollLeft - expectedHeaderScrollLeft) < 0.5
+    ) {
+      expectedHeaderScrollLeft = null;
+      return;
+    }
+
+    expectedHeaderScrollLeft = null;
+    scheduleScrollSync(headerScrollport);
+  };
+
+  const handleBodyScroll = (): void => {
+    if (
+      expectedBodyScrollLeft !== null &&
+      Math.abs(bodyScrollport.scrollLeft - expectedBodyScrollLeft) < 0.5
+    ) {
+      expectedBodyScrollLeft = null;
+      return;
+    }
+
+    expectedBodyScrollLeft = null;
+    scheduleScrollSync(bodyScrollport);
+  };
+
+  headerScrollport.addEventListener('scroll', handleHeaderScroll, {
+    passive: true,
+  });
+  bodyScrollport.addEventListener('scroll', handleBodyScroll, {
+    passive: true,
+  });
+  syncIndexOverflowState();
+  syncScrollLeft(bodyScrollport, headerScrollport);
+
+  const resizeObserver =
+    bodyColumnGrid && 'ResizeObserver' in window
+      ? new ResizeObserver(scheduleHeaderLayoutSync)
+      : null;
+  if (bodyColumnGrid && !hasStableColumns) {
+    resizeObserver?.observe(bodyColumnGrid);
+  }
+  resizeObserver?.observe(bodyScrollport);
+
+  if (bodyColumnGrid) {
+    if (!hasStableColumns) {
+      root.addEventListener('table:rows-appended', scheduleHeaderLayoutSync);
+    }
+    scheduleHeaderLayoutSync();
+    if (!hasStableColumns) {
+      void document.fonts.ready.then(() => {
+        if (isActive) {
+          scheduleHeaderLayoutSync();
+        }
+      });
+    }
+  }
+
+  return () => {
+    isActive = false;
+    if (layoutFrame !== null) {
+      window.cancelAnimationFrame(layoutFrame);
+    }
+    if (scrollFrame !== null) {
+      window.cancelAnimationFrame(scrollFrame);
+    }
+    resizeObserver?.disconnect();
+    if (!hasStableColumns) {
+      root.removeEventListener('table:rows-appended', scheduleHeaderLayoutSync);
+    }
+    headerScrollport.removeEventListener('scroll', handleHeaderScroll);
+    bodyScrollport.removeEventListener('scroll', handleBodyScroll);
+    root.style.removeProperty(headerInlineSizeProperty);
+    root.style.removeProperty(headerColumnTemplateProperty);
+    root.removeAttribute('data-table-index-overflow');
+    root.removeAttribute(initializedAttribute);
+  };
+}