@hortonstudio/main 1.2.11 → 1.2.13

package/attributes-master/packages/docs/src/copy.ts

@@ -1,260 +0,0 @@
-/**
- * CSS string to be injected into the head of the document.
- */
-const cssString = `
-.copied-text::before {
-  content: "";
-  color: black;
-  position: absolute;
-  top: -1.8rem;
-  visibility: hidden;
-  opacity: 0;
-  background-color: white;
-  padding: 0rem 0.2rem;
-  border-radius: 0.15rem;
-  left: 50%;
-  transform: translate(-50%, 0);
-  font-size: 0.8rem;
-  font-weight: 500;
-  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
-}
-
-.copied-text.copied-visible::before {
-  visibility: visible;
-  opacity: 1;
-  content: "Copied!";
-  transition-delay: 0s;
-}
-
-.copied-text{
-  position: relative;
-}
-`;
-
-/**
- * Injects the specified CSS into the head of the document.
- * @param cssString - The CSS string to be injected.
- */
-const injectCSS = (cssString: string): void => {
-  const style = document.createElement('style');
-
-  style.setAttribute('type', 'text/css');
-  style.innerHTML = cssString;
-
-  document.head.appendChild(style);
-};
-
-/**
- * Enable an element by setting its pointer events to auto and toggle the copied text.
- * @param element - The element to enable.
- * @param textToShow - The text to show after copying.
- * @returns
- */
-const enableElement = (element: HTMLElement, textToShow = '') => {
-  const { textContent } = element;
-
-  if (textToShow) {
-    const buttonText = element.querySelector('.button_text');
-
-    if (buttonText) buttonText.textContent = textToShow;
-    else element.textContent = textToShow;
-
-    setTimeout(() => {
-      if (buttonText) buttonText.textContent = textContent;
-      else element.textContent = textContent;
-
-      element.style.pointerEvents = 'auto';
-    }, 1000);
-
-    return;
-  }
-
-  element.style.pointerEvents = 'auto';
-  element.classList.add('copied-visible');
-
-  setTimeout(() => {
-    element.classList.remove('copied-visible');
-    element.style.pointerEvents = 'auto';
-  }, 1000);
-};
-
-/**
- * Disable an element by setting its pointer events to none.
- * @param element - The element to disable.
- */
-const disableElement = (element: HTMLElement) => {
-  element.style.pointerEvents = 'none';
-};
-
-/**
- * Copy the text to the clipboard.
- * @param text - The text to copy.
- * @param element - The element to enable after copying.
- * @param textToShow - The text to show after copying.
- */
-const copy = (text: string, element: HTMLElement, textToShow = '') => {
-  navigator.clipboard
-    .writeText(text)
-    .then(() => {
-      enableElement(element, textToShow);
-    })
-    .catch((err) => {
-      console.error('Failed to copy text: ', err);
-      enableElement(element, textToShow);
-    });
-};
-
-/**
- * Copy the Finsweet Attributes Script to the clipboard.
- * @param element - trigger element
- * @param scriptString - script string
- * @param textToShow - text to show after copying
- * @returns
- */
-const copyScript = (scriptString: string | null, element: HTMLElement, textToShow = '') => {
-  if (!navigator.clipboard || !scriptString) {
-    console.error('Clipboard API not available.');
-
-    return;
-  }
-
-  const attributes = extractAttributes(scriptString);
-  disableElement(element);
-
-  const text = `<!-- Finsweet Attributes -->\n<script async type="module"${attributes}\n></script>`;
-
-  // copy
-  copy(text, element, textToShow);
-};
-
-/**
- * Copy the Finsweet Attributes Text to the clipboard.
- * @param content - attribute name or value
- * @param element - trigger element
- * @param textToShow - text to show after copying
- * @returns
- */
-const copyText = (content: string, element: HTMLElement, textToShow = '') => {
-  if (!navigator.clipboard || !content) {
-    console.error('Clipboard API not available.');
-
-    return;
-  }
-
-  disableElement(element);
-
-  // copy
-  copy(content.trim(), element, textToShow);
-};
-
-/**
- * Reformat a script tag string with each attribute on a new line using DOMParser.
- * @param scriptString - The script tag as a string.
- * @returns The reformatted attributes.
- */
-const extractAttributes = (scriptString: string): string => {
-  const parser = new DOMParser();
-
-  const doc = parser.parseFromString(scriptString, 'text/html');
-  const scriptElement = doc.querySelector('script');
-
-  if (!scriptElement) return '';
-
-  let attributes = ``;
-
-  // handle 'src' or any other attributes on new lines
-  const otherAttributes = Array.from(scriptElement.attributes).filter((attr) => !['async', 'type'].includes(attr.name));
-
-  for (const attr of otherAttributes) {
-    attributes += `\n${attr.name}`;
-    if (attr.value) {
-      attributes += `="${attr.value.trim()}"`;
-    }
-  }
-
-  return attributes;
-};
-
-/**
- * Find the closest target element
- * @param element
- * @returns
- */
-const findClosestTarget = (element: HTMLElement): HTMLElement | null => {
-  let currentNode: HTMLElement | null = element;
-
-  while (currentNode) {
-    // Check all children of current node for target
-    const target = currentNode.querySelector<HTMLElement>('[fs-docs-copy="target"]');
-    if (target) return target;
-
-    // Move up to parent node
-    currentNode = currentNode.parentElement;
-  }
-
-  return null;
-};
-
-/**
- * Handle the trigger element click event.
- * @param element - The trigger element that was clicked
- * @returns void
- */
-const handleTrigger = (element: HTMLElement): void => {
-  const instance = element.getAttribute('fs-docs-instance');
-  let target: HTMLElement | null = null;
-
-  if (instance) {
-    target = document.querySelector<HTMLElement>(`[fs-docs-copy="target"][fs-docs-instance="${instance}"]`);
-  } else {
-    // If no instance match, look up the DOM tree and find closest target
-    target = findClosestTarget(element);
-  }
-
-  if (!target) return;
-
-  const { textContent } = target;
-
-  if (!textContent) return;
-
-  // if script tag, check for 'src' attribute
-  if (textContent.includes('script') && textContent.includes('src="')) {
-    copyScript(textContent, element, 'Copied');
-    return;
-  }
-
-  copyText(textContent, element, 'Copied');
-};
-
-/**
- * Add click event listener to elements.
- * @param elements
- * @param callback
- */
-const addClickListener = (elements: NodeListOf<HTMLElement>, callback: (el: HTMLElement) => void) => {
-  elements.forEach((el) => {
-    el.classList.add('copied-text');
-
-    el.addEventListener('click', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      callback(el);
-    });
-  });
-};
-
-// DOM content loaded
-document.addEventListener('DOMContentLoaded', () => {
-  // Inject the CSS into the <head>
-  injectCSS(cssString);
-
-  // Get all trigger elements
-  const triggers = document.querySelectorAll<HTMLElement>('[fs-docs-copy="trigger"]');
-  addClickListener(triggers, handleTrigger);
-
-  // Get all text content triggers
-  const textContentTriggers = document.querySelectorAll<HTMLElement>('[fs-docs-copy="text-content"]');
-  addClickListener(textContentTriggers, (el) => {
-    if (el.textContent) copyText(el.textContent, el);
-  });
-});

