dani/django-ram
1
0
Fork 0
mirror of https://github.com/daniviga/django-ram.git synced 2026-02-04 18:10:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Daniele Viganò
2026-01-07 23:24:16 +01:00
parent b8d10a68ca
commit a16801eb4b
7 changed files with 27 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
ram/portal/static/js/src/tabs_selector.js
View File

@@ -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
});
});
});