webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-21 09:22:09 +03:00
Code Activity

Layout: Added scroll fade to the sidebars

Browse Source
This commit is contained in:
Dan Brown
2025-06-30 14:10:48 +01:00
parent 6045aff33a
commit 9186e77d27
3 changed files with 54 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
resources/js/components/tri-layout.js
View File

@ -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);
}
}