@hortonstudio/main 1.2.5 → 1.2.6

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

@@ -0,0 +1,41 @@
+import { isNumber } from '@finsweet/attributes-utils';
+
+import { getAllRadios, getClosestRadioField, getSelectedGroupValue, queryStar } from '../utils/helpers';
+import { getAttribute } from '../utils/selectors';
+
+/**
+ * Adds/removes the active classes of a group's stars.
+ * @param name
+ * @param group
+ * @param hoveredValue
+ */
+export const setClasses = (name: string, group: Element, hoveredValue?: number) => {
+  const groupActiveClass = getAttribute(group, 'activeclass');
+
+  const selectedValue = getSelectedGroupValue(name);
+
+  const allRadios = getAllRadios(document, name);
+
+  for (const radio of allRadios) {
+    const radioField = getClosestRadioField(radio);
+    if (!radioField) continue;
+
+    const star = queryStar(radioField);
+    if (!star) continue;
+
+    const starActiveClass = getAttribute(star, 'activeclass');
+    const activeClass = starActiveClass || groupActiveClass;
+
+    const value = parseInt(radio.value);
+
+    const isHovered = isNumber(hoveredValue) && value <= hoveredValue;
+    const isSelected = isNumber(selectedValue) && value <= selectedValue;
+    const isActive = isHovered || isSelected;
+
+    if (isActive) {
+      star.classList.add(activeClass);
+    } else {
+      star.classList.remove(activeClass);
+    }
+  }
+};

package/attributes-master/packages/starrating/src/actions/events.ts

@@ -0,0 +1,80 @@
+import { addListener, isElement } from '@finsweet/attributes-utils';
+
+import { getClosestGroup, getClosestRadioField, queryRadio, queryStar } from '../utils/helpers';
+import { setClasses } from './classes';
+
+/**
+ * Stores the currently active groups.
+ */
+const activeGroupsStore: Set<Element> = new Set();
+
+/**
+ * Listens for all hover / unhover / focus events to trigger the stars.
+ * @returns Cleanup callbacks.
+ */
+export const listenEvents = () => {
+  const cleanups = [
+    addListener(window, 'input', handleGroupHover),
+    addListener(window, 'mouseover', handleGroupHover),
+    addListener(window, 'mouseover', handleGroupUnhover),
+    () => activeGroupsStore.clear(),
+  ];
+
+  return cleanups;
+};
+
+/**
+ * Handles when the user hovers a group's stars.
+ * @param e
+ */
+const handleGroupHover = ({ target }: Event) => {
+  if (!isElement(target)) return;
+
+  const radioField = getClosestRadioField(target);
+  if (!radioField) return;
+
+  const group = getClosestGroup(target);
+  if (!group) return;
+
+  const star = queryStar(radioField);
+  if (!star) return;
+
+  const radio = queryRadio(radioField);
+  if (!radio) return;
+
+  const { name, value } = radio;
+
+  const hoveredValue = parseInt(value);
+  if (isNaN(hoveredValue)) return;
+
+  activeGroupsStore.add(group);
+
+  setClasses(name, group, hoveredValue);
+};
+
+/**
+ * Handles when the user stops hovering over a group's stars.
+ * @param e
+ */
+const handleGroupUnhover = ({ target }: Event) => {
+  if (!activeGroupsStore.size) return;
+  if (!isElement(target)) return;
+
+  for (const activeGroup of activeGroupsStore) {
+    const group = getClosestGroup(target);
+
+    if (!group || activeGroup !== group) {
+      const star = queryStar(activeGroup);
+      if (!star) continue;
+
+      const radioField = getClosestRadioField(star);
+      if (!radioField) continue;
+
+      const radio = queryRadio(radioField);
+      if (!radio) continue;
+
+      setClasses(radio.name, activeGroup);
+      activeGroupsStore.delete(activeGroup);
+    }
+  }
+};

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

