colin
/
bookstack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated page navigation click to show content tab on mobile 

Fixes #1454
This commit is contained in:
Dan Brown 2019-05-25 15:37:49 +01:00
parent 35e6635379
commit 78f5f44460
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/assets/js/components/page-display.js
View File

@ -20,6 +20,7 @@ class PageDisplay {
// Sidebar page nav click event
$('.sidebar-page-nav').on('click', 'a', event => {
window.components['tri-layout'][0].showContent();
this.goToText(event.target.getAttribute('href').substr(1));
});
}

32
resources/assets/js/components/tri-layout.js
View File

@ -66,28 +66,44 @@ class TriLayout {
*/
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');
}
/**
* Show the given tab
* @param tabName
*/
showTab(tabName) {
this.scrollCache[this.lastTabShown] = document.documentElement.scrollTop;
// Set tab status
const activeTabs = document.querySelectorAll('.tri-layout-mobile-tab.active');
for (let tab of activeTabs) {
tab.classList.remove('active');
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);
}
event.target.classList.add('active');
// Toggle section
const showInfo = (tab === 'info');
const showInfo = (tabName === 'info');
this.elem.classList.toggle('show-info', showInfo);
// Set the scroll position from cache
const pageHeader = document.querySelector('header');
const defaultScrollTop = pageHeader.getBoundingClientRect().bottom;
document.documentElement.scrollTop = this.scrollCache[tab] || defaultScrollTop;
document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
setTimeout(() => {
document.documentElement.scrollTop = this.scrollCache[tab] || defaultScrollTop;
document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
}, 50);
this.lastTabShown = tab;
this.lastTabShown = tabName;
}
}