package/attributes-master/packages/docs/src/x-ray.ts

@@ -1,377 +0,0 @@
-import { animations, type Easings } from '@finsweet/attributes-utils';
-import { computePosition, flip, offset, shift } from '@floating-ui/dom';
-import debounce from 'just-debounce';
-
-const voidElements = new Set([
-  'area',
-  'base',
-  'br',
-  'col',
-  'embed',
-  'hr',
-  'img',
-  'input',
-  'link',
-  'meta',
-  'param',
-  'source',
-  'track',
-  'wbr',
-  'select',
-]);
-
-/**
- * X-ray mode active state.
- */
-let xrayActive = true;
-/**
- * Tooltip element.
- */
-let tooltip: HTMLElement | null;
-/**
- * Store for elements with 'x-ray' attribute.
- */
-let xrayElements: HTMLElement[] = [];
-/**
- * Store xray active element
- */
-let xrayActiveElement: HTMLElement | null;
-/**
- * Default values for x-ray mode.
- */
-let textColor = '#003238';
-let backgroundColor = '#00e4ff';
-let animation: keyof typeof animations = 'fade';
-let easing: Easings[number] = 'ease-in-out';
-let duration = 150;
-let keyCode = '?';
-let targetClass = 'x-ray';
-
-const altTags = ['INPUT'];
-const script = document.currentScript as HTMLScriptElement;
-
-/**
- * Searches for the closest element up the DOM tree that has any attribute starting with 'fs-'.
- * @param element - The starting HTMLElement to check.
- * @returns The found element with 'fs-' attributes or null if none found.
- */
-const findElementWithFsAttributes = (element: HTMLElement): HTMLElement | null => {
-  // 1. Check the current element
-  if (Array.from(element.attributes).some((attr) => attr.name.startsWith('fs-'))) {
-    return element;
-  }
-
-  // 2. Check children of the parent element if they have 'fs-' attributes
-  const { parentElement } = element;
-  if (parentElement) {
-    // check its children
-    for (const child of Array.from(parentElement.children) as HTMLElement[]) {
-      if (Array.from(child.attributes).some((attr) => attr.name.startsWith('fs-'))) {
-        return child;
-      }
-    }
-
-    // 3. Traverse parents and return the closest one with an 'fs-' attribute
-    let ancestor: HTMLElement | null = element;
-    while (ancestor) {
-      if (Array.from(ancestor.attributes).some((attr) => attr.name.startsWith('fs-'))) {
-        return ancestor;
-      }
-      ancestor = ancestor.parentElement;
-    }
-  }
-
-  return null;
-};
-
-/**
- * Checks if the given element is a void element and returns the parent to apply styles.
- * @param element - The HTMLElement to check.
- * @returns The element to apply the xray outline styles to.
- */
-const getValidElementForPseudo = (element: HTMLElement): HTMLElement | null | undefined => {
-  if (voidElements.has(element.tagName.toLowerCase())) {
-    // going 2 levels up seems the perfect approach :)
-    // like checkboxes and radios have some 2-3 elements wrapping them
-    return element.parentElement?.parentElement || element;
-  }
-  return element;
-};
-
-/**
- * Updates the position of the tooltip element relative to the target element.
- * @param element - The target element.
- * @param tooltip - The tooltip element.
- */
-const updateTooltipPosition = () => {
-  if (!tooltip || !xrayActiveElement) return;
-
-  computePosition(xrayActiveElement, tooltip, {
-    placement: 'top',
-    middleware: [
-      offset(10),
-      flip({
-        fallbackPlacements: ['top', 'left-start', 'right-start'],
-      }),
-      shift({ padding: 5 }),
-    ],
-  }).then(({ x, y }) => {
-    if (!tooltip) return;
-
-    Object.assign(tooltip.style, {
-      left: `${x}px`,
-      top: `${y}px`,
-    });
-  });
-};
-/**
- * Creates a tooltip element and appends it to the DOM.
- * @param element
- * @param content
- */
-const showTooltipElement = async (element: HTMLElement, content: string) => {
-  if (!tooltip) {
-    tooltip = document.createElement('div');
-    tooltip.id = 'tooltip-xray';
-    tooltip.style.position = 'absolute';
-    tooltip.style.zIndex = '9999';
-    tooltip.style.backgroundColor = backgroundColor;
-    tooltip.style.color = textColor;
-    tooltip.style.borderRadius = '.25rem';
-    tooltip.style.padding = '.2rem .5rem';
-    tooltip.style.margin = '0';
-    tooltip.style.fontSize = '.85rem';
-    tooltip.style.fontFamily = 'monospace';
-    tooltip.style.width = 'max-content';
-
-    document.body.appendChild(tooltip);
-  }
-
-  tooltip.innerHTML = content;
-
-  // update xray active element state
-  xrayActiveElement = element;
-
-  // update tooltip position
-  updateTooltipPosition();
-
-  // animate
-  await animations[animation].animateIn(tooltip, { duration, easing, display: 'block' });
-};
-
-/**
- * Removes the tooltip element from the DOM.
- */
-const removeTooltip = () => {
-  const tooltip = document.getElementById('tooltip-xray');
-
-  if (tooltip) {
-    tooltip.remove();
-  }
-};
-
-/**
- * Checks if the element has an 'x-ray' attribute set to 'ignore' and disables x-ray mode for that element.
- * @param element - The element to check.
- * @returns true if the element was ignored, otherwise false.
- */
-const checkAndIgnoreElement = (element: Element | null): boolean => {
-  if (element?.getAttribute('x-ray') === 'ignore') {
-    const closestIgnore = element.closest('[x-ray="ignore"]');
-    // handle closest parent with x-ray ignore
-    if (closestIgnore) {
-      closestIgnore.classList.remove(targetClass);
-    }
-
-    // handle element itself
-    element.classList.remove(targetClass);
-
-    return true;
-  }
-
-  return false;
-};
-
-/**
- * Debounced mousemove event listener to show tooltips on elements with 'fs-' attributes.
- */
-const debouncedMouseMove = debounce(async (event: MouseEvent) => {
-  if (!xrayActive) return;
-
-  tooltip = document.querySelector<HTMLElement>('#tooltip-xray');
-
-  if (tooltip) {
-    await animations[animation].animateOut(tooltip, { display: 'none', duration, easing });
-  }
-
-  const target = event.target as HTMLElement;
-
-  const fsElement = findElementWithFsAttributes(target);
-
-  if (!fsElement) {
-    removeTooltip();
-
-    return;
-  }
-
-  const fsAttributes = Array.from(fsElement.attributes)
-    .filter((attr) => attr.name.startsWith('fs-'))
-    .filter(({ name }) => name.split('-').length === 3);
-
-  const elementToStyle = getValidElementForPseudo(target);
-
-  if (!xrayActive || !elementToStyle) {
-    return;
-  }
-
-  if (fsAttributes.length > 0) {
-    if (checkAndIgnoreElement(elementToStyle) || checkAndIgnoreElement(fsElement)) return;
-
-    const list = fsAttributes
-      .sort((a, b) => a.name.localeCompare(b.name))
-      .map(
-        (attr) =>
-          `<span style="font-weight:bold;">${attr.name}</span><span style="opacity:0.5">=</span><span style="opacity:0.5">"</span><span style="font-weight:bold;">${attr.value}</span><span style="opacity:0.5">"</span>`
-      )
-      .join('<br/>');
-
-    showTooltipElement(fsElement, list);
-  }
-}, 150);
-
-/**
- * Query all elements that have attributes starting with 'fs-'.
- * @returns An array of HTMLElements that have attributes starting with 'fs-'.
- */
-const queryElementsWithFsAttributes = () => {
-  // Get all elements in the document
-  const allElements = document.querySelectorAll<HTMLElement>('*');
-  // get all elements with x-ray class
-  const xrayElements = document.querySelectorAll<HTMLElement>(targetClass);
-
-  if (xrayElements.length > 0 && !xrayActive) {
-    xrayElements.forEach((element) => {
-      element.classList.remove(targetClass);
-    });
-  }
-
-  // Filter elements that have at least one attribute starting with 'fs-'
-  const elementsWithFsAttributes = Array.from(allElements).filter((element) =>
-    Array.from(element.attributes).some((attr) => attr.name.startsWith('fs-'))
-  );
-
-  // if element is void element, return the parent element
-  const elements = elementsWithFsAttributes.map((element) => {
-    if (
-      altTags.includes(element.tagName) &&
-      (element.getAttribute('type') === 'checkbox' || element.getAttribute('type') === 'radio')
-    ) {
-      return element.closest('label') || element;
-    }
-
-    return element;
-  });
-
-  return elements;
-};
-
-/**
- * Set or update the tooltip style in the head of the document.
- */
-const updateTooltipStyle = () => {
-  let style = document.getElementById('tooltip-xray-style');
-
-  if (!style) {
-    style = document.createElement('style');
-    style.setAttribute('id', 'tooltip-xray-style');
-
-    document.head.appendChild(style);
-  }
-  style.innerHTML = `
-    .${targetClass}, .${targetClass}:hover {
-      outline-color: ${backgroundColor} !important;
-      outline-offset: 3px !important;
-      outline-width: 1px !important;
-      outline-style: solid !important;
-      border-radius: 0.25rem !important;
-    }
-  `;
-};
-
-/**
- * Initialize the mouseover event listener for elements with 'fs-' attributes.
- */
-const xrayInit = (): void => {
-  textColor = script?.getAttribute('text-color') || '#003238';
-  backgroundColor = script?.getAttribute('background-color') || '#00e4ff';
-  animation = (script?.getAttribute('animation') as keyof typeof animations) || 'fade';
-  easing = (script?.getAttribute('easing') as Easings[number]) || 'ease-in-out';
-  duration = Number(script?.getAttribute('duration')) || 150;
-  keyCode = script?.getAttribute('key') || '?';
-  targetClass = script?.getAttribute('target-class') || 'x-ray';
-
-  updateTooltipStyle();
-
-  const xrayDefaultElements = document.querySelectorAll('.helper');
-
-  // clear any existing helper classes that were added in webflow so that script can manage it.
-  if (xrayDefaultElements.length > 0) {
-    xrayDefaultElements.forEach((xray) => {
-      xray.classList.remove('helper');
-    });
-  }
-
-  xrayElements = queryElementsWithFsAttributes();
-
-  xrayElements.forEach((element) => {
-    if (checkAndIgnoreElement(element)) return;
-
-    element.classList.toggle(targetClass, xrayActive);
-  });
-};
-
-/**
- * Handle the keydown event to toggle the x-ray mode.
- * @param e
- */
-const handleKeydown = (e: KeyboardEvent) => {
-  if (e.key === keyCode) {
-    xrayActive = !xrayActive;
-
-    if (!xrayActive) {
-      removeTooltip();
-    }
-
-    xrayElements.forEach((element) => {
-      if (checkAndIgnoreElement(element)) return;
-
-      element.classList.toggle(targetClass, xrayActive);
-    });
-  }
-};
-
-/**
- * Handle the scroll event to update the tooltip position.
- */
-const handleScroll = () => {
-  if (xrayActiveElement) {
-    updateTooltipPosition();
-  }
-};
-
-// dom ready
-document.addEventListener('DOMContentLoaded', () => {
-  document.addEventListener('mouseover', debouncedMouseMove);
-  document.addEventListener('keydown', handleKeydown);
-  document.addEventListener('scroll', handleScroll, { passive: true });
-  window.addEventListener('resize', updateTooltipPosition);
-
-  const config: MutationObserverInit = {
-    attributes: true,
-    subtree: true,
-  };
-
-  const debouncedCallback = debounce(xrayInit, 150);
-  const observer = new MutationObserver(debouncedCallback);
-  observer.observe(document.body, config);
-});

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

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