@hortonstudio/main 1.2.12 → 1.2.14

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

@@ -1,56 +0,0 @@
-import { isHTMLSelectElement } from '@finsweet/attributes-utils';
-
-import type { List } from '../components';
-import { queryAllElements } from '../utils/selectors';
-
-/**
- * Inits the list select dropdowns.
- * @param list
- * @param selectElements
- */
-export const initListSelects = (list: List, selectElements: HTMLElement[]) => {
-  list.webflowModules.add('slider');
-
-  selectElements.forEach((sliderReference) => initListSelect(list, sliderReference));
-};
-
-/**
- * Inits a list select dropdown.
- * @param list
- * @param selectElement
- */
-const initListSelect = (list: List, selectElement: HTMLElement) => {
-  if (!isHTMLSelectElement(selectElement)) return;
-
-  // Store rendered options
-  const renderedOptions = new Map<string, HTMLOptionElement>();
-
-  // Handle items
-  list.addHook('render', (items = []) => {
-    const allOptionValues = new Set<string>();
-
-    for (const item of items) {
-      const optionValues = queryAllElements('select-value', { scope: item.element });
-
-      for (const optionValue of optionValues) {
-        allOptionValues.add(optionValue.innerText);
-      }
-    }
-
-    for (const optionValue of allOptionValues) {
-      if (renderedOptions.has(optionValue)) continue;
-
-      const option = new Option(optionValue, optionValue);
-
-      selectElement.options.add(option);
-      renderedOptions.set(optionValue, option);
-    }
-
-    for (const [optionValue, option] of renderedOptions) {
-      if (allOptionValues.has(optionValue)) continue;
-
-      option?.remove();
-      renderedOptions.delete(optionValue);
-    }
-  });
-};

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

@@ -1,62 +0,0 @@
-import { ARIA_ROLE_KEY, SLIDER_CSS_CLASSES } from '@finsweet/attributes-utils';
-
-import type { List, ListItem } from '../components';
-
-/**
- * Inits the list sliders.
- * @param list
- * @param slidersReferences
- */
-export const initListSliders = (list: List, slidersReferences: HTMLElement[]) => {
-  list.webflowModules.add('slider');
-
-  slidersReferences.forEach((sliderReference) => initListSlider(list, sliderReference));
-};
-
-/**
- * Inits a list slider.
- * @param list
- * @param sliderReference
- */
-const initListSlider = (list: List, sliderReference: HTMLElement) => {
-  const sliderElement = sliderReference.closest(`.${SLIDER_CSS_CLASSES.slider}`);
-  if (!sliderElement) return;
-
-  const sliderMask = sliderElement.querySelector(`.${SLIDER_CSS_CLASSES.sliderMask}`);
-  if (!sliderMask) return;
-
-  const existingSlides = sliderElement.querySelectorAll(`.${SLIDER_CSS_CLASSES.slide}`);
-  if (!existingSlides.length) return;
-
-  // Store the template CSS classes
-  const slideCSS = existingSlides[0].classList.value;
-
-  // Remove existing slides
-  for (const slide of existingSlides) slide.remove();
-
-  // Store rendered items
-  const renderedItems = new Map<ListItem, HTMLDivElement>();
-
-  list.addHook('render', (items = []) => {
-    for (const item of items) {
-      if (renderedItems.has(item)) continue;
-
-      item.element.removeAttribute(ARIA_ROLE_KEY);
-
-      const newSlide = document.createElement('div');
-      newSlide.setAttribute('class', slideCSS);
-
-      newSlide.appendChild(item.element);
-      sliderMask.appendChild(newSlide);
-
-      renderedItems.set(item, newSlide);
-    }
-
-    for (const [item, slide] of renderedItems) {
-      if (items.includes(item)) continue;
-
-      slide?.remove();
-      renderedItems.delete(item);
-    }
-  });
-};

package/attributes-master/packages/list/src/sort/buttons.ts

