@hortonstudio/main 1.2.4 → 1.2.6

package/attributes-master/packages/rangeslider/src/components/Handle.ts

@@ -0,0 +1,281 @@
+import {
+  addListener,
+  adjustValueToStep,
+  ARIA_VALUEMAX_KEY,
+  ARIA_VALUEMIN_KEY,
+  ARIA_VALUENOW_KEY,
+  setFormFieldValue,
+} from '@finsweet/attributes-utils';
+
+import { setHandleA11Y } from '../actions/a11y';
+import { setHandleStyles } from '../actions/styles';
+import { HANDLE_INCREMENT_KEYS, HANDLE_KEYS } from '../utils/constants';
+import type { Fill } from './Fill';
+
+export class Handle {
+  public readonly destroy;
+
+  private readonly index;
+  private readonly minRange;
+  private readonly maxRange;
+  private readonly totalRange;
+  private readonly step;
+  private readonly precision;
+
+  private readonly inputElement;
+  private readonly displayValueElement;
+  private readonly formatValueDisplay;
+
+  private fill?: Fill;
+  private sibling?: Handle;
+
+  private trackWidth;
+
+  private currentValue!: number;
+  private minValue;
+  private maxValue;
+
+  private updatingInput = false;
+
+  constructor(
+    public readonly element: HTMLElement,
+    {
+      index,
+      minRange,
+      maxRange,
+      trackWidth,
+      step,
+      precision,
+      startValue,
+      isLazy,
+      inputElement,
+      displayValueElement,
+      formatValueDisplay,
+    }: {
+      index: number;
+      minRange: number;
+      maxRange: number;
+      trackWidth: number;
+      step: number;
+      precision: number;
+      startValue: number;
+      isLazy: boolean;
+      inputElement?: HTMLInputElement;
+      displayValueElement?: HTMLElement;
+      formatValueDisplay?: string;
+    }
+  ) {
+    this.inputElement = inputElement;
+    this.displayValueElement = displayValueElement;
+    this.formatValueDisplay = formatValueDisplay;
+
+    this.index = index;
+    this.minRange = minRange;
+    this.maxRange = maxRange;
+    this.totalRange = maxRange - minRange;
+    this.step = step;
+    this.precision = precision;
+
+    this.minValue = minRange;
+    this.maxValue = maxRange;
+
+    this.trackWidth = trackWidth;
+
+    setHandleStyles(element);
+    setHandleA11Y(element, inputElement);
+
+    this.setValue(inputElement?.value ? parseFloat(inputElement.value) : startValue, !isLazy);
+    this.destroy = this.listenEvents();
+  }
+
+  /**
+   * Listens for internal events.
+   */
+  private listenEvents() {
+    const { element, inputElement } = this;
+
+    const cleanups = [
+      addListener(element, 'keydown', (e) => this.handleKeyDown(e)),
+      addListener(inputElement, 'change', () => this.handleInputChange()),
+    ];
+
+    return () => {
+      for (const cleanup of cleanups) cleanup();
+    };
+  }
+
+  /**
+   * Handles when the keyboard is used when focusing the Handle.
+   * @param e A `keydown` event.
+   */
+  private handleKeyDown(e: KeyboardEvent) {
+    const { step, currentValue } = this;
+    const { key } = e;
+
+    if (!HANDLE_KEYS.includes(key)) return;
+
+    e.preventDefault();
+
+    if (HANDLE_INCREMENT_KEYS.includes(key)) this.setValue(currentValue + step);
+    else this.setValue(currentValue - step);
+  }
+
+  /**
+   * Handles when the value of the `<input>` element is updated by third party actions.
+   */
+  private handleInputChange() {
+    const { inputElement, index, minRange, maxRange, step, precision, updatingInput } = this;
+    if (!inputElement || updatingInput) return;
+
+    const { value } = inputElement;
+
+    const numericValue = parseFloat(value);
+
+    if (numericValue) {
+      this.setValue(adjustValueToStep(numericValue, step, precision, minRange));
+
+      return;
+    }
+
+    this.setValue(index === 0 ? minRange : maxRange, false);
+  }
+
+  private formatValue(value: number, rawLocale: string) {
+    const locale = rawLocale === 'true' ? undefined : rawLocale;
+
+    try {
+      return value.toLocaleString(locale);
+    } catch {
+      return value.toLocaleString(window.navigator?.language || undefined);
+    }
+  }
+
+  /**
+   * Updates the Handle's position on the track.
+   */
+  private updatePosition() {
+    const { currentValue, element, trackWidth, minRange, totalRange, fill } = this;
+
+    const left = ((currentValue - minRange) * trackWidth) / totalRange;
+
+    element.style.left = `${left}px`;
+
+    fill?.update();
+  }
+
+  /**
+   * @returns The current value of the Handle.
+   */
+  public getValue = (): number => this.currentValue;
+
+  /**
+   * Sets a new value to the Handle.
+   * The Handle's position is automatically updated based on the new value.
+   * @param newValue The new value to set.
+   * @param updateInputElement Defines if the `<input>` element should be updated. Defaults to `true`.
+   *
+   * @returns `true` if the current value was updated.
+   */
+  public setValue(newValue: number, updateInputElement = true): boolean {
+    const { currentValue, element, minValue, maxValue, displayValueElement, formatValueDisplay } = this;
+
+    if (currentValue === newValue || newValue < minValue || newValue > maxValue) return false;
+
+    this.currentValue = newValue;
+
+    this.updatePosition();
+    this.updateSiblingConstraints();
+
+    const stringValue = `${newValue}`;
+
+    element.setAttribute(ARIA_VALUENOW_KEY, stringValue);
+
+    if (displayValueElement)
+      displayValueElement.textContent = formatValueDisplay
+        ? this.formatValue(newValue, formatValueDisplay)
+        : stringValue;
+
+    if (updateInputElement) this.updateInputElement();
+
+    return true;
+  }
+
+  /**
+   * Updates the input element's value.
+   */
+  public updateInputElement() {
+    this.updatingInput = true;
+
+    const { currentValue, inputElement } = this;
+
+    if (!inputElement) return;
+
+    setFormFieldValue(inputElement, currentValue.toFixed(2));
+
+    this.updatingInput = false;
+  }
+
+  /**
+   * @returns The Handle's constraints.
+   */
+  public getConstraints = (): [number, number] => [this.minValue, this.maxValue];
+
+  /**
+   * Sets new constraints to the Handle.
+   * @param minValue The new minimum value.
+   * @param maxValue The new maximum value.
+   */
+  public setConstraints(minValue: number, maxValue: number): void {
+    const { element } = this;
+
+    const minValFixed = minValue.toFixed(2);
+    const maxValFixed = maxValue.toFixed(2);
+
+    element.setAttribute(ARIA_VALUEMIN_KEY, minValFixed);
+    element.setAttribute(ARIA_VALUEMAX_KEY, maxValFixed);
+
+    this.minValue = Number(minValFixed);
+    this.maxValue = Number(maxValFixed);
+  }
+
+  /**
+   * Updates the sibling's constaints, if existing.
+   */
+  public updateSiblingConstraints() {
+    const { index, sibling, step, minRange, maxRange, currentValue } = this;
+
+    if (!sibling) return;
+
+    if (index === 0) sibling.setConstraints(currentValue + step, maxRange);
+    else sibling.setConstraints(minRange, currentValue - step);
+  }
+
+  /**
+   * Updates the stored track width and the Handle's position on the track.
+   * @param newTrackWidth The new track width.
+   */
+  public updateTrackWidth(newTrackWidth: number) {
+    this.trackWidth = newTrackWidth;
+
+    this.fill?.updateTrackWidth(newTrackWidth);
+    this.updatePosition();
+  }
+
+  /**
+   * Adds a `Fill` instance to the Handle.
+   * @param fill A {@link Fill} instance.
+   */
+  public addFill(fill: Fill) {
+    this.fill = fill;
+  }
+
+  /**
+   * Adds a sibling Handle.
+   * @param sibling A {@link Handle} instance.
+   */
+  public addSibling(sibling: Handle) {
+    this.sibling = sibling;
+
+    this.updateSiblingConstraints();
+  }
+}

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

