@hortonstudio/main 1.2.4 → 1.2.6

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

@@ -0,0 +1,260 @@
+/**
+ * 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

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

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