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 click event
$('.sidebar-page-nav').on('click', 'a', event => { $('.sidebar-page-nav').on('click', 'a', event => {
window.components['tri-layout'][0].showContent();
this.goToText(event.target.getAttribute('href').substr(1)); 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) { mobileTabClick(event) {
const tab = event.target.getAttribute('tri-layout-mobile-tab'); 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; this.scrollCache[this.lastTabShown] = document.documentElement.scrollTop;
// Set tab status // Set tab status
const activeTabs = document.querySelectorAll('.tri-layout-mobile-tab.active'); const tabs = document.querySelectorAll('.tri-layout-mobile-tab');
for (let tab of activeTabs) { for (let tab of tabs) {
tab.classList.remove('active'); const isActive = (tab.getAttribute('tri-layout-mobile-tab') === tabName);
tab.classList.toggle('active', isActive);
} }
event.target.classList.add('active');
// Toggle section // Toggle section
const showInfo = (tab === 'info'); const showInfo = (tabName === 'info');
this.elem.classList.toggle('show-info', showInfo); this.elem.classList.toggle('show-info', showInfo);
// Set the scroll position from cache // Set the scroll position from cache
const pageHeader = document.querySelector('header'); const pageHeader = document.querySelector('header');
const defaultScrollTop = pageHeader.getBoundingClientRect().bottom; const defaultScrollTop = pageHeader.getBoundingClientRect().bottom;
document.documentElement.scrollTop = this.scrollCache[tab] || defaultScrollTop; document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
setTimeout(() => { setTimeout(() => {
document.documentElement.scrollTop = this.scrollCache[tab] || defaultScrollTop; document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
}, 50); }, 50);
this.lastTabShown = tab; this.lastTabShown = tabName;
} }
} }