webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-27 06:01:54 +03:00
Code Activity

Layout: Converted tri-layout component to ts

Browse Source
This commit is contained in:
Dan Brown
2025-06-30 15:36:27 +01:00
parent 9186e77d27
commit 0dcb2ec78c
1 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
resources/js/components/tri-layout.js → resources/js/components/tri-layout.ts
View File

@ -1,19 +1,22 @@
import {Component} from './component';
export class TriLayout extends Component {
private container!: HTMLElement;
private tabs!: HTMLElement[];
private sidebarScrollContainers!: HTMLElement[];
setup() {
this.container = this.$refs.container;
this.tabs = this.$manyRefs.tab;
this.sidebarScrollContainers = this.$manyRefs.sidebarScrollContainer;
this.lastLayoutType = 'none';
this.onDestroy = null;
this.scrollCache = {
private lastLayoutType = 'none';
private onDestroy: (()=>void)|null = null;
private scrollCache: Record<string, number> = {
content: 0,
info: 0,
};
this.lastTabShown = 'content';
private lastTabShown = 'content';
setup(): void {
this.container = this.$refs.container;
this.tabs = this.$manyRefs.tab;
this.sidebarScrollContainers = this.$manyRefs.sidebarScrollContainer;
// Bind any listeners
this.mobileTabClick = this.mobileTabClick.bind(this);
@ -27,7 +30,7 @@ export class TriLayout extends Component {
this.setupSidebarScrollHandlers();
}
updateLayout() {
updateLayout(): void {
let newLayout = 'tablet';
if (window.innerWidth <= 1000) newLayout = 'mobile';
if (window.innerWidth > 1400) newLayout = 'desktop';
@ -59,16 +62,15 @@ export class TriLayout extends Component {
};
}
setupDesktop() {
setupDesktop(): void {
//
}
/**
* Action to run when the mobile info toggle bar is clicked/tapped
* @param event
*/
mobileTabClick(event) {
const {tab} = event.target.dataset;
mobileTabClick(event: MouseEvent): void {
const tab = (event.target as HTMLElement).dataset.tab || '';
this.showTab(tab);
}
@ -76,16 +78,14 @@ export class TriLayout extends Component {
* Show the content tab.
* Used by the page-display component.
*/
showContent() {
showContent(): void {
this.showTab('content', false);
}
/**
* Show the given tab
* @param {String} tabName
* @param {Boolean }scroll
*/
showTab(tabName, scroll = true) {
showTab(tabName: string, scroll: boolean = true): void {
this.scrollCache[this.lastTabShown] = document.documentElement.scrollTop;
// Set tab status
@ -100,7 +100,7 @@ export class TriLayout extends Component {
// Set the scroll position from cache
if (scroll) {
const pageHeader = document.querySelector('header');
const pageHeader = document.querySelector('header') as HTMLElement;
const defaultScrollTop = pageHeader.getBoundingClientRect().bottom;
document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
setTimeout(() => {
@ -111,7 +111,7 @@ export class TriLayout extends Component {
this.lastTabShown = tabName;
}
setupSidebarScrollHandlers() {
setupSidebarScrollHandlers(): void {
for (const sidebar of this.sidebarScrollContainers) {
sidebar.addEventListener('scroll', () => this.handleSidebarScroll(sidebar), {
passive: true,
@ -126,13 +126,15 @@ export class TriLayout extends Component {
});
}
handleSidebarScroll(sidebar) {
handleSidebarScroll(sidebar: HTMLElement): void {
const scrollable = sidebar.clientHeight !== sidebar.scrollHeight;
const atTop = sidebar.scrollTop === 0;
const atBottom = (sidebar.scrollTop + sidebar.clientHeight) === sidebar.scrollHeight;
if (sidebar.parentElement) {
sidebar.parentElement.classList.toggle('scroll-away-from-top', !atTop && scrollable);
sidebar.parentElement.classList.toggle('scroll-away-from-bottom', !atBottom && scrollable);
}
}
}