@hortonstudio/main 1.2.12 → 1.2.14

package/attributes-master/packages/formsubmit/src/components/Form.ts

@@ -1,231 +0,0 @@
-import {
-  addListener,
-  FORM_CSS_CLASSES,
-  type FormBlockElement,
-  type FormErrorElement,
-  type FormSuccessElement,
-  simulateEvent,
-} from '@finsweet/attributes-utils';
-
-import { redirectUser } from '../actions/redirect';
-import { collectPreventResetFields, resetForm } from '../actions/reset';
-import { enhancedSubmit } from '../actions/submit';
-import {
-  checkFormSuccess,
-  displayFormSubmitWaitText,
-  hideFormError,
-  showFormError,
-  showFormSuccess,
-} from '../utils/dom';
-
-export class Form {
-  public readonly form;
-  public readonly formBlock;
-  public readonly successMessage;
-  public readonly errorMessage;
-  public readonly submitButtons;
-  public readonly destroy;
-
-  private redirect;
-  private redirectTimeout;
-  private redirectUrl;
-  private redirectToNewTab;
-  private reset;
-  private resetTimeout;
-  private reload;
-  private reloadTimeout;
-  private enhance;
-  private disabled;
-  private ixTriggers;
-  private resetButtons;
-  private currentRedirectTimeout?: number | ReturnType<typeof setTimeout>;
-  private currentResetTimeout?: number | ReturnType<typeof setTimeout>;
-  private currentReloadTimeout?: number | ReturnType<typeof setTimeout>;
-
-  constructor({
-    form,
-    formBlock,
-    reset,
-    resetTimeout,
-    reload,
-    reloadTimeout,
-    redirect,
-    redirectTimeout,
-    redirectUrl,
-    redirectToNewTab,
-    enhance,
-    disable,
-    ixTriggers,
-    resetButtons,
-  }: {
-    form: HTMLFormElement;
-    formBlock: FormBlockElement;
-    reset: boolean;
-    resetTimeout?: number;
-    reload: boolean;
-    reloadTimeout?: number;
-    redirect: boolean;
-    redirectTimeout?: number;
-    redirectUrl?: string | null;
-    redirectToNewTab?: boolean;
-    enhance: boolean;
-    disable: boolean;
-    ixTriggers: Element[];
-    resetButtons: Element[];
-  }) {
-    this.form = form;
-    this.formBlock = formBlock;
-    this.successMessage = formBlock.querySelector(`.${FORM_CSS_CLASSES.successMessage}`) as FormSuccessElement;
-    this.errorMessage = formBlock.querySelector(`.${FORM_CSS_CLASSES.errorMessage}`) as FormErrorElement;
-    this.submitButtons = [...form.querySelectorAll<HTMLInputElement>('input[type="submit"]')];
-
-    this.redirect = redirect;
-    this.redirectTimeout = redirectTimeout;
-    this.redirectUrl = redirectUrl;
-    this.redirectToNewTab = redirectToNewTab;
-    this.reset = reset;
-    this.resetTimeout = resetTimeout;
-    this.reload = reload;
-    this.reloadTimeout = reloadTimeout;
-    this.enhance = enhance;
-    this.disabled = disable;
-    this.ixTriggers = ixTriggers;
-    this.resetButtons = resetButtons;
-
-    this.destroy = this.listenEvents();
-  }
-
-  /**
-   * Listens for internal events.
-   */
-  private listenEvents() {
-    const { form, resetButtons } = this;
-
-    const submitCleanup = addListener(form, 'submit', (e) => this.handleSubmit(e));
-
-    const resetCleanups = resetButtons.map((resetButton) =>
-      addListener(resetButton, 'click', () => this.handleReset(false))
-    );
-
-    return () => {
-      submitCleanup();
-      for (const cleanup of resetCleanups) cleanup();
-    };
-  }
-
-  /**
-   * Handles form submissions.
-   * @param e The submit event.
-   */
-  private async handleSubmit(e: SubmitEvent) {
-    const { reset, redirect, reload, enhance, disabled } = this;
-
-    let success: boolean;
-
-    if (disabled || enhance) {
-      e.preventDefault();
-      e.stopImmediatePropagation();
-    }
-
-    if (disabled) return;
-
-    if (enhance) {
-      success = await this.handleEnhancedSubmit();
-    } else {
-      success = await checkFormSuccess(this);
-    }
-
-    if (!success) return;
-
-    if (reset) this.handleReset();
-    if (redirect) this.handleRedirect();
-    if (reload) this.handleReload();
-
-    this.triggerIx();
-  }
-
-  /**
-   * Resets the form.
-   * @param allowTimeout Defines if waiting for the `resetTimeout` is allowed.
-   */
-  public handleReset(allowTimeout = true) {
-    const { form, resetTimeout, currentResetTimeout } = this;
-
-    clearTimeout(currentResetTimeout);
-    this.currentResetTimeout = undefined;
-
-    const preventResetFields = collectPreventResetFields(form);
-
-    if (allowTimeout && resetTimeout) {
-      this.currentResetTimeout = setTimeout(() => resetForm(this, preventResetFields), resetTimeout);
-    } else {
-      resetForm(this, preventResetFields);
-    }
-  }
-
-  /**
-   * Redirects the user to the defined URL.
-   */
-  public handleRedirect() {
-    const { redirectUrl, redirectTimeout, redirectToNewTab, currentRedirectTimeout } = this;
-
-    if (!redirectUrl) return;
-
-    clearTimeout(currentRedirectTimeout);
-    this.currentRedirectTimeout = undefined;
-
-    if (redirectTimeout) {
-      this.currentRedirectTimeout = setTimeout(() => redirectUser(redirectUrl, redirectToNewTab), redirectTimeout);
-    } else {
-      redirectUser(redirectUrl, redirectToNewTab);
-    }
-  }
-
-  /**
-   * Reload the page.
-   */
-  public handleReload() {
-    const { reloadTimeout, currentReloadTimeout } = this;
-    const { location } = window;
-
-    clearTimeout(currentReloadTimeout);
-    this.currentReloadTimeout = undefined;
-
-    if (reloadTimeout) {
-      this.currentReloadTimeout = setTimeout(location.reload, reloadTimeout);
-    } else {
-      location.reload();
-    }
-  }
-
-  /**
-   * Submits the form data to a custom URL using the defined action and method in the form.
-   * @returns A boolean Promise. `true` if it was successful.
-   */
-  public async handleEnhancedSubmit(): Promise<boolean> {
-    const { form } = this;
-    const { action, method } = form;
-
-    if (!action) return false;
-
-    hideFormError(this);
-
-    const resetSubmitText = displayFormSubmitWaitText(this);
-
-    const success = await enhancedSubmit(form, action, method);
-
-    if (success) showFormSuccess(this);
-    else showFormError(this);
-
-    resetSubmitText();
-
-    return success;
-  }
-
-  /**
-   * Triggers all the `ix-trigger` interactions.
-   */
-  public triggerIx() {
-    for (const ixTrigger of this.ixTriggers) simulateEvent(ixTrigger, 'click');
-  }
-}

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

