@hortonstudio/main 1.2.11 → 1.2.13

package/attributes-master/packages/scrolldisable/src/display.ts

@@ -1,117 +0,0 @@
-import { addListener, isVisible, NAVBAR_CSS_CLASSES } from '@finsweet/attributes-utils';
-import debounce from 'just-debounce';
-
-import { disableScrolling, enableScrolling, findFirstScrollableElement } from './scroll';
-import { NAV_MEDIAS } from './utils/constants';
-import { getAttribute, getElementSelector } from './utils/selectors';
-
-// Store
-const displayTriggersStore: Map<
-  HTMLElement,
-  { firstScrollableElement: HTMLElement; visible?: boolean; matchMedia?: string | null }
-> = new Map();
-
-/**
- * Handle the state change
- * @param trigger
- * @param preserveScrollTargets
- */
-const handleStateChange = (trigger: HTMLElement, preserveScrollTargets: Element[]) => {
-  // Get the trigger data
-  const triggerData = displayTriggersStore.get(trigger);
-  if (!triggerData) return;
-
-  // Extract values
-  const { matchMedia, firstScrollableElement, visible: wasVisibleBefore } = triggerData;
-
-  // Make sure the matchMedia requirement is valid
-  if (matchMedia && !window.matchMedia(matchMedia).matches) return;
-
-  // Check visibility
-  const visible = isVisible(trigger);
-  if (visible === wasVisibleBefore) return;
-
-  // Perform actions
-  if (wasVisibleBefore) enableScrolling();
-  if (visible) {
-    for (const target of new Set([...preserveScrollTargets, firstScrollableElement])) {
-      disableScrolling(target);
-    }
-  }
-
-  // Store new state
-  triggerData.visible = visible;
-};
-
-/**
- * Handle the display triggers
- * @param preserveScrollTargets
- *
- * @returns A callback to destroy the observers and listeners.
- */
-export const initDisplayTriggers = (preserveScrollTargets: Element[]): (() => void) => {
-  // DOM Elements
-  const smartNavSelector = getElementSelector('smart-nav');
-
-  const displayTriggers = document.querySelectorAll<HTMLElement>(
-    `${getElementSelector('when-visible')}, ${smartNavSelector}.${NAVBAR_CSS_CLASSES.navMenu}, ${smartNavSelector} .${
-      NAVBAR_CSS_CLASSES.navMenu
-    }`
-  );
-
-  // Define MutationObserver's callback
-  const callback: MutationCallback = (mutations) => {
-    const trigger = mutations[0].target as HTMLElement;
-    handleStateChange(trigger, preserveScrollTargets);
-  };
-
-  const debouncedCallback = debounce(callback, 25);
-
-  // Create MutationObserver
-  const observer = new MutationObserver(debouncedCallback);
-
-  // Init
-  for (const trigger of displayTriggers) {
-    // Get the trigger's matchMedia requisite
-    let matchMedia = getAttribute(trigger, 'media');
-
-    // Navbar special
-    const navbar = trigger.closest<HTMLDivElement>('.w-nav');
-    if (navbar) {
-      const collapsesAt = navbar.dataset.collapse as keyof typeof NAV_MEDIAS | undefined;
-      if (collapsesAt) matchMedia = NAV_MEDIAS[collapsesAt];
-    }
-
-    // Get the first scrollable element
-    const firstScrollableElement = findFirstScrollableElement(trigger) || trigger;
-
-    // Store the trigger's data
-    displayTriggersStore.set(trigger, {
-      firstScrollableElement,
-      matchMedia,
-    });
-
-    // Trigger a state change check
-    handleStateChange(trigger, preserveScrollTargets);
-
-    // Observe the element
-    observer.observe(trigger, {
-      attributes: true,
-      attributeFilter: ['style', 'class'],
-    });
-  }
-
-  // Handle window resize events
-  const debouncedStateChangeHandler = debounce(() => {
-    for (const trigger of displayTriggers) {
-      handleStateChange(trigger, preserveScrollTargets);
-    }
-  }, 250);
-
-  const resizeCleanup = addListener(window, 'resize', debouncedStateChangeHandler);
-
-  return () => {
-    observer.disconnect();
-    resizeCleanup();
-  };
-};

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

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

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

