@hortonstudio/main 1.2.4 → 1.2.6

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

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

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

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

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

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

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

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

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