Use Tom Select defaults for event filter

contao/templates/frontend/event_filter.html.twig

@@ -68,12 +68,12 @@
         pointer-events: none;
     }
 
-    #eventfilters .widget-select.active .ss-main {
+    #eventfilters .widget-select.active .ts-control {
         outline: 2px solid currentColor;
         outline-offset: 2px;
     }
 
-    #eventfilters .ss-main:focus-visible {
+    #eventfilters .ts-control:focus-within {
         outline: 2px solid currentColor;
         outline-offset: 2px;
     }
@@ -82,14 +82,10 @@
         display: none;
     }
 
-    #eventfilters .ss-content,
-    #eventfilters .ss-list {
-        overscroll-behavior: contain;
-    }
 </style>
 
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css">
-<script src="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
 
 <script type="module">
     const filters = document.getElementById('eventfilters');
@@ -122,25 +118,19 @@
     let currentFilter = { type: 'all', value: 'all' };
     let suppressedChangeEvents = 0;
 
-    const initSlimSelect = (selectElement) => {
+    const initTomSelect = (selectElement) => {
-        if (!selectElement || 'undefined' === typeof window.SlimSelect) {
+        if (!selectElement || 'undefined' === typeof window.TomSelect) {
             return null;
         }
 
-        return new window.SlimSelect({
+        return new window.TomSelect(selectElement);
-            select: selectElement,
-            settings: {
-                showSearch: false,
-                allowDeselect: false,
-            },
-        });
     };
 
-    const tagSlim = initSlimSelect(tagSelect);
+    const tagTom = initTomSelect(tagSelect);
-    const locationSlim = initSlimSelect(locationSelect);
+    const locationTom = initTomSelect(locationSelect);
-    const orgSlim = initSlimSelect(orgSelect);
+    const orgTom = initTomSelect(orgSelect);
 
-    const setSelectValue = (selectElement, slimInstance, value) => {
+    const setSelectValue = (selectElement, tomInstance, value) => {
         if (!selectElement) {
             return;
         }
@@ -152,8 +142,8 @@
         suppressedChangeEvents += 1;
 
         try {
-            if (slimInstance) {
+            if (tomInstance) {
-                slimInstance.setSelected(value);
+                tomInstance.setValue(value, true);
             } else {
                 selectElement.value = value;
             }
@@ -285,8 +275,8 @@
 
         const selectedValue = tagSelect.value;
 
-        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(locationSelect, locationTom, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(orgSelect, orgTom, 'all');
 
         applyFilter(
             selectedValue === 'all'
@@ -302,8 +292,8 @@
 
         const selectedValue = locationSelect.value;
 
-        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(tagSelect, tagTom, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(orgSelect, orgTom, 'all');
 
         applyFilter(
             selectedValue === 'all'
@@ -319,8 +309,8 @@
 
         const selectedValue = orgSelect.value;
 
-        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(tagSelect, tagTom, 'all');
-        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(locationSelect, locationTom, 'all');
 
         applyFilter(
             selectedValue === 'all'
@@ -330,132 +320,12 @@
     });
 
     resetButton?.addEventListener('click', () => {
-        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(tagSelect, tagTom, 'all');
-        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(locationSelect, locationTom, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(orgSelect, orgTom, 'all');
 
         applyFilter({ type: 'all', value: 'all' });
     });
 
-    const getDropdownFromTarget = (target) => {
-        if (!(target instanceof Element)) {
-            return null;
-        }
-
-        return target.closest('.ss-content, .ss-list');
-    };
-
-    const getOpenDropdown = () => {
-        const openContent = document.querySelector('.ss-content.ss-open');
-
-        if (openContent) {
-            return openContent;
-        }
-
-        const openMain = document.querySelector('.ss-main.ss-open');
-
-        if (!openMain) {
-            return null;
-        }
-
-        const scope = openMain.parentElement || document;
-        return scope.querySelector('.ss-content');
-    };
-
-    const getScrollContainer = (targetDropdown) => {
-        const openDropdown = getOpenDropdown();
-
-        if (!openDropdown) {
-            return null;
-        }
-
-        if (!targetDropdown) {
-            return openDropdown;
-        }
-
-        const contentContainer = targetDropdown.closest('.ss-content');
-        return contentContainer || openDropdown;
-    };
-
-    const shouldBlockBoundaryScroll = (scrollContainer, delta) => {
-        if (!scrollContainer) {
-            return false;
-        }
-
-        if (scrollContainer.scrollHeight <= scrollContainer.clientHeight) {
-            return true;
-        }
-
-        if (delta === 0) {
-            return false;
-        }
-
-        const top = scrollContainer.scrollTop;
-        const height = scrollContainer.clientHeight;
-        const scrollHeight = scrollContainer.scrollHeight;
-
-        const atTop = top <= 0;
-        const atBottom = top + height >= scrollHeight - 1;
-
-        return (atTop && delta < 0) || (atBottom && delta > 0);
-    };
-
-    let lastTouchY = null;
-
-    document.addEventListener('wheel', (event) => {
-        const dropdown = getDropdownFromTarget(event.target);
-        const scrollContainer = getScrollContainer(dropdown);
-
-        if (!scrollContainer) {
-            return;
-        }
-
-        if (shouldBlockBoundaryScroll(scrollContainer, event.deltaY)) {
-            event.preventDefault();
-        }
-
-        event.stopPropagation();
-    }, { passive: false, capture: true });
-
-    document.addEventListener('touchstart', (event) => {
-        const dropdown = getDropdownFromTarget(event.target);
-        const scrollContainer = getScrollContainer(dropdown);
-
-        if (!scrollContainer || event.touches.length === 0) {
-            lastTouchY = null;
-            return;
-        }
-
-        lastTouchY = event.touches[0].clientY;
-    }, { passive: true, capture: true });
-
-    document.addEventListener('touchmove', (event) => {
-        const dropdown = getDropdownFromTarget(event.target);
-        const scrollContainer = getScrollContainer(dropdown);
-
-        if (!scrollContainer || event.touches.length === 0 || lastTouchY === null) {
-            return;
-        }
-
-        const currentTouchY = event.touches[0].clientY;
-        const delta = lastTouchY - currentTouchY;
-
-        if (shouldBlockBoundaryScroll(scrollContainer, delta)) {
-            event.preventDefault();
-        }
-
-        event.stopPropagation();
-
-        lastTouchY = currentTouchY;
-    }, { passive: false, capture: true });
-
-    document.addEventListener('touchend', () => {
-        lastTouchY = null;
-    }, { passive: true, capture: true });
-
-    document.addEventListener('touchcancel', () => {
-        lastTouchY = null;
-    }, { passive: true, capture: true });
-
     applyFilter(currentFilter);
 </script>