@hortonstudio/main 1.2.4 → 1.2.6

package/attributes-master/packages/list/src/load/pagination.ts

@@ -0,0 +1,402 @@
+import {
+  addListener,
+  cloneNode,
+  CURRENT_CSS_CLASS,
+  extractCommaSeparatedValues,
+  getCurrentBreakpoint,
+  isElement,
+  isHTMLAnchorElement,
+  isNotEmpty,
+  isNumber,
+} from '@finsweet/attributes-utils';
+import { effect, type Ref, ref, watch } from '@vue/reactivity';
+import debounce from 'just-debounce';
+
+import type { List } from '../components/List';
+import { BREAKPOINTS_INDEX } from '../utils/constants';
+import { getCMSElementSelector } from '../utils/dom';
+import { getAttribute, getElementSelector, queryElement } from '../utils/selectors';
+import { loadPaginatedCMSItems } from './load';
+
+/**
+ * Inits the `Pagination` mode.
+ * @param list The {@link List} instance.
+ *
+ * @returns A callback to destroy the event listeners.
+ */
+export const initPaginationMode = (list: List) => {
+  const { currentPage, itemsPerPage, paginationWrapperElement } = list;
+  if (!paginationWrapperElement) return;
+
+  // Init hook
+  list.addHook('pagination', (items) => {
+    const $itemsPerPage = itemsPerPage.value;
+
+    const start = (currentPage.value - 1) * $itemsPerPage;
+    const end = start + $itemsPerPage;
+
+    const paginatedItems = items.slice(start, end);
+    return paginatedItems;
+  });
+
+  const currentPageCleanup = watch(
+    list.currentPage,
+    () => {
+      // We reset currentPage to 1 when filtering and sorting,
+      // we don't want to trigger pagination again when that happens
+      if (list.currentHook) return;
+
+      list.triggerHook('pagination', { scrollToAnchor: true });
+
+      if (list.showQuery) {
+        list.setSearchParam('page', currentPage.value.toString());
+      }
+    },
+    {}
+  );
+
+  const paginateCleanup = watch(list.itemsPerPage, () => {
+    list.triggerHook('pagination', { scrollToAnchor: true });
+  });
+
+  // Get settings
+  const [pageBoundary, pageBoundaryCleanup] = getBreakpointSetting(list, 'pageboundary');
+  const [pageSiblings, pageSiblingsCleanup] = getBreakpointSetting(list, 'pagesiblings');
+
+  // Page Button Template
+  const pageButtonTemplate = queryElement('page-button', { scope: paginationWrapperElement });
+
+  // Page Dots Template
+  let pageDotsTemplate = queryElement('page-dots', { scope: paginationWrapperElement });
+
+  if (pageDotsTemplate) {
+    pageDotsTemplate.remove();
+  } else {
+    pageDotsTemplate = document.createElement('div');
+    pageDotsTemplate.textContent = '...';
+  }
+
+  // Handle page buttons
+  let pageButtonsCleanup: (() => void) | undefined;
+
+  if (pageButtonTemplate) {
+    const { parentElement } = pageButtonTemplate;
+
+    pageButtonTemplate.remove();
+
+    if (parentElement) {
+      pageButtonsCleanup = handlePageButtons(
+        list,
+        parentElement,
+        pageButtonTemplate,
+        pageDotsTemplate,
+        pageSiblings,
+        pageBoundary
+      );
+    }
+  }
+
+  // Init items load
+  loadPaginatedCMSItems(list);
+
+  // Handle pagination elements
+  const paginationWrapperCleanup = handlePaginationWrapper(list);
+  const paginationButtonsCleanup = handlePaginationButtons(list);
+  const paginationCountCleanup = handlePaginationCount(list);
+
+  // Return destroy callback
+  return () => {
+    pageBoundaryCleanup?.();
+    pageSiblingsCleanup?.();
+    pageButtonsCleanup?.();
+    paginationWrapperCleanup?.();
+    paginationCountCleanup?.();
+    paginationButtonsCleanup();
+    currentPageCleanup();
+    paginateCleanup();
+  };
+};
+
+/**
+ * Handles the page buttons elements.
+ * @param list
+ * @param parentElement
+ * @param pageButtonTemplate
+ * @param pageDotsTemplate
+ * @param pageSiblings
+ * @param pageBoundary
+ */
+const handlePageButtons = (
+  list: List,
+  parentElement: HTMLElement,
+  pageButtonTemplate: HTMLElement,
+  pageDotsTemplate: HTMLElement,
+  pageSiblings: Ref<number>,
+  pageBoundary: Ref<number>
+) => {
+  const { currentPage, totalPages } = list;
+
+  let renderedButtons = new Map<HTMLElement, number | null>();
+
+  const pageButtonsRunner = effect(() => {
+    const totalSiblings = pageSiblings.value * 2 + 1;
+    const totalBoundary = pageBoundary.value * 2;
+
+    const maxElements = totalBoundary + totalSiblings + 2;
+
+    const isStartRange = currentPage.value - 1 < maxElements - totalSiblings;
+    const isEndRange = totalPages.value - currentPage.value < maxElements - totalSiblings;
+
+    const existingElements: Array<[HTMLElement, number | null] | undefined> = [...renderedButtons];
+
+    for (let index = 1; index <= maxElements; index++) {
+      // Get previous elements
+      const [existingElement, existingTargetPage] = existingElements[index - 1] || [];
+      const [lastElement] = existingElements[index - 2] || [];
+
+      // Get rid of invalid elements
+      if (index > totalPages.value) {
+        if (existingElement) {
+          existingElement.remove();
+          existingElements[index - 1] = undefined;
+        }
+        continue;
+      }
+
+      // Collect new target page
+      let targetPage: number | null;
+
+      if (totalPages.value <= maxElements) targetPage = index;
+      else if (isStartRange) {
+        if (index > maxElements - pageBoundary.value) targetPage = totalPages.value - (maxElements - index);
+        else if (index === maxElements - pageBoundary.value) targetPage = null;
+        else targetPage = index;
+      } else if (isEndRange) {
+        if (index < pageBoundary.value + 1) targetPage = index;
+        else if (index === pageBoundary.value + 1) targetPage = null;
+        else targetPage = totalPages.value - (maxElements - index);
+      } else {
+        if (index < pageBoundary.value + 1) targetPage = index;
+        else if (index > maxElements - pageBoundary.value) targetPage = totalPages.value - (maxElements - index);
+        else if (index === pageBoundary.value + 1 || index === maxElements - pageBoundary.value) targetPage = null;
+        else targetPage = currentPage.value + (index - (pageBoundary.value + 1) - (1 + pageSiblings.value));
+      }
+
+      // Render a new item only when needed
+      let newElement: HTMLElement | undefined;
+
+      if (existingTargetPage !== targetPage) {
+        // Remove the existing element
+        existingElement?.remove();
+
+        // Add the new item
+        newElement = createPageButton(pageButtonTemplate, pageDotsTemplate, targetPage, list);
+        existingElements[index - 1] = [newElement, targetPage];
+
+        if (lastElement) parentElement.insertBefore(newElement, lastElement.nextSibling);
+        else parentElement.appendChild(newElement);
+
+        newElement.style.opacity = '';
+      }
+
+      const elementToUpdate = newElement || existingElement;
+      if (!elementToUpdate) continue;
+
+      // Update CSS and Aria
+      if (targetPage === currentPage.value) {
+        elementToUpdate.classList.add(CURRENT_CSS_CLASS);
+        elementToUpdate.setAttribute('aria-current', 'page');
+      } else {
+        elementToUpdate.classList.remove(CURRENT_CSS_CLASS);
+        elementToUpdate.removeAttribute('aria-current');
+      }
+    }
+
+    // Store new state
+    renderedButtons = new Map([...existingElements.filter(isNotEmpty)]);
+  });
+
+  // Handle clicks
+  const cleanupClicks = addListener(parentElement, 'click', (e) => {
+    const { target } = e;
+
+    if (!isElement(target)) return;
+
+    const isPageButton = target.closest<HTMLElement>(getElementSelector('page-button'));
+    if (!isPageButton) return;
+
+    e.preventDefault();
+
+    const targetPage = renderedButtons.get(isPageButton);
+    if (!targetPage) return;
+
+    list.currentPage.value = targetPage;
+  });
+
+  return () => {
+    pageButtonsRunner.effect.stop();
+    cleanupClicks();
+  };
+};
+
+/**
+ * Creates a new page button element.
+ *
+ * @param pageButtonTemplate
+ * @param pageDotsTemplate
+ * @param targetPage The page where it will point to. If no target page is defined, a `Page Dots` element will be returned.
+ * @param list The {@link List} instance.
+ *
+ * @returns The new element.
+ */
+const createPageButton = (
+  pageButtonTemplate: HTMLElement,
+  pageDotsTemplate: HTMLElement,
+  targetPage: number | null,
+  { paginationSearchParam }: List
+) => {
+  if (!targetPage) return cloneNode(pageDotsTemplate);
+
+  const newElement = cloneNode(pageButtonTemplate);
+  newElement.classList.remove(CURRENT_CSS_CLASS);
+  newElement.textContent = `${targetPage}`;
+
+  if (isHTMLAnchorElement(newElement) && paginationSearchParam) {
+    newElement.href = `?${paginationSearchParam}=${targetPage}`;
+  }
+
+  return newElement;
+};
+
+/**
+ * Updates the native `Page Count` element.
+ * @param list The {@link List} instance.
+ * @returns A cleanup function to remove the effect.
+ */
+const handlePaginationCount = ({ paginationCountElement, currentPage, totalPages }: List) => {
+  if (!paginationCountElement) return;
+
+  const runner = effect(() => {
+    paginationCountElement.setAttribute('aria-label', `Page ${currentPage.value} of ${totalPages.value}`);
+    paginationCountElement.textContent = `${currentPage.value} / ${totalPages.value}`;
+  });
+
+  return () => runner.effect.stop();
+};
+
+/**
+ * Handles the display of the pagination wrapper element.
+ * @param list The {@link List} instance.
+ * @returns A cleanup function to remove the effect.
+ */
+const handlePaginationWrapper = (list: List) => {
+  if (!list.paginationWrapperElement) return;
+
+  const runner = effect(() => {
+    list.paginationWrapperElement!.style.display = list.hooks.pagination.result.value.length > 0 ? '' : 'none';
+  });
+
+  return () => runner.effect.stop();
+};
+
+/**
+ * Handles the `display` and `href` properties of native pagination buttons (`Previous` & `Next`).
+ * @param list The {@link List} instance.
+ * @returns A cleanup function to remove the effect.
+ */
+const handlePaginationButtons = (list: List) => {
+  const setAttributes = (element: HTMLElement, shouldDisplay: boolean) => {
+    const disabledClass = getAttribute(element, 'paginationdisabledclass');
+
+    element.style.display = '';
+    element.classList[shouldDisplay ? 'remove' : 'add'](disabledClass);
+    element.setAttribute('aria-disabled', shouldDisplay ? 'false' : 'true');
+    element.setAttribute('aria-hidden', shouldDisplay ? 'false' : 'true');
+    element.setAttribute('tabindex', shouldDisplay ? '0' : '-1');
+  };
+
+  const buttonsRunner = effect(() => {
+    list.allPaginationPreviousElements.value.forEach((element) => {
+      const shouldDisplay = list.currentPage.value !== 1;
+
+      setAttributes(element, shouldDisplay);
+
+      if (isHTMLAnchorElement(element)) {
+        element.href = `?${list.paginationSearchParam}=${list.currentPage.value - 1}`;
+      }
+    });
+
+    list.allPaginationNextElements.value.forEach((element) => {
+      const shouldDisplay = list.currentPage.value !== list.totalPages.value;
+
+      setAttributes(element, shouldDisplay);
+
+      if (isHTMLAnchorElement(element)) {
+        element.href = `?${list.paginationSearchParam}=${list.currentPage.value + 1}`;
+      }
+    });
+  });
+
+  const clicksCleanup = addListener(window, 'click', (e) => {
+    const { target } = e;
+
+    if (!isElement(target)) return;
+
+    const isNextButton = target.closest(getCMSElementSelector('pagination-next'));
+    const isPreviousButton = target.closest(getCMSElementSelector('pagination-previous'));
+
+    if (!isNextButton && !isPreviousButton) return;
+
+    e.preventDefault();
+
+    const { currentPage, totalPages } = list;
+
+    let targetPage: number | null | undefined;
+
+    if (isNextButton) targetPage = currentPage.value + 1;
+    else targetPage = currentPage.value - 1;
+
+    if (!targetPage) return;
+    if (targetPage < 1) return;
+    if (targetPage > totalPages.value) return;
+
+    list.currentPage.value = targetPage;
+  });
+
+  return () => {
+    buttonsRunner.effect.stop();
+    clicksCleanup();
+  };
+};
+
+/**
+ * Gets a breakpoint setting and returns it as a store that will be updated on resize.
+ * @param list
+ * @param setting
+ * @returns A store atom and a cleanup function.
+ */
+const getBreakpointSetting = ({ listOrWrapper }: List, setting: 'pagesiblings' | 'pageboundary') => {
+  const rawValues = getAttribute(listOrWrapper, setting);
+  const values = extractCommaSeparatedValues(rawValues).map(parseInt);
+  const store = ref(values[0]);
+
+  const updateValue = () => {
+    const currentBreakpoint = getCurrentBreakpoint();
+    const breakpointIndex = BREAKPOINTS_INDEX[currentBreakpoint];
+
+    for (let i = breakpointIndex; i >= 0; i--) {
+      const value = values[i];
+
+      if (isNumber(value)) {
+        store.value = value;
+        break;
+      }
+    }
+  };
+
+  const cleanup = addListener(window, 'resize', debounce(updateValue, 100));
+
+  updateValue();
+
+  return [store, cleanup] as const;
+};

