BookStack/resources/js/components/tri-layout.js
2019-09-06 23:36:16 +01:00

113 lines
3.0 KiB
JavaScript

class TriLayout {
constructor(elem) {
this.elem = elem;
this.lastLayoutType = 'none';
this.onDestroy = null;
this.scrollCache = {
'content': 0,
'info': 0,
};
this.lastTabShown = 'content';
// Bind any listeners
this.mobileTabClick = this.mobileTabClick.bind(this);
// Watch layout changes
this.updateLayout();
window.addEventListener('resize', event => {
this.updateLayout();
}, {passive: true});
}
updateLayout() {
let newLayout = 'tablet';
if (window.innerWidth <= 1000) newLayout = 'mobile';
if (window.innerWidth >= 1400) newLayout = 'desktop';
if (newLayout === this.lastLayoutType) return;
if (this.onDestroy) {
this.onDestroy();
this.onDestroy = null;
}
if (newLayout === 'desktop') {
this.setupDesktop();
} else if (newLayout === 'mobile') {
this.setupMobile();
}
this.lastLayoutType = newLayout;
}
setupMobile() {
const layoutTabs = document.querySelectorAll('[tri-layout-mobile-tab]');
for (let tab of layoutTabs) {
tab.addEventListener('click', this.mobileTabClick);
}
this.onDestroy = () => {
for (let tab of layoutTabs) {
tab.removeEventListener('click', this.mobileTabClick);
}
}
}
setupDesktop() {
//
}
/**
* Action to run when the mobile info toggle bar is clicked/tapped
* @param event
*/
mobileTabClick(event) {
const tab = event.target.getAttribute('tri-layout-mobile-tab');
this.showTab(tab);
}
/**
* Show the content tab.
* Used by the page-display component.
*/
showContent() {
this.showTab('content', false);
}
/**
* Show the given tab
* @param tabName
*/
showTab(tabName, scroll = true) {
this.scrollCache[this.lastTabShown] = document.documentElement.scrollTop;
// Set tab status
const tabs = document.querySelectorAll('.tri-layout-mobile-tab');
for (let tab of tabs) {
const isActive = (tab.getAttribute('tri-layout-mobile-tab') === tabName);
tab.classList.toggle('active', isActive);
}
// Toggle section
const showInfo = (tabName === 'info');
this.elem.classList.toggle('show-info', showInfo);
// Set the scroll position from cache
if (scroll) {
const pageHeader = document.querySelector('header');
const defaultScrollTop = pageHeader.getBoundingClientRect().bottom;
document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
setTimeout(() => {
document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
}, 50);
}
this.lastTabShown = tabName;
}
}
export default TriLayout;