@hortonstudio/main 1.2.4 → 1.2.6

package/attributes-master/packages/list/src/filter/utils.ts

@@ -0,0 +1,126 @@
+import {
+  type FormFieldType,
+  isDate,
+  isString,
+  isUndefined,
+  normalizeDate,
+  normalizeNumber,
+} from '@finsweet/attributes-utils';
+import * as fuzzysort from 'fuzzysort';
+
+import type { ListItemField } from '../components';
+import type { FieldValue } from './types';
+
+/**
+ * Parses the filter value based on the field type.
+ * @param filterValue
+ * @param fieldData
+ * @returns The parsed filter value, if it could be parsed. Otherwise, `null`.
+ */
+export const parseFilterValue = (
+  filterValue: string,
+  filterType: FormFieldType,
+  fieldType?: ListItemField['type']
+): FieldValue | null => {
+  if (
+    fieldType === 'date' ||
+    filterType === 'date' ||
+    filterType === 'time' ||
+    filterType === 'datetime-local' ||
+    filterType === 'month' ||
+    filterType === 'week'
+  ) {
+    const parsedFilterValue = normalizeDate(filterValue);
+
+    if (parsedFilterValue === undefined || isNaN(parsedFilterValue.getTime())) {
+      return null;
+    }
+
+    return parsedFilterValue;
+  }
+
+  if (fieldType === 'number' || filterType === 'number' || filterType === 'range') {
+    const parsedFilterValue = normalizeNumber(filterValue);
+
+    if (parsedFilterValue === undefined || isNaN(parsedFilterValue)) {
+      return null;
+    }
+
+    return parsedFilterValue;
+  }
+
+  return filterValue;
+};
+
+/**
+ * Checks if two values are equal.
+ * @param fieldValue
+ * @param filterValue
+ * @param fuzzyThreshold
+ */
+export const areEqual = (fieldValue: FieldValue, filterValue: FieldValue, fuzzyThreshold?: number) => {
+  // Ensure that dates are compared as dates
+  if (typeof fieldValue !== typeof filterValue) {
+    if (isDate(fieldValue)) {
+      filterValue = normalizeDate(filterValue) || filterValue;
+    } else if (isDate(filterValue)) {
+      fieldValue = normalizeDate(fieldValue) || fieldValue;
+    }
+  }
+
+  const normalizedFieldValue = isDate(fieldValue)
+    ? fieldValue.getTime()
+    : isString(fieldValue)
+      ? fieldValue.toLowerCase()
+      : fieldValue;
+  const normalizedFilterValue = isDate(filterValue)
+    ? filterValue.getTime()
+    : isString(filterValue)
+      ? filterValue.toLowerCase()
+      : filterValue;
+
+  if (fuzzyThreshold) {
+    const normalizedFuzzyThreshold = fuzzyThreshold / 100;
+
+    const score = fuzzysort.single(normalizedFilterValue.toString(), normalizedFieldValue.toString())?.score;
+    return !!score && score >= normalizedFuzzyThreshold;
+  }
+
+  return normalizedFieldValue === normalizedFilterValue;
+};
+
+/**
+ * Compares two numeric values.
+ * @param rawA
+ * @param rawB
+ * @param op
+ * @returns `true` if the comparison is successful.
+ */
+export const numericCompare = (
+  rawA: FieldValue,
+  rawB: FieldValue,
+  op: 'greater' | 'greater-equal' | 'less' | 'less-equal'
+) => {
+  let a: number | undefined;
+  let b: number | undefined;
+
+  if (isDate(rawA) || isDate(rawB)) {
+    a = normalizeDate(rawA)?.getTime();
+    b = normalizeDate(rawB)?.getTime();
+  } else if (isString(rawA) || isString(rawB)) {
+    a = normalizeNumber(rawA);
+    b = normalizeNumber(rawB);
+  } else {
+    a = rawA;
+    b = rawB;
+  }
+
+  if (isUndefined(a) || isUndefined(b)) return false;
+
+  if (op === 'greater') return a > b;
+  if (op === 'greater-equal') return a >= b;
+  if (op === 'less') return a < b;
+  if (op === 'less-equal') return a <= b;
+
+  return false;
+};

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

@@ -0,0 +1,4 @@
+export { version } from '../package.json';
+export * from './components';
+export { init } from './init';
+export { ELEMENTS, SETTINGS } from './utils/constants';

package/attributes-master/packages/list/src/init.ts

