Reopen last article via "unclick" on menu items #127 (#1284)

Signed off by @D3V-D
kiwix · Nov 14, 2024 · 6b1f5b1 · 6b1f5b1
1 parent 7484e57
commit 6b1f5b1
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 27 deletions.
diff --git a/www/css/app.css b/www/css/app.css
@@ -310,6 +310,26 @@ iframe._invert, iframe._mwInvert {
     color: #337ab7;
 }
 
+/* Change focus styles on top nav-bar buttons (keep border-color for keyboard users) */
+.btn-nav-top:focus {
+    background: none;
+    border-color: #80bdff !important;
+    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25) !important;
+}
+
+/* Note: This one is !important to override the .active > button box-shadow */
+.btn-nav-top:hover {
+    background-color: #e2e6ea !important;
+    box-shadow: 0 0 0 -.1rem rgba(216,217,219,.8) !important;
+}
+
+.active > button {
+    color: #212529 !important;
+    background-color: #e2e6ea !important;
+    border-color: #dae0e5 !important;
+    box-shadow: 0 0 0 .2rem rgba(216,217,219,.5) !important;
+}
+
 /* Add missing margin to buttons */
 button {
     margin: 2px;

diff --git a/www/index.html b/www/index.html
@@ -96,9 +96,9 @@ <h5 class="modal-title" id="modalLabel">Modal title goes here</h5>
                     <!-- Collect the nav links, forms, and other content for toggling -->
                     <div class="collapse navbar-collapse" id="collapsibleNavbar">
                         <ul class="navbar-nav">
-                            <li id="liHomeNav" class="nav-item"><button tabindex="1" type="button" data-i18n="home" class="btn btn-light" id="btnHome">Home</button></li>
-                            <li id="liConfigureNav" class="nav-item"><button tabindex="2" type="button" data-i18n="configure" class="btn btn-light" id="btnConfigure">Configure</button></li>
-                            <li id="liAboutNav" class="nav-item"><button tabindex="3" type="button" data-i18n="about" class="btn btn-light" id="btnAbout">About</button></li>
+                            <li id="liHomeNav" class="nav-item"><button tabindex="1" type="button" data-i18n="home" class="btn btn-light btn-nav-top" id="btnHome">Home</button></li>
+                            <li id="liConfigureNav" class="nav-item"><button tabindex="2" type="button" data-i18n="configure" class="btn btn-light btn-nav-top" id="btnConfigure">Configure</button></li>
+                            <li id="liAboutNav" class="nav-item"><button tabindex="3" type="button" data-i18n="about" class="btn btn-light btn-nav-top" id="btnAbout">About</button></li>
                         </ul>
                     </div>
 

diff --git a/www/js/app.js b/www/js/app.js
@@ -381,6 +381,7 @@ document.getElementById('btnTop').addEventListener('click', function (event) {
     var articleContent = document.getElementById('articleContent');
     articleContent.contentWindow.scrollTo({ top: 0, behavior: 'smooth' });
 });
+
 // Top menu :
 document.getElementById('btnHome').addEventListener('click', function (event) {
     // Highlight the selected section in the navbar
@@ -413,34 +414,43 @@ document.getElementById('btnHome').addEventListener('click', function (event) {
     // Use a timeout of 400ms because uiUtil.applyAnimationToSection uses a timeout of 300ms
     setTimeout(resizeIFrame, 400);
 });
+
 document.getElementById('btnConfigure').addEventListener('click', function (event) {
     event.preventDefault();
-    // Highlight the selected section in the navbar
-    document.getElementById('liHomeNav').setAttribute('class', '');
-    document.getElementById('liConfigureNav').setAttribute('class', 'active');
-    document.getElementById('liAboutNav').setAttribute('class', '');
-    var navbarCollapse = document.querySelector('.navbar-collapse');
-    navbarCollapse.classList.remove('show');
-    // Show the selected content in the page
-    uiUtil.tabTransitionToSection('config', params.showUIAnimations);
-    refreshAPIStatus();
-    refreshCacheStatus();
-    uiUtil.checkUpdateStatus(appstate);
-    // Use a timeout of 400ms because uiUtil.applyAnimationToSection uses a timeout of 300ms
-    setTimeout(resizeIFrame, 400);
+    if (uiUtil.fromSection() === 'config') {
+        uiUtil.returnToCurrentPage();
+    } else {
+        // Highlight the selected section in the navbar
+        document.getElementById('liHomeNav').setAttribute('class', '');
+        document.getElementById('liConfigureNav').setAttribute('class', 'active');
+        document.getElementById('liAboutNav').setAttribute('class', '');
+        var navbarCollapse = document.querySelector('.navbar-collapse');
+        navbarCollapse.classList.remove('show');
+        // Show the selected content in the page
+        uiUtil.tabTransitionToSection('config', params.showUIAnimations);
+        refreshAPIStatus();
+        refreshCacheStatus();
+        uiUtil.checkUpdateStatus(appstate);
+        // Use a timeout of 400ms because uiUtil.applyAnimationToSection uses a timeout of 300ms
+        setTimeout(resizeIFrame, 400);
+    }
 });
 document.getElementById('btnAbout').addEventListener('click', function (event) {
     event.preventDefault();
-    // Highlight the selected section in the navbar
-    document.getElementById('liHomeNav').setAttribute('class', '');
-    document.getElementById('liConfigureNav').setAttribute('class', '');
-    document.getElementById('liAboutNav').setAttribute('class', 'active');
-    var navbarCollapse = document.querySelector('.navbar-collapse');
-    navbarCollapse.classList.remove('show');
-    // Show the selected content in the page
-    uiUtil.tabTransitionToSection('about', params.showUIAnimations);
-    // Use a timeout of 400ms because uiUtil.applyAnimationToSection uses a timeout of 300ms
-    setTimeout(resizeIFrame, 400);
+    if (uiUtil.fromSection() === 'about') {
+        uiUtil.returnToCurrentPage();
+    } else {
+        // Highlight the selected section in the navbar
+        document.getElementById('liHomeNav').setAttribute('class', '');
+        document.getElementById('liConfigureNav').setAttribute('class', '');
+        document.getElementById('liAboutNav').setAttribute('class', 'active');
+        var navbarCollapse = document.querySelector('.navbar-collapse');
+        navbarCollapse.classList.remove('show');
+        // Show the selected content in the page
+        uiUtil.tabTransitionToSection('about', params.showUIAnimations);
+        // Use a timeout of 400ms because uiUtil.applyAnimationToSection uses a timeout of 300ms
+        setTimeout(resizeIFrame, 400);
+    }
 });
 document.querySelectorAll('input[name="contentInjectionMode"][type="radio"]').forEach(function (element) {
     element.addEventListener('change', function () {

diff --git a/www/js/lib/uiUtil.js b/www/js/lib/uiUtil.js
@@ -940,7 +940,11 @@ function showReturnLink () {
 // Function to switch back to currently loaded page
 function returnToCurrentPage () {
     document.getElementById('liConfigureNav').classList.remove('active');
+    document.getElementById('liAboutNav').classList.remove('active');
     document.getElementById('liHomeNav').classList.add('active');
+    document.getElementById('btnHome').focus();
+    var navbarCollapse = document.querySelector('.navbar-collapse');
+    navbarCollapse.classList.remove('show');
     tabTransitionToSection('home', params.showUIAnimations);
     const welcomeText = document.getElementById('welcomeText');
     welcomeText.style.display = 'none';
@@ -1095,5 +1099,6 @@ export default {
     warnAndOpenExternalLinkInNewTab: warnAndOpenExternalLinkInNewTab,
     closestAnchorEnclosingElement: closestAnchorEnclosingElement,
     getBrowserLanguage: getBrowserLanguage,
-    returnToCurrentPage: returnToCurrentPage
+    returnToCurrentPage: returnToCurrentPage,
+    fromSection: fromSection
 };