package/attributes-master/packages/list/src/nest/index.ts

@@ -0,0 +1,198 @@
+import { cloneNode, extractCommaSeparatedValues, fetchPageDocument } from '@finsweet/attributes-utils';
+import { effect, triggerRef } from '@vue/reactivity';
+
+import { List, ListItem } from '../components';
+import { getAllCollectionListWrappers, getCollectionElements } from '../utils/dom';
+import {
+  getAttribute,
+  getElementSelector,
+  getSettingSelector,
+  queryAllElements,
+  queryElement,
+} from '../utils/selectors';
+import { listInstancesStore } from '../utils/store';
+
+/**
+ * Initializes list nesting.
+ * @param list - The list to initialize nesting for.
+ */
+export const initListNest = (list: List) => {
+  const handledItems = new Set<ListItem>();
+
+  const runner = effect(() => {
+    let hasChanges = false;
+
+    Promise.all(
+      list.items.value.map(async (item) => {
+        if (handledItems.has(item)) return;
+
+        handledItems.add(item);
+
+        const nestTargets = queryAllElements('nest-target', { scope: item.element });
+        if (!nestTargets.length) return;
+
+        await Promise.all(nestTargets.map(async (target) => handleNestTarget(list, item, target)));
+
+        hasChanges = true;
+      })
+    ).then(() => {
+      if (hasChanges) {
+        triggerRef(list.items);
+      }
+    });
+  });
+
+  return () => {
+    runner.effect.stop();
+    handledItems.clear();
+  };
+};
+
+/**
+ * Handles a nest target element.
+ * @param list
+ * @param item
+ * @param target
+ * @returns
+ */
+const handleNestTarget = (list: List, item: ListItem, target: HTMLElement) => {
+  if (!item.href) return;
+
+  const instance = getAttribute(target, 'nest');
+  if (!instance) return;
+
+  const slugsElement = item.element.querySelector<HTMLElement>(
+    `${getElementSelector('nest-slugs')}${getSettingSelector('nest', instance)}`
+  );
+
+  item.nesting = new Promise((resolve) => {
+    if (slugsElement) {
+      const slugs = extractCommaSeparatedValues(slugsElement.textContent);
+
+      handleManualNesting(list, item, target, slugs, instance).then(resolve);
+    } else {
+      handleExternalNesting(list, item, target, instance).then(resolve);
+    }
+  });
+
+  return item.nesting;
+};
+
+/**
+ * Handles manual nesting.
+ * @param list
+ * @param item
+ * @param target
+ * @param slugs
+ * @param instance
+ */
+const handleManualNesting = async (
+  list: List,
+  item: ListItem,
+  target: HTMLElement,
+  slugs: string[],
+  instance: string
+) => {
+  if (!slugs.length) return;
+  if (!item.href) return;
+
+  const source = [...listInstancesStore.values()].find(
+    (sourceList) => sourceList !== list && sourceList.instance === instance
+  );
+  if (!source) return;
+
+  const sourceItems = source.items.value;
+
+  const sourceWrapper = cloneNode(source.wrapperElement, false);
+
+  // Items list
+  if (sourceItems.length) {
+    const sourceList = source.listElement ? cloneNode(source.listElement, false) : document.createElement('div');
+
+    await Promise.resolve();
+
+    const elements = await Promise.all(
+      sourceItems.map(async (item) => {
+        await item.nesting;
+
+        return cloneNode(item.element);
+      })
+    );
+
+    sourceList.append(...elements);
+    sourceWrapper.append(sourceList);
+  }
+
+  // Empty state
+  else {
+    let sourceEmpty = source.emptyElement.value;
+
+    if (!sourceEmpty) {
+      await source.loadingPaginationElements;
+      sourceEmpty = source.emptyElement.value;
+    }
+
+    if (sourceEmpty) {
+      sourceWrapper.append(sourceEmpty);
+    }
+  }
+
+  target.append(sourceWrapper);
+  item.collectFields();
+};
+
+/**
+ * Handles external nesting.
+ * @param list
+ * @param item
+ * @param target
+ * @param instance
+ */
+const handleExternalNesting = async (list: List, item: ListItem, target: HTMLElement, instance: string) => {
+  if (!item.href) return;
+
+  const scope = await fetchPageDocument(item.href, { cache: list.cache });
+  if (!scope) return;
+
+  const sourceReference = queryElement('wrapper', { scope, instance }) || queryElement('list', { scope, instance });
+  if (!sourceReference) return;
+
+  const sourceWrapper = getCollectionElements(sourceReference, 'wrapper');
+  if (!sourceWrapper) return;
+
+  const allWrappers = getAllCollectionListWrappers(scope);
+
+  const index = allWrappers.indexOf(sourceWrapper);
+  if (index === -1) return;
+
+  const sourceInstance = new List(sourceWrapper, index, false);
+
+  if (sourceInstance.emptyElement.value) {
+    target.append(sourceInstance.emptyElement.value);
+    return;
+  }
+
+  if (!sourceInstance.items.value.length) return;
+
+  // Recursively nest items
+  await Promise.all(
+    sourceInstance.items.value.map(async (sourceItem) => {
+      const nestedTargets = queryAllElements('nest-target', { scope: sourceItem.element });
+      if (!nestedTargets.length) return;
+
+      await Promise.all(
+        nestedTargets.map(async (nestedTarget) => {
+          const nestedInstance = getAttribute(nestedTarget, 'nest');
+          if (!nestedInstance) return;
+
+          await handleExternalNesting(list, sourceItem, nestedTarget, nestedInstance);
+
+          item.collectFields();
+        })
+      );
+    })
+  );
+
+  target.append(sourceWrapper);
+  item.collectFields();
+};