@@ -0,0 +1,38 @@
+import { type FinsweetAttributeInit, isNotEmpty, waitWebflowReady } from '@finsweet/attributes-utils';
+
+import { createListInstance, initList } from './factory';
+import { getCMSElementSelector } from './utils/dom';
+import { queryAllElements } from './utils/selectors';
+
+/**
+ * Inits the attribute.
+ */
+export const init: FinsweetAttributeInit = async () => {
+  await waitWebflowReady();
+
+  const listElements = queryAllElements('list');
+  const lists = listElements
+    .map((listElement) => {
+      const listSelector = getCMSElementSelector('list');
+      const parentList = listElement.parentElement?.closest(listSelector);
+
+      // TODO: We don't support nested CMS lists for now,
+      // but we may want to revisit this in the future
+      const isNestedList = !!parentList && listElement !== parentList;
+      if (isNestedList) return;
+
+      return createListInstance(listElement);
+    })
+    .filter(isNotEmpty);
+
+  const cleanups = lists.map(initList);
+
+  return {
+    result: lists,
+    destroy() {
+      for (const cleanup of cleanups) {
+        cleanup();
+      }
+    },
+  };
+};

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

@@ -0,0 +1,27 @@
+import { addListener } from '@finsweet/attributes-utils';
+
+import type { List } from '../components/List';
+import { loadPaginatedCMSItems } from './load';
+
+/**
+ * Inits the `Load All` mode.
+ * @param list The {@link List} instance.
+ * @returns A cleanup function.
+ */
+export const initAllMode = (list: List) => {
+  loadPaginatedCMSItems(list).then(() => {
+    list.itemsPerPage.value = list.items.value.length;
+  });
+
+  const cleanupClick = addListener(
+    [...list.allPaginationPreviousElements.value, ...list.allPaginationNextElements.value],
+    'click',
+    (e) => {
+      e.preventDefault();
+    }
+  );
+
+  return () => {
+    cleanupClick();
+  };
+};

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

@@ -0,0 +1,39 @@
+import { effect } from '@vue/reactivity';
+
+import type { List } from '../components';
+
+/**
+ * Handles the load-specific elements.
+ * @param list
+ * @returns A cleanup function.
+ */
+export const handleLoadElements = (list: List) => {
+  const runner = effect(() => {
+    const filteredItems = list.hooks.filter.result.value;
+
+    if (list.visibleCountElement) {
+      const visibleCountTotal = Math.min(list.itemsPerPage.value, filteredItems.length);
+
+      list.visibleCountElement.textContent = `${visibleCountTotal}`;
+    }
+
+    if (list.visibleCountFromElement) {
+      const visibleCountFrom = Math.min(
+        (list.currentPage.value - 1) * list.itemsPerPage.value + 1,
+        filteredItems.length
+      );
+
+      list.visibleCountFromElement.textContent = `${visibleCountFrom}`;
+    }
+
+    if (list.visibleCountToElement) {
+      const visibleCountTo = Math.min(list.currentPage.value * list.itemsPerPage.value, filteredItems.length);
+
+      list.visibleCountToElement.textContent = `${visibleCountTo}`;
+    }
+  });
+
+  return () => {
+    runner.effect.stop();
+  };
+};

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

@@ -0,0 +1,63 @@
+import type { List } from '../components/List';
+import type { SETTINGS } from '../utils/constants';
+import { getAttribute, hasAttributeValue } from '../utils/selectors';
+import { initAllMode } from './all';
+import { handleLoadElements } from './elements';
+import { initInfiniteMode } from './infinite';
+import { initMoreMode } from './more';
+import { initPaginationMode } from './pagination';
+
+type LoadModeValues = (typeof SETTINGS)['load']['values'];
+type LoadMode = LoadModeValues[keyof LoadModeValues];
+
+/**
+ * Inits loading functionality for the list.
+ * @param list
+ * @param mode
+ */
+export const initListLoading = (list: List, mode: LoadMode) => {
+  const loadingClass = getAttribute(list.listElement, 'loadingclass');
+  const resetIx = hasAttributeValue(list.listOrWrapper, 'resetix', 'true');
+
+  if (resetIx) {
+    list.webflowModules.add('ix2');
+  }
+
+  // Handle elements
+  const elementsCleanup = handleLoadElements(list);
+
+  // Init mode
+  const loadModeCleanup =
+    mode === 'all'
+      ? initAllMode(list)
+      : mode === 'more'
+        ? initMoreMode(list)
+        : mode === 'infinite'
+          ? initInfiniteMode(list)
+          : initPaginationMode(list);
+
+  const beforeRenderHookCleanup = list.addHook('beforeRender', async (items) => {
+    if (list.triggeredHook === 'pagination') {
+      list.wrapperElement.classList.add(loadingClass);
+
+      const animations = list.wrapperElement.getAnimations({ subtree: true });
+
+      await Promise.all(animations.map((a) => a.finished));
+    }
+
+    return items;
+  });
+
+  const afterRenderHookCleanup = list.addHook('afterRender', (items) => {
+    list.wrapperElement.classList.remove(loadingClass);
+
+    return items;
+  });
+
+  return () => {
+    loadModeCleanup?.();
+    beforeRenderHookCleanup();
+    afterRenderHookCleanup();
+    elementsCleanup();
+  };
+};

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

