diff --git a/contao/templates/frontend/event_filter.html.twig b/contao/templates/frontend/event_filter.html.twig index 1622b38..8a27f66 100644 --- a/contao/templates/frontend/event_filter.html.twig +++ b/contao/templates/frontend/event_filter.html.twig @@ -46,6 +46,13 @@ const targetEventListId = filters.dataset.eventlistId || 'eventlist'; const list = document.getElementById(targetEventListId); + const initialStoredEventListView = (() => { + try { + return (window.localStorage.getItem('eventlist_view') || '').trim(); + } catch (error) { + return ''; + } + })(); const applyDefaultGrid = (targetList) => { if (!targetList) { @@ -65,6 +72,34 @@ applyDefaultGrid(list); + window.addEventListener('DOMContentLoaded', () => { + window.setTimeout(() => { + if ('' !== initialStoredEventListView) { + return; + } + + const targetList = document.getElementById(targetEventListId); + + if (!targetList) { + return; + } + + targetList.classList.remove('list'); + applyDefaultGrid(targetList); + + const toggleToList = document.getElementById('toggletolist'); + const toggleToGrid = document.getElementById('toggletogrid'); + + toggleToList?.classList.remove('disabled'); + toggleToGrid?.classList.add('disabled'); + + try { + window.localStorage.setItem('eventlist_view', 'grid'); + } catch (error) { + } + }, 0); + }, { once: true }); + const events = list ? Array.from(list.querySelectorAll(':scope > .event')) : []; const tagSelect = filters.querySelector('#tag-filter'); const locationSelect = filters.querySelector('#location-filter');