new signup and finalize page

assets/js/accommodation_widget.js

@@ -14,10 +14,12 @@ const radioHandler = (event) => {
             hostingInterest.classList.remove('u:hidden');
             hostingInterest.classList.add('u:block');
         }
-        accommodationRadiobuttons.forEach( (radio) => {
-            radio.parentElement.classList.remove('u:bg-gray-400')
+        accommodationRadiobuttons.forEach((radio) => {
+            const optionContent = radio.parentElement.querySelector('.signup-finalize__accommodation-content');
+            optionContent?.classList.remove('signup-finalize__accommodation-content--active');
         })
-        event.target.parentElement.classList.add('u:bg-gray-400');
+        const selectedOptionContent = event.target.parentElement.querySelector('.signup-finalize__accommodation-content');
+        selectedOptionContent?.classList.add('signup-finalize__accommodation-content--active');
     }
 }
 
@@ -39,15 +41,21 @@ const slider = document.querySelectorAll('input[type="range"]');
 
 function updateValueOutput(value) {
     const valueOutput = document.getElementsByClassName('rangeSlider__value-output');
+    const markerIndex = Math.max(0, Math.min(markers.length - 1, Number(value)));
     if (valueOutput.length) {
-        valueOutput[0].innerHTML = markers[value];
+        valueOutput[0].innerHTML = markers[markerIndex];
     }
 }
 
 const initializeHostingInterestSlider = () => {
+    if (slider.length && Number.parseInt(slider[0].value ?? '0', 10) <= 0) {
+        slider[0].value = '5';
+    }
+
     return rangeSlider.create(slider, {
         onInit: function () {
-            updateValueOutput(0);
+            const currentValue = Number.parseInt(slider[0]?.value ?? '0', 10);
+            updateValueOutput(Number.isNaN(currentValue) ? 5 : currentValue);
         },
         onSlide: function (value, percent, position) {
             updateValueOutput(value);

assets/js/gallery.js

@@ -1,19 +1,2 @@
-let Masonry = require('masonry-layout');
-let imagesLoaded = require('imagesloaded');
-
-document.addEventListener('DOMContentLoaded', function () {
-    // init Masonry
-    let grid = document.getElementById('masonry-grid');
-
-    if (grid !== null)
-    {
-        var msnry = new Masonry( grid, {
-            percentPosition: true
-        });
-
-        imagesLoaded( grid ).on( 'progress', function() {
-            // layout Masonry after each image loads
-            msnry.layout();
-        });
-    }
-});
+// Gallery layout is handled entirely via CSS Grid (see #masonry-grid in _layouts.general.css).
+// This entry file is kept so existing pages that include `gallery.js` continue to work without changes.

assets/js/lightbox.js

@@ -1,6 +1,8 @@
+import '../scss/_lightbox.scss';
 import Lightbox from 'bs5-lightbox';
 
-document.querySelectorAll('[data-toggle="lightbox"]')
-    .forEach(
-        el => el.addEventListener('click', Lightbox.initialize)
-    );
+// bs5-lightbox registers `[data-toggle="lightbox"]` when this module loads.
+// Only bind `[data-bs-toggle="lightbox"]` here — binding both would run two handlers on the same link.
+document.querySelectorAll('[data-bs-toggle="lightbox"]').forEach((el) => {
+  el.addEventListener('click', Lightbox.initialize);
+});

assets/js/profile/edit.js

@@ -7,20 +7,24 @@ editLanguages.forEach(editLanguage => {
         editLanguages.forEach(editLanguage => {
             editLanguage.classList.add('btn-outline-primary')
             editLanguage.classList.remove('btn-primary')
+            editLanguage.classList.remove('p-edit-header__lang-tab--active')
+            editLanguage.setAttribute('aria-selected', 'false')
         })
 
         const languages = document.querySelectorAll('[id^=profile-language-]')
         languages.forEach(language => {
             language.classList.add('u:hidden!')
         })
 
-        const language = e.target.dataset.editLanguage
+        const language = e.currentTarget.dataset.editLanguage
         const activeLanguage = document.getElementById("profile-language-" + language)
-        const editLanguageButton = document.querySelector("[data-edit-language=" + language + "]")
+        const editLanguageButton = e.currentTarget
 
         activeLanguage.classList.remove('u:hidden!')
         editLanguageButton.classList.add("btn-primary")
         editLanguageButton.classList.remove("btn-outline-primary")
+        editLanguageButton.classList.add("p-edit-header__lang-tab--active")
+        editLanguageButton.setAttribute('aria-selected', 'true')
     })
 })
 

assets/js/profile/edit_languages.js

@@ -1,4 +1,4 @@
-import {initializeTomSelects, destroyTomSelects} from "../tom-select";
+import {initializeTomSelects} from "../tom-select";
 
 document
     .querySelectorAll('.js-add-language')
@@ -20,7 +20,6 @@ function addFormToCollection(e) {
         );
 
     collectionHolder.insertAdjacentHTML('beforeend', html)
-    collectionHolder.insertAdjacentHTML('beforeend', '<hr class="u:bg-bewelcome" style="margin-top:0">')
     collectionHolder.dataset.index++
 
     addDeleteLanguageEventListener()
@@ -29,7 +28,6 @@ function addFormToCollection(e) {
 
 function deleteFormFromCollection(e) {
     const current  = document.getElementById(e.currentTarget.dataset.related);
-    console.log(current)
     current.remove()
 
     const collectionHolder = document.querySelector('.' + e.currentTarget.dataset.collectionHolderClass);

assets/js/profile/preference.js

@@ -18,8 +18,6 @@ preferences.forEach(
 
             await fetch("/members/update/preference", { method: 'POST', body: form })
                 .then(() => { /* Nothing to do here */ })
-
-            console.log(form)
         })
     }
 )

assets/js/profile/profile.js

@@ -1,3 +1,6 @@
+import { Toast } from 'bootstrap';
+document.querySelectorAll('.p-toast[data-bs-autohide="true"]').forEach(el => new Toast(el).show());
+
 const L = require("leaflet");
 
 const locationMaps = document.querySelectorAll('[id^=location-map]')
@@ -8,7 +11,12 @@ locationMaps.forEach( locationMap => {
 
     const map = L.map(locationMap, {
         zoomControl: false,
-        boxZoom: false
+        boxZoom: false,
+        dragging: false,
+        scrollWheelZoom: false,
+        touchZoom: false,
+        doubleClickZoom: false,
+        keyboard: false,
     }).setView([latitude, longitude], 10)
 
     map.attributionControl.setPrefix(false)

assets/js/profile/show.js

@@ -1,11 +1,12 @@
-const languageSwitch = document.getElementById("language-switch");
-
-languageSwitch.addEventListener("change", e => {
-    const languages = document.querySelectorAll('[id^=profile-language-]');
-    languages.forEach(language => {
-        language.classList.add('u:hidden!');
-    })
-    const current = document.getElementById("profile-language-" + e.target.value);
-    current.classList.remove('u:hidden!')
-})
-
+import { Tooltip } from 'bootstrap';
+
+document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new Tooltip(el));
+
+document.querySelectorAll('.p-lang-pill').forEach(btn => {
+    btn.addEventListener('click', () => {
+        document.querySelectorAll('[id^=profile-language-]').forEach(el => el.classList.add('u:hidden!'));
+        document.getElementById('profile-language-' + btn.dataset.lang).classList.remove('u:hidden!');
+        document.querySelectorAll('.p-lang-pill').forEach(b => b.classList.remove('p-lang-pill--active'));
+        btn.classList.add('p-lang-pill--active');
+    });
+});