@@ -0,0 +1,79 @@
+import { addListener } from '@finsweet/attributes-utils';
+import throttle from 'just-throttle';
+
+import type { List } from '../components/List';
+import { getAttribute } from '../utils/selectors';
+import { loadPaginatedCMSItems } from './load';
+import { handleElements, handlePaginationNextButtons } from './more';
+
+/**
+ * Inits the infinite mode.
+ * @param list The {@link List} instance.
+ *
+ * @returns A callback to remove all event listeners.
+ */
+export const initInfiniteMode = (list: List) => {
+  if (!list.listElement) return;
+
+  const thresholdCoefficient = getInfiniteThreshold(list);
+
+  // Add hook
+  list.addHook('pagination', (items) => {
+    const paginatedItems = items.slice(0, list.itemsPerPage.value);
+    return paginatedItems;
+  });
+
+  // Init
+  loadPaginatedCMSItems(list);
+
+  /**
+   * Handles a scroll event.
+   * Recalculates the scroll ratio of the element.
+   */
+  const handleScroll = throttle(async () => {
+    if (!list.listElement) return;
+
+    const { innerHeight } = window;
+    const { bottom } = list.listElement.getBoundingClientRect();
+
+    const validRange = thresholdCoefficient * innerHeight;
+    const shouldLoad = bottom > 0 && bottom <= validRange;
+
+    if (shouldLoad && list.itemsPerPage.value < list.items.value.length) {
+      list.itemsPerPage.value += list.initialItemsPerPage;
+      list.triggerHook('pagination');
+    }
+  }, 10);
+
+  const observer = new IntersectionObserver((entries) => {
+    for (const { isIntersecting } of entries) {
+      const action = isIntersecting ? 'addEventListener' : 'removeEventListener';
+      window[action]('scroll', handleScroll);
+    }
+  });
+
+  // Set listeners
+  observer.observe(list.listElement);
+
+  const cleanupScroll = addListener(window, 'scroll', handleScroll);
+  const cleanupPaginationNextButtons = handlePaginationNextButtons(list);
+  const cleanupElements = handleElements(list);
+
+  return () => {
+    observer.disconnect();
+    cleanupScroll();
+    cleanupPaginationNextButtons();
+    cleanupElements();
+  };
+};
+
+/**
+ * Collects the `Infinite` mode settings.
+ * @param list The {@link List} instance.
+ */
+const getInfiniteThreshold = (list: List): number => {
+  const threshold = getAttribute(list.listOrWrapper, 'threshold');
+
+  const thresholdCoefficient = 1 - threshold / 100;
+  return thresholdCoefficient;
+};

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

