@hortonstudio/main 1.2.4 → 1.2.6

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

@@ -0,0 +1,27 @@
+# `numbercount` Attribute
+
+Create a number count animation in Webflow.
+
+## 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([
+  'numbercount',
+  (numberElements) => {
+    // Your code goes here.
+  },
+]);
+```
+
+The `result` object contains the elements that are currently active on the page.
+
+## License
+
+[Apache 2.0](../../LICENSE.md)

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

@@ -0,0 +1,23 @@
+{
+  "name": "@finsweet/attributes-numbercount",
+  "version": "1.2.8",
+  "description": "Create a number count animation in Webflow.",
+  "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": {
+    "just-throttle": "^4.2.0",
+    "@finsweet/attributes-utils": "workspace:*"
+  }
+}

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

@@ -0,0 +1,26 @@
+import {
+  ARIA_DESCRIPTION_KEY,
+  ARIA_ROLE_KEY,
+  ARIA_ROLE_VALUES,
+  ARIA_ROLEDESCRIPTION_KEY,
+} from '@finsweet/attributes-utils';
+
+/**
+ * Sets A11Y attributes to the number count element.
+ * @param numberElement
+ * @param start
+ * @param end
+ */
+export const setNumberCountA11Y = (numberElement: Element, start: number, end: number) => {
+  numberElement.setAttribute(ARIA_ROLE_KEY, ARIA_ROLE_VALUES.marquee);
+
+  const description = `Number count animation from ${start} to ${end}`;
+
+  if (!numberElement.hasAttribute(ARIA_ROLEDESCRIPTION_KEY)) {
+    numberElement.setAttribute(ARIA_ROLEDESCRIPTION_KEY, description);
+  }
+
+  if (!numberElement.hasAttribute(ARIA_DESCRIPTION_KEY)) {
+    numberElement.setAttribute(ARIA_DESCRIPTION_KEY, description);
+  }
+};

package/attributes-master/packages/numbercount/src/actions/animate.ts

@@ -0,0 +1,43 @@
+import { valueToString } from '../utils/helpers';
+
+/**
+ * Animates a number element.
+ * @param numberElement
+ * @param start
+ * @param end
+ * @param duration
+ * @param locale
+ */
+export const animateNumberCount = (
+  numberElement: Element,
+  start: number,
+  end: number,
+  duration: number,
+  locale?: string | true | null
+) => {
+  let startTime: number | null = null;
+
+  const step = (timestamp: number) => {
+    if (startTime === null) startTime = timestamp;
+
+    // Calculate the elapsed time since the animation started.
+    const elapsed = timestamp - startTime;
+
+    const progress = Math.min(elapsed / duration, 1);
+    const value = start + (end - start) * progress;
+
+    numberElement.textContent = valueToString(Math.floor(value), locale);
+
+    // If the animation is not yet complete, request the next frame.
+    if (progress < 1) {
+      requestAnimationFrame(step);
+
+      return;
+    }
+
+    // If the progress is 1 (animation complete), set the final value.
+    numberElement.textContent = valueToString(end, locale);
+  };
+
+  requestAnimationFrame(step);
+};

package/attributes-master/packages/numbercount/src/actions/observe.ts

@@ -0,0 +1,44 @@
+import throttle from 'just-throttle';
+
+/**
+ * Observes an element intersecting on the page.
+ * @param numberElement The element to observe.
+ * @param threshold The threshold, on a 0-100 scale.
+ * @param callback Runs when the intersection is valid.
+ *
+ * @returns A cleanup callback.
+ */
+export const observeIntersection = (numberElement: Element, threshold: number, callback: () => void) => {
+  const checkValidity = (top: number) => {
+    const valid = window.innerHeight * (1 - threshold / 100) - top >= 0;
+    if (valid) {
+      cleanup();
+      callback();
+    }
+  };
+
+  const handleScroll = throttle(async () => {
+    const { top } = numberElement.getBoundingClientRect();
+    checkValidity(top);
+  }, 100);
+
+  const observer = new IntersectionObserver((entries) => {
+    for (const { isIntersecting, intersectionRect } of entries) {
+      const action = isIntersecting ? 'addEventListener' : 'removeEventListener';
+      window[action]('scroll', handleScroll);
+
+      if (isIntersecting) {
+        checkValidity(intersectionRect.top);
+      }
+    }
+  });
+
+  const cleanup = () => {
+    observer.disconnect();
+    window.removeEventListener('scroll', handleScroll);
+  };
+
+  observer.observe(numberElement);
+
+  return cleanup;
+};

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

@@ -0,0 +1,31 @@
+import { isNumber, parseNumericAttribute } from '@finsweet/attributes-utils';
+
+import { setNumberCountA11Y } from './actions/a11y';
+import { animateNumberCount } from './actions/animate';
+import { observeIntersection } from './actions/observe';
+import { extractNumberFromElement } from './utils/helpers';
+import { getAttribute, hasAttributeValue } from './utils/selectors';
+
+/**
+ * Inits a number count animation.
+ * @param numberElement
+ */
+export const initNumberCount = (numberElement: Element) => {
+  const start = getAttribute(numberElement, 'start');
+  const rawEnd = getAttribute(numberElement, 'end');
+  const duration = getAttribute(numberElement, 'duration');
+  const threshold = getAttribute(numberElement, 'threshold');
+  const rawLocale = getAttribute(numberElement, 'locale');
+  const autoLocale = hasAttributeValue(numberElement, 'locale', 'auto');
+
+  const end = parseNumericAttribute(rawEnd, extractNumberFromElement(numberElement));
+  if (!isNumber(end)) return;
+
+  const locale = autoLocale || rawLocale;
+
+  setNumberCountA11Y(numberElement, start, end);
+
+  return observeIntersection(numberElement, threshold, () => {
+    animateNumberCount(numberElement, start, end, duration, locale);
+  });
+};

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

@@ -0,0 +1,22 @@
+import { type FinsweetAttributeInit, isNotEmpty, waitWebflowReady } from '@finsweet/attributes-utils';
+
+import { initNumberCount } from './factory';
+import { queryAllElements } from './utils/selectors';
+
+/**
+ * Inits the attribute.
+ */
+export const init: FinsweetAttributeInit = async () => {
+  await waitWebflowReady();
+
+  const numberElements = queryAllElements('number');
+
+  const cleanups = numberElements.map(initNumberCount).filter(isNotEmpty);
+
+  return {
+    result: numberElements,
+    destroy() {
+      for (const cleanup of cleanups) cleanup();
+    },
+  };
+};

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

@@ -0,0 +1,40 @@
+import { type AttributeElements, type AttributeSettings } from '@finsweet/attributes-utils';
+
+export const ELEMENTS = [
+  /**
+   * Defines an element with a number to be animated.
+   */
+  'number',
+] as const satisfies AttributeElements;
+
+export const SETTINGS = {
+  /**
+   * Defines the start number in the count.
+   */
+  start: { key: 'start', defaultValue: '0', isNumeric: true },
+
+  /**
+   * Defines the end number in the count.
+   * If not defined, the library will try to extract it from the `number` element.
+   */
+  end: { key: 'end' },
+
+  /**
+   * Defines the count speed.
+   */
+  duration: { key: 'duration', defaultValue: '1000', isNumeric: true },
+
+  /**
+   * Defines the intersection observer threshold.
+   */
+  threshold: { key: 'threshold', defaultValue: '25', isNumeric: true },
+
+  /**
+   * If defined, the library will format the number using the provided locale.
+   * Users can define any BCP 47 language tag or use `auto` to use the browser's locale.
+   */
+  locale: {
+    key: 'locale',
+    values: ['auto'],
+  },
+} as const satisfies AttributeSettings;

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

@@ -0,0 +1,31 @@
+import { isString } from '@finsweet/attributes-utils';
+
+/**
+ * Tries to extract a number value from an element's text.
+ * If not valid, returns null.
+ *
+ * @param numberElement
+ *
+ * @returns Either a valid number or null.
+ */
+export const extractNumberFromElement = (numberElement: Element) => {
+  const { textContent } = numberElement;
+  if (!textContent) return null;
+
+  const number = Number(textContent);
+
+  return isNaN(number) ? null : number;
+};
+
+/**
+ * Converts a count value to a string.
+ * @param value The value to convert.
+ * @param locale The locale to use. if existing.
+ */
+export const valueToString = (value: number, locale?: string | true | null) => {
+  if (locale) {
+    return value.toLocaleString(isString(locale) ? locale : undefined);
+  }
+
+  return value.toString();
+};

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

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

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

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

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

@@ -0,0 +1,118 @@
+# @finsweet/attributes-queryparam
+
+## 1.2.8
+
+### Patch Changes
+
+- Updated dependencies [2af0bad]
+  - @finsweet/attributes-utils@0.1.0
+
+## 1.2.7
+
+### Patch Changes
+
+- 378d74d: fix: unify public API under FinsweetAttributes and remove finsweetAttributes
+- Updated dependencies [378d74d]
+  - @finsweet/attributes-utils@0.0.6
+
+## 1.2.6
+
+### Patch Changes
+
+- Updated dependencies [01973d8]
+  - @finsweet/attributes-utils@0.0.5
+
+## 1.2.5
+
+### Patch Changes
+
+- Updated dependencies [deef758]
+  - @finsweet/attributes-utils@0.0.4
+
+## 1.2.4
+
+### Patch Changes
+
+- d21cbca: refactor: unify form field value getters and setters
+- Updated dependencies [d21cbca]
+  - @finsweet/attributes-utils@0.0.3
+
+## 1.2.3
+
+### Patch Changes
+
+- c7b544d: chore: updated dependencies
+- Updated dependencies [c7b544d]
+  - @finsweet/attributes-utils@0.0.2
+
+## 1.2.2
+
+### Patch Changes
+
+- b56e5e5: rename fsAttribute in places of usage to finsweetAttribute
+- Updated dependencies [b56e5e5]
+  - @finsweet/attributes-utils@0.0.1
+
+## 1.2.1
+
+### Patch Changes
+
+- 2930a679: Added copy/paste examples.
+
+## 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.2
+
+### Patch Changes
+
+- 070fb82e: Added schema for support
+
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies [7542dcdb]
+  - @global/constants@1.0.2
+  - @global/factory@1.1.3
+
+## 1.0.0
+
+### Major Changes
+
+- c3fdb70: Created the package
+
+### Patch Changes
+
+- Updated dependencies [bdd1a78]
+  - @global/constants@1.0.1
+  - @global/factory@1.1.2

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

@@ -0,0 +1,25 @@
+# `queryparam` Attribute
+
+Use query parameter values to populate form inputs and text elements.
+
+## 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([
+  'queryparam',
+  () => {
+    // Your code goes here.
+  },
+]);
+```
+
+## License
+
+[Apache 2.0](../../LICENSE.md)

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

