@hortonstudio/main 1.2.5 → 1.2.7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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