@salesforcedevs/dx-components 1.20.0-rnb-scroll → 1.20.0-rnb-scroll-3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.20.0-rnb-scroll",
+    "version": "1.20.0-rnb-scroll-3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/toc/toc.css

@@ -1,6 +1,10 @@
 @import "dxHelpers/reset";
 @import "dxHelpers/text";
 
+:host {
+    --dx-c-toc-padding-bottom: 80px;
+}
+
 .toc {
     display: flex;
     flex-direction: row;
@@ -39,17 +43,12 @@
 
 .toc-items {
     overflow-y: auto;
-    padding-bottom: 80px;
-    padding-right: 10px;
+    padding-bottom: var(--dx-c-toc-padding-bottom);
+    padding-right: var(--dx-g-spacing-smd);
 }
 
-.scroll-shadow {
-    position: sticky;
-    bottom: -80px; /* to maintain padding given to toc-items */
-    height: 5px;
-    background: linear-gradient(to bottom, transparent, var(--dx-g-gray-90));
-    transition: opacity 0.3s;
-    opacity: 0;
+.toc-items[show-bottom-shadow="true"] {
+    box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
 }
 
 .dx-text-display-8 {

package/src/modules/dx/toc/toc.html

@@ -4,7 +4,11 @@
             <div class="toc-content-header" show-shadow={showBoxShadow}>
                 <h2 class="dx-text-display-8 toc_title">{header}</h2>
             </div>
-            <div class="toc-items" onscroll={handleScroll}>
+            <div
+                class="toc-items"
+                show-bottom-shadow={showBottomShadow}
+                onscroll={handleScroll}
+            >
                 <template for:each={options} for:item="option">
                     <a
                         href={option.anchor}
@@ -17,7 +21,6 @@
                         {option.label}
                     </a>
                 </template>
-                <div class="scroll-shadow"></div>
             </div>
         </div>
     </div>

package/src/modules/dx/toc/toc.ts

@@ -6,9 +6,16 @@ import { track as sendGtm } from "dxUtils/analytics";
 import { handleScroll } from "dxUtils/handleScroll";
 
 export default class Toc extends LightningElement {
-    showBoxShadow: boolean = false;
+    // For showing shadow at the top
+    private showBoxShadow: boolean = false;
+    private scrolling: boolean = false;
+
     handleScroll = handleScroll.bind(this);
 
+    // For showing shadow at the bottom
+    private showBottomShadow: boolean = false;
+    private scrollingToTop: boolean = false;
+
     @api header!: string;
 
     @api
@@ -42,6 +49,43 @@ export default class Toc extends LightningElement {
 
     @track _options!: Array<ContentElement>;
 
+    // to show shadow box at bottom of list container
+    private showShadowAtBottom = (event: any) => {
+        const list = event.target;
+
+        if (!this.scrollingToTop) {
+            this.scrollingToTop = true;
+            // Set a timeout to handle scroll event after a delay
+            setTimeout(() => {
+                const isScrollable = list.scrollHeight > list.clientHeight;
+                const isAtBottom =
+                    list.scrollTop + list.clientHeight >=
+                    list.scrollHeight -
+                        parseInt(
+                            getComputedStyle(
+                                this.template.host
+                            ).getPropertyValue("--dx-c-toc-padding-bottom"),
+                            10
+                        );
+
+                this.showBottomShadow = isScrollable && !isAtBottom;
+
+                // Reset scrolling back to false after handling the scroll
+                this.scrollingToTop = false;
+            }, 200);
+        }
+    };
+
+    renderedCallback(): void {
+        const list = this.template.querySelector(".toc-items");
+        list?.addEventListener("scroll", this.showShadowAtBottom);
+    }
+
+    disconnectedCallback(): void {
+        const list = this.template.querySelector(".toc-items");
+        list?.removeEventListener("scroll", this.showShadowAtBottom);
+    }
+
     private onClick(e: Event) {
         const target = e.currentTarget as HTMLElement;
         const id = target.getAttribute("contentid");

package/src/modules/dxBaseElements/sidebarBase/sidebarBase.ts

@@ -18,6 +18,7 @@ export class SidebarBase extends LightningElement {
     expanded: boolean = true;
     _value?: string = undefined;
     showBoxShadow: boolean = false;
+    private scrolling: boolean = false;
     _devCenter!: DevCenterConfig;
 
     @api langValuePath: string = "id";

package/src/modules/dxUtils/handleScroll/handleScroll.ts

@@ -1,17 +1,20 @@
+/**
+ * This generic method is to handle the scroll event and show box shadow below header
+ * @param scrollEvent
+ */
 export function handleScroll(this: any, scrollEvent: any) {
-    const { scrollTop, scrollHeight, clientHeight } = scrollEvent.target;
+    const listContainer = scrollEvent.target;
 
-    // to show shadow box at bottom of list container
-    const shadow = this.template.querySelector(".scroll-shadow");
-
-    if (shadow) {
-        const isScrollable = scrollHeight > clientHeight;
-        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 75; //subtracting to maintain the padding given to toc-items
-
-        shadow.style.opacity = isScrollable && !isAtBottom ? 1 : 0;
+    if (!this.scrolling) {
+        this.scrolling = true;
+        // Set a timeout to handle scroll event after a delay
+        setTimeout(() => {
+            // Check if scrolled
+            this.showBoxShadow =
+                listContainer.scrollTop > 0 &&
+                listContainer.scrollHeight > listContainer.clientHeight;
+            // Reset scrolling back to false after handling the scroll
+            this.scrolling = false;
+        }, 200);
     }
-
-    setTimeout(() => {
-        this.showBoxShadow = scrollTop > 0 && scrollHeight > clientHeight;
-    }, 200);
 }