From 2bd9f6849cb88eafb89bb21c772d48fa0bf9e079 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrgen=20Mummert?= Date: Mon, 23 Feb 2026 20:23:23 +0100 Subject: [PATCH] Use Tom Select defaults for event filter --- .../templates/frontend/event_filter.html.twig | 115 +----------------- 1 file changed, 1 insertion(+), 114 deletions(-) diff --git a/contao/templates/frontend/event_filter.html.twig b/contao/templates/frontend/event_filter.html.twig index ab670c9..3a695a2 100644 --- a/contao/templates/frontend/event_filter.html.twig +++ b/contao/templates/frontend/event_filter.html.twig @@ -82,9 +82,6 @@ display: none; } - #eventfilters .ts-dropdown-content { - overscroll-behavior: contain; - } @@ -126,15 +123,7 @@ return null; } - return new window.TomSelect(selectElement, { - create: false, - maxItems: 1, - closeAfterSelect: true, - allowEmptyOption: true, - searchField: [], - controlInput: null, - dropdownParent: selectElement.closest('.widget-select') || undefined, - }); + return new window.TomSelect(selectElement); }; const tagTom = initTomSelect(tagSelect); @@ -338,107 +327,5 @@ applyFilter({ type: 'all', value: 'all' }); }); - const getDropdownFromTarget = (target) => { - if (!(target instanceof Element)) { - return null; - } - - return target.closest('.ts-dropdown-content, .ts-dropdown'); - }; - - const getScrollContainer = (targetDropdown) => { - if (!targetDropdown) { - return null; - } - - if (targetDropdown.scrollHeight > targetDropdown.clientHeight) { - return targetDropdown; - } - - const dropdownContent = targetDropdown.classList.contains('ts-dropdown-content') - ? targetDropdown - : targetDropdown.querySelector('.ts-dropdown-content'); - - if (dropdownContent && dropdownContent.scrollHeight > dropdownContent.clientHeight) { - return dropdownContent; - } - - return null; - }; - - const shouldBlockBoundaryScroll = (scrollContainer, delta) => { - if (!scrollContainer || 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); - if (!dropdown) { - return; - } - - const scrollContainer = getScrollContainer(dropdown); - - if (shouldBlockBoundaryScroll(scrollContainer, event.deltaY)) { - event.preventDefault(); - } - - event.stopPropagation(); - }, { passive: false, capture: true }); - - document.addEventListener('touchstart', (event) => { - const dropdown = getDropdownFromTarget(event.target); - if (!dropdown || 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); - if (!dropdown || event.touches.length === 0 || lastTouchY === null) { - return; - } - - const scrollContainer = getScrollContainer(dropdown); - - if (!scrollContainer) { - 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);