@hortonstudio/main 1.2.4 → 1.2.6

package/attributes-master/packages/list/src/components/ListItem.ts

@@ -0,0 +1,229 @@
+import {
+  type CollectionItemElement,
+  isHTMLAnchorElement,
+  normalizeDate,
+  normalizeNumber,
+} from '@finsweet/attributes-utils';
+
+import type { FieldValue, FilterTaskMatchedFields } from '../filter/types';
+import { getCMSElementSelector } from '../utils/dom';
+import { getAttribute, getSettingSelector, queryElement } from '../utils/selectors';
+import type { List } from './List';
+
+declare module '@vue/reactivity' {
+  export interface RefUnwrapBailTypes {
+    classes: ListItem;
+  }
+}
+
+export type ListItemField =
+  | {
+      type: 'text';
+      rawValue: string | string[];
+      value: string | string[];
+    }
+  | {
+      type: 'date';
+      rawValue: string | string[];
+      value: Date | Date[];
+    }
+  | {
+      type: 'number';
+      rawValue: string | string[];
+      value: number | number[];
+    };
+
+type ListItemFieldElements = {
+  [fieldKey: string]: Array<{
+    value: FieldValue;
+    element: HTMLElement;
+    originalHTML: string;
+  }>;
+};
+
+type ListItemFields = {
+  [fieldKey: string]: ListItemField;
+};
+
+/**
+ * An instance of a list item.
+ */
+export class ListItem {
+  public readonly id = crypto.randomUUID();
+
+  /**
+   * The URL of the item's `Template Page`.
+   */
+  public readonly href?: string;
+
+  /**
+   * Defines the class to apply before rendering the item.
+   */
+  public readonly startingClass: string;
+
+  /**
+   * Defines the class to apply when highlighting matched fields.
+   */
+  public readonly highlightClass: string;
+
+  /**
+   * Defines if the item's transitions should be staggered.
+   */
+  public readonly stagger?: number;
+
+  /**
+   * The item's properties.
+   * Defined by {@link ListItemFields}.
+   */
+  public fields: ListItemFields = {};
+
+  /**
+   * The item's field elements.
+   */
+  public fieldElements: ListItemFieldElements = {};
+
+  /**
+   * Defines an awaitable Promise that resolves when the item's nesting is complete.
+   */
+  public nesting?: Promise<void>;
+
+  /**
+   * @param element The DOM element of the item.
+   * @param listElement The parent Collection List.
+   */
+  constructor(
+    /**
+     * The `Collection Item` element.
+     */
+    public readonly element: CollectionItemElement,
+
+    /**
+     * The `Collection List` parent element.
+     */
+    public readonly list: List,
+
+    /**
+     * The element's current index in the rendered DOM.
+     */
+    public currentIndex?: number
+  ) {
+    let link = queryElement<HTMLAnchorElement>('item-link', { scope: element });
+
+    if (!isHTMLAnchorElement(link)) {
+      link = element.querySelector('a');
+    }
+
+    this.href = link?.href;
+    this.highlightClass = getAttribute(element, 'highlightclass');
+    this.startingClass = getAttribute(element, 'startingclass');
+    this.stagger = getAttribute(element, 'stagger');
+
+    this.collectFields();
+  }
+
+  /**
+   * Collects the field values from child elements and stores them.
+   */
+  public collectFields() {
+    this.fields = {};
+    this.fieldElements = {};
+
+    const fieldSelector = getSettingSelector('field');
+    const fieldElements = [...this.element.querySelectorAll<HTMLElement>(fieldSelector)];
+
+    for (const element of fieldElements) {
+      const fieldKey = getAttribute(element, 'field')?.trim();
+      if (!fieldKey) continue;
+
+      const rawValue = element.textContent;
+      if (!rawValue) continue;
+
+      const type = getAttribute(element, 'fieldtype', { filterInvalid: true }) || 'text';
+      const value =
+        type === 'number' ? normalizeNumber(rawValue) : type === 'date' ? normalizeDate(rawValue) : rawValue.trim();
+
+      if (value === undefined) continue;
+
+      this.fieldElements[fieldKey] ||= [];
+      this.fieldElements[fieldKey].push({ value, element, originalHTML: element.innerHTML });
+
+      const listSelector = getCMSElementSelector('list');
+      const parentList = element.closest(listSelector);
+      const isInsideNestedList = this.list.listElement && parentList && parentList !== this.list.listElement;
+
+      if (isInsideNestedList) {
+        this.fields[fieldKey] ||= { type, rawValue: [], value: [] };
+
+        const field = this.fields[fieldKey];
+
+        if (field.type !== type) continue;
+        if (!Array.isArray(field.value)) continue;
+        if (!Array.isArray(field.rawValue)) continue;
+        if (field.value.some((v) => v === value)) continue;
+        if (field.rawValue.some((v) => v === rawValue)) continue;
+
+        // @ts-expect-error - Value is guaranteed to be the right type
+        field.value.push(value);
+        field.rawValue.push(rawValue);
+      } else {
+        // @ts-expect-error - Value is guaranteed to be the right type
+        this.fields[fieldKey] ||= { fieldKey, type, rawValue, value };
+      }
+    }
+  }
+
+  /**
+   * Highlights the item's fields based on the matching values.
+   * @param matchedFields
+   */
+  public highlight(matchedFields: FilterTaskMatchedFields) {
+    if (!this.list.highlight) return;
+
+    for (const fieldKey in this.fields) {
+      const fieldElementsData = this.fieldElements[fieldKey];
+      if (!fieldElementsData) continue;
+
+      // If the field is not matched, reset the original HTML
+      const matchedField = matchedFields[fieldKey];
+      if (!matchedField) {
+        for (const { element, originalHTML } of fieldElementsData) {
+          element.innerHTML = originalHTML;
+        }
+
+        continue;
+      }
+
+      // If matched, highlight the corresponding elements
+      for (const { value, element, originalHTML } of fieldElementsData) {
+        element.innerHTML = originalHTML;
+
+        const match = matchedField.find(({ fieldValue }) => fieldValue === value);
+        if (!match) continue;
+
+        const regex = new RegExp(match.filterValue, 'gi');
+
+        const walkNodes = (parent: Node) => {
+          for (const node of Array.from(parent.childNodes)) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              walkNodes(node);
+              continue;
+            }
+
+            if (node.nodeType !== Node.TEXT_NODE) continue;
+
+            const text = node.textContent || '';
+
+            if (!regex.test(text)) continue;
+
+            const template = document.createElement('template');
+            template.innerHTML = text.replace(regex, `<span class="${this.highlightClass}">$&</span>`);
+
+            node.replaceWith(template.content);
+          }
+        };
+
+        walkNodes(element);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from './List';
+export * from './ListItem';

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

@@ -0,0 +1,130 @@
+import { isHTMLFormElement } from '@finsweet/attributes-utils';
+
+import { initListCombine } from './combine';
+import { List } from './components/List';
+import { initListFiltering } from './filter';
+import { initListLoading } from './load';
+import { initListNest } from './nest';
+import { initPrevNext } from './prevnext';
+import { initListSelects } from './select';
+import { initListSliders } from './slider';
+import { initListSorting } from './sort';
+import { initStaticItems } from './static';
+import { initListTabs } from './tabs';
+import { getAllCollectionListWrappers, getCollectionElements } from './utils/dom';
+import { getAttribute, getElementSelector, queryAllElements, queryElement } from './utils/selectors';
+import { listInstancesStore } from './utils/store';
+
+/**
+ * Creates a new `CMSList` instance, making sure there are no already existing instances on the page.
+ * @param referenceElement The `Collection List` reference element.
+ * @returns A new `CMSList` instance, if instantiation was valid.
+ */
+export const createListInstance = (referenceElement: HTMLElement): List | undefined => {
+  const wrapper = getCollectionElements(referenceElement, 'wrapper');
+  if (!wrapper) return;
+
+  const existingListInstance = listInstancesStore.get(wrapper);
+  if (existingListInstance) return existingListInstance;
+
+  const allWrappers = getAllCollectionListWrappers();
+
+  const index = allWrappers.indexOf(wrapper);
+  if (index === -1) return;
+
+  const listInstance = new List(wrapper, index);
+  listInstancesStore.set(wrapper, listInstance);
+
+  return listInstance;
+};
+
+/**
+ * Initializes the list features.
+ * @param list
+ * @returns A cleanup function.
+ */
+export const initList = (list: List) => {
+  const { instance } = list;
+
+  const items = list.items.value;
+
+  const cleanups = new Set<(() => void) | undefined>();
+
+  // Filter
+  const filtersForm = queryAllElements('filters', { instance }).filter(isHTMLFormElement);
+  if (filtersForm.length) {
+    const cleanup = initListFiltering(list, filtersForm);
+    cleanups.add(cleanup);
+  }
+
+  // Sort
+  const sortTriggers = queryAllElements('sort-trigger', { instance });
+  if (sortTriggers.length) {
+    const cleanup = initListSorting(list, sortTriggers);
+    cleanups.add(cleanup);
+  }
+
+  // Load
+  const load = getAttribute(list.listOrWrapper, 'load', { filterInvalid: true });
+  if (load) {
+    const cleanup = initListLoading(list, load);
+    cleanups.add(cleanup);
+  }
+
+  // Combine
+  const combine = getAttribute(list.listOrWrapper, 'combine');
+  if (combine) {
+    const cleanup = initListCombine(list, combine);
+    cleanups.add(cleanup);
+  }
+
+  // Nest
+  const nest = items.length ? !!queryElement('nest-target', { scope: items[0].element }) : false;
+  if (nest) {
+    const cleanup = initListNest(list);
+    cleanups.add(cleanup);
+  }
+
+  // Static Items
+  const listSelector = getElementSelector('list', { instance });
+  const itemSelector = getElementSelector('item', { instance });
+  const staticItemSelector = `:is(${itemSelector}):not(:is(${listSelector}) :is(${itemSelector}))`;
+  const staticItems = document.querySelectorAll<HTMLElement>(staticItemSelector);
+  if (staticItems.length) {
+    const cleanup = initStaticItems(list, [...staticItems]);
+    cleanups.add(cleanup);
+  }
+
+  // Sliders
+  const sliders = queryAllElements('slider', { instance });
+  if (sliders.length) {
+    initListSliders(list, sliders);
+  }
+
+  // Tabs
+  const tabs = queryAllElements('tabs', { instance });
+  if (tabs.length) {
+    initListTabs(list, tabs);
+  }
+
+  // Selects
+  const selects = queryAllElements('select', { instance });
+  if (selects.length) {
+    initListSelects(list, selects);
+  }
+
+  // Prev/Next
+  const previousItemTarget = queryElement('previous-item', { instance });
+  const nextItemTarget = queryElement('next-item', { instance });
+  if (previousItemTarget || nextItemTarget) {
+    initPrevNext(list, previousItemTarget, nextItemTarget);
+  }
+
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup?.();
+    }
+
+    cleanups.clear();
+  };
+};