https://measurethat.net/js/bootstrap5-compat.js?v=RiNauzRvei_CslxDW-yex64ro0e1RgrI8rS8ZWQPY7U

1/**
2 * Bootstrap 5 Compatibility Script
3 * Converts Bootstrap 3 data-* attributes to Bootstrap 5 data-bs-* attributes
4 * This allows gradual migration while maintaining functionality
5 */
6
7(function() {
8    'use strict';
9
10    /**
11     * Initialize Bootstrap 5 components with backward compatibility
12     */
13    function initBootstrapCompat() {
14        // Wait for Bootstrap 5 to load
15        if (typeof bootstrap === 'undefined') {
16            setTimeout(initBootstrapCompat, 100);
17            return;
18        }
19
20        // Convert data-toggle to data-bs-toggle for all elements
21        const toggleElements = document.querySelectorAll('[data-toggle]');
22        toggleElements.forEach(function(element) {
23            const toggleValue = element.getAttribute('data-toggle');
24            if (!element.hasAttribute('data-bs-toggle')) {
25                element.setAttribute('data-bs-toggle', toggleValue);
26            }
27        });
28
29        // Convert data-target to data-bs-target for all elements
30        const targetElements = document.querySelectorAll('[data-target]');
31        targetElements.forEach(function(element) {
32            const targetValue = element.getAttribute('data-target');
33            if (!element.hasAttribute('data-bs-target')) {
34                element.setAttribute('data-bs-target', targetValue);
35            }
36        });
37
38        // Convert data-parent to data-bs-parent for collapse elements
39        const parentElements = document.querySelectorAll('[data-parent]');
40        parentElements.forEach(function(element) {
41            const parentValue = element.getAttribute('data-parent');
42            if (!element.hasAttribute('data-bs-parent')) {
43                element.setAttribute('data-bs-parent', parentValue);
44            }
45        });
46
47        // Initialize all modals
48        const modalElements = document.querySelectorAll('.modal');
49        modalElements.forEach(function(element) {
50            if (!element._bootstrap_modal) {
51                element._bootstrap_modal = new bootstrap.Modal(element);
52            }
53        });
54
55        // Handle navbar toggle for mobile
56        const navbarToggles = document.querySelectorAll('.navbar-toggle');
57        navbarToggles.forEach(function(toggle) {
58            toggle.addEventListener('click', function() {
59                const target = this.getAttribute('data-bs-target') || this.getAttribute('data-target');
60                if (target) {
61                    const collapseElement = document.querySelector(target);
62                    if (collapseElement) {
63                        const bsCollapse = bootstrap.Collapse.getOrCreateInstance(collapseElement);
64                        bsCollapse.toggle();
65                    }
66                }
67            });
68        });
69
70        // Handle dropdown toggles
71        const dropdownToggles = document.querySelectorAll('[data-toggle="dropdown"], [data-bs-toggle="dropdown"]');
72        dropdownToggles.forEach(function(toggle) {
73            if (!toggle._bootstrap_dropdown) {
74                toggle._bootstrap_dropdown = new bootstrap.Dropdown(toggle);
75            }
76        });
77
78        console.log('Bootstrap 5 compatibility initialized');
79    }
80
81    // Initialize on DOMContentLoaded
82    if (document.readyState === 'loading') {
83        document.addEventListener('DOMContentLoaded', initBootstrapCompat);
84    } else {
85        initBootstrapCompat();
86    }
87})();