Fix a bug in tab's javascript and cleanup the code

.gitignore

@@ -129,7 +129,6 @@ dmypy.json
 
 # node.js / npm stuff
 node_modules
-package.json
 package-lock.json
 
 # our own stuff

package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "clean-css-cli": "^5.6.3",
+    "terser": "^5.44.1"
+  }
+}

ram/portal/static/js/main.min.js

@@ -3,4 +3,4 @@
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
 */
-(()=>{"use strict";const e=()=>localStorage.getItem("theme"),t=()=>{const t=e();return t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},a=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};a(t());const r=(e,t=!1)=>{const a=document.querySelector("#bd-theme");if(!a)return;const r=document.querySelector(".theme-icon-active i"),o=document.querySelector(`[data-bs-theme-value="${e}"]`),s=o.querySelector(".theme-icon i").getAttribute("class");document.querySelectorAll("[data-bs-theme-value]").forEach(e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}),o.classList.add("active"),o.setAttribute("aria-pressed","true"),r.setAttribute("class",s),t&&a.focus()};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",()=>{const r=e();"light"!==r&&"dark"!==r&&a(t())}),window.addEventListener("DOMContentLoaded",()=>{r(t()),document.querySelectorAll("[data-bs-theme-value]").forEach(e=>{e.addEventListener("click",()=>{const t=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(t),a(t),r(t,!0)})})})})(),document.addEventListener("DOMContentLoaded",function(){const e=window.location.hash.substring(1);if(e){const t=document.querySelector(`[data-bs-target="#nav-${e}"]`);t&&bootstrap.Tab.getOrCreateInstance(t).show()}document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(e=>{e.addEventListener("shown.bs.tab",e=>{const t=e.target.getAttribute("data-bs-target").replace("nav-","");history.replaceState(null,null,t)})});const t=document.getElementById("tabSelector");t&&(t.addEventListener("change",function(){const e=this.value,t=document.querySelector(`[data-bs-target="#${e}"]`);if(t){bootstrap.Tab.getOrCreateInstance(t).show()}}),document.querySelectorAll('[data-bs-toggle="tab"]').forEach(e=>{e.addEventListener("shown.bs.tab",e=>{const a=e.target.getAttribute("data-bs-target");t.value=a.substring(1)})}))});
+(()=>{"use strict";const e=()=>localStorage.getItem("theme"),t=()=>{const t=e();return t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")},a=e=>{"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};a(t());const r=(e,t=!1)=>{const a=document.querySelector("#bd-theme");if(!a)return;const r=document.querySelector(".theme-icon-active i"),o=document.querySelector(`[data-bs-theme-value="${e}"]`),s=o.querySelector(".theme-icon i").getAttribute("class");document.querySelectorAll("[data-bs-theme-value]").forEach(e=>{e.classList.remove("active"),e.setAttribute("aria-pressed","false")}),o.classList.add("active"),o.setAttribute("aria-pressed","true"),r.setAttribute("class",s),t&&a.focus()};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",()=>{const r=e();"light"!==r&&"dark"!==r&&a(t())}),window.addEventListener("DOMContentLoaded",()=>{r(t()),document.querySelectorAll("[data-bs-theme-value]").forEach(e=>{e.addEventListener("click",()=>{const t=e.getAttribute("data-bs-theme-value");(e=>{localStorage.setItem("theme",e)})(t),a(t),r(t,!0)})})})})(),document.addEventListener("DOMContentLoaded",function(){const e=document.getElementById("tabSelector"),t=window.location.hash.substring(1);if(t){const a=`#nav-${t}`,r=document.querySelector(`[data-bs-target="${a}"]`);r&&(bootstrap.Tab.getOrCreateInstance(r).show(),e.value=a)}document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(e=>{e.addEventListener("shown.bs.tab",e=>{const t=e.target.getAttribute("data-bs-target").replace("nav-","");history.replaceState(null,null,t)})}),e&&(e.addEventListener("change",function(){const e=this.value,t=document.querySelector(`[data-bs-target="${e}"]`);if(t){bootstrap.Tab.getOrCreateInstance(t).show()}}),document.querySelectorAll('[data-bs-toggle="tab"]').forEach(t=>{t.addEventListener("shown.bs.tab",t=>{const a=t.target.getAttribute("data-bs-target");e.value=a})}))});

ram/portal/static/js/src/tabs_selector.js

@@ -1,13 +1,17 @@
+// use Bootstrap 5's Tab component to manage tab navigation and synchronize with URL hash
 document.addEventListener("DOMContentLoaded", function () {
+  const selectElement = document.getElementById('tabSelector');
   // code to handle tab selection and URL hash synchronization
   const hash = window.location.hash.substring(1) // remove the '#' prefix
   if (hash) {
-    const trigger = document.querySelector(`[data-bs-target="#nav-${hash}"]`);
+    const target = `#nav-${hash}`;
+    const trigger = document.querySelector(`[data-bs-target="${target}"]`);
     if (trigger) {
       bootstrap.Tab.getOrCreateInstance(trigger).show();
+      selectElement.value = target // keep the dropdown in sync
     }
   }
-  //
+
   // update the URL hash when a tab is shown
   document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(btn => {
     btn.addEventListener('shown.bs.tab', event => {
@@ -17,14 +21,12 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 
   // allow tab selection via a dropdown on small screens
-  const selectElement = document.getElementById('tabSelector');
   if (!selectElement) return;
   selectElement.addEventListener('change', function () {
-    const targetSelector = this.value;
-    const triggerEl = document.querySelector(`[data-bs-target="#${targetSelector}"]`);
-    if (triggerEl) {
-      // Use Bootstrap 5.3's API — ensures transitions + ARIA updates
-      const tabInstance = bootstrap.Tab.getOrCreateInstance(triggerEl);
+    const target = this.value;
+    const trigger = document.querySelector(`[data-bs-target="${target}"]`);
+    if (trigger) {
+      const tabInstance = bootstrap.Tab.getOrCreateInstance(trigger);
       tabInstance.show();
     }
   });
@@ -33,7 +35,7 @@ document.addEventListener("DOMContentLoaded", function () {
   document.querySelectorAll('[data-bs-toggle="tab"]').forEach(btn => {
     btn.addEventListener('shown.bs.tab', event => {
       const target = event.target.getAttribute('data-bs-target');
-      selectElement.value = target.substring(1); // remove the '#' character
+      selectElement.value = target
     });
   });
 });

ram/portal/templates/base.html

@@ -9,7 +9,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="color-scheme" content="light dark">
-    <meta name="description" content="{{ site_conf.about}}">
+    <meta name="description" content="{{ site_conf.about|striptags }}">
     <meta name="author" content="{{ site_conf.site_author }}">
     <meta name="generator" content="Django Framework">
     <title>{% block title %}{{ title }}{% endblock %} - {{ site_conf.site_name }}</title>

ram/portal/templates/bookshelf/book.html

@@ -53,9 +53,9 @@
                 {% if documents %}<button class="nav-link" id="nav-documents-tab" data-bs-toggle="tab" data-bs-target="#nav-documents" type="button" role="tab" aria-controls="nav-documents" aria-selected="false">Documents</button>{% endif %}
               </nav>
               <select class="form-select d-lg-none mb-2" id="tabSelector" aria-label="Tab selector">
-                <option value="nav-summary" selected>Summary</option>
-                {% if data.toc.all %}<option value="nav-toc">Table of contents</option>{% endif %}
-                {% if documents %}<option value="nav-documents">Documents</option>{% endif %}
+                <option value="#nav-summary" selected>Summary</option>
+                {% if data.toc.all %}<option value="#nav-toc">Table of contents</option>{% endif %}
+                {% if documents %}<option value="#nav-documents">Documents</option>{% endif %}
               </select>
               <div class="tab-content" id="nav-tabContent">
                 <div class="tab-pane show active" id="nav-summary" role="tabpanel" aria-labelledby="nav-summary-tab">

ram/portal/templates/bookshelf/magazine.html

@@ -73,7 +73,7 @@
               <button class="nav-link active" id="nav-summary-tab" data-bs-toggle="tab" data-bs-target="#nav-summary" type="button" role="tab" aria-controls="nav-summary" aria-selected="true">Summary</button>
             </nav>
             <select class="form-select d-lg-none mb-2" id="tabSelector" aria-label="Tab selector">
-              <option value="nav-summary" selected>Summary</option>
+              <option value="#nav-summary" selected>Summary</option>
             </select>
             <div class="tab-content" id="nav-tabContent">
               <div class="tab-pane show active" id="nav-summary" role="tabpanel" aria-labelledby="nav-summary-tab">

ram/portal/templates/consist.html

@@ -102,7 +102,7 @@
               <button class="nav-link active" id="nav-summary-tab" data-bs-toggle="tab" data-bs-target="#nav-summary" type="button" role="tab" aria-controls="nav-summary" aria-selected="true">Summary</button>
             </nav>
             <select class="form-select d-lg-none mb-2" id="tabSelector" aria-label="Tab selector">
-              <option value="nav-summary" selected>Summary</option>
+              <option value="#nav-summary" selected>Summary</option>
             </select>
             <div class="tab-content" id="nav-tabContent">
               <div class="tab-pane show active table-responsive" id="nav-summary" role="tabpanel" aria-labelledby="nav-summary-tab">

ram/portal/templates/rollingstock.html

@@ -59,15 +59,15 @@
                 {% if consists %}<button class="nav-link" id="nav-consists-tab" data-bs-toggle="tab" data-bs-target="#nav-consists" type="button" role="tab" aria-controls="nav-consists" aria-selected="false">Consists</button>{% endif %}
               </nav>
               <select class="form-select d-lg-none mb-2" id="tabSelector" aria-label="Tab selector">
-                <option value="nav-summary" selected>Summary</option>
-                <option value="nav-model">Model</option>
-                <option value="nav-class">Class</option>
-                <option value="nav-company">Company</option>
-                {% if rolling_stock.decoder or rolling_stock.decoder_interface %}<option value="nav-dcc">DCC</option>{% endif %}
-                {% if documents or decoder_documents %}<option value="nav-documents">Documents</option>{% endif %}
-                {% if journal %}<option value="nav-journal">Journal</option>{% endif %}
-                {% if set %}<option value="nav-set">Set</option>{% endif %}
-                {% if consists %}<option value="nav-consists">Consists</option>{% endif %}
+                <option value="#nav-summary" selected>Summary</option>
+                <option value="#nav-model">Model</option>
+                <option value="#nav-class">Class</option>
+                <option value="#nav-company">Company</option>
+                {% if rolling_stock.decoder or rolling_stock.decoder_interface %}<option value="#nav-dcc">DCC</option>{% endif %}
+                {% if documents or decoder_documents %}<option value="#nav-documents">Documents</option>{% endif %}
+                {% if journal %}<option value="#nav-journal">Journal</option>{% endif %}
+                {% if set %}<option value="#nav-set">Set</option>{% endif %}
+                {% if consists %}<option value="#nav-consists">Consists</option>{% endif %}
               </select>
               {% with class=rolling_stock.rolling_class company=rolling_stock.rolling_class.company %}
               <div class="tab-content" id="nav-tabContent">

ram/ram/__init__.py

@@ -1,4 +1,4 @@
 from ram.utils import git_suffix
 
-__version__ = "0.19.9"
+__version__ = "0.19.10"
 __version__ += git_suffix(__file__)