@@ -1,62 +0,0 @@
-import { FORM_CSS_CLASSES, type FormBlockElement } from '@finsweet/attributes-utils';
-
-import { Form } from './components/Form';
-import { parseActionAttribute } from './utils/attributes';
-import { getAttribute, getInstance, hasAttributeValue, queryAllElements } from './utils/selectors';
-
-/**
- * Creates a new formsubmit instance.
- * @param formElement
- */
-export const initFormInstance = (formElement: Element) => {
-  const formBlock = formElement.closest<FormBlockElement>(`.${FORM_CSS_CLASSES.formBlock}`);
-  if (!formBlock) return;
-
-  const form = formBlock.querySelector('form');
-  if (!form) return;
-
-  const instance = getInstance(formElement);
-
-  const ixTriggers = queryAllElements('ix-trigger', { instance });
-  const resetButtons = queryAllElements('reset', { instance });
-
-  // Reset
-  const rawReset = getAttribute(formElement, 'reset');
-  const [reset, resetTimeout] = parseActionAttribute(rawReset);
-
-  // Reload
-  const rawReload = getAttribute(formElement, 'reload');
-  const [reload, reloadTimeout] = parseActionAttribute(rawReload);
-
-  // Redirect
-  const rawRedirect = getAttribute(formElement, 'redirect');
-  const [redirect, redirectTimeout] = parseActionAttribute(rawRedirect);
-
-  const redirectUrl = getAttribute(formElement, 'redirecturl');
-  const redirectToNewTab = hasAttributeValue(formElement, 'redirectnewtab', 'true');
-
-  // Disable
-  const disable = hasAttributeValue(formElement, 'disable', 'true');
-
-  // Enhance
-  const enhance = hasAttributeValue(formElement, 'enhance', 'true');
-
-  const formInstance = new Form({
-    form,
-    formBlock,
-    reset,
-    resetTimeout,
-    reload,
-    reloadTimeout,
-    redirect,
-    redirectUrl,
-    redirectTimeout,
-    redirectToNewTab,
-    enhance,
-    disable,
-    ixTriggers,
-    resetButtons,
-  });
-
-  return formInstance;
-};

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

