reanming and moving to resize observer

mdn · Sep 28, 2023 · 1637cb1 · 1637cb1
1 parent 065f9a0
commit 1637cb1
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 47 deletions.
diff --git a/client/src/app.scss b/client/src/app.scss
@@ -102,9 +102,9 @@
   --top-nav-height: 4rem;
   --article-actions-container-height: 2rem;
   --icon-size: 1rem;
-  --sticky-header-standalone-height: calc(var(--top-nav-height) + 1px);
-  --sticky-header-height: calc(
-    var(--sticky-header-standalone-height) +
+  --sticky-header-without-actions-height: calc(var(--top-nav-height) + 1px);
+  --sticky-header-with-actions-height: calc(
+    var(--sticky-header-without-actions-height) +
       var(--article-actions-container-height) + 1px
   );
 }
@@ -123,7 +123,7 @@
 }
 
 :target {
-  scroll-margin-top: var(--sticky-header-height);
+  scroll-margin-top: var(--sticky-header-with-actions-height);
 }
 
 body {
@@ -343,13 +343,8 @@ sup.new {
   }
 }
 
-.main-header-container {
-  min-height: var(--sticky-header-height);
+.sticky-header-container {
   position: sticky;
   top: 0;
   z-index: var(--z-index-main-header);
-
-  &.standalone {
-    min-height: var(--sticky-header-standalone-height);
-  }
 }
diff --git a/client/src/app.tsx b/client/src/app.tsx
@@ -55,7 +55,7 @@ function Layout({ pageType, children }) {
       >
         <TopPlacement />
         {pageType !== "document-page" && (
-          <div className="main-header-container standalone">
+          <div className="sticky-header-container without-actions">
             <TopNavigation />
           </div>
         )}

diff --git a/client/src/document/hooks.ts b/client/src/document/hooks.ts
@@ -103,42 +103,30 @@ export function useCopyExamplesToClipboardAndAIExplain(doc: Doc | undefined) {
  * Provides the height of the sticky header.
  */
 export function useStickyHeaderHeight() {
-  function determineStickyHeaderHeight(): number {
-    if (typeof getComputedStyle !== "function") {
-      // SSR.
-      return 0;
-    }
-
-    const height = parseFloat(
-      getComputedStyle(
-        document.getElementsByClassName("main-header-container")?.[0] ||
-          document.body
-      )["min-height"]
-    );
-    return Number.isNaN(height) ? 0 : height;
-  }
-
-  const [height, setHeight] = useState<number>(determineStickyHeaderHeight());
+  const [height, setHeight] = useState<number>(0);
 
   const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    // Unfortunately we cannot observe the CSS variable using MutationObserver,
-    // but we know that it may change when the width of the window changes.
-
-    const debouncedListener = () => {
-      if (timeout.current) {
-        window.clearTimeout(timeout.current);
+    const header = document.getElementsByClassName(
+      "sticky-header-container"
+    )?.[0];
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { height } = entry.contentRect;
+        if (timeout.current) {
+          window.clearTimeout(timeout.current);
+        }
+        timeout.current = setTimeout(() => {
+          setHeight(height);
+          timeout.current = null;
+        }, 250);
       }
-      timeout.current = setTimeout(() => {
-        setHeight(determineStickyHeaderHeight());
-        timeout.current = null;
-      }, 250);
-    };
+    });
 
-    window.addEventListener("resize", debouncedListener);
+    resizeObserver.observe(header);
 
-    return () => window.removeEventListener("resize", debouncedListener);
+    return () => resizeObserver.disconnect();
   }, [setHeight]);
 
   return height;

diff --git a/client/src/document/index.scss b/client/src/document/index.scss
@@ -763,7 +763,7 @@ kbd {
 }
 
 .sidebar-container {
-  --offset: var(--sticky-header-height);
+  --offset: var(--sticky-header-with-actions-height);
   --max-height: calc(100vh - var(--offset));
 
   @media screen and (min-width: $screen-md) and (min-height: $screen-height-place-limit) {
@@ -801,7 +801,7 @@ kbd {
       display: flex;
       flex-direction: column;
       gap: 0;
-      height: calc(100vh - var(--sticky-header-height));
+      height: calc(100vh - var(--sticky-header-with-actions-height));
       mask-image: linear-gradient(
         to bottom,
         rgba(0, 0, 0, 0) 0%,
@@ -810,7 +810,7 @@ kbd {
       );
       overflow: auto;
       position: sticky;
-      top: var(--sticky-header-height);
+      top: var(--sticky-header-with-actions-height);
 
       .place {
         margin: 1rem 0;

diff --git a/client/src/document/index.tsx b/client/src/document/index.tsx
@@ -189,7 +189,7 @@ export function Document(props /* TODO: define a TS interface for this */) {
   if (error) {
     return (
       <>
-        <div className="main-header-container">
+        <div className="sticky-header-container">
           <TopNavigation />
         </div>
         <MainContentContainer>
@@ -211,7 +211,7 @@ export function Document(props /* TODO: define a TS interface for this */) {
 
   return (
     <>
-      <div className="main-header-container">
+      <div className="sticky-header-container">
         <TopNavigation />
         <ArticleActionsContainer doc={doc} />
       </div>

diff --git a/client/src/ui/molecules/grids/_document-page.scss b/client/src/ui/molecules/grids/_document-page.scss
@@ -62,7 +62,7 @@
     padding-right: 1rem;
 
     .toc {
-      --offset: var(--sticky-header-height);
+      --offset: var(--sticky-header-with-actions-height);
 
       display: block;
       grid-area: toc;

diff --git a/client/src/ui/organisms/article-actions/index.scss b/client/src/ui/organisms/article-actions/index.scss
@@ -158,7 +158,7 @@
       bottom: auto;
       box-shadow: var(--shadow-02);
       left: var(--article-actions-position-left, initial);
-      max-height: calc(100vh - 12px - var(--sticky-header-height));
+      max-height: calc(100vh - 12px - var(--sticky-header-with-actions-height));
       padding: 0;
       position: absolute;
       right: 0;