@@ -1,36 +0,0 @@
-import { type FinsweetAttributeInit, waitWebflowReady } from '@finsweet/attributes-utils';
-
-import { initClickTriggers } from './click';
-import { initDisplayTriggers } from './display';
-import { setReserveScrollBarGap } from './scroll';
-import { getSettingSelector, hasAttributeValue, queryAllElements } from './utils/selectors';
-
-/**
- * Inits the scrolldisable functionalities.
- */
-export const init: FinsweetAttributeInit = async () => {
-  await waitWebflowReady();
-
-  const preserveScrollTargets = queryAllElements('preserve');
-
-  let reserveScrollbarGap = true;
-
-  const reserveGapElement = document.querySelector(getSettingSelector('gap'));
-
-  const disableReserveGap = reserveGapElement && hasAttributeValue(reserveGapElement, 'gap', 'false');
-  if (disableReserveGap) {
-    reserveScrollbarGap = false;
-  }
-
-  setReserveScrollBarGap(reserveScrollbarGap);
-
-  const destroyClickListeners = initClickTriggers(preserveScrollTargets);
-  const destroyDisplayListeners = initDisplayTriggers(preserveScrollTargets);
-
-  return {
-    destroy() {
-      destroyClickListeners();
-      destroyDisplayListeners();
-    },
-  };
-};

package/attributes-master/packages/scrolldisable/src/scroll.ts

@@ -1,63 +0,0 @@
-import { isHTMLElement, isScrollable } from '@finsweet/attributes-utils';
-import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
-
-const { body } = document;
-
-let reserveScrollBarGap = true;
-let scrollingDisabled = false;
-
-// TODO: This is a temporary fix, should be removed after `body-scroll-lock` releases an official update.
-let storedScrollY: number | undefined;
-
-/**
- * @returns The current scrolling state
- */
-export const isScrollingDisabled = (): boolean => scrollingDisabled;
-
-/**
- * Updates the `reserveScrollBarGap` param, which is `true` by default.
- * @param value The new value.
- */
-export const setReserveScrollBarGap = (value: boolean): void => {
-  reserveScrollBarGap = value;
-};
-
-/**
- * Disables the scrolling.
- * @param target The target that will preserve scrolling.
- */
-export const disableScrolling = (target: Element): void => {
-  storedScrollY = window.scrollY;
-  scrollingDisabled = true;
-
-  disableBodyScroll(target, { reserveScrollBarGap });
-
-  body.style.setProperty('top', `${storedScrollY * -1}px`);
-};
-
-/**
- * Enables scrolling.
- */
-export const enableScrolling = (): void => {
-  scrollingDisabled = false;
-
-  clearAllBodyScrollLocks();
-
-  body.style.setProperty('top', '');
-  if (storedScrollY) body.scrollTo(0, storedScrollY);
-};
-
-/**
- * Finds the first scrollable child of an element.
- * @param element
- * @returns The child if found.
- */
-export const findFirstScrollableElement = (element: HTMLElement): HTMLElement | undefined => {
-  if (isScrollable(element)) return element;
-
-  const children = element.querySelectorAll('*');
-  for (const child of children) {
-    if (!isHTMLElement(child)) continue;
-    if (isScrollable(child)) return child;
-  }
-};

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

@@ -1,56 +0,0 @@
-import { type AttributeElements, type AttributeSettings } from '@finsweet/attributes-utils';
-
-export const ELEMENTS = [
-  /**
-   * Scrolling will be disabled/enabled when this element becomes visible/hidden.
-   */
-  'when-visible',
-
-  /**
-   * Scrolling will be enabled when this element is clicked.
-   */
-  'enable',
-
-  /**
-   * Scrolling will be disabled when this element is clicked.
-   */
-  'disable',
-
-  /**
-   * Scrolling will be disabled/enabled when this element is clicked.
-   */
-  'toggle',
-
-  /**
-   * Specific for `Navbar` components.
-   * Scrolling will be disabled/enabled when the `Nav Menu` is open/closed.
-   */
-  'smart-nav',
-
-  /**
-   * Applied on elements that must preserve scrolling when the page's scrolling is disabled.
-   */
-  'preserve',
-] as const satisfies AttributeElements;
-
-export const SETTINGS = {
-  /**
-   * Used to define a media query that restricts when an element acts as a trigger.
-   */
-  media: { key: 'media' },
-
-  /**
-   * Defines if the scrollbar gap must be reserved when disabling scrolling.
-   * It's set to the `<script>` tag, `true` by default.
-   */
-  gap: { key: 'gap', values: ['true', 'false'] },
-} as const satisfies AttributeSettings;
-
-/**
- * Defines the `Navbar` component media breakpoints.
- */
-export const NAV_MEDIAS = {
-  medium: '(max-width: 991px)',
-  small: '(max-width: 767px)',
-  tiny: '(max-width: 479px)',
-} as const;

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

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

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

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

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

