mummert/eventmanager-bundle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace SlimSelect with Tom Select in event filter

Browse Source
This commit is contained in:
Jürgen Mummert
2026-02-23 20:16:40 +01:00
parent 5d3905632d
commit 0e0a888fa9
1 changed files with 36 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contao/templates/frontend/event_filter.html.twig
+36 -38
View File
@@ -68,12 +68,12 @@
pointer-events: none; pointer-events: none;
} }
#eventfilters .widget-select.active .ss-main { #eventfilters .widget-select.active .ts-control {
outline: 2px solid currentColor; outline: 2px solid currentColor;
outline-offset: 2px; outline-offset: 2px;
} }
#eventfilters .ss-main:focus-visible { #eventfilters .ts-control:focus-within {
outline: 2px solid currentColor; outline: 2px solid currentColor;
outline-offset: 2px; outline-offset: 2px;
} }
@@ -82,14 +82,13 @@
display: none; display: none;
} }
#eventfilters .ss-content, #eventfilters .ts-dropdown-content {
#eventfilters .ss-list {
overscroll-behavior: contain; overscroll-behavior: contain;
} }
</style> </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"> <script type="module">
const filters = document.getElementById('eventfilters'); const filters = document.getElementById('eventfilters');
@@ -122,25 +121,27 @@
let currentFilter = { type: 'all', value: 'all' }; let currentFilter = { type: 'all', value: 'all' };
let suppressedChangeEvents = 0; let suppressedChangeEvents = 0;
const initSlimSelect = (selectElement) => { const initTomSelect = (selectElement) => {
if (!selectElement || 'undefined' === typeof window.SlimSelect) { if (!selectElement || 'undefined' === typeof window.TomSelect) {
return null; 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) { if (!selectElement) {
return; return;
} }
@@ -152,8 +153,8 @@
suppressedChangeEvents += 1; suppressedChangeEvents += 1;
try { try {
if (slimInstance) { if (tomInstance) {
slimInstance.setSelected(value); tomInstance.setValue(value, true);
} else { } else {
selectElement.value = value; selectElement.value = value;
} }
@@ -285,8 +286,8 @@
const selectedValue = tagSelect.value; const selectedValue = tagSelect.value;
setSelectValue(locationSelect, locationSlim, 'all'); setSelectValue(locationSelect, locationTom, 'all');
setSelectValue(orgSelect, orgSlim, 'all'); setSelectValue(orgSelect, orgTom, 'all');
applyFilter( applyFilter(
selectedValue === 'all' selectedValue === 'all'
@@ -302,8 +303,8 @@
const selectedValue = locationSelect.value; const selectedValue = locationSelect.value;
setSelectValue(tagSelect, tagSlim, 'all'); setSelectValue(tagSelect, tagTom, 'all');
setSelectValue(orgSelect, orgSlim, 'all'); setSelectValue(orgSelect, orgTom, 'all');
applyFilter( applyFilter(
selectedValue === 'all' selectedValue === 'all'
@@ -319,8 +320,8 @@
const selectedValue = orgSelect.value; const selectedValue = orgSelect.value;
setSelectValue(tagSelect, tagSlim, 'all'); setSelectValue(tagSelect, tagTom, 'all');
setSelectValue(locationSelect, locationSlim, 'all'); setSelectValue(locationSelect, locationTom, 'all');
applyFilter( applyFilter(
selectedValue === 'all' selectedValue === 'all'
@@ -330,9 +331,9 @@
}); });
resetButton?.addEventListener('click', () => { 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' }); applyFilter({ type: 'all', value: 'all' });
}); });
@@ -342,7 +343,7 @@
return null; return null;
} }
return target.closest('.ss-content, .ss-list'); return target.closest('.ts-dropdown-content, .ts-dropdown');
}; };
const getScrollContainer = (targetDropdown) => { const getScrollContainer = (targetDropdown) => {
@@ -354,15 +355,12 @@
return targetDropdown; return targetDropdown;
} }
const contentContainer = targetDropdown.closest('.ss-content') || targetDropdown; const dropdownContent = targetDropdown.classList.contains('ts-dropdown-content')
const listContainer = contentContainer.querySelector('.ss-list'); ? targetDropdown
: targetDropdown.querySelector('.ts-dropdown-content');
if (listContainer && listContainer.scrollHeight > listContainer.clientHeight) { if (dropdownContent && dropdownContent.scrollHeight > dropdownContent.clientHeight) {
return listContainer; return dropdownContent;
}
if (contentContainer.scrollHeight > contentContainer.clientHeight) {
return contentContainer;
} }
return null; return null;