@splendidlabz/utils 1.10.2 → 1.10.3

package/dist/esm/dom/actions/index.js

@@ -1,381 +1,3 @@
-// src/dom/get-element.js
-function getNodeType(node) {
-  if (node instanceof Element) return "element";
-  if (node instanceof NodeList) return "nodelist";
-  if (Array.isArray(node)) return "array";
-}
-function getElement(selector) {
-  if (!selector) return;
-  if (selector instanceof Element) return selector;
-  return document.querySelector(selector);
-}
-function getChildrenElements(node) {
-  let children = node.children;
-  if (children[0]?.nodeName === "ASTRO-SLOT") children = children[0].children;
-  return Array.from(children);
-}
-
-// src/dom/media.js
-async function imagesLoaded(node) {
-  const images = Array.from(node.querySelectorAll("img"));
-  const promises = images.map((img) => {
-    return new Promise((resolve, reject) => {
-      if (img.complete) return resolve();
-      img.onload = resolve;
-      img.onerror = (e) => {
-        reject("Image failed to load");
-      };
-    });
-  });
-  return Promise.all(promises);
-}
-async function videosLoaded(node) {
-  const videos = Array.from(node.querySelectorAll("video"));
-  const promises = videos.map((video) => {
-    return new Promise((resolve, reject) => {
-      if (video.readyState === 4) return resolve();
-      video.onloadedmetadata = resolve;
-      video.onerror = reject;
-    });
-  });
-  return Promise.all(promises);
-}
-async function mediaLoaded(node) {
-  return Promise.all([imagesLoaded(node), videosLoaded(node)]);
-}
-
-// src/dom/events.js
-function addListeners(listeners) {
-  listeners.forEach(({ node, event, handler }) => {
-    node.addEventListener(event, handler);
-  });
-}
-function removeListeners(listeners) {
-  listeners.forEach(({ node, event, handler }) => {
-    node.removeEventListener(event, handler);
-  });
-}
-function dispatchEvent(node, eventName, detail, options = {}) {
-  node.dispatchEvent(
-    new CustomEvent(eventName, {
-      ...options,
-      detail
-    })
-  );
-}
-
-// src/dom/observers/observer.js
-function useObserverMethodOnTarget(target, observer, method = "observe", options = void 0) {
-  const targetType = getNodeType(target);
-  if (targetType === "element") observer[method](target, options);
-  if (targetType === "nodelist") {
-    const elements = Array.from(target);
-    elements.forEach((element) => observer[method](element, options));
-  }
-  if (targetType === "array") {
-    target.forEach((element) => observer[method](element, options));
-  }
-}
-
-// src/dom/observers/resize-observer.js
-function resizeObserver(target, options) {
-  const { callback, ...opts } = options;
-  const observer = new ResizeObserver(observerFn);
-  if (target === window || target === document)
-    target = document.documentElement;
-  useObserverMethodOnTarget(target, observer, "observe", opts);
-  function observerFn(entries) {
-    for (const entry of entries) {
-      if (callback) callback({ entry, entries, observer });
-      else
-        dispatchEvent(entry.target, "resize-obs", { entry, entries, observer });
-    }
-  }
-  return {
-    observe(target2) {
-      useObserverMethodOnTarget(target2, observer, "observe", options);
-    },
-    unobserve(target2) {
-      useObserverMethodOnTarget(target2, observer, "unobserve");
-    },
-    disconnect: (_) => observer.disconnect(),
-    destroy: (_) => observer.disconnect()
-  };
-}
-
-// src/dom/actions/masonry.js
-async function masonry(node) {
-  if (nativeMasonrySupport(node)) return;
-  const colGap = parseFloat(getComputedStyle(node).columnGap);
-  const items = getChildrenElements(node);
-  node.style.setProperty("row-gap", "1px", "important");
-  node.style.gridAutoRows = "0px";
-  try {
-    await mediaLoaded(node);
-  } catch (e) {
-  }
-  layout({ colGap, items });
-  const obs = resizeObserver(node, {
-    async callback(opts) {
-      layout({ colGap, items });
-    }
-  });
-  async function layout({ colGap: colGap2, items: items2 }) {
-    items2.forEach((item) => {
-      const ib = item.getBoundingClientRect();
-      item.style.gridRowEnd = `span ${Math.round(ib.height + colGap2)}`;
-    });
-  }
-  return {
-    destroy() {
-      obs.disconnect();
-    }
-  };
-}
-function nativeMasonrySupport(node) {
-  return getComputedStyle(node).gridTemplateRows === "masonry";
-}
-
-// src/lib/objects/omit-empty.js
-function omitEmpty(obj, shallow = false) {
-  if (typeof obj !== "object" || obj === null) return obj;
-  if (obj instanceof Date) return obj;
-  const result = Array.isArray(obj) ? [] : {};
-  for (const [key, value] of Object.entries(obj)) {
-    if (value === null || value === void 0 || value === "" || typeof value === "object" && !(value instanceof Date) && Object.keys(value).length === 0) {
-      continue;
-    }
-    result[key] = shallow ? value : omitEmpty(value);
-  }
-  return result;
-}
-
-// src/dom/css-vars.js
-function getCSSVar(element, prop) {
-  element = getElement(element);
-  return getComputedStyle(element).getPropertyValue(prop);
-}
-function setCSSVar(element, prop, value) {
-  element = getElement(element);
-  element.style.setProperty(prop, value);
-}
-
-// src/dom/actions/prefer-horizontal-scroll.js
-var DEFAULT_OPTIONS = {
-  scrollSnapDelay: 1e3
-};
-function preferHorizontalScroll(node, props = {}) {
-  if (!node.classList.contains("scrollable-prefer-horizontal")) return;
-  const state = {
-    origSnapType: null,
-    currentSnapType: null,
-    snapTimeoutID: null
-  };
-  const options = {
-    ...DEFAULT_OPTIONS,
-    ...omitEmpty({
-      scrollSnapDelay: getCSSVar(node, "--scroll-snap-delay")
-    }),
-    ...omitEmpty(props)
-  };
-  const listeners = [
-    {
-      event: "wheel",
-      node,
-      handler: handleWheel
-    },
-    {
-      event: "pointerenter",
-      node,
-      handler: handlePointerEnter
-    },
-    {
-      event: "pointerleave",
-      node,
-      handler: handlePointerLeave
-    }
-  ];
-  addListeners(listeners);
-  function handleWheel(event) {
-    const direction = event.deltaY > 0 ? "down" : "up";
-    const updatedDelta = event.deltaY;
-    if (isTrackpad(event)) return false;
-    setCSSVar(node, "--snap-type", "none");
-    const scrolledAmount = node.scrollLeft;
-    const scrollWidth = node.scrollWidth;
-    const clientWidth = node.clientWidth;
-    const scrollableAmount = scrollWidth - clientWidth;
-    if (direction === "down" && scrolledAmount < scrollableAmount) {
-      node.scrollLeft += updatedDelta;
-      event.preventDefault();
-    }
-    if (direction === "up" && scrolledAmount > 0) {
-      node.scrollLeft += updatedDelta;
-      event.preventDefault();
-    }
-    const { snapTimeoutID } = state;
-    if (snapTimeoutID) clearTimeout(snapTimeoutID);
-    state.snapTimeoutID = setTimeout((_) => {
-      restoreHijackedState(node, state);
-    }, options.scrollSnapDelay);
-  }
-  function handlePointerEnter(event) {
-    state.origSnapType = getCSSVar(node, "--snap-type") || "proximity";
-  }
-  function handlePointerLeave(event) {
-    restoreHijackedState(node, state);
-  }
-  return {
-    destroy() {
-      removeListeners(listeners);
-    }
-  };
-}
-function restoreHijackedState(node, state) {
-  const scrollLeft = node.scrollLeft;
-  setCSSVar(node, "--snap-type", state.origSnapType);
-  const finalScrollLeft = node.scrollLeft;
-  setCSSVar(node, "--snap-type", "none");
-  node.scrollTo({ left: scrollLeft, behavior: "instant" });
-  node.scrollTo({ left: finalScrollLeft, behavior: "smooth" });
-  setTimeout((_) => {
-    setCSSVar(node, "--snap-type", state.origSnapType);
-  }, 250);
-}
-function isTrackpad(event) {
-  if (event.wheelDeltaY === event.deltaY * -3) return true;
-}
-
-// src/dom/bounding-box.js
-function boundingBox(element, { containsPadding = true } = {}) {
-  const box = element.getBoundingClientRect();
-  const ret = {};
-  for (const prop in box) ret[prop] = box[prop];
-  if (!containsPadding) {
-    const style = getComputedStyle(element);
-    const paddingTop = parseFloat(style.paddingTop);
-    const paddingRight = parseFloat(style.paddingRight);
-    const paddingBottom = parseFloat(style.paddingBottom);
-    const paddingLeft = parseFloat(style.paddingLeft);
-    ret.x = ret.x + paddingLeft;
-    ret.y = ret.y + paddingTop;
-    ret.width = ret.width - paddingLeft - paddingRight;
-    ret.height = ret.height - paddingTop - paddingBottom;
-    ret.top = ret.top + paddingTop;
-    ret.bottom = ret.bottom - paddingBottom;
-    ret.right = ret.right - paddingRight;
-    ret.left = ret.left + paddingLeft;
-  }
-  ret.xCenter = (ret.left + ret.right) / 2;
-  ret.yCenter = (ret.top + ret.bottom) / 2;
-  return ret;
-}
-function boundingBoxRelativeToAncestor({ element, ancestorElement }) {
-  ancestorElement = ancestorElement || element.parentElement;
-  const box = boundingBox(element);
-  const ancestorBox = boundingBox(ancestorElement, {
-    containsPadding: false
-  });
-  return {
-    top: box.top - ancestorBox.top,
-    right: box.right - ancestorBox.right,
-    bottom: box.bottom - ancestorBox.bottom,
-    left: box.left - ancestorBox.left,
-    width: box.width,
-    height: box.height,
-    xCenter: (box.left + box.right) / 2 - ancestorBox.left,
-    yCenter: (box.top + box.bottom) / 2 - ancestorBox.top
-  };
-}
-
-// src/dom/ui/scroll-container.js
-function findScrollContainer(element, direction = "both") {
-  if (!element) return;
-  let parent = element.parentElement;
-  while (parent) {
-    const { overflow, overflowX, overflowY } = getComputedStyle(parent);
-    if (direction === "both") {
-      if (overflow.includes("auto") || overflow.includes("scroll"))
-        return parent;
-    }
-    if (direction === "horizontal") {
-      if (overflowX === "auto" || overflowX === "scroll") return parent;
-    }
-    if (direction === "vertical") {
-      if (overflowY === "auto" || overflowY === "scroll") return parent;
-    }
-    parent = parent.parentElement;
-  }
-  return document.documentElement;
-}
-
-// src/dom/actions/sticky.js
-function sticky(node, props = {}) {
-  const scrollContainer = findScrollContainer(node);
-  let stickyTBLR = getComputedTBLR(node);
-  const obs = resizeObserver(node, {
-    callback: ({ entry }) => {
-      stickyTBLR = getComputedTBLR(node);
-      isSticking();
-      scrollContainer === document.documentElement ? window.addEventListener("scroll", scrollEventListener) : scrollContainer.addEventListener("scroll", scrollEventListener);
-    }
-  });
-  function scrollEventListener(event) {
-    isSticking();
-  }
-  function isSticking() {
-    const { top, bottom, left, right } = stickyTBLR;
-    const relativeRect = boundingBoxRelativeToAncestor({
-      element: node,
-      ancestorElement: scrollContainer
-    });
-    if (!isNaN(top)) {
-      if (relativeRect.top - top <= 1) {
-        node.classList.add("sticking");
-      } else {
-        node.classList.remove("sticking");
-      }
-    }
-    if (!isNaN(bottom)) {
-      if (relativeRect.bottom + bottom >= -1) {
-        node.classList.add("sticking");
-      } else {
-        node.classList.remove("sticking");
-      }
-    }
-    if (!isNaN(left)) {
-      if (relativeRect.left - left <= 1) {
-        node.classList.add("sticking");
-      } else {
-        node.classList.remove("sticking");
-      }
-    }
-    if (!isNaN(right)) {
-      if (relativeRect.right + right >= -1) {
-        node.classList.add("sticking");
-      } else {
-        node.classList.remove("sticking");
-      }
-    }
-  }
-  return {
-    destroy() {
-      obs.disconnect();
-      scrollContainer.removeEventListener("scroll", scrollEventListener);
-    }
-  };
-}
-function getComputedTBLR(element) {
-  const style = getComputedStyle(element);
-  return {
-    top: parseFloat(style.top),
-    bottom: parseFloat(style.bottom),
-    left: parseFloat(style.left),
-    right: parseFloat(style.right)
-  };
-}
-export {
-  masonry,
-  preferHorizontalScroll,
-  sticky
-};
+export * from "./masonry.js";
+export * from "./prefer-horizontal-scroll.js";
+export * from "./sticky.js";

