Kalender

/** * Safe MEC filter * Replaces MEC's interactive filter UI while keeping MEC's * original filter configuration active in the background. */ .mec-safe-filter-output { width: 100%; margin-bottom: 20px; } /* Category row */ .mec-safe-category-row { display: flex; width: 100%; margin-bottom: 20px; } /* Date row */ .mec-safe-date-row { display: flex; width: 440px; max-width: 100%; } /* Icon areas */ .mec-safe-icon { width: 45px; min-width: 45px; display: flex; align-items: center; justify-content: center; border: 1px solid #e5e5e5; border-right: 0; background: #fff; color: #56770C; box-sizing: border-box; } .mec-safe-icon svg { width: 20px; height: 20px; } /* Dropdowns */ .mec-safe-filter-output select { height: 50px; margin: 0 !important; padding: 0 12px !important; border: 1px solid #e5e5e5 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; font: inherit; cursor: pointer; box-sizing: border-box; } /* Category */ .mec-safe-category { flex: 1; width: 100%; } /* Month / year */ .mec-safe-month { flex: 1.2; } .mec-safe-year { flex: 1; border-left: 0 !important; } /* * MEC's original filter is hidden ONLY after * our own filter was successfully created. */ .mec-real-reload.mec-safe-ready .mec-search-form { display: none !important; } @media (max-width: 500px) { .mec-safe-date-row { width: 100%; } } /** * MEC Safe Full-Reload Filter * * - Reads category/month/year options from MEC's native selects. * - Creates completely independent controls. * - Uses MEC's verified sf[...] URL parameters. * - Always performs a real page navigation. * - MEC remains responsible for querying, recurring events and sorting. */ (function () { 'use strict'; const WRAPPER_SELECTOR = '.mec-real-reload'; const OUTPUT_SELECTOR = '.mec-safe-filter-output'; /** * Copy all options from a MEC select into a clean select. */ function copyOptions(source, target) { Array.from(source.options).forEach(function (sourceOption) { const option = document.createElement('option'); option.value = sourceOption.value; option.textContent = sourceOption.textContent.trim(); target.appendChild(option); }); } /** * Create an icon box. */ function createIcon(type) { const box = document.createElement('div'); box.className = 'mec-safe-icon'; if (type === 'category') { box.innerHTML = ` `; } else { box.innerHTML = ` `; } return box; } /** * Perform a genuine page navigation using MEC's native parameters. */ function navigate(changes) { const url = new URL(window.location.href); Object.entries(changes).forEach(function ([key, value]) { url.searchParams.delete(key); if (value !== '') { url.searchParams.set(key, value); } }); /* * Keep both past and upcoming events available. */ url.searchParams.set( 'sf[event_status]', 'all' ); /* * Filtering should always start from the first page. */ url.searchParams.delete('paged'); url.searchParams.delete('page'); /* * Actual navigation. * MEC AJAX never gets involved. */ window.location.assign(url.toString()); } function init() { const wrapper = document.querySelector(WRAPPER_SELECTOR); const output = document.querySelector(OUTPUT_SELECTOR); if (!wrapper || !output) { return false; } if (output.dataset.ready === '1') { return true; } /* * These selectors are based on the real IDs generated * by this MEC installation. */ const categorySource = wrapper.querySelector( 'select[id^="mec_sf_category_"]' ); const monthSource = wrapper.querySelector( 'select[id^="mec_sf_month_"]' ); const yearSource = wrapper.querySelector( 'select[id^="mec_sf_year_"]' ); /* * Do absolutely nothing until all three MEC controls exist. */ if (!categorySource || !monthSource || !yearSource) { return false; } const url = new URL(window.location.href); /* ===================================================== * CATEGORY * =================================================== */ const categoryRow = document.createElement('div'); categoryRow.className = 'mec-safe-category-row'; categoryRow.appendChild( createIcon('category') ); const categorySelect = document.createElement('select'); categorySelect.className = 'mec-safe-category'; copyOptions( categorySource, categorySelect ); /* * URL takes priority. * Otherwise use MEC's currently selected value. */ const categoryFromUrl = url.searchParams.get('sf[category]'); categorySelect.value = categoryFromUrl !== null ? categoryFromUrl : categorySource.value; categorySelect.addEventListener( 'change', function () { navigate({ 'sf[category]': this.value }); } ); categoryRow.appendChild(categorySelect); /* ===================================================== * DATE * =================================================== */ const dateRow = document.createElement('div'); dateRow.className = 'mec-safe-date-row'; dateRow.appendChild( createIcon('date') ); /* Month */ const monthSelect = document.createElement('select'); monthSelect.className = 'mec-safe-month'; copyOptions( monthSource, monthSelect ); const monthFromUrl = url.searchParams.get('sf[month]'); monthSelect.value = monthFromUrl !== null ? monthFromUrl : monthSource.value; /* Year */ const yearSelect = document.createElement('select'); yearSelect.className = 'mec-safe-year'; copyOptions( yearSource, yearSelect ); const yearFromUrl = url.searchParams.get('sf[year]'); yearSelect.value = yearFromUrl !== null ? yearFromUrl : yearSource.value; function navigateDate() { navigate({ 'sf[month]': monthSelect.value, 'sf[year]': yearSelect.value }); } monthSelect.addEventListener( 'change', navigateDate ); yearSelect.addEventListener( 'change', navigateDate ); dateRow.appendChild(monthSelect); dateRow.appendChild(yearSelect); /* ===================================================== * OUTPUT * =================================================== */ output.appendChild(categoryRow); output.appendChild(dateRow); output.dataset.ready = '1'; /* * Only hide MEC after our replacement definitely exists. */ wrapper.classList.add('mec-safe-ready'); return true; } /* * MEC may initialize its filter after the rest of the page. */ let attempts = 0; const timer = window.setInterval(function () { attempts++; if (init() || attempts >= 40) { window.clearInterval(timer); } }, 200); })();