@salesforcedevs/docs-components 1.3.345-refactor-tab-alpha1 → 1.3.345-refactor-tab-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.345-refactor-tab-alpha1",
+    "version": "1.3.345-refactor-tab-alpha3",
     "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 renderedCallbackForLwcContentLayout?(): 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.renderedCallbackForLwcContentLayout?.();
         }
     }
 
@@ -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,24 +357,7 @@ export default class ContentLayout extends LightningElement {
                 rootMargin: globalNavOffset.trim()
             }
         );
-
-        // 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);
-
-        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.updateHeadingForRNB();
     };
 
     onSlotChange(event: Event): void {

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,26 +142,23 @@ export default class LwcContentLayout extends ContentLayout {
         });
     }
 
-    renderedCallback(): void {
-        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();
+    renderedCallbackForLwcContentLayout(): 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 {
+        super.disconnectedCallback();
         if (this.showTabBasedRNB) {
             window.removeEventListener("tabchanged", this.onTabChanged);
             window.removeEventListener(
@@ -175,31 +172,7 @@ export default class LwcContentLayout extends ContentLayout {
         }
     }
 
-    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();
 
@@ -207,22 +180,8 @@ 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();