@hortonstudio/main 1.2.5 → 1.2.6

package/attributes-master/packages/accordion/README.md

@@ -0,0 +1,31 @@
+# `accordion` Attribute
+
+Create accessible accordions inside Webflow without Webflow Interactions.
+
+## Getting Started
+
+Please follow the documentation at [finsweet.com/attributes](https://www.finsweet.com/attributes) to learn how to use Attributes in your Webflow projects.
+
+## Accessing the API
+
+To learn how to access the API, please check the general [API Reference](../attributes/README.md#api-reference) documentation:
+
+```javascript
+window.FinsweetAttributes ||= [];
+window.FinsweetAttributes.push([
+  'accordion',
+  (accordionInstances) => {
+    // Your code goes here.
+  },
+]);
+```
+
+The `result` object contains the [Accordion](#the-accordion-object) instances that are currently active on the page.
+
+## The Accordion object
+
+Work in progress 🚧
+
+## License
+
+[Apache 2.0](../../LICENSE.md)

package/attributes-master/packages/accordion/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@finsweet/attributes-accordion",
+  "version": "2.0.7",
+  "description": "Create accessible accordions inside Webflow without Webflow Interactions.",
+  "private": true,
+  "type": "module",
+  "types": "src/index.ts",
+  "scripts": {
+    "lint": "eslint ./src && prettier --check ./src",
+    "lint:fix": "eslint ./src --fix && prettier --write ./src",
+    "check": "tsc --noEmit"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@finsweet/attributes-utils": "workspace:*"
+  },
+  "devDependencies": {
+    "@finsweet/attributes-list": "workspace:*"
+  }
+}

package/attributes-master/packages/accordion/src/actions/a11y.ts

@@ -0,0 +1,39 @@
+import {
+  ARIA_CONTROLS_KEY,
+  ARIA_EXPANDED_KEY,
+  ARIA_LABEL_KEY,
+  ARIA_LABELLEDBY_KEY,
+  ARIA_ROLE_KEY,
+  ARIA_ROLE_VALUES,
+  ensureUniqueId,
+  TABINDEX_KEY,
+} from '@finsweet/attributes-utils';
+
+/**
+ * Sets the correspondent aria attributes to the elements.
+ * @param trigger
+ * @param content
+ */
+export const setAccordionA11y = (trigger: HTMLElement, content: HTMLElement, isOpen: boolean) => {
+  const triggerId = ensureUniqueId(trigger);
+  const contentId = ensureUniqueId(content);
+
+  trigger.setAttribute(ARIA_ROLE_KEY, ARIA_ROLE_VALUES.button);
+  trigger.setAttribute(ARIA_CONTROLS_KEY, contentId);
+  trigger.setAttribute(TABINDEX_KEY, '0');
+
+  setAccordionAriaExpanded(trigger, isOpen);
+
+  if (!content.hasAttribute(ARIA_LABELLEDBY_KEY) && !content.hasAttribute(ARIA_LABEL_KEY)) {
+    content.setAttribute(ARIA_LABELLEDBY_KEY, triggerId);
+  }
+};
+
+/**
+ * Sets the [aria-expanded] attribute value to a trigger.
+ * @param trigger
+ * @param isOpen
+ */
+export const setAccordionAriaExpanded = (trigger: HTMLElement, isOpen: boolean) => {
+  trigger.setAttribute(ARIA_EXPANDED_KEY, String(isOpen));
+};

package/attributes-master/packages/accordion/src/actions/classes.ts

@@ -0,0 +1,27 @@
+import type { getAccordionSettings } from './settings';
+
+/**
+ * Adds/removes the active class from the accordion's elements.
+ * @param params
+ */
+export const setActiveClass = ({
+  accordion,
+  trigger,
+  content,
+  arrow,
+  isOpen,
+  groupActiveClass,
+  accordionActiveClass,
+  arrowActiveClass,
+  contentActiveClass,
+  triggerActiveClass,
+}: {
+  isOpen: boolean;
+} & ReturnType<typeof getAccordionSettings>) => {
+  const action = isOpen ? 'add' : 'remove';
+
+  accordion.classList[action](accordionActiveClass || groupActiveClass);
+  trigger.classList[action](triggerActiveClass || groupActiveClass);
+  content.classList[action](contentActiveClass || groupActiveClass);
+  arrow?.classList[action](arrowActiveClass || groupActiveClass);
+};

package/attributes-master/packages/accordion/src/actions/content.ts

@@ -0,0 +1,42 @@
+import { addListener } from '@finsweet/attributes-utils';
+
+import { getElementHeight } from '../utils/helpers';
+
+/**
+ * Opens an accordion's content.
+ * @param content
+ */
+export const openContent = (content: HTMLElement) => {
+  content.style.display = 'block';
+  content.style.maxHeight = '';
+  const contentHeight = getElementHeight(content);
+  content.style.maxHeight = '0px';
+
+  requestAnimationFrame(() => {
+    content.style.maxHeight = contentHeight;
+  });
+};
+
+/**
+ * Closes an accordion's content.
+ * @param content
+ *
+ * @returns A cancel function.
+ */
+export const closeContent = (content: HTMLElement) => {
+  const cancel = addListener(content, 'transitionend', ({ propertyName }) => {
+    if (propertyName !== 'max-height') return;
+
+    content.style.display = 'none';
+    cancel();
+  });
+
+  const contentHeight = getElementHeight(content);
+  content.style.maxHeight = contentHeight;
+
+  requestAnimationFrame(() => {
+    content.style.maxHeight = '0px';
+  });
+
+  return cancel;
+};

package/attributes-master/packages/accordion/src/actions/list.ts

@@ -0,0 +1,36 @@
+import type { List } from '@finsweet/attributes-list';
+import { isNotEmpty, waitAttributeLoaded } from '@finsweet/attributes-utils';
+
+import { initAccordionGroup } from '../factory';
+import { getClosestElement, queryAllElements } from '../utils/selectors';
+import type { AccordionGroupData } from '../utils/types';
+
+/**
+ * Inits the accordions' groups functionalities on lists.
+ * @param groupsData
+ * @returns A cleanup function.
+ */
+export const initListAccordions = async (groupsData: AccordionGroupData[]) => {
+  const lists: List[] = await waitAttributeLoaded('list');
+
+  const cleanups = lists.map((list) => {
+    return list.addHook('afterRender', (items = []) => {
+      for (const { element } of items) {
+        const accordions = [
+          ...queryAllElements('accordion', { scope: element }),
+          getClosestElement(element, 'accordion'),
+        ].filter(isNotEmpty);
+
+        for (const accordion of accordions) {
+          initAccordionGroup(accordion, groupsData);
+        }
+      }
+    });
+  });
+
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+};

package/attributes-master/packages/accordion/src/actions/query.ts

@@ -0,0 +1,27 @@
+import type { List } from '@finsweet/attributes-list';
+
+import { queryAllElements } from '../utils/selectors';
+
+/**
+ * @returns All the accordion elements on the page.
+ * @param lists The `list` instances. If provided, all the loaded accordions will also be added.
+ */
+export const queryAllAccordions = (lists?: List[]) => {
+  const allAccordions = queryAllElements('accordion');
+
+  if (!lists) return allAccordions;
+
+  const allAccordionsSet = new Set(allAccordions);
+
+  for (const list of lists) {
+    for (const { element } of list.items.value) {
+      const accordions = queryAllElements('accordion', { scope: element });
+
+      for (const accordion of accordions) {
+        allAccordionsSet.add(accordion);
+      }
+    }
+  }
+
+  return [...allAccordionsSet];
+};

package/attributes-master/packages/accordion/src/actions/settings.ts

@@ -0,0 +1,61 @@
+import { extractCommaSeparatedValues, isKeyOf, isNotEmpty, parseNumericAttribute } from '@finsweet/attributes-utils';
+
+import { SETTINGS } from '../utils/constants';
+import { getAttribute, hasAttributeValue, queryElement } from '../utils/selectors';
+import type { AccordionGroupData, InitialState } from '../utils/types';
+
+/**
+ * Collects a group's settings.
+ * @param group
+ * @returns A new {@link AccordionGroupData} object.
+ */
+export const getGroupSettings = (group: HTMLElement): AccordionGroupData => {
+  const single = hasAttributeValue(group, 'single', 'true');
+  const rawInitial = getAttribute(group, 'initial');
+  const activeClass = getAttribute(group, 'activeclass');
+
+  let initial: InitialState;
+
+  if (rawInitial) {
+    if (isKeyOf(rawInitial, SETTINGS.initial.values)) {
+      initial = rawInitial;
+    } else {
+      const rawInitialValues = extractCommaSeparatedValues(rawInitial);
+      initial = rawInitialValues.map(parseNumericAttribute).filter(isNotEmpty);
+    }
+  }
+
+  return { group, single, initial, activeClass, accordions: [] };
+};
+
+/**
+ * @returns An accordion's settings.
+ * @param accordion
+ * @param groupData
+ */
+export const getAccordionSettings = (accordion: HTMLElement, groupData: AccordionGroupData) => {
+  const scope = accordion;
+  const trigger = queryElement('trigger', { scope });
+  const content = queryElement('content', { scope });
+  const arrow = queryElement('arrow', { scope });
+
+  if (!trigger || !content) return;
+
+  const groupActiveClass = groupData.activeClass;
+  const accordionActiveClass = getAttribute(accordion, 'activeclass');
+  const triggerActiveClass = getAttribute(trigger, 'activeclass');
+  const contentActiveClass = getAttribute(content, 'activeclass');
+  const arrowActiveClass = arrow ? getAttribute(arrow, 'activeclass') : null;
+
+  return {
+    accordion,
+    trigger,
+    content,
+    arrow,
+    groupActiveClass,
+    accordionActiveClass,
+    triggerActiveClass,
+    contentActiveClass,
+    arrowActiveClass,
+  };
+};

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

@@ -0,0 +1,145 @@
+import { addListener, isVisible } from '@finsweet/attributes-utils';
+
+import { setAccordionA11y, setAccordionAriaExpanded } from './actions/a11y';
+import { setActiveClass } from './actions/classes';
+import { closeContent, openContent } from './actions/content';
+import { getAccordionSettings, getGroupSettings } from './actions/settings';
+import { getElementSelector } from './utils/selectors';
+import type { AccordionData, AccordionGroupData } from './utils/types';
+
+/**
+ * Inits an accordion group.
+ * @param accordion
+ * @param groupsData
+ * @returns
+ */
+export const initAccordionGroup = (accordion: HTMLElement, groupsData: AccordionGroupData[]) => {
+  const group = accordion.closest<HTMLElement>(getElementSelector('group')) || document.body;
+
+  let groupData = groupsData.find((data) => data.group === group);
+  if (!groupData) {
+    groupData = getGroupSettings(group);
+
+    groupsData.push(groupData);
+  }
+
+  const accordionData = groupData.accordions.find((data) => data.accordion === accordion);
+  if (accordionData) return groupData;
+
+  const controls = initAccordion(accordion, groupData);
+  if (controls) {
+    groupData.accordions.push({
+      accordion,
+      controls,
+    });
+  }
+
+  setInitialGroupState(groupData);
+
+  return groupData;
+};
+
+/**
+ * Inits an accordion.
+ * @param accordion
+ * @param groupData
+ *
+ * @returns The accordion's controls.
+ */
+const initAccordion = (
+  accordion: HTMLElement,
+  groupData: AccordionGroupData
+): AccordionData['controls'] | undefined => {
+  const settings = getAccordionSettings(accordion, groupData);
+  if (!settings) return;
+
+  const { trigger, content } = settings;
+
+  let isOpen = isVisible(content);
+  let cancel: (() => void) | undefined;
+
+  // Force the content to be closed if the accordion is not visible.
+  if (!isVisible(accordion)) {
+    cancel = closeContent(content);
+  }
+
+  setAccordionA11y(trigger, content, isOpen);
+  setActiveClass({
+    ...settings,
+    isOpen,
+  });
+
+  /**
+   * Expands/contracts the content element.
+   * @param event The Event object, if it was done by a user interaction.
+   */
+  const toggleContent = (event?: Event) => {
+    cancel?.();
+    cancel = undefined;
+
+    if (isOpen) {
+      cancel = closeContent(content);
+      isOpen = false;
+    } else {
+      openContent(content);
+      isOpen = true;
+
+      // Close all other Accordions if the group is single.
+      if (groupData.single && event) {
+        for (const data of groupData.accordions) {
+          if (data.accordion !== accordion) data.controls.close();
+        }
+      }
+    }
+
+    setAccordionAriaExpanded(settings.trigger, isOpen);
+    setActiveClass({
+      ...settings,
+      isOpen,
+    });
+  };
+
+  const destroy = addListener(trigger, 'click', toggleContent);
+
+  return {
+    destroy,
+    open: () => {
+      if (!isOpen) toggleContent();
+    },
+    close: () => {
+      if (isOpen) toggleContent();
+    },
+    isOpen: () => isOpen,
+  };
+};
+
+/**
+ * Ensures all accordions are correctly open/closed on page load.
+ * @param groupData
+ */
+const setInitialGroupState = ({ single, initial, accordions }: AccordionGroupData) => {
+  let openedSingle = false;
+
+  const isInitialNone = initial === 'none';
+  const isInitialIndexes = Array.isArray(initial);
+
+  for (const [index, { controls }] of accordions.entries()) {
+    const adjustedIndex = index + 1;
+
+    const shouldOpen = isInitialIndexes && initial.includes(adjustedIndex);
+    const shouldClose =
+      (single && openedSingle) || (isInitialIndexes && !initial.includes(adjustedIndex)) || isInitialNone;
+
+    if (shouldClose) {
+      controls.close();
+      continue;
+    }
+
+    if (shouldOpen) {
+      controls.open();
+      openedSingle = true;
+    }
+
+    openedSingle ||= controls.isOpen();
+  }
+};

package/attributes-master/packages/accordion/src/index.ts

@@ -0,0 +1,3 @@
+export { version } from '../package.json';
+export { init } from './init';
+export { ELEMENTS, SETTINGS } from './utils/constants';

package/attributes-master/packages/accordion/src/init.ts

@@ -0,0 +1,37 @@
+import { type FinsweetAttributeInit, waitWebflowReady } from '@finsweet/attributes-utils';
+
+import { initListAccordions } from './actions/list';
+import { initAccordionGroup } from './factory';
+import { LIST_ELEMENT_SELECTOR } from './utils/constants';
+import { queryAllElements } from './utils/selectors';
+import type { AccordionGroupData } from './utils/types';
+
+export const init: FinsweetAttributeInit = async () => {
+  await waitWebflowReady();
+
+  // Get all accordions
+  const accordions = queryAllElements('accordion');
+
+  // Init all groups
+  const groupsData: AccordionGroupData[] = [];
+
+  for (const accordion of accordions) {
+    initAccordionGroup(accordion, groupsData);
+  }
+
+  // Listen for List instances, if any
+  const usesList = accordions.some((accordion) => accordion.closest(LIST_ELEMENT_SELECTOR));
+  const listsCleanup = usesList ? await initListAccordions(groupsData) : undefined;
+
+  // Finalize
+  return {
+    result: groupsData,
+    destroy() {
+      for (const { accordions } of groupsData) {
+        for (const { controls } of accordions) controls.destroy();
+      }
+
+      listsCleanup?.();
+    },
+  };
+};

package/attributes-master/packages/accordion/src/utils/constants.ts

@@ -0,0 +1,62 @@
+import {
+  ACCORDION_ATTRIBUTE,
+  type AttributeElements,
+  type AttributeSettings,
+  LIST_ATTRIBUTE,
+} from '@finsweet/attributes-utils';
+
+export const ELEMENTS = [
+  /**
+   * Defines a group of accordion elements.
+   */
+  'group',
+
+  /**
+   * Defines an accordion element.
+   */
+  'accordion',
+
+  /**
+   * Defines a trigger element.
+   */
+  'trigger',
+
+  /**
+   * Defines a content element.
+   */
+  'content',
+
+  /**
+   * Defines an arrow element.
+   */
+  'arrow',
+] as const satisfies AttributeElements;
+
+export const SETTINGS = {
+  /**
+   * Defines if only one accordion can be open in a group at a time.
+   */
+  single: {
+    key: 'single',
+    values: ['true'],
+  },
+
+  /**
+   * Defines the initially open accordions in a group.
+   * Accepts both {@link SETTINGS.initial.values.none} or any arbitrary numbers in a comma-separated list.
+   */
+  initial: {
+    key: 'initial',
+    values: ['none'],
+  },
+
+  /**
+   * Defines the active CSS class to add.
+   */
+  activeclass: {
+    key: 'activeclass',
+    defaultValue: `is-${ACCORDION_ATTRIBUTE}-active`,
+  },
+} as const satisfies AttributeSettings;
+
+export const LIST_ELEMENT_SELECTOR = `[fs-${LIST_ATTRIBUTE}-element="list"]`;

package/attributes-master/packages/accordion/src/utils/helpers.ts

@@ -0,0 +1,5 @@
+/**
+ * @returns An element's computed height.
+ * @param content
+ */
+export const getElementHeight = (content: HTMLElement) => `${getComputedStyle(content).height}`;

package/attributes-master/packages/accordion/src/utils/selectors.ts

@@ -0,0 +1,12 @@
+import { ACCORDION_ATTRIBUTE, generateSelectors } from '@finsweet/attributes-utils';
+
+import { ELEMENTS, SETTINGS } from './constants';
+
+export const {
+  getElementSelector,
+  getClosestElement,
+  queryElement,
+  queryAllElements,
+  getAttribute,
+  hasAttributeValue,
+} = generateSelectors(ACCORDION_ATTRIBUTE, ELEMENTS, SETTINGS);

package/attributes-master/packages/accordion/src/utils/types.ts

@@ -0,0 +1,23 @@
+import type { SETTINGS } from './constants';
+
+export interface AccordionData {
+  accordion: HTMLElement;
+  controls: {
+    destroy: () => void;
+    open: () => void;
+    close: () => void;
+    isOpen: () => boolean;
+  };
+}
+
+export interface AccordionGroupData {
+  group: HTMLElement;
+  single: boolean;
+  initial: InitialState;
+  accordions: AccordionData[];
+  activeClass: string;
+}
+
+type InitialValues = (typeof SETTINGS)['initial']['values'][number];
+
+export type InitialState = InitialValues | number[] | undefined;

package/attributes-master/packages/accordion/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}