@hortonstudio/main 1.2.5 → 1.2.7

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

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

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

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

@@ -0,0 +1,238 @@
+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;
+};