@@ -1,24 +0,0 @@
-import { type FinsweetAttributeInit, isNotEmpty, waitWebflowReady } from '@finsweet/attributes-utils';
-
-import { initFormInstance } from './factory';
-import { queryAllElements } from './utils/selectors';
-
-/**
- * Inits the attribute.
- */
-export const init: FinsweetAttributeInit = async () => {
-  await waitWebflowReady();
-
-  const formElements = queryAllElements('form');
-
-  const formInstances = formElements.map(initFormInstance).filter(isNotEmpty);
-
-  return {
-    result: formInstances,
-    destroy() {
-      for (const formInstance of formInstances) {
-        formInstance.destroy();
-      }
-    },
-  };
-};

package/attributes-master/packages/formsubmit/src/utils/attributes.ts

@@ -1,19 +0,0 @@
-import { isString } from '@finsweet/attributes-utils';
-
-/**
- * Parses the `redirect`, `reset` and `reload` attributes.
- * @param attribute
- * @returns A tuple.
- */
-export const parseActionAttribute = (attribute?: string) => {
-  const shouldAct = isString(attribute);
-
-  let actionTimeout: number | undefined;
-
-  if (shouldAct) {
-    const rawActionTimeout = parseInt(attribute);
-    if (!isNaN(rawActionTimeout)) actionTimeout = rawActionTimeout;
-  }
-
-  return [shouldAct, actionTimeout] as const;
-};

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

@@ -1,89 +0,0 @@
-import { type AttributeElements, type AttributeSettings } from '@finsweet/attributes-utils';
-
-export const ELEMENTS = [
-  /**
-   * Defines a form element.
-   */
-  'form',
-
-  /**
-   * Defines an element that, when clicked, should reset the form.
-   */
-  'reset',
-
-  /**
-   * Defines an element that should be clicked after form submission, triggering a Mouse Click interaction.
-   */
-  'ix-trigger',
-] as const satisfies AttributeElements;
-
-export const SETTINGS = {
-  /**
-   * Defines if the form should reset all inputs after submission.
-   * If set to true, it resets automatically.
-   * If set to a number in miliseconds, it will timeout before resetting.
-   */
-  reset: {
-    key: 'reset',
-    values: ['true'],
-  },
-
-  /**
-   * Defines an element (or a wrapper of multiple elements) that should preserve the value when resetting the form.
-   */
-  preventreset: {
-    key: 'preventreset',
-    values: ['true'],
-  },
-
-  /**
-   * Defines if the form should reload the page after submission.
-   * If set to true, it reloads it automatically.
-   * If set to a number in miliseconds, it will timeout before reloading.
-   */
-  reload: {
-    key: 'reload',
-    values: ['true'],
-  },
-
-  /**
-   * Defines if the form should redirect after submission.
-   * If set to true, it redirects automatically.
-   * If set to a number in miliseconds, it will timeout before redirecting.
-   */
-  redirect: {
-    key: 'redirect',
-    values: ['true'],
-  },
-
-  /**
-   * Defines the URL to redirect the user.
-   */
-  redirecturl: {
-    key: 'redirecturl',
-  },
-
-  /**
-   * Defines the redirect target, either on place or on a new tab.
-   */
-  redirectnewtab: {
-    key: 'redirectnewtab',
-    values: ['true'],
-  },
-
-  /**
-   * Defines if the form should be disabled, preventing all submissions.
-   */
-  disable: {
-    key: 'disable',
-    values: ['true'],
-  },
-
-  /**
-   * Sends the data to the form action as a custom JavaScript Fetch instead of reloading the page.
-   */
-  enhance: {
-    key: 'enhance',
-    values: ['true'],
-  },
-} as const satisfies AttributeSettings;

package/attributes-master/packages/formsubmit/src/utils/dom.ts