@@ -1,96 +0,0 @@
-import {
-  addListener,
-  ARIA_ROLE_KEY,
-  ARIA_ROLE_VALUES,
-  ARIA_SORT_KEY,
-  ARIA_SORT_VALUES,
-  isNotEmpty,
-  TABINDEX_KEY,
-} from '@finsweet/attributes-utils';
-import { computed, effect, ref } from '@vue/reactivity';
-
-import type { List } from '../components/List';
-import { getAttribute, hasAttributeValue } from '../utils/selectors';
-import type { SortingDirection } from './types';
-
-/**
- * Inits the sorting with a group of Buttons.
- * @param buttons The button elements.
- * @param list The {@link List} instance.
-
- */
-export const initButtons = (buttons: HTMLElement[], list: List) => {
-  const activeButton = ref<HTMLElement | undefined>();
-
-  const cleanups = buttons
-    .flatMap((button) => {
-      const fieldKey = getAttribute(button, 'field')?.trim();
-      if (!fieldKey) return;
-
-      const reverse = hasAttributeValue(button, 'reverse', 'true');
-      const ascClass = getAttribute(button, 'ascclass');
-      const desClass = getAttribute(button, 'descclass');
-
-      const currentDirection = ref<SortingDirection | undefined>();
-
-      button.setAttribute(ARIA_ROLE_KEY, ARIA_ROLE_VALUES.columnheader);
-      button.setAttribute(TABINDEX_KEY, '0');
-
-      // Dynamically set the `aria-sort` attribute
-      const ariaSort = computed(() => {
-        if (activeButton.value !== button) return 'none';
-
-        return currentDirection.value === 'asc' ? ARIA_SORT_VALUES.ascending : ARIA_SORT_VALUES.descending;
-      });
-
-      const ariaSortRunner = effect(() => {
-        button.setAttribute(ARIA_SORT_KEY, ariaSort.value);
-      });
-
-      // Dynamically set the direction CSS class
-      const cssClass = computed(() => {
-        if (activeButton.value !== button) return null;
-
-        return currentDirection.value === 'asc' ? ascClass : desClass;
-      });
-
-      const cssClassRunner = effect(() => {
-        button.classList.remove(ascClass, desClass);
-
-        if (cssClass.value) {
-          button.classList.add(cssClass.value);
-        }
-      });
-
-      // Sort on click
-      const clickCleanup = addListener(button, 'click', async (e) => {
-        e.preventDefault();
-
-        activeButton.value = button;
-        currentDirection.value = getNextDirection(currentDirection.value, reverse);
-
-        list.sorting.value = {
-          fieldKey,
-          direction: currentDirection.value,
-          interacted: true,
-        };
-      });
-
-      return [() => ariaSortRunner.effect.stop(), () => cssClassRunner.effect.stop(), clickCleanup];
-    })
-    .filter(isNotEmpty);
-
-  return () => {
-    for (const cleanup of cleanups) cleanup();
-  };
-};
-
-/**
- * @returns The new direction of a button.
- * @param currentDirection The current direction of a button.
- */
-const getNextDirection = (currentDirection: SortingDirection | undefined, reverse: boolean): SortingDirection => {
-  if (!currentDirection) return reverse ? 'desc' : 'asc';
-
-  return currentDirection === 'desc' ? 'asc' : 'desc';
-};

package/attributes-master/packages/list/src/sort/dropdown.ts

