diff --git a/contao/templates/frontend/event_filter.html.twig b/contao/templates/frontend/event_filter.html.twig index 9b8a154..6cedd58 100644 --- a/contao/templates/frontend/event_filter.html.twig +++ b/contao/templates/frontend/event_filter.html.twig @@ -8,6 +8,7 @@ {% endfor %} +
@@ -18,6 +19,7 @@ {% endfor %} +
@@ -28,11 +30,10 @@ {% endfor %} +
- -

@@ -78,7 +79,27 @@ outline-offset: 3px; } - #eventfilters .eventfilter-reset[hidden] { + #eventfilters .widget-select { + position: relative; + } + + #eventfilters .eventfilter-clear { + position: absolute; + top: 50%; + right: .5rem; + transform: translateY(-50%); + display: inline-flex; + align-items: center; + justify-content: center; + border: 0; + background: transparent; + color: inherit; + cursor: pointer; + padding: .125rem; + line-height: 1; + } + + #eventfilters .eventfilter-clear[hidden] { display: none; } @@ -107,7 +128,9 @@ const tagWidget = tagSelect?.closest('.widget-select'); const locationWidget = locationSelect?.closest('.widget-select'); const orgWidget = orgSelect?.closest('.widget-select'); - const resetButton = filters.querySelector('#eventfilter-reset'); + const clearTagButton = filters.querySelector('[data-eventfilter-clear="tag"]'); + const clearLocationButton = filters.querySelector('[data-eventfilter-clear="location"]'); + const clearOrgButton = filters.querySelector('[data-eventfilter-clear="org"]'); const status = filters.querySelector('#eventfilter-status'); const stateStorageKey = 'event-filter-state'; const stateQueryKey = 'event_filter'; @@ -279,9 +302,25 @@ locationWidget?.classList.toggle('active', hasActiveLocation); orgWidget?.classList.toggle('active', hasActiveOrg); - if (resetButton) { - resetButton.hidden = !(hasActiveTag || hasActiveLocation || hasActiveOrg); + if (clearTagButton) { + clearTagButton.hidden = !hasActiveTag; } + + if (clearLocationButton) { + clearLocationButton.hidden = !hasActiveLocation; + } + + if (clearOrgButton) { + clearOrgButton.hidden = !hasActiveOrg; + } + }; + + const resetAllFilters = () => { + setSelectValue(tagSelect, ''); + setSelectValue(locationSelect, ''); + setSelectValue(orgSelect, ''); + + applyFilter({ type: 'all', value: '' }); }; const parseIdList = (rawValue) => (rawValue ?? '') @@ -402,13 +441,9 @@ ); }); - resetButton?.addEventListener('click', () => { - setSelectValue(tagSelect, ''); - setSelectValue(locationSelect, ''); - setSelectValue(orgSelect, ''); - - applyFilter({ type: 'all', value: '' }); - }); + clearTagButton?.addEventListener('click', resetAllFilters); + clearLocationButton?.addEventListener('click', resetAllFilters); + clearOrgButton?.addEventListener('click', resetAllFilters); const urlState = readUrlState(); const storedState = readStoredState();