@salesforcedevs/docs-components 1.3.345-refactor-tab-alpha2 → 1.3.345-refactor-tab-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.345-refactor-tab-alpha2",
+    "version": "1.3.345-refactor-tab-alpha4",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -151,6 +151,9 @@ export default class ContentLayout extends LightningElement {
         }
     }
 
+    // Placeholder for childs renderedCallback
+    protected postRenderedCallback?(): void;
+
     renderedCallback(): void {
         /**
          * Note: We are adding timeout because chrome is optimizing and not triggering recent renderedCallback though elements reference is changed
@@ -169,6 +172,9 @@ export default class ContentLayout extends LightningElement {
         if (!this.hasRendered) {
             this.hasRendered = true;
             this.restoreScroll();
+
+            // Dynamically call `renderedCallbackForLwcContentLayout` if it exists
+            this.postRenderedCallback?.();
         }
     }
 
@@ -299,6 +305,34 @@ export default class ContentLayout extends LightningElement {
             (event as CustomEvent<string>).detail
         );
 
+    protected getHeadingElements() {
+        // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
+        const headingElements = document.querySelectorAll(TOC_HEADER_TAG);
+        return headingElements;
+    }
+
+    updateHeadingForRNB(): void {
+        const headingElements = this.getHeadingElements();
+        this.addObserverAndScroll(headingElements);
+    }
+
+    addObserverAndScroll(headingElements: any) {
+        for (const headingElement of headingElements as any) {
+            // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
+            const id = headingElement.getAttribute("id")!;
+            this.anchoredElements[id] = {
+                id,
+                intersect: false
+            };
+            this.observer?.observe(headingElement);
+        }
+
+        if (!this.didScrollToSelectedHash) {
+            this.didScrollToSelectedHash = true;
+            this.scrollToHash(headingElements);
+        }
+    }
+
     attachInteractionObserver = (): void => {
         if (!this.enableSlotChange) {
             return;
@@ -323,25 +357,34 @@ export default class ContentLayout extends LightningElement {
                 rootMargin: globalNavOffset.trim()
             }
         );
+        this.updateHeadingForRNB();
+    };
 
-        // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
-        const headingElements = document.querySelectorAll(TOC_HEADER_TAG);
+    // eslint-disable-next-line no-undef
+    updateTocItems(headingElements: any): void {
+        const tocOptions = [];
 
         for (const headingElement of headingElements as any) {
-            // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
-            const id = headingElement.getAttribute("id")!;
-            this.anchoredElements[id] = {
-                id,
-                intersect: false
-            };
-            this.observer.observe(headingElement);
+            headingElement.id = headingElement.hash;
+
+            // Update tocOptions from anchorTags only for H2, consider default as 2 as per component
+            const headingAriaLevel =
+                headingElement.attributes["aria-level"]?.nodeValue || "2";
+            const isH2 = headingAriaLevel === "2";
+
+            if (isH2) {
+                const tocItem = {
+                    anchor: `#${headingElement.hash}`,
+                    id: headingElement.id,
+                    label: headingElement.header
+                };
+                tocOptions.push(tocItem);
+                this.tocOptionIdsSet.add(headingElement.id);
+            }
         }
 
-        if (!this.didScrollToSelectedHash) {
-            this.didScrollToSelectedHash = true;
-            this.scrollToHash(headingElements);
-        }
-    };
+        this._tocOptions = tocOptions;
+    }
 
     onSlotChange(event: Event): void {
         const slotElements = (
@@ -363,27 +406,7 @@ export default class ContentLayout extends LightningElement {
                     headingElement.attributes.header?.nodeValue;
             }
 
-            const tocOptions = [];
-            for (const headingElement of headingElements as any) {
-                headingElement.id = headingElement.hash;
-
-                // Update tocOptions from anchorTags only for H2, consider default as 2 as per component
-                const headingAriaLevel =
-                    headingElement.attributes["aria-level"]?.nodeValue || "2";
-                const isH2 = headingAriaLevel === "2";
-
-                if (isH2) {
-                    const tocItem = {
-                        anchor: `#${headingElement.hash}`,
-                        id: headingElement.id,
-                        label: headingElement.header
-                    };
-                    tocOptions.push(tocItem);
-                    this.tocOptionIdsSet.add(headingElement.id);
-                }
-            }
-
-            this._tocOptions = tocOptions;
+            this.updateTocItems(headingElements);
         }
     }
 

package/src/modules/doc/lwcContentLayout/lwcContentLayout.ts

@@ -49,7 +49,7 @@ export default class LwcContentLayout extends ContentLayout {
         this.updateTocItems(headingElements);
     };
 
-    private getHeadingElements() {
+    protected getHeadingElements() {
         let headingElements = document.querySelectorAll(TOC_HEADER_TAG);
         if (this.showTabBasedRNB) {
             const tabPanelListItem: any = this.getTabPanelList();
@@ -142,48 +142,23 @@ export default class LwcContentLayout extends ContentLayout {
         });
     }
 
-    renderedCallback(): void {
-        /**
-         * Note: We are adding timeout because chrome is optimizing and not triggering recent renderedCallback though elements reference is changed
-         * Also we are considering recent renderedCallback
-         */
-        this.clearRenderObserverTimer();
-        this.observerTimerId = setTimeout(
-            this.attachInteractionObserver,
-            OBSERVER_ATTACH_WAIT_TIME
-        );
-
-        this.adjustNavPosition();
-        window.addEventListener("scroll", this.adjustNavPosition);
-        window.addEventListener("resize", this.adjustNavPosition);
-
-        if (!this.hasRendered) {
-            this.hasRendered = true;
-            this.setRNBByTab();
-            if (this.showTabBasedRNB) {
-                window.addEventListener("tabchanged", this.onTabChanged);
-                window.addEventListener(
-                    "specificationdatarendered",
-                    this.onTabChanged
-                );
-                window.addEventListener("selectedcontent", (event) =>
-                    this.onRNBClick(event as CustomEvent)
-                );
-                this.restoreTabSelection();
-            }
-            this.restoreScroll();
+    postRenderedCallback(): void {
+        this.setRNBByTab();
+        if (this.showTabBasedRNB) {
+            window.addEventListener("tabchanged", this.onTabChanged);
+            window.addEventListener(
+                "specificationdatarendered",
+                this.onTabChanged
+            );
+            window.addEventListener("selectedcontent", (event) =>
+                this.onRNBClick(event as CustomEvent)
+            );
+            this.restoreTabSelection();
         }
     }
 
     disconnectedCallback(): void {
-        this.disconnectObserver();
-        window.removeEventListener(
-            "highlightedtermchange",
-            this.updateHighlighted
-        );
-        window.removeEventListener("scroll", this.adjustNavPosition);
-        window.removeEventListener("resize", this.adjustNavPosition);
-
+        super.disconnectedCallback();
         if (this.showTabBasedRNB) {
             window.removeEventListener("tabchanged", this.onTabChanged);
             window.removeEventListener(
@@ -195,37 +170,9 @@ export default class LwcContentLayout extends ContentLayout {
             );
             window.removeEventListener("popstate", this.handlePopState);
         }
-        this.searchSyncer.dispose();
-        this.clearRenderObserverTimer();
-
-        window.clearInterval(this._scrollInterval);
     }
 
-    attachInteractionObserver = (): void => {
-        if (!this.enableSlotChange) {
-            return;
-        }
-        this.disconnectObserver();
-
-        const globalNavOffset = `-${getComputedStyle(
-            document.documentElement
-        ).getPropertyValue("--dx-g-doc-header-main-nav-height")}`;
-
-        this.observer = new IntersectionObserver(
-            (entries) => {
-                entries.forEach(
-                    (entry) =>
-                        (this.anchoredElements[
-                            entry.target.getAttribute("id")!
-                        ].intersect = entry.isIntersecting)
-                );
-                this.calculateActualSection();
-            },
-            {
-                rootMargin: globalNavOffset.trim()
-            }
-        );
-
+    updateHeadingForRNB(): void {
         // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
         const headingElements = this.getHeadingElements();
 
@@ -233,51 +180,11 @@ export default class LwcContentLayout extends ContentLayout {
         if (this.showTabBasedRNB) {
             this.updateURL();
         }
-
-        for (const headingElement of headingElements as any) {
-            // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
-            const id = headingElement.getAttribute("id")!;
-            this.anchoredElements[id] = {
-                id,
-                intersect: false
-            };
-            this.observer.observe(headingElement);
-        }
-
-        if (!this.didScrollToSelectedHash) {
-            this.didScrollToSelectedHash = true;
-            this.scrollToHash(headingElements);
-        }
-    };
+        this.addObserverAndScroll(headingElements);
+    }
 
     onSlotChange(): void {
         this.updateRNB();
         this.contentLoaded = true;
     }
-
-    // eslint-disable-next-line no-undef
-    private updateTocItems(headingElements: NodeListOf<Element>): void {
-        const tocOptions = [];
-
-        for (const headingElement of headingElements as any) {
-            headingElement.id = headingElement.hash;
-
-            // Update tocOptions from anchorTags only for H2, consider default as 2 as per component
-            const headingAriaLevel =
-                headingElement.attributes["aria-level"]?.nodeValue || "2";
-            const isH2 = headingAriaLevel === "2";
-
-            if (isH2) {
-                const tocItem = {
-                    anchor: `#${headingElement.hash}`,
-                    id: headingElement.id,
-                    label: headingElement.header
-                };
-                tocOptions.push(tocItem);
-                this.tocOptionIdsSet.add(headingElement.id);
-            }
-        }
-
-        this._tocOptions = tocOptions;
-    }
 }