Added crude example of captcha usage

[bookstack] / resources / assets / js / components / tri-layout.js

diff --git a/resources/assets/js/components/tri-layout.js b/resources/assets/js/components/tri-layout.js
index 0ae7df976b37e3ad97835a3da3f61e1a20659bd0..905ca03b1020d566859366d6e2ecc8e851edc784 100644 (file)
--- a/resources/assets/js/components/tri-layout.js
+++ b/resources/assets/js/components/tri-layout.js
@@ -66,28 +66,46 @@ 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', false);
+    }
+
+    /**
+     * Show the given tab
+     * @param tabName
+     */
+    showTab(tabName, scroll = true) {
         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;
-        setTimeout(() => {
-            document.documentElement.scrollTop = this.scrollCache[tab] || defaultScrollTop;
-        }, 50);
-
-        this.lastTabShown = tab;
+        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;
     }
 
 }