@@ -0,0 +1,100 @@
+import { adjustValueToStep, isNotEmpty } from '@finsweet/attributes-utils';
+
+import { Fill } from './components/Fill';
+import { Handle } from './components/Handle';
+import { getAttribute } from './utils/selectors';
+import type { HandleInstances, RangeSliderSettings } from './utils/types';
+
+/**
+ * Creates {@link Handle} instances and sets them up.
+ * @param settings The {@link RangeSliderSettings}.
+ * @returns The new {@link Handle} instances.
+ */
+export const createHandleInstances = ({
+  handleElements,
+  inputElements,
+  displayValueElements,
+  formatValueDisplay,
+  minRange,
+  maxRange,
+  trackWidth,
+  step,
+  precision,
+  isLazy,
+}: RangeSliderSettings): HandleInstances | undefined => {
+  const handles = handleElements
+    .slice(0, 2)
+    .map((handleElement, index) => {
+      const rawStartValue = parseFloat(getAttribute(handleElement, 'start') || `${index === 0 ? minRange : maxRange}`);
+
+      let startValue = adjustValueToStep(rawStartValue, step, precision, minRange);
+
+      const inputElement = inputElements[index];
+      const displayValueElement = displayValueElements[index];
+
+      if (startValue < minRange) {
+        console.error(
+          `The Handle start value [${startValue}] doesn't match the range, so it has been set to the min value [${minRange}].`
+        );
+        startValue = minRange;
+      }
+
+      if (startValue > maxRange) {
+        console.error(
+          `The Handle start value [${startValue}] doesn't match the range, so it has been set to the max value [${maxRange}].`
+        );
+        startValue = maxRange;
+      }
+
+      const handle = new Handle(handleElement, {
+        index,
+        minRange,
+        maxRange,
+        trackWidth,
+        step,
+        precision,
+        startValue,
+        inputElement,
+        displayValueElement,
+        formatValueDisplay,
+        isLazy,
+      });
+
+      return handle;
+    })
+    .filter(isNotEmpty);
+
+  if (!handles.length) return;
+
+  // Sort them by start value
+  if (handles.length > 1) handles.sort((handle1, handle2) => handle1.getValue() - handle2.getValue());
+
+  const [handle1, handle2] = handles;
+
+  // Add relationships
+  if (handle2) {
+    handle1.addSibling(handle2);
+    handle2.addSibling(handle1);
+  } else handle1.setConstraints(minRange, maxRange);
+
+  return [handle1, handle2];
+};
+
+/**
+ * Creates a `Fill` instance and adds it to the Handles.
+ * @param settings The settings returned by {@link getSettings}.
+ * @param handles The {@link HandleInstances} tuple.
+ * @returns
+ */
+export const createFillInstance = (
+  { fillElement, minRange, maxRange, trackWidth }: RangeSliderSettings,
+  handles: HandleInstances
+) => {
+  if (!fillElement) return;
+
+  const fill = new Fill(fillElement, { minRange, maxRange, trackWidth, handles });
+  const [handle1, handle2] = handles;
+
+  handle1.addFill(fill);
+  handle2?.addFill(fill);
+};

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