@@ -0,0 +1,22 @@
+{
+  "name": "@finsweet/attributes-queryparam",
+  "version": "1.2.8",
+  "description": "Use query parameter values to populate form inputs and text elements.",
+  "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/queryparam/src/factory.ts

@@ -0,0 +1,51 @@
+import {
+  FORM_CSS_CLASSES,
+  getRadioGroupInputs,
+  isHTMLInputElement,
+  isHTMLSelectElement,
+  isHTMLTextAreaElement,
+} from '@finsweet/attributes-utils';
+
+export function queryParamFactory(elements: HTMLElement[], value: string) {
+  for (const element of elements) {
+    // checkbox
+    const checkboxField = element.closest(`.${FORM_CSS_CLASSES.checkboxField}`);
+    const checkbox = checkboxField ? checkboxField.querySelector('input') : null;
+
+    if (checkbox) {
+      checkbox.checked = true;
+      continue;
+    }
+
+    // radio
+    const radioField = element.closest(`.${FORM_CSS_CLASSES.radioField}`);
+    const radio = radioField ? radioField.querySelector('input') : null;
+
+    if (radio) {
+      const form = radio.closest('form');
+
+      if (form) {
+        const groupRadios = getRadioGroupInputs(radio);
+        const targetRadio = groupRadios.find((radio) => radio.value === value);
+
+        if (targetRadio) {
+          targetRadio.checked = true;
+        }
+        continue;
+      }
+    }
+
+    // select, textarea and input
+    if (
+      isHTMLSelectElement(element) ||
+      isHTMLTextAreaElement(element) ||
+      (isHTMLInputElement(element) && element.type !== 'button')
+    ) {
+      element.value = value;
+      continue;
+    }
+
+    // all other cases, just replace the textContent
+    element.textContent = value;
+  }
+}

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

@@ -0,0 +1,40 @@
+import { type FinsweetAttributeInit, waitWebflowReady } from '@finsweet/attributes-utils';
+
+import { queryParamFactory } from './factory';
+import { SETTINGS } from './utils/constants';
+import { getSettingSelector } from './utils/selectors';
+
+/**
+ * Inits the attribute.
+ */
+export const init: FinsweetAttributeInit = async () => {
+  await waitWebflowReady();
+
+  const url = new URL(window.location.href);
+
+  for (const [paramKey, paramValue] of [...url.searchParams]) {
+    const queryParamElements = [...document.querySelectorAll<HTMLElement>(getSettingSelector('name', paramKey))];
+
+    if (queryParamElements.length < 1) {
+      continue;
+    }
+
+    queryParamFactory(queryParamElements, paramValue);
+
+    if (window.FinsweetAttributes.process.has('list')) {
+      continue;
+    }
+
+    const removeParamFromUrl = queryParamElements.some((element) => {
+      return element.hasAttribute(SETTINGS.removequery.key);
+    });
+
+    if (removeParamFromUrl) {
+      url.searchParams.delete(paramKey);
+    }
+  }
+
+  history.replaceState(null, '', url.toString());
+
+  return {};
+};

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

@@ -0,0 +1,18 @@
+import { type AttributeElements, type AttributeSettings } from '@finsweet/attributes-utils';
+
+export const ELEMENTS = [] as const satisfies AttributeElements;
+
+export const SETTINGS = {
+  /**
+   * Defines the query param keys
+   */
+  name: { key: 'name' },
+
+  /**
+   * Defines if query param should be removed after loading the page.
+   */
+  removequery: {
+    key: 'removequery',
+    values: ['true'],
+  },
+} as const satisfies AttributeSettings;

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

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

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

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