@hortonstudio/main 1.2.11 → 1.2.13

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

@@ -1,126 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,191 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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();
-  };
-};