@@ -0,0 +1,191 @@
+import { CMS_CSS_CLASSES, fetchPageDocument, isNotEmpty } from '@finsweet/attributes-utils';
+
+import type { List } from '../components/List';
+import { getCollectionElements } from '../utils/dom';
+
+/**
+ * Loads all paginated items of a `List` instance.
+ * @param list The {@link List} instance.
+ *
+ * @returns Nothing, it mutates the `List` instance.
+ */
+export const loadPaginatedCMSItems = (list: List): Promise<void> => {
+  const {
+    paginationNextCMSElement,
+    paginationPreviousCMSElement,
+    paginationCountElement,
+    loadingSearchParamsData,
+    loaderElement,
+    cache: cacheItems,
+  } = list;
+
+  if (!paginationNextCMSElement.value && !paginationPreviousCMSElement.value) {
+    return Promise.resolve();
+  }
+
+  if (loaderElement) {
+    loaderElement.style.display = '';
+    loaderElement.style.opacity = '1';
+  }
+
+  // Attempt to get the total amount of pages from the `Page Count` element.
+  let totalPages;
+
+  if (paginationCountElement) {
+    const [, rawTotalPages] = paginationCountElement.textContent?.split('/') || [];
+    if (rawTotalPages) {
+      totalPages = parseInt(rawTotalPages.trim());
+    }
+  }
+
+  list.loadingPaginatedItems = (async () => {
+    await loadingSearchParamsData;
+
+    if (totalPages) {
+      await parallelItemsLoad(list, totalPages, cacheItems);
+    } else {
+      await chainedPagesLoad(list, cacheItems);
+    }
+
+    if (loaderElement) {
+      loaderElement.style.display = 'none';
+    }
+  })();
+
+  return list.loadingPaginatedItems;
+};
+
+/**
+ * Collects Collection Items from a Collection List's pagination.
+ * Loads all pages in a chained sequence until there are no more valid pages to load.
+ *
+ * @param list The List instance.
+ * @param cache Whether to cache the loaded items or not.
+ *
+ * @returns Nothing, it mutates the `List` instance.
+ */
+const chainedPagesLoad = async (list: List, cache: boolean): Promise<void> => {
+  const currentPage = list.currentPage.value;
+  if (currentPage > 1) {
+    await parallelItemsLoad(list, currentPage, cache);
+  }
+
+  if (!list.paginationNextCMSElement.value) return;
+
+  const { href } = list.paginationNextCMSElement.value;
+  const pageLinks: string[] = [href];
+
+  /**
+   * Loads the items from the specified URL.
+   * @param href The URL to load.
+   */
+  const loadPage = async (href: string) => {
+    // Fetch the page
+    const page = await fetchPageDocument(href, { cache });
+    if (!page) return;
+
+    // Check for recursion (action: `all`)
+    const nextPageURL = await parseLoadedPage(page, list);
+
+    if (!nextPageURL || pageLinks.includes(nextPageURL)) return;
+
+    pageLinks.push(nextPageURL);
+
+    await loadPage(nextPageURL);
+  };
+
+  await loadPage(href);
+};
+
+/**
+ * Collects Collection Items from a Collection List's pagination.
+ * Loads all pages in parallel.
+ *
+ * @param list The List instance.
+ * @param totalPages The total number of pages to load.
+ * @param cache Whether to cache the loaded items or not.
+ *
+ * @returns Nothing, it mutates the `List` instance.
+ */
+const parallelItemsLoad = async (list: List, totalPages: number, cache: boolean) => {
+  if (!list.paginationNextCMSElement.value && !list.paginationPreviousCMSElement.value) return;
+
+  const currentPage = list.currentPage.value;
+
+  if (!list.paginationSearchParam || !currentPage) return;
+
+  const { origin, pathname } = window.location;
+
+  /**
+   * @param pageNumber
+   * @returns The URL of the specified page.
+   */
+  const getPageURL = (pageNumber: number) => `${origin}${pathname}?${list.paginationSearchParam}=${pageNumber}`;
+
+  // Previous Pages
+  for (let pageNumber = currentPage - 1; pageNumber >= 1; pageNumber--) {
+    const url = getPageURL(pageNumber);
+
+    const page = await fetchPageDocument(url, { cache });
+    if (!page) return;
+
+    await parseLoadedPage(page, list, 'unshift');
+  }
+
+  // Next Pages
+  const fetchPromises: Promise<void>[] = [];
+
+  for (let pageNumber = currentPage + 1; pageNumber <= totalPages; pageNumber++) {
+    fetchPromises[pageNumber] = (async () => {
+      const previousPromise = fetchPromises[pageNumber - 1];
+
+      const url = getPageURL(pageNumber);
+
+      const page = await fetchPageDocument(url, { cache });
+
+      await previousPromise;
+
+      if (!page) return;
+
+      await parseLoadedPage(page, list);
+    })();
+  }
+
+  await Promise.all(fetchPromises);
+};
+
+/**
+ * Parses a loaded page and adds the items to the `List` instance.
+ * @param page
+ * @param list
+ * @param itemsTarget
+ * @returns The URL of the next page, if any.
+ */
+const parseLoadedPage = async (page: Document, list: List, itemsTarget: 'push' | 'unshift' = 'push') => {
+  // Get DOM Elements
+  const allCollectionWrappers = page.querySelectorAll(`.${CMS_CSS_CLASSES.wrapper}`);
+  const collectionListWrapper = allCollectionWrappers[list.pageIndex];
+  if (!collectionListWrapper) return;
+
+  // Store and mount the new items
+  const nextPageURL = getCollectionElements(collectionListWrapper, 'pagination-next')?.href;
+  const collectionItems = getCollectionElements(collectionListWrapper, 'item');
+
+  const { length: itemsLength } = collectionItems;
+
+  // Make sure the itemsPerPage value is correct
+  if (nextPageURL && list.initialItemsPerPage !== itemsLength) {
+    list.initialItemsPerPage = itemsLength;
+  }
+
+  // Add the new items to the list
+  const newItems = collectionItems.map(list.createItem).filter(isNotEmpty);
+
+  if (itemsTarget === 'push') {
+    list.items.value = [...list.items.value, ...newItems];
+  } else {
+    list.items.value = [...newItems, ...list.items.value];
+  }
+
+  return nextPageURL;
+};

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

