@hortonstudio/main 1.2.12 → 1.2.14

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

@@ -1,82 +0,0 @@
-import { isHTMLElement } from './guards';
-
-/**
- * Ensures that an element has a unique ID.
- * If the element already has a unique ID, that one is preserved.
- * @param element
- * @returns Returns the unique ID assigned to the element.
- */
-export const ensureUniqueId = (element: Element) => {
-  if (!element.id || document.getElementById(element.id) !== element) {
-    const id = crypto.randomUUID();
-    element.id = id;
-    return id;
-  }
-
-  return element.id;
-};
-
-/**
- * Checks if an element is visible
- * @param element
- */
-export const isVisible = (element: HTMLElement): boolean =>
-  !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
-
-/**
- * Clone a node that has the same type as the original one
- * @param node
- */
-export const cloneNode = <T extends Node>(node: T, deep = true): T => <T>node.cloneNode(deep);
-
-/**
- * Finds the first child text node of an element
- * @param element The element to search into.
- */
-export const findTextNode = (element: HTMLElement): ChildNode | undefined => {
-  let textNode: ChildNode | undefined;
-
-  for (const node of element.childNodes) {
-    if (isHTMLElement(node) && node.childNodes.length) textNode = findTextNode(node);
-    else if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) textNode = node;
-
-    if (textNode) break;
-  }
-
-  return textNode;
-};
-
-/**
- * @returns The first hidden parent element, or the element itself (if hidden).
- * If the element is already visible, the function returns `undefined`.
- *
- * @param element The reference element.
- */
-export const getHiddenParent = (element: HTMLElement): HTMLElement | undefined => {
-  if (isVisible(element)) return;
-
-  let previousElement = element;
-
-  const checkParent = ({ parentElement }: HTMLElement) => {
-    if (!parentElement) return;
-
-    if (isVisible(parentElement)) return;
-
-    previousElement = parentElement;
-    checkParent(parentElement);
-  };
-
-  checkParent(element);
-
-  return previousElement;
-};
-
-/**
- * Check if an element is scrollable
- * @param element
- * @returns True or false
- */
-export const isScrollable = (element: Element): boolean => {
-  const { overflow } = getComputedStyle(element);
-  return overflow === 'auto' || overflow === 'scroll';
-};

package/attributes-master/packages/utils/src/helpers/events.ts

@@ -1,59 +0,0 @@
-import { noop } from './guards';
-
-/**
- * Adds an event listener to an element.
- * @returns A callback to remove the event listener from the element.
- *
- * @param target
- * @param type
- * @param listener
- * @param options
- */
-export function addListener<
-  TargetInterface extends EventTarget,
-  Type extends TargetInterface extends Window
-    ? keyof WindowEventMap | string
-    : TargetInterface extends Document
-      ? keyof DocumentEventMap | string
-      : TargetInterface extends HTMLElement
-        ? keyof HTMLElementEventMap | string
-        : keyof ElementEventMap | string,
-  Listener extends Type extends keyof WindowEventMap
-    ? (this: Document, ev: WindowEventMap[Type]) => unknown
-    : Type extends keyof DocumentEventMap
-      ? (this: Document, ev: DocumentEventMap[Type]) => unknown
-      : Type extends keyof HTMLElementEventMap
-        ? (this: HTMLElement, ev: HTMLElementEventMap[Type]) => unknown
-        : Type extends keyof ElementEventMap
-          ? (this: Element, ev: ElementEventMap[Type]) => unknown
-          : EventListenerOrEventListenerObject,
->(
-  target: TargetInterface | TargetInterface[] | Set<TargetInterface> | null | undefined,
-  type: Type,
-  listener: Listener,
-  options?: boolean | AddEventListenerOptions
-): () => void {
-  if (!target) return noop;
-
-  const targets = Array.isArray(target) ? target : target instanceof Set ? [...target] : [target];
-
-  targets.forEach((target) => target.addEventListener(type, listener, options));
-
-  return () => targets.forEach((target) => target.removeEventListener(type, listener, options));
-}
-
-type AllowedEvent = keyof DocumentEventMap | 'w-close';
-
-/**
- * Dispatches a custom event that bubbles from the target.
- * @param target The element where the event will originate.
- * @param events The event name or an array of event names.
- * @returns True if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.
- */
-export const simulateEvent = (target: EventTarget, events: AllowedEvent | Array<AllowedEvent>): boolean => {
-  if (!Array.isArray(events)) events = [events];
-
-  const eventsSuccess = events.map((event) => target.dispatchEvent(new Event(event, { bubbles: true })));
-
-  return eventsSuccess.every((success) => success);
-};