@@ -1,179 +0,0 @@
-import {
-  addListener,
-  ARIA_HASPOPUP_KEY,
-  ARIA_MULTISELECTABLE_KEY,
-  ARIA_ROLE_KEY,
-  ARIA_ROLE_VALUES,
-  ARIA_SELECTED_KEY,
-  closeDropdown,
-  CURRENT_CSS_CLASS,
-  DROPDOWN_CSS_CLASSES,
-  type DropdownElement,
-  type DropdownList,
-  type DropdownToggle,
-  isElement,
-} from '@finsweet/attributes-utils';
-import { effect, type Ref, ref } from '@vue/reactivity';
-
-import type { List } from '../components/List';
-import { getAttribute, queryElement } from '../utils/selectors';
-import type { SortingDirection } from './types';
-
-type DropdownOption = {
-  element: HTMLAnchorElement;
-  fieldKey?: string;
-  direction?: SortingDirection;
-  cleanup: () => void;
-};
-
-type DropdownOptions = Map<HTMLAnchorElement, DropdownOption>;
-
-/**
- * Inits sorting on a `Dropdown` component.
- * @param dropdown The {@link DropdownElement} element.
- * @param list The {@link List} instance.
- */
-export const initDropdown = (dropdown: DropdownElement, list: List) => {
-  const dropdownToggle = dropdown.querySelector<DropdownToggle>(`.${DROPDOWN_CSS_CLASSES.dropdownToggle}`);
-  const dropdownList = dropdown.querySelector<DropdownList>(`.${DROPDOWN_CSS_CLASSES.dropdownList}`);
-
-  if (!dropdownToggle || !dropdownList) {
-    return;
-  }
-
-  setDropdownAria(dropdownToggle, dropdownList);
-
-  const activeOption = ref<DropdownOption | undefined>();
-
-  // Listen events
-  const dropdownLabelCleanup = initDropdownLabel(dropdownToggle, activeOption);
-
-  const dropdownOptions = initDropdownOptions(dropdownList, activeOption);
-  if (!dropdownOptions) {
-    return;
-  }
-
-  const clickCleanup = addListener(dropdownList, 'click', async (e) => {
-    e.preventDefault();
-
-    const { target } = e;
-
-    if (!isElement(target)) {
-      return;
-    }
-
-    const optionElement = target.closest('a');
-    if (!optionElement) return;
-
-    const optionData = dropdownOptions.get(optionElement);
-    if (!optionData) return;
-
-    const isSelected = activeOption.value?.element === optionElement;
-    if (isSelected) return;
-
-    activeOption.value = optionData;
-
-    list.sorting.value = {
-      fieldKey: optionData.fieldKey,
-      direction: optionData.direction,
-      interacted: true,
-    };
-
-    closeDropdown(dropdownToggle);
-  });
-
-  return () => {
-    dropdownLabelCleanup?.();
-    clickCleanup();
-  };
-};
-
-/**
- * Collects all options in the Dropdown.
- * @param dropdownList The {@link DropdownList} element.
- * @returns
- */
-const initDropdownOptions = (dropdownList: DropdownList, activeOption: Ref<DropdownOption | undefined>) => {
-  const dropdownOptions: DropdownOptions = new Map();
-
-  const options = [...dropdownList.querySelectorAll('a')];
-  if (!options.length) return;
-
-  for (const element of options) {
-    element.setAttribute(ARIA_ROLE_KEY, ARIA_ROLE_VALUES.option);
-
-    const rawField = getAttribute(element, 'field')?.trim();
-
-    let fieldKey: string | undefined;
-    let direction: SortingDirection | undefined;
-
-    if (rawField) {
-      if (rawField.endsWith('-asc')) {
-        direction = 'asc';
-        fieldKey = rawField.slice(0, -4);
-      } else if (rawField.endsWith('-desc')) {
-        direction = 'desc';
-        fieldKey = rawField.slice(0, -5);
-      } else {
-        direction = 'asc';
-        fieldKey = rawField;
-      }
-    }
-
-    // Handle active state
-    const runner = effect(() => {
-      const isSelected = activeOption.value?.element === element;
-
-      if (isSelected) {
-        element.setAttribute(ARIA_SELECTED_KEY, 'true');
-        element.classList.add(CURRENT_CSS_CLASS);
-      } else {
-        element.removeAttribute(ARIA_SELECTED_KEY);
-        element.classList.remove(CURRENT_CSS_CLASS);
-      }
-    });
-
-    dropdownOptions.set(element, {
-      element,
-      fieldKey,
-      direction,
-      cleanup: () => runner.effect.stop(),
-    });
-  }
-
-  return dropdownOptions;
-};
-
-/**
- * Dynamically updates the Dropdown label with the selected option.
- * @param dropdownToggle The {@link DropdownToggle}.
- * @returns A cleanup function.
- */
-const initDropdownLabel = (dropdownToggle: DropdownToggle, activeOption: Ref<DropdownOption | undefined>) => {
-  const dropdownLabel = queryElement('dropdown-label', { scope: dropdownToggle });
-  if (!dropdownLabel) return;
-
-  const originalHTML = dropdownLabel.innerHTML;
-
-  const runner = effect(() => {
-    if (!activeOption.value) {
-      dropdownLabel.innerHTML = originalHTML;
-      return;
-    }
-
-    dropdownLabel.innerHTML = activeOption.value.element.innerHTML;
-  });
-
-  return () => runner.effect.stop();
-};
-
-/**
- * Adds `a11y` attributes to the Dropdown elements.
- * @param dropdownToggle The {@link DropdownToggle} element.
- * @param dropdownList The {@link DropdownList} element.
- */
-const setDropdownAria = (dropdownToggle: DropdownToggle, dropdownList: DropdownList) => {
-  dropdownToggle.setAttribute(ARIA_HASPOPUP_KEY, ARIA_ROLE_VALUES.listbox);
-  dropdownList.setAttribute(ARIA_ROLE_KEY, ARIA_ROLE_VALUES.listbox);
-  dropdownList.setAttribute(ARIA_MULTISELECTABLE_KEY, 'false');
-};

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

