@madgex/design-system 13.6.4 → 13.8.0

package/src/components/scroll-spy/scroll-spy.js

@@ -0,0 +1,127 @@
+export class MdsScrollSpy extends HTMLElement {
+  #observer;
+
+  constructor() {
+    super();
+  }
+
+  #parseObserverThreshold(threshold) {
+    const defaultThreshold = [0, 0.25, 0.5, 0.75, 1];
+
+    if (threshold == null || threshold.trim() === '') {
+      return defaultThreshold;
+    }
+
+    const numericThreshold = Number(threshold);
+    if (!Number.isNaN(numericThreshold)) {
+      return numericThreshold;
+    }
+
+    const isValidThresholdArray = (value) =>
+      Array.isArray(value) &&
+      value.length > 0 &&
+      value.every((item) => typeof item === 'number' && !Number.isNaN(item));
+
+    try {
+      const parsedThreshold = JSON.parse(threshold);
+      if (isValidThresholdArray(parsedThreshold)) {
+        return parsedThreshold;
+      }
+    } catch {
+      // Will use fallback instead
+    }
+    console.warn(
+      `${this.constructor.name}: Invalid observer-threshold "${threshold}". Falling back to default thresholds.`,
+    );
+    return defaultThreshold;
+  }
+
+  #setObserver() {
+    const sectionVisibilityRatios = new Map();
+
+    /** @argument {Array<IntersectionObserverEntry>} entries */
+    const handleIntersect = (entries) => {
+      // get visibility ratio for each section
+      entries.forEach((entry) => {
+        if (entry.intersectionRatio === 0) {
+          sectionVisibilityRatios.delete(entry.target.id);
+        } else {
+          sectionVisibilityRatios.set(entry.target.id, entry.intersectionRatio);
+        }
+      });
+
+      // if no sections are visible, remove aria-current from all links
+      if (sectionVisibilityRatios.size === 0) {
+        this.#links.forEach((link) => link.removeAttribute('aria-current'));
+        return;
+      }
+
+      // get section with highest visibility ratio
+      const mostVisibleSection = sectionVisibilityRatios
+        .entries()
+        .reduce((previousSection, currentSection) =>
+          currentSection[1] > previousSection[1] ? currentSection : previousSection,
+        );
+
+      const activeSectionId = mostVisibleSection[0];
+      const activeSectionRatio = mostVisibleSection[1];
+
+      // Update aria-current
+      this.#links.forEach((link) => link.removeAttribute('aria-current'));
+      if (activeSectionId && activeSectionRatio > 0) {
+        this.querySelector(`[href="#${CSS.escape(activeSectionId)}"]`)?.setAttribute(
+          'aria-current',
+          this.#ariaCurrentValue,
+        );
+      }
+    };
+
+    this.#observer = new IntersectionObserver(handleIntersect, this.#observerOptions);
+    this.#sections.forEach((section) => this.#observer.observe(section));
+  }
+
+  connectedCallback() {
+    if (this.#sections.length > 0) {
+      this.#setObserver();
+    }
+  }
+  disconnectedCallback() {
+    this.#observer?.disconnect();
+  }
+
+  get #links() {
+    return Array.from(this.querySelectorAll('a'));
+  }
+
+  get #sections() {
+    const sections = [];
+    this.#links.forEach((link) => {
+      if (new URL(link.href).host !== window.location.host) return;
+      if (!link.hash) return;
+
+      const section = document.querySelector(`#${CSS.escape(link.hash.substring(1))}`);
+
+      if (!section) {
+        console.warn(`${this.constructor.name}: Element with id "${link.hash}" doesn't exist on this page.`);
+        return;
+      }
+
+      sections.push(section);
+    });
+    return sections;
+  }
+
+  get #ariaCurrentValue() {
+    return this.getAttribute('aria-current-value') || 'step';
+  }
+
+  get #observerOptions() {
+    const root = this.getAttribute('observer-root');
+    const threshold = this.getAttribute('observer-threshold');
+
+    return {
+      root: document.querySelector(root),
+      threshold: this.#parseObserverThreshold(threshold),
+    };
+  }
+}

package/src/components/scroll-spy/scroll-spy.njk

