Replace SlimSelect with Tom Select in 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,13 @@
         display: none;
     }
 
-    #eventfilters .ss-content,
+    #eventfilters .ts-dropdown-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 +121,27 @@
     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,
+            create: false,
-            settings: {
+            maxItems: 1,
-                showSearch: false,
+            closeAfterSelect: true,
-                allowDeselect: false,
+            allowEmptyOption: true,
-            },
+            searchField: [],
+            controlInput: null,
+            dropdownParent: selectElement.closest('.widget-select') || undefined,
         });
     };
 
-    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 +153,8 @@
         suppressedChangeEvents += 1;
 
         try {
-            if (slimInstance) {
+            if (tomInstance) {
-                slimInstance.setSelected(value);
+                tomInstance.setValue(value, true);
             } else {
                 selectElement.value = value;
             }
@@ -285,8 +286,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 +303,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 +320,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,9 +331,9 @@
     });
 
     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' });
     });
@@ -342,51 +343,31 @@
             return null;
         }
 
-        return target.closest('.ss-content, .ss-list');
+        return target.closest('.ts-dropdown-content, .ts-dropdown');
-    };
-
-    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 (!targetDropdown) {
-
-        if (!openDropdown) {
             return null;
         }
 
-        if (!targetDropdown) {
+        if (targetDropdown.scrollHeight > targetDropdown.clientHeight) {
-            return openDropdown;
+            return targetDropdown;
         }
 
-        const contentContainer = targetDropdown.closest('.ss-content');
+        const dropdownContent = targetDropdown.classList.contains('ts-dropdown-content')
-        return contentContainer || openDropdown;
+            ? targetDropdown
+            : targetDropdown.querySelector('.ts-dropdown-content');
+
+        if (dropdownContent && dropdownContent.scrollHeight > dropdownContent.clientHeight) {
+            return dropdownContent;
+        }
+
+        return null;
     };
 
     const shouldBlockBoundaryScroll = (scrollContainer, delta) => {
-        if (!scrollContainer) {
+        if (!scrollContainer || delta === 0) {
-            return false;
-        }
-
-        if (scrollContainer.scrollHeight <= scrollContainer.clientHeight) {
-            return true;
-        }
-
-        if (delta === 0) {
             return false;
         }
 
@@ -404,12 +385,12 @@
 
     document.addEventListener('wheel', (event) => {
         const dropdown = getDropdownFromTarget(event.target);
-        const scrollContainer = getScrollContainer(dropdown);
+        if (!dropdown) {
-
-        if (!scrollContainer) {
             return;
         }
 
+        const scrollContainer = getScrollContainer(dropdown);
+
         if (shouldBlockBoundaryScroll(scrollContainer, event.deltaY)) {
             event.preventDefault();
         }
@@ -419,9 +400,7 @@
 
     document.addEventListener('touchstart', (event) => {
         const dropdown = getDropdownFromTarget(event.target);
-        const scrollContainer = getScrollContainer(dropdown);
+        if (!dropdown || event.touches.length === 0) {
-
-        if (!scrollContainer || event.touches.length === 0) {
             lastTouchY = null;
             return;
         }
@@ -431,9 +410,13 @@
 
     document.addEventListener('touchmove', (event) => {
         const dropdown = getDropdownFromTarget(event.target);
+        if (!dropdown || event.touches.length === 0 || lastTouchY === null) {
+            return;
+        }
+
         const scrollContainer = getScrollContainer(dropdown);
 
-        if (!scrollContainer || event.touches.length === 0 || lastTouchY === null) {
+        if (!scrollContainer) {
             return;
         }