Updated page navigation click to show content tab on mobile

Fixes #1454

diff --git a/resources/assets/js/components/page-display.js b/resources/assets/js/components/page-display.js
index e87966d7dbbcfc7b83b8fc7b596f36e034bbafd2..513a07b8df924e8203099fa06792577ca48e3b10 100644 (file)
--- a/resources/assets/js/components/page-display.js
+++ b/resources/assets/js/components/page-display.js
@@ -20,6 +20,7 @@ class PageDisplay {
 
         // Sidebar page nav click event
         $('.sidebar-page-nav').on('click', 'a', event => {
 
         // 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));
         });
     }
             this.goToText(event.target.getAttribute('href').substr(1));
         });
     }

diff --git a/resources/assets/js/components/tri-layout.js b/resources/assets/js/components/tri-layout.js
index 0ae7df976b37e3ad97835a3da3f61e1a20659bd0..5cd49b74fa67ddcc3f0928919e88cc18f7599040 100644 (file)
--- a/resources/assets/js/components/tri-layout.js
+++ b/resources/assets/js/components/tri-layout.js
@@ -66,28 +66,44 @@ class TriLayout {
      */
     mobileTabClick(event) {
         const tab = event.target.getAttribute('tri-layout-mobile-tab');
      */
     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
         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
 
         // 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;
         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(() => {
         setTimeout(() => {

-            document.documentElement.scrollTop = this.scrollCache[tab] || defaultScrollTop;
+            document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;

         }, 50);
 
         }, 50);
 

-        this.lastTabShown = tab;
+        this.lastTabShown = tabName;

     }
 
 }
     }
 
 }