package/attributes-master/packages/utils/src/helpers/fetch.ts

@@ -1,217 +0,0 @@
-import { getPublishDate, getSiteId } from './webflow';
-
-const DB_OBJECT_STORE_NAME = 'pages';
-
-const memoryCache = new Map<string, Promise<string>>();
-
-/**
- * Fetches and parses an external page.
- * Stores the page response in an {@link IDBDatabase} if the page belongs to the same site.
- *
- * @param source The URL of the page.
- *
- * @param params.cache Whether to cache fetched documents. Defaults to `true`.
- *
- * @param params.cacheExternal Whether to cache external documents.
- * If set to true, it will follow a [stale-while-revalidate](https://web.dev/stale-while-revalidate/) strategy.
- *
- * @param params.cacheKey Defines a manual database name for the IndexedDB instance.
- * @param params.cacheVersion Defines a manual version for the IndexedDB instance.
- *
- * @returns The page's {@link Document} if successful, `null` otherwise.
- */
-export const fetchPageDocument = async (
-  source: string | URL,
-  {
-    cache = true,
-    cacheExternal,
-    cacheKey,
-    cacheVersion,
-  }: { cache?: boolean; cacheExternal?: boolean; cacheKey?: string; cacheVersion?: number } = {}
-): Promise<Document | null> => {
-  try {
-    const url = new URL(source, window.location.origin);
-
-    // If the same page is being fetched simultaneously, return it from the memory cache.
-    const pageFromMemory = await getPageFromMemory(url);
-    if (pageFromMemory) return pageFromMemory;
-
-    // Try to create a DB instance.
-    const siteId = getSiteId();
-    const publishDate = getPublishDate();
-
-    const dbName = siteId || cacheKey;
-    const dbVersion = publishDate?.getTime() ?? cacheVersion ?? 1;
-    const db = dbName ? await createCacheDB(dbName, dbVersion) : null;
-
-    // If no caching enabled or no DB created, fetch the page and store it in the memory cache.
-    if (!cache || !db) {
-      const { page } = await fetchAndCachePageInMemory(url);
-      return page;
-    }
-
-    // If the page is in the DB, return it from there.
-    const rawPageFromDB = await getRawPageFromDB(db, url.href);
-    if (rawPageFromDB) {
-      const page = parseRawPage(rawPageFromDB);
-
-      // Cached external documents are considered stale,
-      // so in the background we refetch the page and store it to the DB again.
-      if (cacheExternal && !isPageSameSite(page, siteId)) {
-        fetchAndCachePageInDB(db, url, siteId, cacheExternal);
-      }
-
-      return page;
-    }
-
-    // If the page is not in the DB, fetch it and store it in the DB.
-    const page = await fetchAndCachePageInDB(db, url, siteId, cacheExternal);
-    return page;
-  } catch {
-    return null;
-  }
-};
-
-/**
- * @returns A page from the memory cache, if existing.
- * @param url The URL of the page.
- */
-const getPageFromMemory = async (url: URL) => {
-  const rawPagePromise = await memoryCache.get(url.href);
-  if (rawPagePromise) {
-    return parseRawPage(rawPagePromise);
-  }
-};
-
-/**
- * Fetches a page and stores it in memory.
- * @param url The URL of the page.
- * @returns The page's {@link Document} and raw HTML text.
- */
-const fetchAndCachePageInMemory = async (url: URL) => {
-  const rawPagePromise = fetch(url.href).then((response) => response.text());
-
-  memoryCache.set(url.href, rawPagePromise);
-
-  const rawPage = await rawPagePromise;
-  const page = parseRawPage(rawPage);
-  return { page, rawPage };
-};
-
-/**
- * Fetches a page and stores it in a {@link IDBDatabase}.
- * @param db The DB instance.
- * @param url The URL of the page.
- * @param siteId The current site ID.
- * @param cacheExternal Whether to cache external documents.
- * @returns The page's {@link Document}.
- */
-const fetchAndCachePageInDB = async (db: IDBDatabase, url: URL, siteId: string | null, cacheExternal?: boolean) => {
-  const { page, rawPage } = await fetchAndCachePageInMemory(url);
-
-  const isSameSite = isPageSameSite(page, siteId);
-
-  // If it can't be cached, just return the page.
-  if (!isSameSite && !cacheExternal) return page;
-
-  // Otherwise store it in the DB
-  await storeRawPageInDB(db, url.href, rawPage);
-
-  // If the page belongs to the same site, we can remove it from the memory cache as it's already in the DB.
-  // If the page is external, we want to keep it in memory to avoid refetching it, as in every request is considered stale.
-  if (isSameSite) {
-    memoryCache.delete(url.href);
-  }
-
-  return page;
-};
-
-/**
- * Checks if a fetched page document is from the same Webflow site as the current page.
- * @param page The fetched page document.
- * @param siteId The current site ID.
- */
-const isPageSameSite = (page: Document, siteId: string | null) => {
-  if (!siteId) return false;
-
-  const pageSiteId = getSiteId(page);
-  return pageSiteId && pageSiteId === siteId;
-};
-
-/**
- * Parses a raw page's HTML text into a {@link Document}.
- * @param rawPage
- */
-const parseRawPage = (rawPage: string) => new DOMParser().parseFromString(rawPage, 'text/html');
-
-/**
- * Creates a DB instance.
- * @param dbName The DB name.
- * @param dbVersion The DB version.
- * @returns An {@link IDBDatabase} instance.
- */
-const createCacheDB = (dbName: string, dbVersion: number) => {
-  return new Promise<IDBDatabase | null>((resolve) => {
-    try {
-      const dbOpenRequest = window.indexedDB.open(dbName, dbVersion);
-
-      dbOpenRequest.onblocked = () => {
-        resolve(null);
-      };
-
-      dbOpenRequest.onupgradeneeded = () => {
-        const db = dbOpenRequest.result;
-
-        if (db.objectStoreNames.contains(DB_OBJECT_STORE_NAME)) {
-          db.deleteObjectStore(DB_OBJECT_STORE_NAME);
-        }
-
-        db.createObjectStore(DB_OBJECT_STORE_NAME);
-      };
-
-      dbOpenRequest.onerror = () => resolve(null);
-      dbOpenRequest.onsuccess = () => {
-        const db = dbOpenRequest.result;
-
-        db.onversionchange = () => db.close();
-
-        resolve(db);
-      };
-    } catch {
-      resolve(null);
-    }
-  });
-};
-
-/**
- * Gets a page from the DB.
- * @param db
- * @param href
- */
-const getRawPageFromDB = async (db: IDBDatabase, href: string) => {
-  return new Promise<string | null>((resolve) => {
-    const transaction = db.transaction(DB_OBJECT_STORE_NAME);
-    const objectStore = transaction.objectStore(DB_OBJECT_STORE_NAME);
-    const request = objectStore.get(href);
-
-    request.onerror = () => resolve(null);
-    request.onsuccess = () => resolve(request.result);
-  });
-};
-
-/**
- * Stores a page in the DB.
- * @param db
- * @param href
- * @param rawPage
- */
-const storeRawPageInDB = async (db: IDBDatabase, href: string, rawPage: string) => {
-  return new Promise<void>((resolve) => {
-    const transaction = db.transaction(DB_OBJECT_STORE_NAME, 'readwrite');
-    const objectStore = transaction.objectStore(DB_OBJECT_STORE_NAME);
-    const request = objectStore.put(rawPage, href);
-
-    request.onerror = () => resolve();
-    request.onsuccess = () => resolve();
-  });
-};

