@hortonstudio/main 1.2.5 → 1.2.7

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

@@ -0,0 +1,28 @@
+export type Sorting = {
+  fieldKey?: string;
+  direction?: SortingDirection;
+  interacted?: boolean;
+};
+
+/**
+ * Sorting
+ */
+export type SortingDirection = 'asc' | 'desc';
+
+/**
+ * Dropdown
+ */
+export interface DropdownOption {
+  element: HTMLAnchorElement;
+  sortKey?: string;
+  direction?: SortingDirection;
+  selected: boolean;
+}
+
+export type DropdownOptions = DropdownOption[];
+
+export type DropdownLabelData = {
+  element: Element;
+  originalHTML: string;
+  updateContent: (option: DropdownOption) => void;
+};

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

@@ -0,0 +1,73 @@
+import { cloneNode } from '@finsweet/attributes-utils';
+
+import type { List, ListItem } from '../components';
+import { getAttribute } from '../utils/selectors';
+
+/**
+ * Inits the static items for a list.
+ * @param list
+ * @param staticItems
+ */
+export const initStaticItems = (list: List, staticItems: HTMLElement[]) => {
+  const { interactiveItems, nonInteractiveItems } = staticItems.reduce<{
+    interactiveItems: Array<{ position: number; item: ListItem }>;
+    nonInteractiveItems: Array<{ position: number; item: ListItem; repeat?: number }>;
+  }>(
+    (acc, staticItem) => {
+      const position = getAttribute(staticItem, 'position') - 1; // Users define positions starting from 1
+      const repeat = getAttribute(staticItem, 'repeat');
+      const interactive = getAttribute(staticItem, 'interactive');
+
+      const item = list.createItem(staticItem);
+
+      if (interactive) {
+        acc.interactiveItems.push({ position, item });
+      } else {
+        acc.nonInteractiveItems.push({ position, item, repeat });
+      }
+
+      return acc;
+    },
+    { interactiveItems: [], nonInteractiveItems: [] }
+  );
+
+  interactiveItems.sort((a, b) => a.position - b.position);
+  nonInteractiveItems.sort((a, b) => a.position - b.position);
+
+  // Non-interactive items are injected before rendering
+  const cleanup = list.addHook('beforeRender', (items) => {
+    const newItems = [...items];
+
+    for (const { position, item, repeat } of nonInteractiveItems) {
+      newItems.splice(position, 0, item);
+
+      if (!repeat) continue;
+
+      let index = position + repeat;
+
+      while (index < newItems.length) {
+        const elementClone = cloneNode(item.element);
+        const itemClone = list.createItem(elementClone);
+
+        newItems.splice(index, 0, itemClone);
+        index += repeat;
+      }
+    }
+
+    return newItems;
+  });
+
+  // Interactive items are added as regular elements
+  for (const { position, item } of interactiveItems) {
+    list.items.value.splice(position, 0, item);
+  }
+
+  // Manually trigger the beforeRender hook if there are no interactive items
+  // This is necessary because the beforeRender hook will not be triggered if there are no
+  // mutations to the items array
+  if (!interactiveItems.length) {
+    list.triggerHook('beforeRender');
+  }
+
+  return cleanup;
+};

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

@@ -0,0 +1,97 @@
+import { ARIA_ROLE_KEY, TABS_CSS_CLASSES } from '@finsweet/attributes-utils';
+
+import type { List, ListItem } from '../components';
+import { queryElement } from '../utils/selectors';
+
+/**
+ * Inits the list tabs.
+ * @param list
+ * @param tabsReferences
+ */
+export const initListTabs = (list: List, tabsReferences: HTMLElement[]) => {
+  list.webflowModules.add('tabs');
+
+  tabsReferences.forEach((sliderReference) => initListTab(list, sliderReference));
+};
+
+/**
+ * Inits a list slider.
+ * @param list
+ * @param tabsReference
+ */
+const initListTab = (list: List, tabsReference: HTMLElement) => {
+  const tabsElement = tabsReference.closest(`.${TABS_CSS_CLASSES.tabs}`);
+  if (!tabsElement) return;
+
+  const tabsMenu = tabsElement.querySelector(`.${TABS_CSS_CLASSES.tabsMenu}`);
+  if (!tabsMenu) return;
+
+  const tabsContent = tabsElement.querySelector(`.${TABS_CSS_CLASSES.tabsContent}`);
+  if (!tabsContent) return;
+
+  const existingTabLinks = tabsElement.querySelectorAll(`.${TABS_CSS_CLASSES.tabLink}`);
+  if (!existingTabLinks.length) return;
+
+  const existingTabPanes = tabsElement.querySelectorAll(`.${TABS_CSS_CLASSES.tabPane}`);
+  if (!existingTabPanes.length) return;
+
+  // Store the template CSS classes
+  const tabLinkCSS = existingTabLinks[0].classList.value;
+  const tabPaneCSS = existingTabPanes[0].classList.value;
+
+  // Remove existing elements
+  for (const element of [...existingTabLinks, ...existingTabPanes]) {
+    element.remove();
+  }
+
+  // Store rendered items
+  const renderedItems = new Map<
+    ListItem,
+    {
+      tabLink: HTMLElement;
+      tabPane: HTMLElement;
+    }
+  >();
+
+  list.addHook('render', (items = []) => {
+    for (const item of items) {
+      if (renderedItems.has(item)) continue;
+
+      item.element.removeAttribute(ARIA_ROLE_KEY);
+
+      const tabLink = document.createElement('div');
+      tabLink.setAttribute('class', tabLinkCSS);
+
+      const tabPane = document.createElement('div');
+      tabPane.setAttribute('class', tabPaneCSS);
+
+      let tabLinkContent = queryElement('tab-link', { scope: item.element });
+      if (!tabLinkContent) {
+        tabLinkContent = document.createElement('div');
+        tabLinkContent.innerHTML = /* html */ `Missing <strong>fs-list-element="tab-link"</strong>`;
+      }
+
+      tabLink.appendChild(tabLinkContent);
+      tabsMenu.appendChild(tabLink);
+      tabPane.appendChild(item.element);
+      tabsContent.appendChild(tabPane);
+
+      renderedItems.set(item, { tabLink, tabPane });
+    }
+
+    for (const [item, { tabLink, tabPane }] of renderedItems) {
+      if (items.includes(item)) continue;
+
+      tabLink?.remove();
+      tabPane?.remove();
+      renderedItems.delete(item);
+    }
+
+    [...renderedItems.values()].forEach(({ tabLink, tabPane }, index) => {
+      const dataset = `Tab ${index}`;
+
+      tabLink.dataset.wTab = dataset;
+      tabPane.dataset.wTab = dataset;
+    });
+  });
+};