Layout: Added scroll fade to the sidebars

[bookstack] / resources / js / components / tri-layout.js

diff --git a/resources/js/components/tri-layout.js b/resources/js/components/tri-layout.js
index be9388e8d4615f5919a81068ff57915bc9d52ae9..85533da5eeddf89838dc0001678046322a1237d4 100644 (file)
--- a/resources/js/components/tri-layout.js
+++ b/resources/js/components/tri-layout.js
@@ -5,6 +5,7 @@ export class TriLayout extends Component {
     setup() {
         this.container = this.$refs.container;
         this.tabs = this.$manyRefs.tab;
+        this.sidebarScrollContainers = this.$manyRefs.sidebarScrollContainer;
 
         this.lastLayoutType = 'none';
         this.onDestroy = null;
@@ -22,6 +23,8 @@ export class TriLayout extends Component {
         window.addEventListener('resize', () => {
             this.updateLayout();
         }, {passive: true});
+
+        this.setupSidebarScrollHandlers();
     }
 
     updateLayout() {
@@ -108,4 +111,28 @@ export class TriLayout extends Component {
         this.lastTabShown = tabName;
     }
 
+    setupSidebarScrollHandlers() {
+        for (const sidebar of this.sidebarScrollContainers) {
+            sidebar.addEventListener('scroll', () => this.handleSidebarScroll(sidebar), {
+                passive: true,
+            });
+            this.handleSidebarScroll(sidebar);
+        }
+
+        window.addEventListener('resize', () => {
+            for (const sidebar of this.sidebarScrollContainers) {
+                this.handleSidebarScroll(sidebar);
+            }
+        });
+    }
+
+    handleSidebarScroll(sidebar) {
+        const scrollable = sidebar.clientHeight !== sidebar.scrollHeight;
+        const atTop = sidebar.scrollTop === 0;
+        const atBottom = (sidebar.scrollTop + sidebar.clientHeight) === sidebar.scrollHeight;
+
+        sidebar.parentElement.classList.toggle('scroll-away-from-top', !atTop && scrollable);
+        sidebar.parentElement.classList.toggle('scroll-away-from-bottom', !atBottom && scrollable);
+    }
+
 }