@@ -1,242 +0,0 @@
-# @finsweet/attributes-selectcustom
-
-## 1.7.9
-
-### Patch Changes
-
-- Updated dependencies [2af0bad]
-  - @finsweet/attributes-utils@0.1.0
-
-## 1.7.8
-
-### Patch Changes
-
-- Updated dependencies [378d74d]
-  - @finsweet/attributes-utils@0.0.6
-
-## 1.7.7
-
-### Patch Changes
-
-- Updated dependencies [01973d8]
-  - @finsweet/attributes-utils@0.0.5
-
-## 1.7.6
-
-### Patch Changes
-
-- Updated dependencies [deef758]
-  - @finsweet/attributes-utils@0.0.4
-
-## 1.7.5
-
-### Patch Changes
-
-- Updated dependencies [d21cbca]
-  - @finsweet/attributes-utils@0.0.3
-
-## 1.7.4
-
-### Patch Changes
-
-- c7b544d: chore: updated dependencies
-- Updated dependencies [c7b544d]
-  - @finsweet/attributes-utils@0.0.2
-
-## 1.7.3
-
-### Patch Changes
-
-- b56e5e5: rename fsAttribute in places of usage to finsweetAttribute
-- Updated dependencies [b56e5e5]
-  - @finsweet/attributes-utils@0.0.1
-
-## 1.7.2
-
-### Patch Changes
-
-- 1b3142f0: Fix bug regarding read time, for small paragraphs, default to 1 minute. Add examples data for select custom and input counter
-
-## 1.7.1
-
-### Patch Changes
-
-- 37e0cd7a: Update fs-selectcustom-element attribute value to clear instead of option-reset and added option-reset as a fallback for backward compatibility. Tests for the same have been included also.
-
-## 1.7.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.6.1
-
-### Patch Changes
-
-- Updated dependencies [4792998a]
-  - @global/constants@1.2.0
-  - @global/factory@1.1.5
-
-## 1.6.0
-
-### Minor Changes
-
-- 07f32375: Created `fs-cmsattribute` Attribute
-
-### Patch Changes
-
-- Updated dependencies [07f32375]
-  - @global/constants@1.1.0
-  - @global/factory@1.1.4
-
-## 1.5.8
-
-### Patch Changes
-
-- Updated dependencies [7542dcdb]
-  - @global/constants@1.0.2
-  - @global/factory@1.1.3
-
-## 1.5.7
-
-### Patch Changes
-
-- Updated dependencies [bdd1a78]
-  - @global/constants@1.0.1
-  - @global/factory@1.1.2
-
-## 1.5.6
-
-### Patch Changes
-
-- Updated dependencies [13c3e23]
-  - @global/factory@1.1.1
-  - @finsweet/attributes-cmsselect@1.4.4
-
-## 1.5.5
-
-### Patch Changes
-
-- Updated dependencies [627bf25]
-  - @global/factory@1.1.0
-  - @finsweet/attributes-cmsselect@1.4.3
-
-## 1.5.4
-
-### Patch Changes
-
-- @finsweet/attributes-cmsselect@1.4.2
-
-## 1.5.3
-
-### Patch Changes
-
-- @finsweet/attributes-cmsselect@1.4.1
-
-## 1.5.2
-
-### Patch Changes
-
-- [Internal - `@finsweet-ts/utils`]: Fixed `setFormFieldValue` helper to fix an infinite loop being generated when the field value was the same one.
-
-## 1.5.1
-
-### Patch Changes
-
-- Added support to use `cmsselect` + `selectcustom` in combination.
-  Now users can seamlessly use `cmsselect` to populate a `<select>` element that is used as the source for a Custom Select Dropdown (`selectcustom`).
-
-## 1.5.0
-
-### Minor Changes
-
-- Added support wizard and publishing new schema version
-
-## 1.4.0
-
-### Minor Changes
-
-Included a new `window.fsAttributes.push()` method in the developer API that provides a standarized way to safely access any Attribute internals once it has fully loaded.
-It can be used like:
-
-```html
-<script>
-  window.fsAttributes = window.fsAttributes || [];
-  window.fsAttributes.push([
-    'selectcustom',
-    (referenceElements) => {
-      console.log('Attribute has successfully loaded!');
-      console.log(referenceElements);
-    },
-  ]);
-</script>
-```
-
-## 1.3.2
-
-### Patch Changes
-
-- Persisted the `aria-selected` attribute to be fully compliant with the [WAI-ARIA specification](https://www.w3.org/TR/WCAG20-TECHS/ARIA5).
-  Now the unselected options will be set to `aria-selected="false"` instead of removing the attribute.
-
-## 1.3.1
-
-### Patch Changes
-
-- Fixed `fs-selectcustom-hideinitial="true"` incorrectly toggling the `reset-option` element's visibility when opening/closing the dropdown repeatedly.
-
-## 1.3.0
-
-### Minor Changes
-
-- Improved `Tab` focus behavior by allowing users to move to the next/previous focusable elements on the screen. This action will automatically close the dropdown.
-- Improved opening the list when there are no currently selected options. Now the first selectable option will be automatically focused.
-
-## 1.2.1
-
-### Patch Changes
-
-- Made sure the `aria-current` attribute is removed from the option `<a>` elements, as it's a navigational exclusive attribute that Webflow applies when the `Current` state is on.
-
-## 1.2.0
-
-### Minor Changes
-
-- Added two way data binding. Now the Custom Select Dropdown will react to any `change` events emitted from the hidden `<select>` element and update accordingly.
-- Fixed the dropdown not closing when the user clicked on the currently selected option.
-
-## 1.1.2
-
-### Patch Changes
-
-- Fixed `fs-cmsselect-hideinitial="true"` not hiding the `option-reset` option on page load.
-
-## 1.1.1
-
-### Patch Changes
-
-- Fixed dropdowns not closing automatically after selecting an option on mobile.
-- Fixed `fs-selectcustom-hideinitial` sometimes causing unwanted flashes when toggling the `option-reset` element's visibility.
-- Added better support for using `Dropdown` interactions that affect how the `Dropdown List` is displayed/hidden.
-
-## 1.1.0
-
-### Minor Changes
-
-- Removed `fs-selectcustom-element="text"` and `fs-selectcustom-element="label-content"` attributes as they were unnecessary. Users should only have one Text element inside the option template.
-- Made `fs-selectcustom-element="label"` optional. If not defined, the library will look for the first Text element occurrency inside the Dropdown Toggle.
-- Added `fs-selectcustom-element="option-reset"` attribute. If added to an `<a>` element inside the Dropdown List, this element will be used as the template for the options with no value.
-- Added `fs-selectcustom-hideinitial="true"` attribute. If added to the Dropdown (the element with `fs-selectcustom-element="dropdown"` attribute), the options with no value will be hidden when there are no currently selected options, and displayed otherwise.
-
-## 1.0.0
-
-### Major Changes
-
-- Added missing `a11ty` attributes to the Dropdown Toggle and Dropdown List elements.
-- Released the package.

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

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

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

@@ -1,23 +0,0 @@
-{
-  "name": "@finsweet/attributes-selectcustom",
-  "version": "1.7.9",
-  "description": "Create custom Select Dropdown components inside 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-debounce": "^1.1.0",
-    "@finsweet/attributes-utils": "workspace:*"
-  }
-}

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