package/attributes-master/packages/list/src/prevnext/index.ts

@@ -0,0 +1,98 @@
+import { cloneNode } from '@finsweet/attributes-utils';
+import { watch } from '@vue/reactivity';
+
+import type { List, ListItem } from '../components';
+import { queryElement } from '../utils/selectors';
+
+/**
+ * Initializes the previous and next items for a collection template page.
+ * @param list
+ * @param previousItemTarget
+ * @param nextItemTarget
+ * @returns A cleanup function.
+ */
+export const initPrevNext = (
+  list: List,
+  previousItemTarget: HTMLElement | null,
+  nextItemTarget: HTMLElement | null
+) => {
+  const previousEmptyPlaceholder = queryElement('previous-empty', { instance: list.instance });
+  const nextEmptyPlaceholder = queryElement('next-empty', { instance: list.instance });
+
+  previousEmptyPlaceholder?.remove();
+  nextEmptyPlaceholder?.remove();
+
+  let loadingItems = !!list.loadingPaginatedItems;
+  let previousItem: ListItem | undefined;
+  let nextItem: ListItem | undefined;
+
+  list.loadingPaginatedItems?.then(() => {
+    loadingItems = false;
+    handleItems(list.items.value);
+  });
+
+  /**
+   * Handles items for the previous and next functionality.
+   * @param items
+   */
+  const handleItems = (items: ListItem[]) => {
+    if (previousItem && nextItem) {
+      return;
+    }
+
+    const href = window.location.origin + window.location.pathname;
+    const currentItemIndex = items.findIndex((item) => item.href === href);
+
+    // Display empty placeholders if the current item is not found
+    if (currentItemIndex === -1 && !loadingItems) {
+      if (previousEmptyPlaceholder) {
+        previousItemTarget?.append(previousEmptyPlaceholder);
+      }
+
+      if (nextEmptyPlaceholder) {
+        nextItemTarget?.append(nextEmptyPlaceholder);
+      }
+    }
+
+    if (currentItemIndex === -1) return;
+
+    // Previous item
+    if (!previousItem) {
+      previousItem = items[currentItemIndex - 1];
+
+      // If found, clone the element and append it to the target
+      if (previousItem) {
+        const clone = cloneNode(previousItem.element);
+
+        previousEmptyPlaceholder?.remove();
+        previousItemTarget?.append(clone);
+      }
+
+      // If not found, show the empty placeholder only if the items have finished loading
+      else if (!loadingItems && previousEmptyPlaceholder) {
+        previousItemTarget?.append(previousEmptyPlaceholder);
+      }
+    }
+
+    // Next item
+    if (!nextItem) {
+      nextItem = items[currentItemIndex + 1];
+
+      // If found, clone the element and append it to the target
+      if (nextItem) {
+        const clone = cloneNode(nextItem.element);
+
+        nextEmptyPlaceholder?.remove();
+        nextItemTarget?.append(clone);
+      }
+
+      // If not found, show the empty placeholder only if the items have finished loading
+      else if (!loadingItems && nextEmptyPlaceholder) {
+        nextItemTarget?.append(nextEmptyPlaceholder);
+      }
+    }
+  };
+
+  const cleanup = watch(list.items, handleItems, { immediate: true });
+  return cleanup;
+};