@hortonstudio/main 1.2.4 → 1.2.6

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

@@ -0,0 +1,220 @@
+# @finsweet/attributes-sliderdots
+
+## 1.8.7
+
+### Patch Changes
+
+- Updated dependencies [2af0bad]
+  - @finsweet/attributes-utils@0.1.0
+
+## 1.8.6
+
+### Patch Changes
+
+- 378d74d: fix: unify public API under FinsweetAttributes and remove finsweetAttributes
+- Updated dependencies [378d74d]
+  - @finsweet/attributes-utils@0.0.6
+
+## 1.8.5
+
+### Patch Changes
+
+- Updated dependencies [01973d8]
+  - @finsweet/attributes-utils@0.0.5
+
+## 1.8.4
+
+### Patch Changes
+
+- Updated dependencies [deef758]
+  - @finsweet/attributes-utils@0.0.4
+
+## 1.8.3
+
+### Patch Changes
+
+- Updated dependencies [d21cbca]
+  - @finsweet/attributes-utils@0.0.3
+
+## 1.8.2
+
+### Patch Changes
+
+- c7b544d: chore: updated dependencies
+- Updated dependencies [c7b544d]
+  - @finsweet/attributes-utils@0.0.2
+
+## 1.8.1
+
+### Patch Changes
+
+- b56e5e5: rename fsAttribute in places of usage to finsweetAttribute
+- Updated dependencies [b56e5e5]
+  - @finsweet/attributes-utils@0.0.1
+
+## 1.8.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.7.1
+
+### Patch Changes
+
+- Updated dependencies [4792998a]
+  - @global/constants@1.2.0
+  - @global/factory@1.1.5
+
+## 1.7.0
+
+### Minor Changes
+
+- 07f32375: Created `fs-cmsattribute` Attribute
+
+### Patch Changes
+
+- Updated dependencies [07f32375]
+  - @global/constants@1.1.0
+  - @global/factory@1.1.4
+
+## 1.6.6
+
+### Patch Changes
+
+- dd4d7f61: `sliderdots`: removed cmsslider promise timeout
+
+## 1.6.5
+
+### Patch Changes
+
+- Updated dependencies [7542dcdb]
+  - @global/constants@1.0.2
+  - @global/factory@1.1.3
+
+## 1.6.4
+
+### Patch Changes
+
+- Updated dependencies [bdd1a78]
+  - @global/constants@1.0.1
+  - @global/factory@1.1.2
+
+## 1.6.3
+
+### Patch Changes
+
+- Updated dependencies [13c3e23]
+  - @global/factory@1.1.1
+  - @finsweet/attributes-cmsslider@1.5.3
+
+## 1.6.2
+
+### Patch Changes
+
+- Updated dependencies [627bf25]
+  - @global/factory@1.1.0
+  - @finsweet/attributes-cmsslider@1.5.2
+
+## 1.6.1
+
+### Patch Changes
+
+- Selector for slider and slider-nav updated in Schema.
+
+## 1.6.0
+
+### Minor Changes
+
+- Added support wizard and publishing new schema version
+
+## 1.5.0
+
+### Minor Changes
+
+- Added support to use the native `Slider Nav` element as the container of the custom slider dots.
+  The user can now completely skip adding the `fs-sliderdots-element="slider-nav"` attribute to any element.
+  When this is the case, the library will use the native `Slider Nav` as a fallback.
+
+## 1.4.1
+
+### Patch Changes
+
+- Added support for using `cmsslider` + `sliderdots` together.
+  If both attributes are detected, now `sliderdots` will wait until `cmsslider` has finished populating all Slides before creating the Custom Slider Dots.
+
+## 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([
+    'sliderdots',
+    (sliders) => {
+      console.log('Attribute has successfully loaded!');
+      console.log(sliders);
+    },
+  ]);
+</script>
+```
+
+## 1.3.0
+
+### Minor Changes
+
+- Added support to apply `fs-sliderdots-remove="true"` to the `fs-sliderdots-element="slider-nav"` element.
+  If applied, all existing content inside the custom slider nav will be removed before appending the custom dots.
+- Released `v1.3.0-beta.0`.
+
+## 1.2.0
+
+### Minor Changes
+
+- Created `changesets.json` API.
+
+## 1.1.2
+
+### Patch Changes
+
+- Added `initAttributes` call to make sure `window.fsAttributes` exists.
+
+## 1.1.1
+
+### Patch Changes
+
+- Updated `examples.json`.
+
+## 1.1.0
+
+### Minor Changes
+
+- Added `fs-sliderdots-element="slider-nav"` functionality. Now all dots will become custom dots that are synced with the original dots.
+
+## 1.0.2
+
+### Patch Changes
+
+- Renamed the property in `window.fsAttributes` to the original Attribute key name.
+
+## 1.0.1
+
+### Patch Changes
+
+- Implemented the `generateSelectors` util.
+
+## 1.0.0
+
+### Major Changes
+
+- Created the attribute package.

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

@@ -0,0 +1,27 @@
+# `sliderdots` Attribute
+
+Populate the Webflow slider dots with content. Add images, text, or any type of element inside native Webflow slider navigation.
+
+## 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([
+  'sliderdots',
+  (sliderElements) => {
+    // Your code goes here.
+  },
+]);
+```
+
+The `result` object contains the slider elements that have been populated with custom dots.
+
+## License
+
+[Apache 2.0](../../LICENSE.md)

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