@@ -1,29 +0,0 @@
-import {
-  ARIA_HASPOPUP_KEY,
-  ARIA_MULTISELECTABLE_KEY,
-  ARIA_ROLE_KEY,
-  ARIA_ROLE_VALUES,
-  type DropdownList,
-  type DropdownToggle,
-} from '@finsweet/attributes-utils';
-
-import type { OptionData } from '../utils/types';
-
-/**
- * Adds `a11ty` attributes to the Dropdown elements.
- * @param dropdownToggle The {@link DropdownToggle} element.
- * @param dropdownList The {@link DropdownList} element.
- */
-export const setDropdownAria = (dropdownToggle: DropdownToggle, dropdownList: DropdownList) => {
-  dropdownToggle.setAttribute(ARIA_HASPOPUP_KEY, ARIA_ROLE_VALUES.listbox);
-  dropdownList.setAttribute(ARIA_ROLE_KEY, ARIA_ROLE_VALUES.listbox);
-  dropdownList.setAttribute(ARIA_MULTISELECTABLE_KEY, 'false');
-};
-
-/**
- * Sets the required aria attributes to a custom option element.
- * @param element
- */
-export const setOptionAria = (element: OptionData['element']) => {
-  element.setAttribute(ARIA_ROLE_KEY, ARIA_ROLE_VALUES.option);
-};