From 78f5f44460cb468133becc05169afdc1bf6b32ac Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 25 May 2019 15:37:49 +0100
Subject: [PATCH] Updated page navigation click to show content tab on mobile

Fixes #1454
---
 .../assets/js/components/page-display.js      |  1 +
 resources/assets/js/components/tri-layout.js  | 32 ++++++++++++++-----
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/resources/assets/js/components/page-display.js b/resources/assets/js/components/page-display.js
index e87966d7d..513a07b8d 100644
--- 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 => {
+            window.components['tri-layout'][0].showContent();
             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 0ae7df976..5cd49b74f 100644
--- 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');
+        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;
     }
 
 }