package/attributes-master/packages/utils/src/helpers/forms.ts

@@ -1,238 +0,0 @@
-import { FORM_CSS_CLASSES } from '../constants';
-import type { FormField, FormFieldType } from '../types';
-import { simulateEvent } from './events';
-import { isBoolean, isHTMLInputElement, isHTMLSelectElement, isNotEmpty } from './guards';
-
-/**
- * Gets the value of a given form field.
- * @param formField A {@link FormField} element.
- * @param customValueAttribute Optional custom value attribute used to identify checkboxes and radios.
- */
-export const getFormFieldValue = (formField: FormField, customValueAttribute?: string): string | string[] => {
-  const type = formField.type as FormFieldType;
-
-  let value: string | string[];
-
-  switch (type) {
-    // Checkbox
-    case 'checkbox': {
-      // Group
-      const groupCheckboxes = getCheckboxGroup(formField.name, formField.form, customValueAttribute);
-      if (groupCheckboxes?.length) {
-        value = [];
-
-        for (const checkbox of groupCheckboxes) {
-          const checkboxValue = customValueAttribute
-            ? (checkbox.getAttribute(customValueAttribute) ?? checkbox.value)
-            : checkbox.value;
-
-          if (!checkboxValue || !checkbox.checked) continue;
-
-          value.push(checkboxValue);
-        }
-
-        break;
-      }
-
-      // Single
-      const { checked } = formField as HTMLInputElement;
-      value = checked ? 'true' : '';
-
-      break;
-    }
-
-    // Radio
-    case 'radio': {
-      const checkedRadio = formField.form?.querySelector<HTMLInputElement>(
-        `input[name="${formField.name}"][type="radio"]:checked`
-      );
-
-      value = checkedRadio
-        ? customValueAttribute
-          ? (checkedRadio.getAttribute(customValueAttribute) ?? checkedRadio.value)
-          : checkedRadio.value
-        : '';
-
-      break;
-    }
-
-    // Select multiple
-    case 'select-multiple': {
-      value = [...(formField as HTMLSelectElement).selectedOptions].map((option) => option.value).filter(Boolean);
-
-      break;
-    }
-
-    // Dates
-    case 'date':
-    case 'month':
-    case 'week':
-    case 'time': {
-      const { valueAsDate, value: _value } = formField as HTMLInputElement;
-      value = valueAsDate ? valueAsDate.toISOString() : _value;
-
-      break;
-    }
-
-    // Default - Text
-    default: {
-      value = formField.value;
-    }
-  }
-
-  return value;
-};
-
-/**
- * Sets a value to a FormField element and emits `click`, `input` and `change` Events.
- *
- * @param element The FormField to update.
- * @param value `boolean` for Checkboxes and Radios, `string` for the rest.
- */
-export const setFormFieldValue = (
-  formField: FormField,
-  value: string | boolean | string[],
-  customValueAttribute?: string
-): void => {
-  const type = formField.type as FormFieldType;
-
-  switch (type) {
-    // Checkboxes
-    case 'checkbox': {
-      if (!isHTMLInputElement(formField)) break;
-
-      // Single checkbox
-      if (!Array.isArray(value)) {
-        const check = isBoolean(value) ? value : value === 'true';
-
-        if (check !== formField.checked) {
-          formField.checked = check;
-
-          simulateEvent(formField, ['click', 'input', 'change']);
-        }
-
-        break;
-      }
-
-      const groupCheckboxes = getCheckboxGroup(formField.name, formField.form, customValueAttribute);
-      if (!groupCheckboxes?.length) break;
-
-      for (const checkbox of groupCheckboxes) {
-        const checkboxValue = customValueAttribute
-          ? (checkbox.getAttribute(customValueAttribute) ?? checkbox.value)
-          : checkbox.value;
-
-        const check = value.includes(checkboxValue);
-
-        if (check !== checkbox.checked) {
-          checkbox.checked = check;
-
-          simulateEvent(checkbox, ['click', 'input', 'change']);
-        }
-      }
-
-      break;
-    }
-
-    // Radios
-    case 'radio': {
-      if (Array.isArray(value)) break;
-
-      const groupRadios = getRadioGroupInputs(formField);
-
-      for (const radio of groupRadios) {
-        const radioValue = customValueAttribute
-          ? (radio.getAttribute(customValueAttribute) ?? radio.value)
-          : radio.value;
-
-        const check = radioValue === value;
-
-        if (check !== radio.checked) {
-          radio.checked = check;
-
-          simulateEvent(radio, ['click', 'input', 'change']);
-
-          if (check) continue;
-
-          // When unchecking a custom Webflow radio, we need to manually remove the focus and checked classes
-          const customRadio = radio.parentElement?.querySelector(`.${FORM_CSS_CLASSES.radioInput}`);
-          if (!customRadio) continue;
-
-          customRadio.classList.remove(FORM_CSS_CLASSES.checkboxOrRadioFocus, FORM_CSS_CLASSES.checkboxOrRadioChecked);
-        }
-      }
-
-      break;
-    }
-
-    // Select-multiple
-    case 'select-multiple': {
-      if (!Array.isArray(value) || !isHTMLSelectElement(formField)) break;
-
-      for (const option of formField.options) {
-        const select = value.includes(option.value);
-
-        if (select !== option.selected) {
-          option.selected = select;
-
-          simulateEvent(option, ['input', 'change']);
-        }
-      }
-
-      break;
-    }
-
-    // Other
-    default: {
-      if (Array.isArray(value)) break;
-
-      if (formField.value !== value) {
-        formField.value = value.toString();
-
-        simulateEvent(formField, ['input', 'change']);
-      }
-    }
-  }
-};
-
-/**
- * Retrieves all radio inputs that belong to the same group.
- * @param radio A radio input element that belongs to the group.
- * @param form The form element that contains the radio inputs. If not provided, it will be inferred from the radio input.
- * @returns An array of radio inputs.
- */
-export const getRadioGroupInputs = (radio: FormField): HTMLInputElement[] => {
-  if (!radio.form) return [];
-
-  return [...radio.form.querySelectorAll<HTMLInputElement>(`input[name="${radio.name}"][type="${radio.type}"]`)];
-};
-
-/**
- * @returns All the checkboxes in a group.
- * @param name The name of the group.
- * @param form The form element containing the group.
- * @param customValueAttribute Optional custom value attribute used to identify checkboxes.
- */
-export const getCheckboxGroup = (name: string, form: HTMLFormElement | null, customValueAttribute?: string) => {
-  const groupSelector = [
-    `input[name="${name}"][type="checkbox"][value]`,
-    customValueAttribute && `input[name="${name}"][type="checkbox"][${customValueAttribute}]`,
-  ]
-    .filter(isNotEmpty)
-    .join(',');
-
-  const groupCheckboxes = form?.querySelectorAll<HTMLInputElement>(groupSelector);
-  return groupCheckboxes;
-};
-
-/**
- * Gets the wrapper element for a given form field.
- * @param formField The FormField element to get the wrapper for.
- * @returns The closest wrapper element or the formField itself if no wrapper is found.
- */
-export const getFormFieldWrapper = (formField: FormField) => {
-  const wrapper = formField.closest<HTMLElement>(
-    `.${FORM_CSS_CLASSES.checkboxField}, .${FORM_CSS_CLASSES.radioField}, label`
-  );
-  return wrapper || formField;
-};