@@ -0,0 +1,184 @@
+<div class="mds-grid-row">
+  <div class="mds-grid-col-12 mds-grid-col-md-4 mds-grid-col-lg-3 mds-display-none mds-display-md-block">
+    <nav aria-label="Page sections" class="mds-position-sticky">
+      <ol class="mds-step-list">
+        <li class="mds-step-list__item">
+          <a href="/">Previous page</a>
+        </li>
+        <li class="mds-step-list__item mds-step-list__item--current mds-step-list__item--has-subnav" aria-current="page">Current
+          page
+          <mds-scroll-spy>
+            <ul class="mds-step-list-subnav">
+              <li class="mds-step-list-subnav__item">
+                <a class="mds-step-list-subnav__link" href="#section-1">Section 1</a>
+              </li>
+              <li class="mds-step-list-subnav__item">
+                <a class="mds-step-list-subnav__link" href="#section-2">Section 2</a>
+              </li>
+              <li class="mds-step-list-subnav__item">
+                <a class="mds-step-list-subnav__link" href="#section-3">Section 3</a>
+              </li>
+            </ul>
+          </mds-scroll-spy>
+        </li>
+        <li class="mds-step-list__item mds-step-list__item--future">
+          <a href="/">Next page</a>
+        </li>
+      </ol>
+    </nav>
+  </div>
+  <div class="mds-grid-col-12 mds-grid-col-md-8 mds-grid-col-lg-9">
+    <section id="section-1">
+      <h2>Section 1</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit sem, mollis ut dui ac, ultricies posuere dolor.
+        Pellentesque tincidunt interdum justo et tempor. Mauris varius ac dolor accumsan pellentesque. Suspendisse varius leo
+        quis lorem aliquet, ut eleifend turpis malesuada. Duis maximus cursus sem vel iaculis. Nullam bibendum massa et orci
+        scelerisque vulputate. Aenean dignissim tempus urna. Fusce vel faucibus lectus, commodo fringilla sem.
+      </p>
+      <p>
+        Nam venenatis a dui nec efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+        curae; Integer vel tincidunt risus, et eleifend nisl. Nullam imperdiet ex sit amet sapien iaculis, sit amet consectetur
+        justo sollicitudin. Sed vitae tristique arcu, a commodo urna. Curabitur in vulputate magna. Duis iaculis placerat
+        consequat.
+      </p>
+      <p>
+        Vestibulum neque erat, pellentesque ut lectus et, tincidunt tincidunt magna. Nam tristique, urna eu dignissim ultricies,
+        dui turpis rutrum odio, et fringilla sapien quam vitae nulla. Nulla facilisi. Maecenas gravida, quam in elementum
+        sodales, justo magna rutrum mi, et ultricies arcu diam et dolor. Sed sit amet odio vitae urna eleifend sodales et congue
+        libero. Etiam sit amet dolor tincidunt, porttitor mi et, ullamcorper tortor. Aenean tellus odio, posuere in condimentum
+        vitae, eleifend vel ligula. Donec luctus dolor eu massa luctus pellentesque.
+      </p>
+      <p>
+        Aenean dictum urna at lorem accumsan aliquam. Donec molestie, ante ac consectetur pharetra, nulla dolor tristique odio,
+        sit amet dictum elit libero eu velit. Etiam non accumsan lacus, sit amet condimentum eros. Aliquam erat volutpat. Etiam
+        rutrum porttitor tortor, ac convallis libero maximus interdum. Nullam ut tellus pulvinar, viverra ex vitae, sodales dui.
+        Nulla molestie, lacus eget condimentum vulputate, odio metus feugiat ex, ac consectetur nibh odio in erat. Nunc eget
+        justo ac ante euismod tempor. Integer nisi urna, bibendum vitae quam sit amet, laoreet vulputate nisi. Suspendisse
+        aliquam ex sit amet turpis iaculis, quis venenatis nibh dignissim.
+      </p>
+      <p>
+        Aliquam semper metus dolor, ac luctus dui posuere id. In facilisis tincidunt rutrum. Nam fermentum purus ante, vel
+        elementum lectus vehicula vel. Mauris eu dignissim lectus, quis ultrices turpis. Pellentesque eget accumsan sem, sit
+        amet porta tellus. Curabitur sit amet neque et mi porttitor ultricies. Duis eu ipsum finibus, fringilla diam eget,
+        fermentum nisl. Ut augue tortor, cursus a congue vel, maximus facilisis massa. Ut gravida, velit eu feugiat faucibus,
+        eros magna tincidunt ipsum, sed pellentesque elit diam a ligula. Cras vel viverra massa, laoreet auctor justo. Quisque
+        gravida bibendum lorem, at laoreet nisi fermentum a.
+      </p>
+    </section>
+    <section id="section-2">
+      <h2>Section 2</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit sem, mollis ut dui ac, ultricies posuere dolor.
+        Pellentesque tincidunt interdum justo et tempor. Mauris varius ac dolor accumsan pellentesque. Suspendisse varius leo
+        quis lorem aliquet, ut eleifend turpis malesuada. Duis maximus cursus sem vel iaculis. Nullam bibendum massa et orci
+        scelerisque vulputate. Aenean dignissim tempus urna. Fusce vel faucibus lectus, commodo fringilla sem.
+      </p>
+      <p>
+        Nam venenatis a dui nec efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+        curae; Integer vel tincidunt risus, et eleifend nisl. Nullam imperdiet ex sit amet sapien iaculis, sit amet consectetur
+        justo sollicitudin. Sed vitae tristique arcu, a commodo urna. Curabitur in vulputate magna. Duis iaculis placerat
+        consequat.
+      </p>
+      <p>
+        Vestibulum neque erat, pellentesque ut lectus et, tincidunt tincidunt magna. Nam tristique, urna eu dignissim ultricies,
+        dui turpis rutrum odio, et fringilla sapien quam vitae nulla. Nulla facilisi. Maecenas gravida, quam in elementum
+        sodales, justo magna rutrum mi, et ultricies arcu diam et dolor. Sed sit amet odio vitae urna eleifend sodales et congue
+        libero. Etiam sit amet dolor tincidunt, porttitor mi et, ullamcorper tortor. Aenean tellus odio, posuere in condimentum
+        vitae, eleifend vel ligula. Donec luctus dolor eu massa luctus pellentesque.
+      </p>
+      <p>
+        Aenean dictum urna at lorem accumsan aliquam. Donec molestie, ante ac consectetur pharetra, nulla dolor tristique odio,
+        sit amet dictum elit libero eu velit. Etiam non accumsan lacus, sit amet condimentum eros. Aliquam erat volutpat. Etiam
+        rutrum porttitor tortor, ac convallis libero maximus interdum. Nullam ut tellus pulvinar, viverra ex vitae, sodales dui.
+        Nulla molestie, lacus eget condimentum vulputate, odio metus feugiat ex, ac consectetur nibh odio in erat. Nunc eget
+        justo ac ante euismod tempor. Integer nisi urna, bibendum vitae quam sit amet, laoreet vulputate nisi. Suspendisse
+        aliquam ex sit amet turpis iaculis, quis venenatis nibh dignissim.
+      </p>
+      <p>
+        Aliquam semper metus dolor, ac luctus dui posuere id. In facilisis tincidunt rutrum. Nam fermentum purus ante, vel
+        elementum lectus vehicula vel. Mauris eu dignissim lectus, quis ultrices turpis. Pellentesque eget accumsan sem, sit
+        amet porta tellus. Curabitur sit amet neque et mi porttitor ultricies. Duis eu ipsum finibus, fringilla diam eget,
+        fermentum nisl. Ut augue tortor, cursus a congue vel, maximus facilisis massa. Ut gravida, velit eu feugiat faucibus,
+        eros magna tincidunt ipsum, sed pellentesque elit diam a ligula. Cras vel viverra massa, laoreet auctor justo. Quisque
+        gravida bibendum lorem, at laoreet nisi fermentum a.
+      </p>
+    </section>
+    <section id="section-3">
+      <h2>Section 3</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit sem, mollis ut dui ac, ultricies posuere dolor.
+        Pellentesque tincidunt interdum justo et tempor. Mauris varius ac dolor accumsan pellentesque. Suspendisse varius leo
+        quis lorem aliquet, ut eleifend turpis malesuada. Duis maximus cursus sem vel iaculis. Nullam bibendum massa et orci
+        scelerisque vulputate. Aenean dignissim tempus urna. Fusce vel faucibus lectus, commodo fringilla sem.
+      </p>
+      <p>
+        Nam venenatis a dui nec efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+        curae; Integer vel tincidunt risus, et eleifend nisl. Nullam imperdiet ex sit amet sapien iaculis, sit amet consectetur
+        justo sollicitudin. Sed vitae tristique arcu, a commodo urna. Curabitur in vulputate magna. Duis iaculis placerat
+        consequat.
+      </p>
+      <p>
+        Vestibulum neque erat, pellentesque ut lectus et, tincidunt tincidunt magna. Nam tristique, urna eu dignissim ultricies,
+        dui turpis rutrum odio, et fringilla sapien quam vitae nulla. Nulla facilisi. Maecenas gravida, quam in elementum
+        sodales, justo magna rutrum mi, et ultricies arcu diam et dolor. Sed sit amet odio vitae urna eleifend sodales et congue
+        libero. Etiam sit amet dolor tincidunt, porttitor mi et, ullamcorper tortor. Aenean tellus odio, posuere in condimentum
+        vitae, eleifend vel ligula. Donec luctus dolor eu massa luctus pellentesque.
+      </p>
+      <p>
+        Aenean dictum urna at lorem accumsan aliquam. Donec molestie, ante ac consectetur pharetra, nulla dolor tristique odio,
+        sit amet dictum elit libero eu velit. Etiam non accumsan lacus, sit amet condimentum eros. Aliquam erat volutpat. Etiam
+        rutrum porttitor tortor, ac convallis libero maximus interdum. Nullam ut tellus pulvinar, viverra ex vitae, sodales dui.
+        Nulla molestie, lacus eget condimentum vulputate, odio metus feugiat ex, ac consectetur nibh odio in erat. Nunc eget
+        justo ac ante euismod tempor. Integer nisi urna, bibendum vitae quam sit amet, laoreet vulputate nisi. Suspendisse
+        aliquam ex sit amet turpis iaculis, quis venenatis nibh dignissim.
+      </p>
+      <p>
+        Aliquam semper metus dolor, ac luctus dui posuere id. In facilisis tincidunt rutrum. Nam fermentum purus ante, vel
+        elementum lectus vehicula vel. Mauris eu dignissim lectus, quis ultrices turpis. Pellentesque eget accumsan sem, sit
+        amet porta tellus. Curabitur sit amet neque et mi porttitor ultricies. Duis eu ipsum finibus, fringilla diam eget,
+        fermentum nisl. Ut augue tortor, cursus a congue vel, maximus facilisis massa. Ut gravida, velit eu feugiat faucibus,
+        eros magna tincidunt ipsum, sed pellentesque elit diam a ligula. Cras vel viverra massa, laoreet auctor justo. Quisque
+        gravida bibendum lorem, at laoreet nisi fermentum a.
+      </p>
+    </section>
+    <section id="section-no-scrollspy">
+      <h2>Section outside of Scroll Spy</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit sem, mollis ut dui ac, ultricies posuere dolor.
+        Pellentesque tincidunt interdum justo et tempor. Mauris varius ac dolor accumsan pellentesque. Suspendisse varius leo
+        quis lorem aliquet, ut eleifend turpis malesuada. Duis maximus cursus sem vel iaculis. Nullam bibendum massa et orci
+        scelerisque vulputate. Aenean dignissim tempus urna. Fusce vel faucibus lectus, commodo fringilla sem.
+      </p>
+      <p>
+        Nam venenatis a dui nec efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+        curae; Integer vel tincidunt risus, et eleifend nisl. Nullam imperdiet ex sit amet sapien iaculis, sit amet consectetur
+        justo sollicitudin. Sed vitae tristique arcu, a commodo urna. Curabitur in vulputate magna. Duis iaculis placerat
+        consequat.
+      </p>
+      <p>
+        Vestibulum neque erat, pellentesque ut lectus et, tincidunt tincidunt magna. Nam tristique, urna eu dignissim ultricies,
+        dui turpis rutrum odio, et fringilla sapien quam vitae nulla. Nulla facilisi. Maecenas gravida, quam in elementum
+        sodales, justo magna rutrum mi, et ultricies arcu diam et dolor. Sed sit amet odio vitae urna eleifend sodales et congue
+        libero. Etiam sit amet dolor tincidunt, porttitor mi et, ullamcorper tortor. Aenean tellus odio, posuere in condimentum
+        vitae, eleifend vel ligula. Donec luctus dolor eu massa luctus pellentesque.
+      </p>
+      <p>
+        Aenean dictum urna at lorem accumsan aliquam. Donec molestie, ante ac consectetur pharetra, nulla dolor tristique odio,
+        sit amet dictum elit libero eu velit. Etiam non accumsan lacus, sit amet condimentum eros. Aliquam erat volutpat. Etiam
+        rutrum porttitor tortor, ac convallis libero maximus interdum. Nullam ut tellus pulvinar, viverra ex vitae, sodales dui.
+        Nulla molestie, lacus eget condimentum vulputate, odio metus feugiat ex, ac consectetur nibh odio in erat. Nunc eget
+        justo ac ante euismod tempor. Integer nisi urna, bibendum vitae quam sit amet, laoreet vulputate nisi. Suspendisse
+        aliquam ex sit amet turpis iaculis, quis venenatis nibh dignissim.
+      </p>
+      <p>
+        Aliquam semper metus dolor, ac luctus dui posuere id. In facilisis tincidunt rutrum. Nam fermentum purus ante, vel
+        elementum lectus vehicula vel. Mauris eu dignissim lectus, quis ultrices turpis. Pellentesque eget accumsan sem, sit
+        amet porta tellus. Curabitur sit amet neque et mi porttitor ultricies. Duis eu ipsum finibus, fringilla diam eget,
+        fermentum nisl. Ut augue tortor, cursus a congue vel, maximus facilisis massa. Ut gravida, velit eu feugiat faucibus,
+        eros magna tincidunt ipsum, sed pellentesque elit diam a ligula. Cras vel viverra massa, laoreet auctor justo. Quisque
+        gravida bibendum lorem, at laoreet nisi fermentum a.
+      </p>
+    </section>
+  </div>
+</div>