@@ -0,0 +1,24 @@
+import { ARIA_ROLE_KEY, ARIA_ROLE_VALUES } from '@finsweet/attributes-utils';
+
+import { setClasses } from './actions/classes';
+import { getAllRadios } from './utils/helpers';
+
+/**
+ * Prepares a group with A11Y attributes and sets the initial state of the stars.
+ * @param group
+ */
+export const initStarRatingGroup = (group: Element) => {
+  // A11y
+  group.setAttribute(ARIA_ROLE_KEY, ARIA_ROLE_VALUES.radiogroup);
+
+  // Initial state
+  const allRadios = getAllRadios(group);
+  const allNames = allRadios.reduce<Set<string>>((acc, { name }) => {
+    acc.add(name);
+    return acc;
+  }, new Set());
+
+  for (const name of allNames) {
+    setClasses(name, group);
+  }
+};

package/attributes-master/packages/starrating/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/starrating/src/init.ts

@@ -0,0 +1,24 @@
+import { type FinsweetAttributeInit, waitWebflowReady } from '@finsweet/attributes-utils';
+
+import { listenEvents } from './actions/events';
+import { initStarRatingGroup } from './factory';
+import { queryAllElements } from './utils/selectors';
+
+/**
+ * Inits the attribute.
+ */
+export const init: FinsweetAttributeInit = async () => {
+  await waitWebflowReady();
+
+  const groups = queryAllElements('group');
+  groups.forEach(initStarRatingGroup);
+
+  const cleanups = listenEvents();
+
+  return {
+    result: groups,
+    destroy() {
+      for (const cleanup of cleanups) cleanup();
+    },
+  };
+};

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

@@ -0,0 +1,20 @@
+import { type AttributeElements, type AttributeSettings, STAR_RATING_ATTRIBUTE } from '@finsweet/attributes-utils';
+
+export const ELEMENTS = [
+  /**
+   * Defines a stars wrapper.
+   */
+  'group',
+
+  /**
+   * Defines a star element.
+   */
+  'star',
+] as const satisfies AttributeElements;
+
+export const SETTINGS = {
+  /**
+   * Defines the default active CSS class.
+   */
+  activeclass: { key: 'activeclass', defaultValue: `is-${STAR_RATING_ATTRIBUTE}-active` },
+} as const satisfies AttributeSettings;

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

@@ -0,0 +1,63 @@
+import { FORM_CSS_CLASSES } from '@finsweet/attributes-utils';
+
+import { getElementSelector, queryElement } from './selectors';
+
+/**
+ * @returns The closest star rating group parent from a target.
+ * @param target
+ */
+export const getClosestGroup = (target: Element) => target.closest(getElementSelector('group'));
+
+/**
+ * @returns The closest Radio Field parent from a target.
+ * @param target
+ */
+export const getClosestRadioField = (target: Element) =>
+  target.closest<HTMLLabelElement>(`.${FORM_CSS_CLASSES.radioField}`);
+
+/**
+ * @returns A child star element of the provided scope.
+ * @param scope
+ */
+export const queryStar = (scope: Element) => queryElement('star', { scope });
+
+/**
+ *
+ * @returns A radio element selector.
+ * Optionally, the selector can be narrowed down by name.
+ * @param name
+ */
+export const getRadioSelector = (name?: string) => `input[type="radio"]${name ? `[name="${name}"]` : ''}`;
+
+/**
+ * @returns A child radio element of the provided scope.
+ * @param scope
+ */
+export const queryRadio = (scope: Element) => scope.querySelector<HTMLInputElement>(getRadioSelector());
+
+/**
+ * @returns All radio elements.
+ * If the name is provided, only the radio elements belonging to the same group are returned.
+ *
+ * @param name A radio group name.
+ */
+export const getAllRadios = (scope: Document | Element = document, name?: string) => [
+  ...scope.querySelectorAll<HTMLInputElement>(getRadioSelector(name)),
+];
+
+/**
+ * Gets the selected value of a Radio Group.
+ * @param name The Radio Group Name.
+ * @returns The selected value as an integer, if valid.
+ */
+export const getSelectedGroupValue = (name: string) => {
+  let selectedValue: number | undefined;
+
+  const selectedRadio = document.querySelector<HTMLInputElement>(`${getRadioSelector(name)}:checked`);
+  if (selectedRadio) {
+    const rawSelectedValue = parseInt(selectedRadio.value);
+    if (!isNaN(rawSelectedValue)) selectedValue = rawSelectedValue;
+  }
+
+  return selectedValue;
+};

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

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

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

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

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

