@hortonstudio/main 1.2.12 → 1.2.14

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

@@ -1,281 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

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

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

@@ -1,194 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

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