@@ -0,0 +1,97 @@
+import { addListener, isElement, parseNumericAttribute } from '@finsweet/attributes-utils';
+import { effect, watch, type WatchHandle } from '@vue/reactivity';
+
+import type { List } from '../components/List';
+import { getAttribute } from '../utils/selectors';
+import { loadPaginatedCMSItems } from './load';
+
+/**
+ * Inits the default mode.
+ * @param list The {@link List} instance.
+ *
+ * @returns A callback to remove event listeners.
+ */
+export const initMoreMode = (list: List) => {
+  // Add hook
+  list.addHook('pagination', (items) => {
+    const paginatedItems = items.slice(0, list.itemsPerPage.value);
+    return paginatedItems;
+  });
+
+  // Init
+  loadPaginatedCMSItems(list);
+
+  // Listeners
+  const cleanupPaginationNextButtons = handlePaginationNextButtons(list);
+  const cleanupElements = handleElements(list);
+
+  return () => {
+    cleanupPaginationNextButtons();
+    cleanupElements();
+  };
+};
+
+/**
+ * Handles the pagination next buttons.
+ * @param list
+ * @returns A cleanup function.
+ */
+export const handlePaginationNextButtons = (list: List) => {
+  let cleanupLoadRemaining: WatchHandle | undefined;
+
+  const cleanupClick = addListener(list.allPaginationNextElements.value, 'click', async (e) => {
+    if (!e.target || !isElement(e.target)) return;
+
+    e.preventDefault();
+
+    const rawLoadCount = getAttribute(e.target, 'loadcount') || getAttribute(list.listOrWrapper, 'loadcount');
+
+    if (rawLoadCount === 'all') {
+      cleanupLoadRemaining ||= watch(
+        list.items,
+        (items) => {
+          list.itemsPerPage.value = items.length;
+        },
+        { immediate: true }
+      );
+    } else {
+      list.itemsPerPage.value += parseNumericAttribute(rawLoadCount, list.initialItemsPerPage);
+    }
+
+    list.triggerHook('pagination');
+  });
+
+  return () => {
+    cleanupClick();
+    cleanupLoadRemaining?.();
+  };
+};
+
+/**
+ * Handles the display of elements.
+ * @param list
+ * @returns A cleanup function.
+ */
+export const handleElements = (list: List) => {
+  const runner = effect(() => {
+    const allItemsDisplayed = list.itemsPerPage.value >= list.hooks.filter.result.value.length;
+
+    list.allPaginationNextElements.value.forEach((element) => {
+      element.style.display = allItemsDisplayed ? 'none' : '';
+      element.setAttribute('aria-hidden', allItemsDisplayed ? 'true' : 'false');
+      element.setAttribute('tabindex', allItemsDisplayed ? '-1' : '0');
+    });
+
+    if (list.paginationCountElement) {
+      const totalPages = Math.ceil(list.hooks.filter.result.value.length / list.initialItemsPerPage);
+      const currentPage = Math.ceil(list.itemsPerPage.value / list.initialItemsPerPage);
+
+      list.paginationCountElement.innerText = `${currentPage} / ${totalPages}`;
+      list.paginationCountElement.setAttribute('aria-label', `Page ${currentPage} of ${totalPages}`);
+    }
+  });
+
+  return () => {
+    runner.effect.stop();
+  };
+};