@brytdesigns/web-component-gnav-header 3.3.3 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brytdesigns/web-component-gnav-header",
-  "version": "3.3.3",
+  "version": "3.4.0",
   "description": "Web component wrapper for the gnav-header navigation element",
   "main": "./dist/main/index.js",
   "module": "./dist/main/index.js",
@@ -20,7 +20,7 @@
   "author": "Bryt Designs",
   "license": "ISC",
   "dependencies": {
-    "@brytdesigns/web-component-core": "3.3.3",
+    "@brytdesigns/web-component-core": "3.4.0",
     "@solid-primitives/scheduled": "^2.0.0-next.2",
     "component-register": "0.8.7",
     "motion": "^12.43.0",

package/dist/esm/index.js

@@ -1,246 +0,0 @@
-import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
-import { awaitAllAnimations, getTransitionConfig } from '@brytdesigns/web-component-core/animation';
-import { debounce } from '@solid-primitives/scheduled';
-import { createSignal, onCleanup, createEffect, on } from 'solid-js';
-import { animate } from 'motion';
-
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-// src/components/gnav-header.ts
-var gnav_header_exports = {};
-__export(gnav_header_exports, {
-  Component: () => Component,
-  Name: () => Name
-});
-
-// src/utils.ts
-var groupBy = (list, getKey) => list.reduce(
-  (previous, currentItem, index) => {
-    const group = getKey(currentItem, index);
-    if (!previous[group]) previous[group] = [];
-    previous[group].push(currentItem);
-    return previous;
-  },
-  {}
-);
-var CSSVars = {
-  headerHeight: "--header-height",
-  collapsedHeaderHeight: "--collapsed-header-height",
-  stickyHeaderHeight: "--sticky-header-height",
-  stickyHeaderTop: "--sticky-header-top"
-};
-function updateCssVar(varName, amount) {
-  document.documentElement.style.setProperty(CSSVars[varName], `${amount}px`);
-}
-function getCssVarValue(varName) {
-  const raw = getComputedStyle(document.documentElement).getPropertyValue(
-    CSSVars[varName]
-  );
-  return parseFloat(raw) || 0;
-}
-
-// src/components/gnav-header.ts
-var Name = `gnav-header`;
-var SECTION_TAG = "gnav-header-section";
-function awaitInFlightSectionAnimations(sections) {
-  return Promise.allSettled(
-    sections.flatMap(
-      (section) => section.getAnimations().map((animation) => animation.finished)
-    )
-  );
-}
-function nodesContainSection(nodes) {
-  return Array.from(nodes).some(
-    (node) => node instanceof Element && (node.tagName.toLowerCase() === SECTION_TAG || node.querySelector(SECTION_TAG) !== null)
-  );
-}
-function getTransition(host) {
-  const fromCss = getTransitionConfig(getComputedStyle(host));
-  const cleaned = Object.fromEntries(
-    Object.entries(fromCss).filter(([, v]) => v !== void 0)
-  );
-  return { duration: 0.3, ease: "easeOut", ...cleaned };
-}
-var Component = (props, { element }) => {
-  const [sections, setSections] = createSignal([]);
-  let runId = 0;
-  function setupSection(section, position) {
-    section.setAttribute("position", String(position));
-    if (!section.style.position) section.style.position = "relative";
-    if (section.hasAttribute("hide-on-trigger")) section.style.zIndex = "99";
-    else section.style.zIndex = "100";
-  }
-  function refreshSections() {
-    const found = Array.from(
-      document.querySelectorAll(SECTION_TAG)
-    );
-    found.forEach((section, i) => setupSection(section, i + 1));
-    setSections(found);
-  }
-  refreshSections();
-  if (!sections().length) {
-    console.warn("No gnav-header-section found!");
-  }
-  updateCssVar("headerHeight", element.offsetHeight);
-  updateCssVar("collapsedHeaderHeight", getCollapsedHeaderHeight());
-  const observer = new MutationObserver((mutations) => {
-    const relevant = mutations.some(
-      (m) => nodesContainSection(m.addedNodes) || nodesContainSection(m.removedNodes)
-    );
-    if (relevant) refreshSections();
-  });
-  observer.observe(document.body, { childList: true, subtree: true });
-  onCleanup(() => observer.disconnect());
-  createEffect(
-    on(
-      () => props.scrollThreshold,
-      (scrollThreshold) => {
-        const controller = new AbortController();
-        let previousScroll = window.scrollY;
-        function handleScroll() {
-          const delta = window.scrollY - previousScroll;
-          if (Math.abs(delta) < scrollThreshold) return;
-          element.setAttribute("collapsed", String(delta > 0));
-          previousScroll = Math.max(0, window.scrollY);
-        }
-        const handleResize = debounce(function() {
-          updateCssVar("headerHeight", element.offsetHeight);
-          updateCssVar("collapsedHeaderHeight", getCollapsedHeaderHeight());
-          if (props.collapsed) handleScrollDownAnimation();
-          else handleScrollUpAnimation();
-        }, 200);
-        window.addEventListener("scroll", handleScroll, {
-          capture: true,
-          signal: controller.signal
-        });
-        window.addEventListener("resize", handleResize, {
-          capture: true,
-          signal: controller.signal
-        });
-        onCleanup(() => {
-          controller.abort();
-          handleResize.clear();
-        });
-      }
-    )
-  );
-  createEffect(
-    on(
-      () => props.collapsed,
-      (collapsed) => {
-        if (collapsed) {
-          return handleScrollDownAnimation();
-        }
-        return handleScrollUpAnimation();
-      }
-    )
-  );
-  function shouldHideSectionOnTrigger(section) {
-    return section.hasAttribute("hide-on-trigger");
-  }
-  function getCollapsedHeaderHeight() {
-    return sections().reduce((total, section) => {
-      if (shouldHideSectionOnTrigger(section)) return total;
-      return total + section.getBoundingClientRect().height;
-    }, 0);
-  }
-  function getGroupedSections() {
-    return groupBy(
-      sections(),
-      (section) => shouldHideSectionOnTrigger(section) ? "hidden" : "visible"
-    );
-  }
-  async function handleScrollDownAnimation() {
-    const id = ++runId;
-    const currentSections = sections();
-    if (!currentSections.length) return;
-    await awaitInFlightSectionAnimations(currentSections);
-    if (id !== runId) return;
-    const transition = getTransition(element);
-    const animations = [];
-    const groupedSections = getGroupedSections();
-    if (!groupedSections.hidden) groupedSections.hidden = [];
-    if (!groupedSections.visible) groupedSections.visible = [];
-    let offset = groupedSections.hidden.reduce((total, el) => {
-      return total + el.getBoundingClientRect().height;
-    }, 0);
-    groupedSections.hidden.forEach((section) => {
-      const bounding = section.getBoundingClientRect();
-      const animation = animate(
-        section,
-        { y: `${(section.offsetTop + offset) * -1}px` },
-        transition
-      );
-      offset -= bounding.height;
-      animations.push(animation);
-    });
-    offset = 0;
-    groupedSections.visible.forEach((section) => {
-      const bounding = section.getBoundingClientRect();
-      const animation = animate(
-        section,
-        { y: `${offset - section.offsetTop}px` },
-        transition
-      );
-      offset += bounding.height;
-      animations.push(animation);
-    });
-    updateCssVar("stickyHeaderHeight", offset);
-    updateCssVar("collapsedHeaderHeight", offset);
-    animations.push(animateStickyHeaderTop());
-    return awaitAllAnimations(animations);
-  }
-  async function handleScrollUpAnimation() {
-    const id = ++runId;
-    const currentSections = sections();
-    if (!currentSections.length) return;
-    await awaitInFlightSectionAnimations(currentSections);
-    if (id !== runId) return;
-    updateCssVar("stickyHeaderHeight", element.getBoundingClientRect().height);
-    return awaitAllAnimations([
-      animate(currentSections, { y: "0px" }, getTransition(element)),
-      animateStickyHeaderTop(false)
-    ]);
-  }
-  function animateStickyHeaderTop(isScrollingDown = true) {
-    let from = getCssVarValue("stickyHeaderTop");
-    if (!from)
-      from = isScrollingDown ? element.offsetHeight : getCollapsedHeaderHeight();
-    const to = isScrollingDown ? getCollapsedHeaderHeight() : element.getBoundingClientRect().height;
-    return animate(from, to, {
-      ...getTransition(element),
-      onUpdate: (latest) => updateCssVar("stickyHeaderTop", latest)
-    });
-  }
-};
-
-// src/components/gnav-header-section.ts
-var gnav_header_section_exports = {};
-__export(gnav_header_section_exports, {
-  Component: () => Component2,
-  Name: () => Name2
-});
-var Name2 = "gnav-header-section";
-var Component2 = () => {
-};
-
-// src/index.ts
-customShadowlessElement(
-  gnav_header_exports.Name,
-  {
-    scrollThreshold: 20,
-    collapsed: false
-  },
-  correctElementType(gnav_header_exports.Component)
-);
-customShadowlessElement(gnav_header_section_exports.Name, {
-  hideOnTrigger: false,
-  position: 0,
-  shouldTrigger: false
-}, correctElementType(gnav_header_section_exports.Component));
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/gnav-header.ts","../../src/utils.ts","../../src/components/gnav-header-section.ts","../../src/index.ts"],"names":["Component","Name"],"mappings":"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","file":"index.js","sourcesContent":["import { type CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport {\n  awaitAllAnimations,\n  getTransitionConfig,\n} from \"@brytdesigns/web-component-core/animation\";\nimport { debounce } from \"@solid-primitives/scheduled\";\nimport { onCleanup, createEffect, createSignal, on } from \"solid-js\";\nimport { animate } from \"motion\";\n\nimport { groupBy, updateCssVar, getCssVarValue } from \"../utils.js\";\n\nexport type Props = {\n  scrollThreshold: number;\n  collapsed: boolean;\n};\n\nexport const Name = `gnav-header`;\n\nconst SECTION_TAG = \"gnav-header-section\";\n\nfunction awaitInFlightSectionAnimations(sections: HTMLElement[]) {\n  return Promise.allSettled(\n    sections.flatMap((section) =>\n      section.getAnimations().map((animation) => animation.finished),\n    ),\n  );\n}\n\nfunction nodesContainSection(nodes: NodeList): boolean {\n  return Array.from(nodes).some(\n    (node) =>\n      node instanceof Element &&\n      (node.tagName.toLowerCase() === SECTION_TAG ||\n        node.querySelector(SECTION_TAG) !== null),\n  );\n}\n\nfunction getTransition(host: HTMLElement) {\n  const fromCss = getTransitionConfig(getComputedStyle(host));\n  const cleaned = Object.fromEntries(\n    Object.entries(fromCss).filter(([, v]) => v !== undefined),\n  );\n  return { duration: 0.3, ease: \"easeOut\" as const, ...cleaned };\n}\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n  const [sections, setSections] = createSignal<HTMLElement[]>([]);\n  let runId = 0;\n\n  function setupSection(section: HTMLElement, position: number) {\n    section.setAttribute(\"position\", String(position));\n    if (!section.style.position) section.style.position = \"relative\";\n    if (section.hasAttribute(\"hide-on-trigger\")) section.style.zIndex = \"99\";\n    else section.style.zIndex = \"100\";\n  }\n\n  function refreshSections() {\n    const found = Array.from(\n      document.querySelectorAll<HTMLElement>(SECTION_TAG),\n    );\n    found.forEach((section, i) => setupSection(section, i + 1));\n    setSections(found);\n  }\n\n  refreshSections();\n\n  if (!sections().length) {\n    console.warn(\"No gnav-header-section found!\");\n  }\n\n  updateCssVar(\"headerHeight\", element.offsetHeight);\n  updateCssVar(\"collapsedHeaderHeight\", getCollapsedHeaderHeight());\n\n  const observer = new MutationObserver((mutations) => {\n    const relevant = mutations.some(\n      (m) =>\n        nodesContainSection(m.addedNodes) ||\n        nodesContainSection(m.removedNodes),\n    );\n    if (relevant) refreshSections();\n  });\n  observer.observe(document.body, { childList: true, subtree: true });\n  onCleanup(() => observer.disconnect());\n\n  createEffect(\n    on(\n      () => props.scrollThreshold,\n      (scrollThreshold) => {\n        const controller = new AbortController();\n        let previousScroll = window.scrollY;\n\n        function handleScroll() {\n          const delta = window.scrollY - previousScroll;\n          if (Math.abs(delta) < scrollThreshold) return;\n          element.setAttribute(\"collapsed\", String(delta > 0));\n          previousScroll = Math.max(0, window.scrollY);\n        }\n\n        const handleResize = debounce(function () {\n          updateCssVar(\"headerHeight\", element.offsetHeight);\n          updateCssVar(\"collapsedHeaderHeight\", getCollapsedHeaderHeight());\n          if (props.collapsed) handleScrollDownAnimation();\n          else handleScrollUpAnimation();\n        }, 200);\n\n        window.addEventListener(\"scroll\", handleScroll, {\n          capture: true,\n          signal: controller.signal,\n        });\n        window.addEventListener(\"resize\", handleResize, {\n          capture: true,\n          signal: controller.signal,\n        });\n\n        onCleanup(() => {\n          controller.abort();\n          handleResize.clear();\n        });\n      },\n    ),\n  );\n\n  createEffect(\n    on(\n      () => props.collapsed,\n      (collapsed) => {\n        if (collapsed) {\n          return handleScrollDownAnimation();\n        }\n        return handleScrollUpAnimation();\n      },\n    ),\n  );\n\n  function shouldHideSectionOnTrigger(section: HTMLElement) {\n    return section.hasAttribute(\"hide-on-trigger\");\n  }\n\n  function getCollapsedHeaderHeight() {\n    return sections().reduce((total, section) => {\n      if (shouldHideSectionOnTrigger(section)) return total;\n      return total + section.getBoundingClientRect().height;\n    }, 0);\n  }\n\n  function getGroupedSections() {\n    return groupBy(sections(), (section) =>\n      shouldHideSectionOnTrigger(section) ? \"hidden\" : \"visible\",\n    );\n  }\n\n  async function handleScrollDownAnimation() {\n    const id = ++runId;\n    const currentSections = sections();\n    if (!currentSections.length) return;\n\n    await awaitInFlightSectionAnimations(currentSections);\n    if (id !== runId) return;\n\n    const transition = getTransition(element);\n    const animations = [];\n    const groupedSections = getGroupedSections();\n\n    if (!groupedSections.hidden) groupedSections.hidden = [];\n    if (!groupedSections.visible) groupedSections.visible = [];\n\n    let offset = groupedSections.hidden.reduce((total, el) => {\n      return total + el.getBoundingClientRect().height;\n    }, 0);\n\n    groupedSections.hidden.forEach((section) => {\n      const bounding = section.getBoundingClientRect();\n      const animation = animate(\n        section,\n        { y: `${(section.offsetTop + offset) * -1}px` },\n        transition,\n      );\n      offset -= bounding.height;\n      animations.push(animation);\n    });\n\n    offset = 0;\n\n    groupedSections.visible.forEach((section) => {\n      const bounding = section.getBoundingClientRect();\n      const animation = animate(\n        section,\n        { y: `${offset - section.offsetTop}px` },\n        transition,\n      );\n      offset += bounding.height;\n      animations.push(animation);\n    });\n\n    updateCssVar(\"stickyHeaderHeight\", offset);\n    updateCssVar(\"collapsedHeaderHeight\", offset);\n\n    animations.push(animateStickyHeaderTop());\n\n    return awaitAllAnimations(animations);\n  }\n\n  async function handleScrollUpAnimation() {\n    const id = ++runId;\n    const currentSections = sections();\n    if (!currentSections.length) return;\n\n    await awaitInFlightSectionAnimations(currentSections);\n    if (id !== runId) return;\n\n    updateCssVar(\"stickyHeaderHeight\", element.getBoundingClientRect().height);\n    return awaitAllAnimations([\n      animate(currentSections, { y: \"0px\" }, getTransition(element)),\n      animateStickyHeaderTop(false),\n    ]);\n  }\n\n  function animateStickyHeaderTop(isScrollingDown = true) {\n    let from = getCssVarValue(\"stickyHeaderTop\");\n\n    if (!from)\n      from = isScrollingDown ? element.offsetHeight : getCollapsedHeaderHeight();\n\n    const to = isScrollingDown\n      ? getCollapsedHeaderHeight()\n      : element.getBoundingClientRect().height;\n\n    return animate(from, to, {\n      ...getTransition(element),\n      onUpdate: (latest) => updateCssVar(\"stickyHeaderTop\", latest),\n    });\n  }\n};\n","export const groupBy = <T, K extends PropertyKey>(\n  list: T[],\n  getKey: (item: T, index: number) => K\n) =>\n  list.reduce(\n    (previous, currentItem, index) => {\n      const group = getKey(currentItem, index);\n      if (!previous[group]) previous[group] = [];\n      previous[group].push(currentItem);\n      return previous;\n    },\n    {} as Record<K, T[]>\n  );\n\nexport const CSSVars = {\n  headerHeight: \"--header-height\",\n  collapsedHeaderHeight: \"--collapsed-header-height\",\n  stickyHeaderHeight: \"--sticky-header-height\",\n  stickyHeaderTop: \"--sticky-header-top\",\n} as const;\n\nexport function updateCssVar(\n  varName: keyof typeof CSSVars,\n  amount: number\n) {\n  document.documentElement.style.setProperty(CSSVars[varName], `${amount}px`);\n}\n\nexport function getCssVarValue(varName: keyof typeof CSSVars): number {\n  const raw = getComputedStyle(document.documentElement).getPropertyValue(\n    CSSVars[varName]\n  );\n  return parseFloat(raw) || 0;\n}\n","import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nexport type Props = {\n  shouldTrigger: boolean;\n  position: number;\n  hideOnTrigger: boolean;\n};\n\nexport const Name = \"gnav-header-section\";\n\nexport const Component: CorrectComponentType<Props> = () => {};\n","import {\n\tcorrectElementType,\n\tcustomShadowlessElement,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport { GnavHeader, GnavHeaderSection } from \"./components/index.js\";\n\nexport type GnavHeaderProps = GnavHeader.Props;\nexport type GnavHeaderSectionProps = GnavHeaderSection.Props;\n\ncustomShadowlessElement(\n\tGnavHeader.Name,\n\t{\n\t\tscrollThreshold: 20,\n\t\tcollapsed: false\n\t},\n\tcorrectElementType(GnavHeader.Component),\n);\n\ncustomShadowlessElement(GnavHeaderSection.Name, {\n\thideOnTrigger: false,\n\tposition: 0,\n\tshouldTrigger: false\n}, correctElementType(GnavHeaderSection.Component))"]}