@@ -1,76 +0,0 @@
-import type { Form } from '../components/Form';
-
-/**
- * Checks if a form submission was successful based on the focused element by Webflow.
- * @param formInstance
- * @returns A boolean Promise.
- */
-export const checkFormSuccess = ({ successMessage, errorMessage }: Form): Promise<boolean> =>
-  new Promise<boolean>((resolve) => {
-    const observer = new MutationObserver(([{ target }]) => {
-      const success = target === successMessage;
-      resolve(success);
-    });
-
-    const options: MutationObserverInit = {
-      attributes: true,
-      attributeFilter: ['style'],
-    };
-
-    observer.observe(successMessage, options);
-    observer.observe(errorMessage, options);
-  });
-
-/**
- * Displays the Error Message of a Webflow form.
- * @param formInstance
- */
-export const showFormError = ({ errorMessage }: Form) => {
-  errorMessage.style.display = 'block';
-};
-
-/**
- * Hides the Error Message of a Webflow form.
- * @param formInstance
- */
-export const hideFormError = ({ errorMessage }: Form) => {
-  errorMessage.style.display = 'none';
-};
-
-/**
- * Displays the Success Message of a Webflow form.
- * Acts exactly like the native Webflow submission, the form is hidden and the success message is displayed.
- * @param formInstance
- */
-export const showFormSuccess = ({ form, successMessage, errorMessage }: Form) => {
-  form.style.display = 'none';
-  errorMessage.style.display = 'none';
-  successMessage.style.display = 'block';
-};
-
-/**
- * Displays the wait text of a Form's submit buttons.
- *
- * @param submitButtons
- * @returns A callback to reset all texts back to original.
- */
-export const displayFormSubmitWaitText = ({ submitButtons }: Form) => {
-  const resetCallbacks = submitButtons.reduce<Array<() => void>>((acc, submitButton) => {
-    const { value, dataset } = submitButton;
-    const waitText = dataset.wait;
-
-    if (!value || !waitText) return acc;
-
-    submitButton.value = waitText;
-
-    acc.push(() => {
-      submitButton.value = value;
-    });
-
-    return acc;
-  }, []);
-
-  return () => {
-    for (const resetCallback of resetCallbacks) resetCallback();
-  };
-};

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

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

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

@@ -1,7 +0,0 @@
-import type { FormField } from '@finsweet/attributes-utils';
-
-export interface FieldData {
-  element: FormField;
-  value: string;
-  checked?: boolean;
-}

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

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

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

@@ -1,117 +0,0 @@
-# @finsweet/attributes-inject
-
-## 2.4.0
-
-### Minor Changes
-
-- 21ad38a: feat: import CSS for same-site-other-page components to support Webflow's new per page CSS splitting
-
-## 2.3.1
-
-### Patch Changes
-
-- Updated dependencies [2af0bad]
-  - @finsweet/attributes-utils@0.1.0
-
-## 2.3.0
-
-### Minor Changes
-
-- 4c20f82: feat: support v1 richtext syntax OOO
-
-## 2.2.0
-
-### Minor Changes
-
-- 31f4870: feat: `fs-inject-element="element"` as an alias for `fs-inject-element="component"`
-
-## 2.1.6
-
-### Patch Changes
-
-- Updated dependencies [378d74d]
-  - @finsweet/attributes-utils@0.0.6
-
-## 2.1.5
-
-### Patch Changes
-
-- Updated dependencies [01973d8]
-  - @finsweet/attributes-utils@0.0.5
-
-## 2.1.4
-
-### Patch Changes
-
-- Updated dependencies [deef758]
-  - @finsweet/attributes-utils@0.0.4
-
-## 2.1.3
-
-### Patch Changes
-
-- Updated dependencies [d21cbca]
-  - @finsweet/attributes-utils@0.0.3
-
-## 2.1.2
-
-### Patch Changes
-
-- 87fef70: fix: resetix
-
-## 2.1.1
-
-### Patch Changes
-
-- c7b544d: chore: updated dependencies
-- Updated dependencies [c7b544d]
-  - @finsweet/attributes-utils@0.0.2
-
-## 2.1.0
-
-### Minor Changes
-
-- fa746b6: feat: fs-inject
-
-## 2.0.1
-
-### Patch Changes
-
-- b56e5e5: rename fsAttribute in places of usage to finsweetAttribute
-- Updated dependencies [b56e5e5]
-  - @finsweet/attributes-utils@0.0.1
-
-## 2.0.0
-
-### Major Changes
-
-- 0ccef15: component: prepared for v2 release
-
-## 1.2.0
-
-### Minor Changes
-
-- a46aeb57: enhancement: wait until an external component's CSS has fully loaded before appending that component to the DOM. This avoids flashing the raw HTML without styles in slow connections.
-
-### Patch Changes
-
-- 9d623872: enhancement: enabled external documents caching when fetching resources from non-Webflow projects.
-
-## 1.1.0
-
-### Minor Changes
-
-- 5c40136c: feat: when importing an external component, automatically convert all the relative urls to absolute using the source origin as the base.
-  ie:
-
-  - Footer is imported from `https://attributes.finsweet.com/styleguides`.
-  - Contains relative links like `/agency`.
-  - Links are rewritten to be `https://wf.finsweet.com/agency`.
-
-- 459e6f62: feat: use a [stale-while-revalidate](https://web.dev/stale-while-revalidate/) approach when serving components from external sources.
-
-## 1.0.0
-
-### Major Changes
-
-- 3ee8cdfd: Initial release