@@ -0,0 +1,194 @@
+import {
+  addListener,
+  adjustValueToStep,
+  type FinsweetAttributeInit,
+  getHiddenParent,
+  isNotEmpty,
+  isVisible,
+  noop,
+  waitWebflowReady,
+} from '@finsweet/attributes-utils';
+import debounce from 'just-debounce';
+
+import { getClientX } from './actions/events';
+import { getSettings } from './actions/settings';
+import { getClosestValidHandle } from './actions/values';
+import type { Handle } from './components/Handle';
+import { createFillInstance, createHandleInstances } from './factory';
+import { queryAllElements } from './utils/selectors';
+
+/**
+ * Inits the attribute.
+ */
+export const init: FinsweetAttributeInit = async () => {
+  await waitWebflowReady();
+
+  const wrapperElements = queryAllElements('wrapper');
+
+  const rangeSlidersData = wrapperElements.map(initRangeSlider).filter(isNotEmpty);
+
+  const handleInstances = rangeSlidersData.map(({ handles }) => handles);
+
+  return {
+    result: handleInstances,
+    destroy() {
+      for (const { destroy } of rangeSlidersData) destroy();
+    },
+  };
+};
+
+/**
+ * Inits a range slider.
+ * @param wrapperElement The wrapper element.
+ * @returns The {@link HandleInstances}.
+ */
+const initRangeSlider = (wrapperElement: HTMLElement) => {
+  const settings = getSettings(wrapperElement);
+  if (!settings) return;
+
+  const handles = createHandleInstances(settings);
+  if (!handles) return;
+
+  createFillInstance(settings, handles);
+
+  const { maxRange, minRange, step, precision, totalRange, trackElement, updateOnRelease } = settings;
+
+  let { trackWidth, trackLeft, trackRight } = settings;
+  let focusedHandle: Handle | undefined;
+  let focusedHandleHasUpdated = false;
+
+  /**
+   * Calculates the value based on where the user clicked and adjusts it to the step increment,
+   * @param clientX The event `clientX` value.
+   */
+  const calculateNewValue = (clientX: number) => {
+    const value = minRange + ((clientX - trackLeft) * totalRange) / trackWidth;
+
+    const adjustedValue = adjustValueToStep(value, step, precision, minRange);
+    return adjustedValue;
+  };
+
+  /**
+   * Handles when the user moves the cursor/finger while holding down a {@link Handle}.
+   * @param e A `mousemove` or `touchmove` event.
+   */
+  const handleMouseMove = (e: MouseEvent | TouchEvent) => {
+    if (!focusedHandle) return;
+
+    if (e instanceof MouseEvent) e.preventDefault();
+
+    const clientX = getClientX(e);
+    const [minValue, maxValue] = focusedHandle.getConstraints();
+
+    let value: number;
+
+    if (trackLeft > clientX) value = minValue;
+    else if (trackRight < clientX) value = maxValue;
+    else value = calculateNewValue(clientX);
+
+    const hasUpdatedValue = focusedHandle.setValue(value, !updateOnRelease);
+
+    focusedHandleHasUpdated ||= hasUpdatedValue;
+  };
+
+  /**
+   * Handles when the user releases the currently focused {@link Handle}.
+   * @param e A `mouseup` or `touchend` event.
+   */
+  const handleMouseUp = (e: MouseEvent | TouchEvent) => {
+    if (e.cancelable) e.preventDefault();
+
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('touchmove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+    document.removeEventListener('touchend', handleMouseUp);
+
+    if (updateOnRelease && focusedHandleHasUpdated) focusedHandle?.updateInputElement();
+
+    focusedHandleHasUpdated = false;
+
+    focusedHandle?.element.blur();
+    focusedHandle = undefined;
+  };
+
+  /**
+   * Handles when the user holds down a {@link Handle}.
+   * @param e A `mousedown` or `touchstart` event.
+   */
+  const handleMouseDown = (e: MouseEvent | TouchEvent) => {
+    if (e.cancelable) e.preventDefault();
+
+    const clientX = getClientX(e);
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('touchmove', handleMouseMove, { passive: true });
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('touchend', handleMouseUp);
+
+    let value: number;
+
+    if (trackLeft > clientX) value = minRange;
+    else if (trackRight < clientX) value = maxRange;
+    else value = calculateNewValue(clientX);
+
+    const closestHandle = getClosestValidHandle(value, handles);
+    if (!closestHandle) return;
+
+    closestHandle.element.focus();
+
+    focusedHandle = closestHandle;
+
+    const hasUpdatedValue = closestHandle.setValue(value, !updateOnRelease);
+
+    focusedHandleHasUpdated ||= hasUpdatedValue;
+  };
+
+  /**
+   * Updates the stored `trackWidth` value and the Handles' position.
+   */
+  const handleDOMMutation = () => {
+    trackWidth = trackElement.clientWidth;
+
+    ({ left: trackLeft, right: trackRight } = trackElement.getBoundingClientRect());
+
+    for (const handle of handles) {
+      if (handle) handle.updateTrackWidth(trackWidth);
+    }
+  };
+
+  /**
+   * If the wrapper is initially hidden, observes mutations and performs the needed actions.
+   */
+  const observeWrapperVisibility = () => {
+    const hiddenParent = getHiddenParent(wrapperElement);
+    if (!hiddenParent) return noop;
+
+    const observer = new MutationObserver(() => {
+      if (isVisible(hiddenParent)) handleDOMMutation();
+    });
+
+    observer.observe(hiddenParent, {
+      attributes: true,
+      attributeFilter: ['style', 'class'],
+    });
+
+    return () => observer.disconnect();
+  };
+
+  /**
+   * Init events
+   */
+  const cleanups = [
+    observeWrapperVisibility(),
+    addListener(trackElement, 'mousedown', handleMouseDown),
+    addListener(trackElement, 'touchstart', handleMouseDown, { passive: true }),
+    addListener(window, 'resize', debounce(handleDOMMutation, 50)),
+  ];
+
+  return {
+    handles,
+    destroy: () => {
+      for (const cleanup of cleanups) cleanup();
+    },
+  };
+};

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

@@ -0,0 +1,87 @@
+import {
+  ARROW_DOWN_KEY,
+  ARROW_LEFT_KEY,
+  ARROW_RIGHT_KEY,
+  ARROW_UP_KEY,
+  type AttributeElements,
+  type AttributeSettings,
+} from '@finsweet/attributes-utils';
+
+export const ELEMENTS = [
+  /**
+   * Defines a range slider instance element.
+   */
+  'wrapper',
+
+  /**
+   * Defines the track of the slider.
+   */
+  'track',
+
+  /**
+   * Defines the fill of the slider.
+   */
+  'fill',
+
+  /**
+   * Defines a handle of the slider.
+   */
+  'handle',
+
+  /**
+   * Defines an element to display a Handle's value.
+   */
+  'display-value',
+] as const satisfies AttributeElements;
+
+export const SETTINGS = {
+  /**
+   * Defines the minimum value of the range.
+   */
+  min: { key: 'min' },
+
+  /**
+   * Defines the maximum value of the range.
+   */
+  max: { key: 'max' },
+
+  /**
+   * Defines the start value of a handle.
+   * Must be applied to a handle element {@link ATTRIBUTES.element.values.handle}.
+   */
+  start: { key: 'start' },
+
+  /**
+   * Defines the step of the values.
+   */
+  step: { key: 'step' },
+
+  /**
+   * Defines if the Handles' value display should be formatted.
+   */
+  formatdisplay: {
+    key: 'formatdisplay',
+    values: ['true'],
+  },
+
+  /**
+   * Defines when should the <input> elements be updated.
+   */
+  update: {
+    key: 'update',
+    values: ['move', 'release'],
+    defaultValue: 'move',
+  },
+
+  /**
+   * Defines if the input values should be updated lazily.
+   */
+  lazy: {
+    key: 'lazy',
+    values: ['true'],
+  },
+} as const satisfies AttributeSettings;
+
+export const HANDLE_INCREMENT_KEYS = [ARROW_UP_KEY, ARROW_RIGHT_KEY];
+export const HANDLE_DECREMENT_KEYS = [ARROW_DOWN_KEY, ARROW_LEFT_KEY];
+export const HANDLE_KEYS = [...HANDLE_INCREMENT_KEYS, ...HANDLE_DECREMENT_KEYS];

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

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

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

@@ -0,0 +1,6 @@
+import type { getSettings } from '../actions/settings';
+import type { Handle } from '../components/Handle';
+
+export type HandleInstances = [Handle, Handle | undefined];
+
+export type RangeSliderSettings = NonNullable<ReturnType<typeof getSettings>>;

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

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