@@ -0,0 +1,25 @@
+# `ATTRIBUTE_KEY` Attribute
+
+ATTRIBUTE_DESCRIPTION.
+
+## 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([
+  'ATTRIBUTE_KEY',
+  () => {
+    // Your code goes here.
+  },
+]);
+```
+
+## License
+
+[Apache 2.0](../../LICENSE.md)

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

@@ -0,0 +1,22 @@
+{
+  "name": "@finsweet/attributes-ATTRIBUTE_KEY",
+  "version": "0.0.0",
+  "description": "ATTRIBUTE_DESCRIPTION.",
+  "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:*"
+  }
+}

package/attributes-master/packages/template/src/actions/console.ts

@@ -0,0 +1,4 @@
+/**
+ * This is an example reusable action.
+ */
+export const logHello = () => console.log('Hello!');

package/attributes-master/packages/template/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/template/src/init.ts

@@ -0,0 +1,14 @@
+import { type FinsweetAttributeInit, waitWebflowReady } from '@finsweet/attributes-utils';
+
+import { logHello } from './actions/console';
+
+/**
+ * Inits the attribute.
+ */
+export const init: FinsweetAttributeInit = async () => {
+  await waitWebflowReady();
+
+  logHello();
+
+  return {};
+};

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

@@ -0,0 +1,18 @@
+import { type AttributeElements, type AttributeSettings } from '@finsweet/attributes-utils';
+
+export const ELEMENTS = [
+  /**
+   * This is an element example definition.
+   */
+  'example',
+] as const satisfies AttributeElements;
+
+export const SETTINGS = {
+  /**
+   * Defines a setting example definition.
+   */
+  example: {
+    key: 'example',
+    values: ['value'],
+  },
+} as const satisfies AttributeSettings;

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

@@ -0,0 +1,5 @@
+import { EXAMPLE_ATTRIBUTE, generateSelectors } from '@finsweet/attributes-utils';
+
+import { ELEMENTS, SETTINGS } from './constants';
+
+export const {} = generateSelectors(EXAMPLE_ATTRIBUTE, ELEMENTS, SETTINGS);

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

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

package/attributes-master/packages/toc/CHANGELOG.md

@@ -0,0 +1,192 @@
+# @finsweet/attributes-toc
+
+## 1.2.11
+
+### Patch Changes
+
+- Updated dependencies [2af0bad]
+  - @finsweet/attributes-utils@0.1.0
+
+## 1.2.10
+
+### Patch Changes
+
+- Updated dependencies [378d74d]
+  - @finsweet/attributes-utils@0.0.6
+
+## 1.2.9
+
+### Patch Changes
+
+- Updated dependencies [01973d8]
+  - @finsweet/attributes-utils@0.0.5
+
+## 1.2.8
+
+### Patch Changes
+
+- Updated dependencies [deef758]
+  - @finsweet/attributes-utils@0.0.4
+
+## 1.2.7
+
+### Patch Changes
+
+- Updated dependencies [d21cbca]
+  - @finsweet/attributes-utils@0.0.3
+
+## 1.2.6
+
+### Patch Changes
+
+- c7b544d: chore: updated dependencies
+- Updated dependencies [c7b544d]
+  - @finsweet/attributes-utils@0.0.2
+
+## 1.2.5
+
+### Patch Changes
+
+- b56e5e5: rename fsAttribute in places of usage to finsweetAttribute
+- Updated dependencies [b56e5e5]
+  - @finsweet/attributes-utils@0.0.1
+
+## 1.2.4
+
+### Patch Changes
+
+- 9be3c039: remove toc item scroll to view checker
+
+## 1.2.3
+
+### Patch Changes
+
+- 579afce3: Fix TOC rendering issue that results to some links missing in the final table generated.
+
+## 1.2.2
+
+### Patch Changes
+
+- 19303441: fix: rendering the TOC breaks on iOS 17
+
+## 1.2.1
+
+### Patch Changes
+
+- 132594e3: fix: only restart webflow if at least one instance of TOC was created.
+
+## 1.2.0
+
+### Minor Changes
+
+- e4b3b680: Created new `window.fsAttributes.destroy()` method to support SPA environments.
+  This new method allows users to destroy all Attributes instances, cleaning up event listeners, observers, states, global variables, etc.
+
+  Websites that use a client-side router that simulates an SPA environment like [barba.js](https://barba.js.org/) or [Swup](https://swup.js.org/) can now properly init and destroy Attributes.
+  After destroying, Attributes can be manually re-initted by calling `window.fsAttribute[ATTRIBUTE_KEY].init()`.
+
+  Updated changesets system, now all updates will be correctly reflected in [the official updates page](https://www.finsweet.com/attributes/updates).
+
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies [4792998a]
+  - @global/constants@1.2.0
+  - @global/factory@1.1.5
+
+## 1.1.0
+
+### Minor Changes
+
+- 07f32375: Created `fs-cmsattribute` Attribute
+
+### Patch Changes
+
+- Updated dependencies [07f32375]
+  - @global/constants@1.1.0
+  - @global/factory@1.1.4
+
+## 1.0.11
+
+### Patch Changes
+
+- Updated dependencies [7542dcdb]
+  - @global/constants@1.0.2
+  - @global/factory@1.1.3
+
+## 1.0.10
+
+### Patch Changes
+
+- Updated dependencies [bdd1a78]
+  - @global/constants@1.0.1
+  - @global/factory@1.1.2
+
+## 1.0.9
+
+### Patch Changes
+
+- Updated dependencies [13c3e23]
+  - @global/factory@1.1.1
+  - @finsweet/attributes-richtext@1.7.2
+
+## 1.0.8
+
+### Patch Changes
+
+- Updated dependencies [627bf25]
+  - @global/factory@1.1.0
+  - @finsweet/attributes-richtext@1.7.1
+
+## 1.0.7
+
+### Patch Changes
+
+- Updated dependencies [2040479]
+  - @finsweet/attributes-richtext@1.7.0
+
+## 1.0.6
+
+### Patch Changes
+
+- Added schema.json for support tool.
+
+## 1.0.5
+
+### Patch Changes
+
+- Added Example 1: Sidebar TOC.
+
+## 1.0.4
+
+### Patch Changes
+
+- Fixed heading `ID`'s being duplicated when rendering external HTML that already contained them.
+
+## 1.0.3
+
+### Patch Changes
+
+- Added new **optional** `fs-toc-element="table"`: Defines the wrapper element that will hold all the TOC links.
+  If not defined, the library will use the immediate parent of the link template elements.
+
+- Fixed multiple instances not working correctly (`-1` | `-2`...)
+
+## 1.0.2
+
+### Patch Changes
+
+- Ensured all headings and links have unique IDs, even if some headings have the same exact text.
+
+## 1.0.1
+
+### Patch Changes
+
+- Added support to use `fs-richtext` + `fs-toc`.
+
+## 1.0.0
+
+### Major Changes
+
+- Created the attribute package.

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

@@ -0,0 +1,25 @@
+# `toc` Attribute
+
+Automatically generate a table of contents based on heading tags. Works with Webflow Rich Text, Webflow "Current" class, and anchor scroll. CMS, static, and all text elements are supported.
+
+## 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([
+  'toc',
+  () => {
+    // Your code goes here.
+  },
+]);
+```
+
+## License
+
+[Apache 2.0](../../LICENSE.md)

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

@@ -0,0 +1,23 @@
+{
+  "name": "@finsweet/attributes-toc",
+  "version": "1.2.11",
+  "description": "Automatically generate a table of contents based on heading tags. Works with Webflow Rich Text, Webflow \"Current\" class, and anchor scroll. CMS, static, and all text elements are supported.",
+  "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:*",
+    "slugify": "^1.6.6"
+  }
+}