package/dist/esm/dom/actions/masonry.js

@@ -1,94 +1,6 @@
-// src/dom/get-element.js
-function getNodeType(node) {
-  if (node instanceof Element) return "element";
-  if (node instanceof NodeList) return "nodelist";
-  if (Array.isArray(node)) return "array";
-}
-function getChildrenElements(node) {
-  let children = node.children;
-  if (children[0]?.nodeName === "ASTRO-SLOT") children = children[0].children;
-  return Array.from(children);
-}
-
-// src/dom/media.js
-async function imagesLoaded(node) {
-  const images = Array.from(node.querySelectorAll("img"));
-  const promises = images.map((img) => {
-    return new Promise((resolve, reject) => {
-      if (img.complete) return resolve();
-      img.onload = resolve;
-      img.onerror = (e) => {
-        reject("Image failed to load");
-      };
-    });
-  });
-  return Promise.all(promises);
-}
-async function videosLoaded(node) {
-  const videos = Array.from(node.querySelectorAll("video"));
-  const promises = videos.map((video) => {
-    return new Promise((resolve, reject) => {
-      if (video.readyState === 4) return resolve();
-      video.onloadedmetadata = resolve;
-      video.onerror = reject;
-    });
-  });
-  return Promise.all(promises);
-}
-async function mediaLoaded(node) {
-  return Promise.all([imagesLoaded(node), videosLoaded(node)]);
-}
-
-// src/dom/events.js
-function dispatchEvent(node, eventName, detail, options = {}) {
-  node.dispatchEvent(
-    new CustomEvent(eventName, {
-      ...options,
-      detail
-    })
-  );
-}
-
-// src/dom/observers/observer.js
-function useObserverMethodOnTarget(target, observer, method = "observe", options = void 0) {
-  const targetType = getNodeType(target);
-  if (targetType === "element") observer[method](target, options);
-  if (targetType === "nodelist") {
-    const elements = Array.from(target);
-    elements.forEach((element) => observer[method](element, options));
-  }
-  if (targetType === "array") {
-    target.forEach((element) => observer[method](element, options));
-  }
-}
-
-// src/dom/observers/resize-observer.js
-function resizeObserver(target, options) {
-  const { callback, ...opts } = options;
-  const observer = new ResizeObserver(observerFn);
-  if (target === window || target === document)
-    target = document.documentElement;
-  useObserverMethodOnTarget(target, observer, "observe", opts);
-  function observerFn(entries) {
-    for (const entry of entries) {
-      if (callback) callback({ entry, entries, observer });
-      else
-        dispatchEvent(entry.target, "resize-obs", { entry, entries, observer });
-    }
-  }
-  return {
-    observe(target2) {
-      useObserverMethodOnTarget(target2, observer, "observe", options);
-    },
-    unobserve(target2) {
-      useObserverMethodOnTarget(target2, observer, "unobserve");
-    },
-    disconnect: (_) => observer.disconnect(),
-    destroy: (_) => observer.disconnect()
-  };
-}
-
-// src/dom/actions/masonry.js
+import { getChildrenElements } from "../get-element.js";
+import { mediaLoaded } from "../media.js";
+import { resizeObserver } from "../observers/resize-observer.js";
 async function masonry(node) {
   if (nativeMasonrySupport(node)) return;
   const colGap = parseFloat(getComputedStyle(node).columnGap);

package/dist/esm/dom/actions/prefer-horizontal-scroll.js

@@ -1,48 +1,7 @@
-// src/lib/objects/omit-empty.js
-function omitEmpty(obj, shallow = false) {
-  if (typeof obj !== "object" || obj === null) return obj;
-  if (obj instanceof Date) return obj;
-  const result = Array.isArray(obj) ? [] : {};
-  for (const [key, value] of Object.entries(obj)) {
-    if (value === null || value === void 0 || value === "" || typeof value === "object" && !(value instanceof Date) && Object.keys(value).length === 0) {
-      continue;
-    }
-    result[key] = shallow ? value : omitEmpty(value);
-  }
-  return result;
-}
-
-// src/dom/get-element.js
-function getElement(selector) {
-  if (!selector) return;
-  if (selector instanceof Element) return selector;
-  return document.querySelector(selector);
-}
-
-// src/dom/css-vars.js
-function getCSSVar(element, prop) {
-  element = getElement(element);
-  return getComputedStyle(element).getPropertyValue(prop);
-}
-function setCSSVar(element, prop, value) {
-  element = getElement(element);
-  element.style.setProperty(prop, value);
-}
-
-// src/dom/events.js
-function addListeners(listeners) {
-  listeners.forEach(({ node, event, handler }) => {
-    node.addEventListener(event, handler);
-  });
-}
-function removeListeners(listeners) {
-  listeners.forEach(({ node, event, handler }) => {
-    node.removeEventListener(event, handler);
-  });
-}
-
-// src/dom/actions/prefer-horizontal-scroll.js
-var DEFAULT_OPTIONS = {
+import { omitEmpty } from "../../lib/objects/omit-empty.js";
+import { getCSSVar, setCSSVar } from "../css-vars.js";
+import { addListeners, removeListeners } from "../events.js";
+const DEFAULT_OPTIONS = {
   scrollSnapDelay: 1e3
 };
 function preferHorizontalScroll(node, props = {}) {

package/dist/esm/dom/actions/sticky.js

@@ -1,123 +1,6 @@
-// src/dom/bounding-box.js
-function boundingBox(element, { containsPadding = true } = {}) {
-  const box = element.getBoundingClientRect();
-  const ret = {};
-  for (const prop in box) ret[prop] = box[prop];
-  if (!containsPadding) {
-    const style = getComputedStyle(element);
-    const paddingTop = parseFloat(style.paddingTop);
-    const paddingRight = parseFloat(style.paddingRight);
-    const paddingBottom = parseFloat(style.paddingBottom);
-    const paddingLeft = parseFloat(style.paddingLeft);
-    ret.x = ret.x + paddingLeft;
-    ret.y = ret.y + paddingTop;
-    ret.width = ret.width - paddingLeft - paddingRight;
-    ret.height = ret.height - paddingTop - paddingBottom;
-    ret.top = ret.top + paddingTop;
-    ret.bottom = ret.bottom - paddingBottom;
-    ret.right = ret.right - paddingRight;
-    ret.left = ret.left + paddingLeft;
-  }
-  ret.xCenter = (ret.left + ret.right) / 2;
-  ret.yCenter = (ret.top + ret.bottom) / 2;
-  return ret;
-}
-function boundingBoxRelativeToAncestor({ element, ancestorElement }) {
-  ancestorElement = ancestorElement || element.parentElement;
-  const box = boundingBox(element);
-  const ancestorBox = boundingBox(ancestorElement, {
-    containsPadding: false
-  });
-  return {
-    top: box.top - ancestorBox.top,
-    right: box.right - ancestorBox.right,
-    bottom: box.bottom - ancestorBox.bottom,
-    left: box.left - ancestorBox.left,
-    width: box.width,
-    height: box.height,
-    xCenter: (box.left + box.right) / 2 - ancestorBox.left,
-    yCenter: (box.top + box.bottom) / 2 - ancestorBox.top
-  };
-}
-
-// src/dom/events.js
-function dispatchEvent(node, eventName, detail, options = {}) {
-  node.dispatchEvent(
-    new CustomEvent(eventName, {
-      ...options,
-      detail
-    })
-  );
-}
-
-// src/dom/get-element.js
-function getNodeType(node) {
-  if (node instanceof Element) return "element";
-  if (node instanceof NodeList) return "nodelist";
-  if (Array.isArray(node)) return "array";
-}
-
-// src/dom/observers/observer.js
-function useObserverMethodOnTarget(target, observer, method = "observe", options = void 0) {
-  const targetType = getNodeType(target);
-  if (targetType === "element") observer[method](target, options);
-  if (targetType === "nodelist") {
-    const elements = Array.from(target);
-    elements.forEach((element) => observer[method](element, options));
-  }
-  if (targetType === "array") {
-    target.forEach((element) => observer[method](element, options));
-  }
-}
-
-// src/dom/observers/resize-observer.js
-function resizeObserver(target, options) {
-  const { callback, ...opts } = options;
-  const observer = new ResizeObserver(observerFn);
-  if (target === window || target === document)
-    target = document.documentElement;
-  useObserverMethodOnTarget(target, observer, "observe", opts);
-  function observerFn(entries) {
-    for (const entry of entries) {
-      if (callback) callback({ entry, entries, observer });
-      else
-        dispatchEvent(entry.target, "resize-obs", { entry, entries, observer });
-    }
-  }
-  return {
-    observe(target2) {
-      useObserverMethodOnTarget(target2, observer, "observe", options);
-    },
-    unobserve(target2) {
-      useObserverMethodOnTarget(target2, observer, "unobserve");
-    },
-    disconnect: (_) => observer.disconnect(),
-    destroy: (_) => observer.disconnect()
-  };
-}
-
-// src/dom/ui/scroll-container.js
-function findScrollContainer(element, direction = "both") {
-  if (!element) return;
-  let parent = element.parentElement;
-  while (parent) {
-    const { overflow, overflowX, overflowY } = getComputedStyle(parent);
-    if (direction === "both") {
-      if (overflow.includes("auto") || overflow.includes("scroll"))
-        return parent;
-    }
-    if (direction === "horizontal") {
-      if (overflowX === "auto" || overflowX === "scroll") return parent;
-    }
-    if (direction === "vertical") {
-      if (overflowY === "auto" || overflowY === "scroll") return parent;
-    }
-    parent = parent.parentElement;
-  }
-  return document.documentElement;
-}
-
-// src/dom/actions/sticky.js
+import { boundingBoxRelativeToAncestor } from "../bounding-box.js";
+import { resizeObserver } from "../observers/resize-observer.js";
+import { findScrollContainer } from "../ui/scroll-container.js";
 function sticky(node, props = {}) {
   const scrollContainer = findScrollContainer(node);
   let stickyTBLR = getComputedTBLR(node);

package/dist/esm/dom/bounding-box.js

@@ -1,4 +1,3 @@
-// src/dom/bounding-box.js
 function boundingBox(element, { containsPadding = true } = {}) {
   const box = element.getBoundingClientRect();
   const ret = {};

package/dist/esm/dom/clipboard.js

@@ -1,4 +1,3 @@
-// src/dom/clipboard.js
 function copyRichText(element) {
   const range = document.createRange();
   range.selectNode(element);

package/dist/esm/dom/cookie.js

@@ -1,5 +1,4 @@
-// src/dom/cookie.js
-var cookies = {
+const cookies = {
   get(name) {
     return getCookie(name);
   },

package/dist/esm/dom/css-vars.js

@@ -1,11 +1,4 @@
-// src/dom/get-element.js
-function getElement(selector) {
-  if (!selector) return;
-  if (selector instanceof Element) return selector;
-  return document.querySelector(selector);
-}
-
-// src/dom/css-vars.js
+import { getElement } from "./get-element.js";
 function getCSSValue(element, prop) {
   return getCSSVar(element, prop);
 }

package/dist/esm/dom/events.js

@@ -1,4 +1,3 @@
-// src/dom/events.js
 function addListeners(listeners) {
   listeners.forEach(({ node, event, handler }) => {
     node.addEventListener(event, handler);