1// Bootstrap 3 â Bootstrap 5 compatibility bridge 2// Converts legacy data-toggle/data-target/data-parent attributes to data-bs-* equivalents 3// and manually initializes Bootstrap 5 Collapse components for dynamically rendered content 4// (e.g., FAQ pages where HTML is loaded from the database with BS3-style attributes). 5 6document.addEventListener('DOMContentLoaded', function () { 7 8 // --- Attribute bridging --- 9 10 document.querySelectorAll('[data-toggle]').forEach(function (element) { 11 if (!element.hasAttribute('data-bs-toggle')) { 12 element.setAttribute('data-bs-toggle', element.getAttribute('data-toggle')); 13 } 14 }); 15 16 document.querySelectorAll('[data-target]').forEach(function (element) { 17 if (!element.hasAttribute('data-bs-target')) { 18 element.setAttribute('data-bs-target', element.getAttribute('data-target')); 19 } 20 }); 21 22 document.querySelectorAll('[data-parent]').forEach(function (element) { 23 if (!element.hasAttribute('data-bs-parent')) { 24 element.setAttribute('data-bs-parent', element.getAttribute('data-parent')); 25 } 26 }); 27 28 // For <a> elements using href as the collapse target (BS3 pattern), 29 // copy href to data-bs-target if not already set 30 document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(function (element) { 31 if (!element.hasAttribute('data-bs-target') && !element.hasAttribute('data-target')) { 32 var href = element.getAttribute('href'); 33 if (href && href.charAt(0) === '#') { 34 element.setAttribute('data-bs-target', href); 35 } 36 } 37 }); 38 39 // --- Bootstrap 5 Collapse manual initialization --- 40 // Bootstrap 5 auto-init runs on DOMContentLoaded before this bridge, 41 // so we must manually create Collapse instances for the bridged elements. 42 43 if (typeof bootstrap !== 'undefined' && bootstrap.Collapse) { 44 document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(function (trigger) { 45 var targetSelector = trigger.getAttribute('data-bs-target') || trigger.getAttribute('href'); 46 if (targetSelector) { 47 var targetEl = document.querySelector(targetSelector); 48 if (targetEl && !bootstrap.Collapse.getInstance(targetEl)) { 49 // Initialize the Collapse component (toggle: false prevents auto-show) 50 new bootstrap.Collapse(targetEl, { toggle: false }); 51 } 52 } 53 }); 54 } 55 56 // --- Navbar compatibility --- 57 58 document.querySelectorAll('.navbar-toggle').forEach(function (toggle) { 59 toggle.classList.add('navbar-toggler'); 60 if (!toggle.getAttribute('aria-label')) { 61 toggle.setAttribute('aria-label', 'Toggle navigation'); 62 } 63 64 if (!toggle.querySelector('.navbar-toggler-icon')) { 65 var icon = document.createElement('span'); 66 icon.className = 'navbar-toggler-icon'; 67 toggle.appendChild(icon); 68 } 69 }); 70 71 document.querySelectorAll('.navbar-inverse').forEach(function (navbar) { 72 navbar.classList.add('navbar-dark', 'bg-dark'); 73 }); 74});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.