Move to bootstrap5 and several database schema updates.

assets/js/admin/faqs.js

@@ -1,9 +1,15 @@
-$( function() {
-    $( "#faqs" ).sortable({
-        axis: 'y',
-        update: function (event, ui) {
-            var data = $(this).sortable( "serialize", { key : "faq" } );
-            $("#form_sortOrder").val(data);
-        }
-    });
+import Sortable from 'sortablejs';
+
+document.addEventListener('DOMContentLoaded', function () {
+    const faqsContainer = document.getElementById('faqs');
+    if (faqsContainer) {
+        new Sortable(faqsContainer, {
+            animation: 150,
+            onUpdate: function (evt) {
+                const itemEls = faqsContainer.querySelectorAll('.card');
+                const data = Array.from(itemEls).map(el => 'faq[]=' + el.id.replace('faq_', '')).join('&');
+                document.getElementById('form_sortOrder').value = data;
+            }
+        });
+    }
 });

assets/js/app.js

@@ -1,12 +1,6 @@
 // assets/js/main.js
 
-const $ = require('jquery');
-
-global.$ = global.jQuery = $;
-
-require('popper.js');
-
-require('bootstrap');
-
-require('/scss/bewelcome.scss');
+import * as bootstrap from 'bootstrap';
+window.bootstrap = bootstrap;
 
+import '/scss/bewelcome.scss';

assets/js/bewelcome.js

@@ -1,28 +1,27 @@
-import 'jquery';
-import 'popper.js';
+import * as bootstrap from 'bootstrap'
 
-import 'bootstrap';
 import '../../public/script/common/common.js';
-import '../scss/bewelcome.scss';
 import 'cookieconsent/src/cookieconsent.js';
+
+import '../scss/bewelcome.scss';
 import 'cookieconsent/src/styles/animation.css';
 import 'cookieconsent/src/styles/base.css';
 import 'cookieconsent/src/styles/layout.css';
 import 'cookieconsent/src/styles/media.css';
 import 'cookieconsent/src/styles/themes/classic.css';
 import 'cookieconsent/src/styles/themes/edgeless.css';
 import '../scss/cookie-consent.scss';
-import 'select2/dist/js/select2.full.js';
-import './loginmessages.js';
 import '@fortawesome/fontawesome-free/js/all.js';
 import './collapsemenu.js';
 import './member-menu-dropdown.js';
 import './tom-select.js';
 
-$(".select2").select2({
-    theme: 'bootstrap4',
-    width: 'auto',
-    dropdownAutoWidth: true
-});
+window.bootstrap = bootstrap;
+
 
-$(".toast").toast('show');
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.toast').forEach(toastNode => {
+        const toast = new window.bootstrap.Toast(toastNode);
+        toast.show();
+    });
+});

assets/js/bsfileselect.js

@@ -1,7 +1,5 @@
 import bsCustomFileInput from 'bs-custom-file-input';
 
-$(function () {
-    $(document).ready(function () {
-        bsCustomFileInput.init();
-    });
+document.addEventListener('DOMContentLoaded', function () {
+    bsCustomFileInput.init();
 });

assets/js/faq.js

@@ -1,33 +1,45 @@
 import '../scss/faq.scss';
 
-var faqs = jQuery('#faqs');
-faqs.find("dd").hide();
-faqs.find("dt").click(function (e) {
-    e.preventDefault();
-    jQuery(this).next("#faqs dd").slideToggle(500);
+document.addEventListener('DOMContentLoaded', function () {
+    const faqs = document.getElementById('faqs');
+    if (faqs) {
+        const dds = faqs.querySelectorAll('dd');
+        dds.forEach(dd => dd.style.display = 'none');
 
+        const dts = faqs.querySelectorAll('dt');
+        dts.forEach(dt => {
+            dt.addEventListener('click', function (e) {
+                e.preventDefault();
+                const nextDd = this.nextElementSibling;
+                if (nextDd && nextDd.tagName === 'DD') {
+                    if (nextDd.style.display === 'none') {
+                        nextDd.style.display = 'block';
+                    } else {
+                        nextDd.style.display = 'none';
+                    }
+                }
+
+                const icon = this.querySelector('[data-fa-i2svg]');
+                if (icon) {
+                    icon.classList.toggle('fa-plus-circle');
+                    icon.classList.toggle('fa-minus-circle');
+                }
+            });
+        });
+    }
+
+    openHash();
 });
 
-document.addEventListener('DOMContentLoaded', function () {
-    jQuery('dt').on('click', function () {
-        jQuery(this)
-        .find('[data-fa-i2svg]')
-        .toggleClass('fa-plus-circle')
-        .toggleClass('fa-minus-circle');
-    });
-  });
-
 window.addEventListener('hashchange', openHash);
 
-function openHash()
-{
-    // Alerts every time the hash changes!
+function openHash() {
     let hash = location.hash;
-    $(hash).click();
-    $(document).scrollTop($(hash).offset().top);
+    if (hash) {
+        const element = document.querySelector(hash);
+        if (element) {
+            element.click();
+            element.scrollIntoView();
+        }
+    }
 }
-
-$(function () {
-    // Trigger the event (useful on page load).
-    openHash();
-});

assets/js/gallery.js

@@ -1,7 +1,7 @@
 let Masonry = require('masonry-layout');
 let imagesLoaded = require('imagesloaded');
 
-$(function () {
+document.addEventListener('DOMContentLoaded', function () {
     // init Masonry
     let grid = document.getElementById('masonry-grid');
 

assets/js/home.js

@@ -1,8 +1,8 @@
 import 'jquery';
-import 'popper.js';
+import '@popperjs/core';
+
+import * as bootstrap from 'bootstrap'
 
-import 'bootstrap';
-import '../scss/home.scss';
 import 'cookieconsent/src/cookieconsent.js';
 import 'cookieconsent/src/styles/animation.css';
 import 'cookieconsent/src/styles/base.css';
@@ -11,15 +11,19 @@ import 'cookieconsent/src/styles/media.css';
 import 'cookieconsent/src/styles/themes/classic.css';
 import 'cookieconsent/src/styles/themes/edgeless.css';
 import '../scss/cookie-consent.scss';
-import 'select2/dist/js/select2.full.js';
+// import 'select2/dist/js/select2.full.js';
 import '@fortawesome/fontawesome-free/js/all.js';
 import './collapsemenu.js';
+import '../scss/home.scss';
+
+window.bootstrap = bootstrap;
 
-$(".select2").select2({
+/* $(".select2").select2({
     theme: 'bootstrap4',
     width: 'auto',
     dropdownAutoWidth: true,
 });
+*/
 
 // ── Home login bottom sheet (mobile only) ──────────────────────────
 (function () {

assets/js/jquery-validation.js

@@ -1,7 +1 @@
-// assets/js/main.js
-
-const $ = require('jquery');
-
-global.$ = global.jQuery = $;
-
-require('jquery-validation');
+import 'jquery-validation';