@@ -1,81 +0,0 @@
-import { DROPDOWN_CSS_CLASSES, type DropdownElement, isHTMLSelectElement } from '@finsweet/attributes-utils';
-import { watch } from '@vue/reactivity';
-import debounce from 'just-debounce';
-
-import type { List } from '../components/List';
-import { getAttribute } from '../utils/selectors';
-import { initButtons } from './buttons';
-import { initDropdown } from './dropdown';
-import { getListSortingQuery, setListSortingQuery } from './query';
-import { initHTMLSelect } from './select';
-import { sortListItems } from './sort';
-
-/**
- * Inits sorting functionality for the list.
- */
-export const initListSorting = (list: List, triggers: HTMLElement[]) => {
-  const sortingClass = getAttribute(list.listElement, 'sortingclass');
-
-  // Init mode
-  const [firstTrigger] = triggers;
-  const isSelect = isHTMLSelectElement(firstTrigger);
-  const isDropdown = firstTrigger.closest<DropdownElement>(`.${DROPDOWN_CSS_CLASSES.dropdown}`);
-
-  const modeCleanup = isSelect
-    ? initHTMLSelect(firstTrigger, list)
-    : isDropdown
-      ? initDropdown(isDropdown, list)
-      : initButtons(triggers, list);
-
-  // Set up hooks
-  const sortHookCleanup = list.addHook('sort', (items) => {
-    const sortedItems = sortListItems(items, list.sorting.value);
-    return sortedItems;
-  });
-
-  const beforeRenderHookCleanup = list.addHook('beforeRender', async (items) => {
-    if (list.triggeredHook === 'sort') {
-      list.wrapperElement.classList.add(sortingClass);
-
-      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(sortingClass);
-
-    return items;
-  });
-
-  // Set up reactivity
-  const sortingCleanup = watch(
-    list.sorting,
-    debounce(() => {
-      list.triggerHook('sort', {
-        scrollToAnchor: list.hasInteracted.value,
-        resetCurrentPage: list.hasInteracted.value,
-      });
-
-      // Handle query params
-      if (list.showQuery) {
-        setListSortingQuery(list);
-      }
-    }, 0),
-    { deep: true, immediate: true }
-  );
-
-  // Read query params
-  getListSortingQuery(list);
-
-  return () => {
-    modeCleanup?.();
-    sortHookCleanup();
-    beforeRenderHookCleanup();
-    afterRenderHookCleanup();
-    sortingCleanup();
-  };
-};

package/attributes-master/packages/list/src/sort/query.ts

@@ -1,63 +0,0 @@
-import type { List } from '../components';
-import { listInstancesStore } from '../utils/store';
-import type { SortingDirection } from './types';
-
-/**
- * @param list
- * @returns A regex to match the filters query string.
- */
-const getListSortingQueryRegex = (list: List) => {
-  const allFieldKeys = Object.keys(list.allFieldsData.value);
-
-  const regex = new RegExp(`sort_(${allFieldKeys.join('|')})$`);
-  return regex;
-};
-
-/**
- * Gets the filters query string for the list.
- * @param list
- */
-export const getListSortingQuery = async (list: List) => {
-  const usePrefix = listInstancesStore.size > 1;
-  const existingParams = await list.getAllSearchParams(usePrefix);
-
-  const regex = getListSortingQueryRegex(list);
-
-  const param = existingParams.find(([key, value]) => key.match(regex) && (value === 'asc' || value === 'desc'));
-  if (!param) return;
-
-  const [key, value] = param;
-
-  const match = key.match(regex);
-  if (!match) return;
-
-  const fieldKey = match[1];
-
-  list.sorting.value.fieldKey = fieldKey;
-  list.sorting.value.direction = value as SortingDirection;
-  list.sorting.value.interacted = true;
-};
-
-/**
- * Sets the filters query string for the list.
- * @param list
- */
-export const setListSortingQuery = async (list: List) => {
-  const usePrefix = listInstancesStore.size > 1;
-  const existingParams = await list.getAllSearchParams(usePrefix);
-
-  const regex = getListSortingQueryRegex(list);
-
-  for (const [key] of existingParams) {
-    if (!key.match(regex)) continue;
-
-    await list.setSearchParam(key, null, usePrefix);
-  }
-
-  const { fieldKey, direction } = list.sorting.value;
-  if (!fieldKey || !direction) return;
-
-  const key = `sort_${fieldKey}`;
-
-  list.setSearchParam(key, direction, usePrefix);
-};

package/attributes-master/packages/list/src/sort/select.ts

@@ -1,67 +0,0 @@
-import { addListener } from '@finsweet/attributes-utils';
-
-import type { List } from '../components/List';
-import { hasAttributeValue } from '../utils/selectors';
-import type { Sorting, SortingDirection } from './types';
-
-/**
- * Inits sorting on an `HTMLSelectElement`.
- * @param selectElement The {@link HTMLSelectElement}.
- * @param list The {@link List} instance.
- */
-export const initHTMLSelect = (selectElement: HTMLSelectElement, list: List) => {
-  const handleSelect = (interacted = false) => {
-    list.sorting.value = getSortingParams(selectElement.value, interacted);
-  };
-
-  // Sort on change
-  const changeCleanup = addListener(selectElement, 'change', () => handleSelect(true));
-
-  // Sort on init
-  handleSelect();
-
-  // Prevent submit events on the form
-  const form = selectElement.closest('form');
-
-  const allowSubmit = hasAttributeValue(selectElement, 'allowsubmit', 'true');
-
-  const submitCleanup = allowSubmit ? addListener(form, 'submit', handleFormSubmit) : undefined;
-
-  return () => {
-    changeCleanup();
-    submitCleanup?.();
-  };
-};
-
-/**
- * Handles `submit` events on the parent form of the `HTMLSelect` element.
- * @param e The `submit` event.
- */
-const handleFormSubmit = (e: Event) => {
-  e.preventDefault();
-  e.stopImmediatePropagation();
-  return false;
-};
-
-/**
- * Extracts the `sortKey` and `direction` from a Select element value.
- * @param value The Select element value.
- * @param interacted Indicates if the user interacted with the select element.
- */
-const getSortingParams = (value: string, interacted = false): Sorting => {
-  let fieldKey: string;
-  let direction: SortingDirection;
-
-  if (value.endsWith('-asc')) {
-    direction = 'asc';
-    fieldKey = value.slice(0, -4);
-  } else if (value.endsWith('-desc')) {
-    direction = 'desc';
-    fieldKey = value.slice(0, -5);
-  } else {
-    direction = 'asc';
-    fieldKey = value;
-  }
-
-  return { fieldKey, direction, interacted };
-};

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

@@ -1,79 +0,0 @@
-import type { ListItem } from '../components/ListItem';
-import type { Sorting } from './types';
-
-/**
- * Sorts the items of a `CMSList`.
- * **Important:** This method mutates the {@link ListItem.items} property.
- *
- * @param listInstance The {@link CMSList} instance.
- * @param direction The direction to sort.
- * @param sortKey The key of the field to use as sorting reference.
- */
-export const sortListItems = (items: ListItem[], { fieldKey, direction }: Sorting): ListItem[] | undefined => {
-  const validField = !!direction && !!fieldKey && items.some(({ fields }) => fieldKey in fields);
-  if (!validField) return;
-
-  const sorted = [...items].sort((firstItem, secondItem) => {
-    const firstItemProp = firstItem.fields[fieldKey];
-    const secondItemProp = secondItem.fields[fieldKey];
-
-    if (!firstItemProp) return 1;
-    if (!secondItemProp) return -1;
-
-    // Number sorting
-    if (firstItemProp.type === 'number' && secondItemProp.type === 'number') {
-      const firstItemValue = getItemValue(firstItemProp.value);
-      const secondItemValue = getItemValue(secondItemProp.value);
-
-      if (isNaN(firstItemValue)) return 1;
-      if (isNaN(secondItemValue)) return -1;
-
-      if (direction === 'asc') return firstItemValue - secondItemValue;
-
-      return secondItemValue - firstItemValue;
-    }
-
-    // Dates sorting
-    if (firstItemProp.type === 'date' && secondItemProp.type === 'date') {
-      const firstItemValue = getItemValue(firstItemProp.value).getTime();
-      const secondItemValue = getItemValue(secondItemProp.value).getTime();
-
-      if (direction === 'asc') return firstItemValue - secondItemValue;
-
-      return secondItemValue - firstItemValue;
-    }
-
-    // Text sorting
-    if (firstItemProp.type === 'text' && secondItemProp.type === 'text') {
-      const firstItemValue = getItemValue(firstItemProp.value);
-      const secondItemValue = getItemValue(secondItemProp.value);
-
-      const collatorOptions: Intl.CollatorOptions = {
-        numeric: true,
-        sensitivity: 'base',
-      };
-
-      if (direction === 'asc') return firstItemValue.localeCompare(secondItemValue, undefined, collatorOptions);
-
-      return secondItemValue.localeCompare(firstItemValue, undefined, collatorOptions);
-    }
-
-    return 0;
-  });
-
-  return sorted;
-};
-
-/**
- * @returns The first value of the array or the value itself.
- * @param value
- */
-const getItemValue = <
-  Value extends number | string | Date | number[] | string[] | Date[],
-  ReturnValue = Value extends (infer U)[] ? U : Value,
->(
-  value: Value
-) => {
-  const [firstValue] = Array.isArray(value) ? value : [value];
-  return firstValue as ReturnValue;
-};