@@ -0,0 +1,22 @@
+{
+  "name": "@finsweet/attributes-sliderdots",
+  "version": "1.8.7",
+  "description": "Create custom Slider Dots for a Slider.",
+  "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/sliderdots/src/actions/events.ts

@@ -0,0 +1,26 @@
+import { addListener, isElement, simulateEvent } from '@finsweet/attributes-utils';
+
+import { getElementSelector } from '../utils/selectors';
+import type { DotsRelationship } from '../utils/types';
+
+/**
+ * Listens for click events in the custom slider nav.
+ * @param customSliderNav The `Custom Slider Nav`.
+ * @param dotsRelationship A {@link DotsRelationship} array.
+ *
+ * @returns A callback to remove the event listener.
+ */
+export const listenClickEvents = (customSliderNav: HTMLElement, dotsRelationship: DotsRelationship) => {
+  const clickCleanup = addListener(customSliderNav, 'click', ({ target }) => {
+    if (!isElement(target)) return;
+
+    const customDotTarget = target.closest(getElementSelector('content'));
+    if (!customDotTarget) return;
+
+    const { dot } = dotsRelationship.find(({ customDot }) => customDot === customDotTarget) || {};
+
+    if (dot) simulateEvent(dot, 'click');
+  });
+
+  return clickCleanup;
+};

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

@@ -0,0 +1,40 @@
+import { isHTMLElement, type SliderNavElement } from '@finsweet/attributes-utils';
+
+import type { DotsRelationship } from '../utils/types';
+import { syncDotsProperties } from './sync';
+
+/**
+ * Replicates all actions between the original `Slider Dots` and the `Custom Slider Dots`.
+ * @param sliderNav The original `Slider Nav`.
+ * @param dotsRelationship A {@link DotsRelationship} array.
+ * @param activeCSSClass The CSS class used for the `active` state.
+ *
+ * @returns The MutationObserver.
+ */
+export const observeSliderNav = (
+  sliderNav: SliderNavElement,
+  dotsRelationship: DotsRelationship,
+  activeCSSClass: string
+) => {
+  const callback: MutationCallback = (mutations) => {
+    for (const { target } of mutations) {
+      if (!isHTMLElement(target)) continue;
+
+      const relationshipData = dotsRelationship.find(({ dot }) => dot === target);
+      if (!relationshipData) continue;
+
+      syncDotsProperties(relationshipData, activeCSSClass);
+    }
+  };
+
+  const options: MutationObserverInit = {
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['class'],
+  };
+
+  const observer = new MutationObserver(callback);
+  observer.observe(sliderNav, options);
+
+  return observer;
+};

package/attributes-master/packages/sliderdots/src/actions/populate.ts

@@ -0,0 +1,46 @@
+import {
+  cloneNode,
+  type SlideElement,
+  SLIDER_CSS_CLASSES,
+  type SliderDotElement,
+  type SliderElement,
+} from '@finsweet/attributes-utils';
+
+import { hasAttributeValue, queryElement } from '../utils/selectors';
+import type { DotsRelationship } from '../utils/types';
+
+const { slide: slideCSSClass, sliderDot: sliderDotCSSClass } = SLIDER_CSS_CLASSES;
+
+/**
+ * Populates all the custom slider dots.
+ * @param slider The `SliderElement`.
+ * @param customSliderNav The custom Slider nav element.
+ *
+ * @returns A {@link DotsRelationship} array.
+ */
+export const populateSliderDots = (slider: SliderElement, customSliderNav: HTMLElement): DotsRelationship => {
+  const dotsRelationship: DotsRelationship = [];
+
+  const slides = slider.querySelectorAll<SlideElement>(`.${slideCSSClass}`);
+  const dots = slider.querySelectorAll<SliderDotElement>(`.${sliderDotCSSClass}`);
+
+  slides.forEach((slide, index) => {
+    const dot = dots[index];
+    if (!dot) return;
+
+    dot.style.display = 'none';
+
+    const customDotElement = queryElement<HTMLElement>('content', { scope: slide });
+    if (!customDotElement) return;
+
+    const mustRemove = hasAttributeValue(customDotElement, 'remove', 'true');
+
+    const customDot = mustRemove ? customDotElement : cloneNode(customDotElement);
+
+    customSliderNav.appendChild(customDot);
+
+    dotsRelationship.push({ dot, customDot });
+  });
+
+  return dotsRelationship;
+};

package/attributes-master/packages/sliderdots/src/actions/sync.ts

@@ -0,0 +1,28 @@
+import {
+  ARIA_LABEL_KEY,
+  ARIA_PRESSED_KEY,
+  ARIA_ROLE_KEY,
+  SLIDER_CSS_CLASSES,
+  TABINDEX_KEY,
+} from '@finsweet/attributes-utils';
+
+import type { DotsRelationship } from '../utils/types';
+
+/**
+ * Syncronizes the properties from the original `Slider Dot` with the `Custom Slider Dot`.
+ * @param dot The original `Slider Dot`.
+ * @param customDot The `Custom Slider Dot`.
+ * @param activeCSSClass The CSS class used for the `active` state.
+ */
+export const syncDotsProperties = ({ dot, customDot }: DotsRelationship[number], activeCSSClass: string) => {
+  const isActive = dot.classList.contains(SLIDER_CSS_CLASSES.activeSliderDot);
+
+  customDot.classList[isActive ? 'add' : 'remove'](activeCSSClass);
+
+  for (const attributeKey of [ARIA_LABEL_KEY, ARIA_PRESSED_KEY, ARIA_ROLE_KEY, TABINDEX_KEY]) {
+    const value = dot.getAttribute(attributeKey);
+
+    if (value) customDot.setAttribute(attributeKey, value);
+    else customDot.removeAttribute(attributeKey);
+  }
+};

package/attributes-master/packages/sliderdots/src/actions/wait.ts

@@ -0,0 +1,28 @@
+import { isElement, SLIDER_CSS_CLASSES, type SliderNavElement } from '@finsweet/attributes-utils';
+
+/**
+ * Returns a Promise that resolves when all slider dots have been initially populated.
+ * Helpful when waiting for `cmsslider` to be ready before initing `sliderdots`.
+ * It has a maximum timeout of 500ms.
+ *
+ * @param sliderNav The original `Slider Nav`.
+ */
+export const waitSliderReady = (sliderNav: SliderNavElement) => {
+  return new Promise((resolve) => {
+    const callback: MutationCallback = (mutations) => {
+      for (const { addedNodes } of mutations) {
+        for (const addedNode of addedNodes) {
+          const isSliderDot = isElement(addedNode) && addedNode.closest(`.${SLIDER_CSS_CLASSES.sliderDot}`);
+          if (!isSliderDot) continue;
+
+          resolve(undefined);
+          observer.disconnect();
+          return;
+        }
+      }
+    };
+
+    const observer = new MutationObserver(callback);
+    observer.observe(sliderNav, { childList: true });
+  });
+};

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

@@ -0,0 +1,57 @@
+import {
+  SLIDER_CSS_CLASSES,
+  type SliderElement,
+  type SliderNavElement,
+  waitAttributeLoaded,
+} from '@finsweet/attributes-utils';
+
+import { listenClickEvents } from './actions/events';
+import { observeSliderNav } from './actions/observe';
+import { populateSliderDots } from './actions/populate';
+import { syncDotsProperties } from './actions/sync';
+import { waitSliderReady } from './actions/wait';
+import { getAttribute, getInstance, hasAttributeValue, queryElement } from './utils/selectors';
+
+/**
+ * Generates the custom slider dots and inits syncing.
+ * @param slider The `SliderElement`.
+ */
+export const createSliderDots = async (slider: SliderElement) => {
+  // Get slider elements
+  const instance = getInstance(slider);
+
+  const sliderNav = slider.querySelector<SliderNavElement>(`.${SLIDER_CSS_CLASSES.sliderNav}`);
+  const customSliderNav = queryElement<HTMLElement>('slider-nav', { instance }) || sliderNav;
+
+  if (!sliderNav || !customSliderNav) return;
+
+  // Make sure CMSSlider has finished (if existing on the page)
+  const listSliderAttribute = window.FinsweetAttributes.process.has('list');
+  if (listSliderAttribute) {
+    await Promise.all([waitAttributeLoaded('list'), waitSliderReady(sliderNav)]);
+  }
+
+  // Get props
+
+  const activeCustomDotCSSClass = getAttribute(slider, 'active');
+
+  // Clear the custom slider nav content
+  const clearCustomSliderContent = hasAttributeValue(customSliderNav, 'remove', 'true');
+  if (clearCustomSliderContent) customSliderNav.innerHTML = '';
+
+  // Populate the dots
+  const dotsRelationship = populateSliderDots(slider, customSliderNav);
+
+  // Init sync
+  for (const relationshipData of dotsRelationship) {
+    syncDotsProperties(relationshipData, activeCustomDotCSSClass);
+  }
+
+  const observer = observeSliderNav(sliderNav, dotsRelationship, activeCustomDotCSSClass);
+  const removeClickListener = listenClickEvents(customSliderNav, dotsRelationship);
+
+  return () => {
+    observer.disconnect();
+    removeClickListener();
+  };
+};

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

@@ -0,0 +1,30 @@
+import {
+  type FinsweetAttributeInit,
+  isNotEmpty,
+  SLIDER_CSS_CLASSES,
+  type SliderElement,
+  waitWebflowReady,
+} from '@finsweet/attributes-utils';
+
+import { createSliderDots } from './factory';
+import { getElementSelector } from './utils/selectors';
+
+/**
+ * Inits the custom slider dots.
+ */
+export const init: FinsweetAttributeInit = async () => {
+  await waitWebflowReady();
+
+  const sliders = [
+    ...document.querySelectorAll<SliderElement>(`.${SLIDER_CSS_CLASSES.slider}${getElementSelector('slider')}`),
+  ];
+
+  const cleanups = (await Promise.all(sliders.map(createSliderDots))).filter(isNotEmpty);
+
+  return {
+    result: sliders,
+    destroy() {
+      for (const cleanup of cleanups) cleanup();
+    },
+  };
+};

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

@@ -0,0 +1,33 @@
+import { type AttributeElements, type AttributeSettings, SLIDER_DOTS_ATTRIBUTE } from '@finsweet/attributes-utils';
+
+export const ELEMENTS = [
+  /**
+   * Defines a slider to instantiate.
+   */
+  'slider',
+
+  /**
+   * Defines the content to be added to the slider dot.
+   */
+  'content',
+
+  /**
+   * Defines a custom Slide Nav.
+   */
+  'slider-nav',
+] as const satisfies AttributeElements;
+
+export const SETTINGS = {
+  /**
+   * Defines the `active` CSS class.
+   */
+  active: { key: 'active', defaultValue: `is-${SLIDER_DOTS_ATTRIBUTE}-active` },
+
+  /**
+   * Defines if the content should be removed or just duplicated.
+   */
+  remove: {
+    key: 'remove',
+    values: ['true'],
+  },
+} as const satisfies AttributeSettings;

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

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

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

@@ -0,0 +1,7 @@
+/**
+ * Defines the relationship between an original Slider Dot and its relative Custom Slider Dot.
+ */
+export type DotsRelationship = Array<{
+  dot: HTMLElement;
+  customDot: HTMLElement;
+}>;

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

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