archicratie-edition/src/components/GlossaryEntryStickySync.astro

<script is:inline>
  (() => {
    const boot = () => {
      const body = document.body;
      const root = document.documentElement;
      const hero = document.querySelector("[data-ge-hero]");
      const follow = document.getElementById("reading-follow");
      const mqMobile = window.matchMedia("(max-width: 860px)");

      if (!body || !root || !hero || !follow) return;

      const BODY_CLASS = "is-glossary-entry-page";
      const FOLLOW_ON_CLASS = "glossary-entry-follow-on";

      let lastHeight = -1;
      let lastFollowOn = null;
      let raf = 0;

      body.classList.add(BODY_CLASS);

      const heroHeight = () =>
        Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));

      const computeFollowOn = () =>
        !mqMobile.matches &&
        follow.classList.contains("is-on") &&
        follow.style.display !== "none" &&
        follow.getAttribute("aria-hidden") !== "true";

      const stripLocalSticky = () => {
        document
          .querySelectorAll(
            ".glossary-entry-body h2, .glossary-entry-body h3, .glossary-relations h2, .glossary-relations h3"
          )
          .forEach((el) => {
            el.classList.remove("is-sticky");
            el.removeAttribute("data-sticky-active");
          });
      };

      const applyLocalStickyHeight = () => {
        const h = mqMobile.matches ? 0 : heroHeight();
        if (h === lastHeight) return;
        lastHeight = h;

        if (typeof window.__archiSetLocalStickyHeight === "function") {
          window.__archiSetLocalStickyHeight(h);
        } else {
          root.style.setProperty("--glossary-local-sticky-h", `${h}px`);
        }
      };

      const syncFollowState = () => {
        const on = computeFollowOn();
        if (on === lastFollowOn) return;
        lastFollowOn = on;
        body.classList.toggle(FOLLOW_ON_CLASS, on);
      };

      const syncAll = () => {
        stripLocalSticky();
        syncFollowState();
        applyLocalStickyHeight();
      };

      const schedule = () => {
        if (raf) return;
        raf = requestAnimationFrame(() => {
          raf = 0;
          syncAll();
        });
      };

      const followObserver = new MutationObserver(schedule);
      followObserver.observe(follow, {
        attributes: true,
        attributeFilter: ["class", "style", "aria-hidden"],
        subtree: false,
      });

      const heroResizeObserver =
        typeof ResizeObserver !== "undefined"
          ? new ResizeObserver(schedule)
          : null;

      heroResizeObserver?.observe(hero);

      window.addEventListener("resize", schedule);
      window.addEventListener("pageshow", schedule);

      if (document.fonts?.ready) {
        document.fonts.ready.then(schedule).catch(() => {});
      }

      if (mqMobile.addEventListener) {
        mqMobile.addEventListener("change", schedule);
      } else if (mqMobile.addListener) {
        mqMobile.addListener(schedule);
      }

      schedule();
    };

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", boot, { once: true });
    } else {
      boot();
    }
  })();
</script>

<style>
  :global(body.is-glossary-entry-page #reading-follow){
    z-index: 10;
  }

  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-signals){
    gap: 6px;
  }

  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-head){
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-summary){
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 10px;
  }

  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-dek){
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-pill){
    padding: 4px 8px;
    font-size: 12px;
  }

  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-meta){
    padding: 0;
    border-color: transparent;
  }

  :global(body.is-glossary-entry-page.glossary-entry-follow-on #reading-follow){
    transform: translateY(-1px);
  }

  :global(body.is-glossary-entry-page.glossary-entry-follow-on #reading-follow .reading-follow__inner){
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  :global(body.is-glossary-entry-page .glossary-entry-body h2.is-sticky),
  :global(body.is-glossary-entry-page .glossary-entry-body h2[data-sticky-active="true"]),
  :global(body.is-glossary-entry-page .glossary-entry-body h3.is-sticky),
  :global(body.is-glossary-entry-page .glossary-entry-body h3[data-sticky-active="true"]),
  :global(body.is-glossary-entry-page .glossary-relations h2.is-sticky),
  :global(body.is-glossary-entry-page .glossary-relations h2[data-sticky-active="true"]),
  :global(body.is-glossary-entry-page .glossary-relations h3.is-sticky),
  :global(body.is-glossary-entry-page .glossary-relations h3[data-sticky-active="true"]){
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  @media (max-width: 860px){
    :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-head){
      margin-bottom: 20px;
      border-radius: 22px;
    }
  }
</style>