Compare commits

..

10 Commits

Author SHA1 Message Date
Jürgen Mummert 40aaa747d9 feat(map): add organization color scheme and improve map controls 2026-02-25 21:02:33 +01:00
Jürgen Mummert 68e991c053 feat: add frontend map module with maplibre and spiderfy 2026-02-24 18:24:10 +01:00
Jürgen Mummert 8aa09e893b Switch event filter selects back to native controls 2026-02-24 17:46:25 +01:00
Jürgen Mummert ac203b37ce Persist event filter state across reload and navigation 2026-02-23 21:54:27 +01:00
Jürgen Mummert 4b62e72382 Add svg class support for organization logo figures 2026-02-23 21:40:30 +01:00
Jürgen Mummert 97e4f639a0 Use Tom Select CDN major version 2 2026-02-23 21:28:15 +01:00
Jürgen Mummert b714bbeb1b Blur Tom Select only for mouse and touch selection 2026-02-23 21:22:59 +01:00
Jürgen Mummert 21c18f94a0 Improve Tom Select usability and accessibility defaults 2026-02-23 20:54:25 +01:00
Jürgen Mummert 0402c74824 Fix Tom Select input wrapping and restore arrow icon 2026-02-23 20:49:26 +01:00
Jürgen Mummert e3c13c989b Keep Tom Select setup core-only 2026-02-23 20:43:43 +01:00
13 changed files with 2148 additions and 80 deletions
+2
View File
@@ -14,3 +14,5 @@ services:
tags:
- { name: contao.callback, table: tl_organization, target: config.onbeforesubmit, method: onBeforeSubmit }
- { name: contao.callback, table: tl_location, target: config.onbeforesubmit, method: onBeforeSubmit }
MummertMedia\EventManagerBundle\Service\MapModuleDataProvider: ~
+78
View File
@@ -9,6 +9,7 @@ use Contao\StringUtil;
$GLOBALS['TL_DCA']['tl_module']['palettes']['member_organizations'] = '{title_legend},name,headline,type;{eventmanager_legend},editPage;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
$GLOBALS['TL_DCA']['tl_module']['palettes']['member_events'] = '{title_legend},name,headline,type;{eventmanager_legend},editPage;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
$GLOBALS['TL_DCA']['tl_module']['palettes']['event_filter'] = '{title_legend},name,headline,type;{eventmanager_legend},cal_calendar,eventListDomId;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
$GLOBALS['TL_DCA']['tl_module']['palettes']['eventmanager_map'] = '{title_legend},name,headline,type;{eventmanager_legend},mapShowOrganizations,mapShowExternalOrganizations,mapShowEvents,mapEventColor,mapOrganizationColorScheme,mapCenterMode;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
$GLOBALS['TL_DCA']['tl_module']['palettes']['organization_edit'] = '{title_legend},name,headline,type;{eventmanager_legend},listPage,logoFolder,organizationTypeTags;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
$GLOBALS['TL_DCA']['tl_module']['palettes']['event_edit'] = '{title_legend},name,headline,type;{eventmanager_legend},listPage,eventFolder,termsPage,frontendAuthorId,frontendArchiveId,eventTypeTags;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
@@ -159,6 +160,83 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['eventListDomId'] = [
'sql' => ['type' => 'string', 'length' => 128, 'default' => ''],
];
$GLOBALS['TL_DCA']['tl_module']['palettes']['__selector__'][] = 'mapCenterMode';
$GLOBALS['TL_DCA']['tl_module']['subpalettes']['mapCenterMode_custom'] = 'mapCenterLat,mapCenterLng,mapCenterZoom';
$GLOBALS['TL_DCA']['tl_module']['fields']['mapShowOrganizations'] = [
'label' => &$GLOBALS['TL_LANG']['tl_module']['mapShowOrganizations'],
'exclude' => true,
'inputType' => 'checkbox',
'eval' => ['tl_class' => 'w50 m12'],
'sql' => ['type' => 'string', 'length' => 1, 'fixed' => true, 'default' => ''],
];
$GLOBALS['TL_DCA']['tl_module']['fields']['mapShowExternalOrganizations'] = [
'label' => &$GLOBALS['TL_LANG']['tl_module']['mapShowExternalOrganizations'],
'exclude' => true,
'inputType' => 'checkbox',
'eval' => ['tl_class' => 'w50 m12'],
'sql' => ['type' => 'string', 'length' => 1, 'fixed' => true, 'default' => ''],
];
$GLOBALS['TL_DCA']['tl_module']['fields']['mapShowEvents'] = [
'label' => &$GLOBALS['TL_LANG']['tl_module']['mapShowEvents'],
'exclude' => true,
'inputType' => 'checkbox',
'eval' => ['tl_class' => 'w50 m12'],
'sql' => ['type' => 'string', 'length' => 1, 'fixed' => true, 'default' => ''],
];
$GLOBALS['TL_DCA']['tl_module']['fields']['mapEventColor'] = [
'label' => &$GLOBALS['TL_LANG']['tl_module']['mapEventColor'],
'exclude' => true,
'inputType' => 'text',
'eval' => ['maxlength' => 7, 'rgxp' => 'hexcolor', 'colorpicker' => true, 'tl_class' => 'w50'],
'sql' => ['type' => 'string', 'length' => 7, 'default' => '#BC5067'],
];
$GLOBALS['TL_DCA']['tl_module']['fields']['mapOrganizationColorScheme'] = [
'label' => &$GLOBALS['TL_LANG']['tl_module']['mapOrganizationColorScheme'],
'exclude' => true,
'inputType' => 'text',
'eval' => ['maxlength' => 1024, 'tl_class' => 'clr long'],
'sql' => ['type' => 'string', 'length' => 1024, 'default' => ''],
];
$GLOBALS['TL_DCA']['tl_module']['fields']['mapCenterMode'] = [
'label' => &$GLOBALS['TL_LANG']['tl_module']['mapCenterMode'],
'exclude' => true,
'inputType' => 'select',
'options' => ['markers', 'custom'],
'reference' => &$GLOBALS['TL_LANG']['tl_module']['mapCenterMode_options'],
'eval' => ['submitOnChange' => true, 'mandatory' => true, 'tl_class' => 'clr w50', 'includeBlankOption' => false],
'sql' => ['type' => 'string', 'length' => 16, 'default' => 'markers'],
];
$GLOBALS['TL_DCA']['tl_module']['fields']['mapCenterLat'] = [
'label' => &$GLOBALS['TL_LANG']['tl_module']['mapCenterLat'],
'exclude' => true,
'inputType' => 'text',
'eval' => ['maxlength' => 32, 'tl_class' => 'w50'],
'sql' => ['type' => 'string', 'length' => 32, 'default' => ''],
];
$GLOBALS['TL_DCA']['tl_module']['fields']['mapCenterLng'] = [
'label' => &$GLOBALS['TL_LANG']['tl_module']['mapCenterLng'],
'exclude' => true,
'inputType' => 'text',
'eval' => ['maxlength' => 32, 'tl_class' => 'w50'],
'sql' => ['type' => 'string', 'length' => 32, 'default' => ''],
];
$GLOBALS['TL_DCA']['tl_module']['fields']['mapCenterZoom'] = [
'label' => &$GLOBALS['TL_LANG']['tl_module']['mapCenterZoom'],
'exclude' => true,
'inputType' => 'text',
'eval' => ['rgxp' => 'digit', 'maxlength' => 2, 'tl_class' => 'w50'],
'sql' => ['type' => 'smallint', 'unsigned' => true, 'default' => 12],
];
if (isset($GLOBALS['TL_DCA']['tl_module']['fields']['list_layout'])) {
$GLOBALS['TL_DCA']['tl_module']['fields']['list_layout']['options_callback'] = static function (): array {
$options = Controller::getTemplateGroup('list_');
+1
View File
@@ -10,4 +10,5 @@ $GLOBALS['TL_LANG']['FMD']['member_organizations'] = ['Meine Organisationen', 'L
$GLOBALS['TL_LANG']['FMD']['organization_edit'] = ['Organisation bearbeiten', 'Bearbeitungsformular für eine Organisation.'];
$GLOBALS['TL_LANG']['FMD']['member_events'] = ['Meine Veranstaltungen', 'Listet Veranstaltungen der zugeordneten Organisationen auf.'];
$GLOBALS['TL_LANG']['FMD']['event_filter'] = ['Eventfilter', 'Filter für kommende Veranstaltungen (Tags, Orte, Veranstalter).'];
$GLOBALS['TL_LANG']['FMD']['eventmanager_map'] = ['Eventkarte', 'Zeigt Veranstaltungsorte, Organisationen und Events auf einer Karte an.'];
$GLOBALS['TL_LANG']['FMD']['event_edit'] = ['Veranstaltung bearbeiten', 'Bearbeitungsformular für eine Veranstaltung.'];
+13
View File
@@ -13,3 +13,16 @@ $GLOBALS['TL_LANG']['tl_module']['frontendArchiveId'] = ['ID des Newsarchivs', '
$GLOBALS['TL_LANG']['tl_module']['eventListDomId'] = ['Eventlisten-ID (DOM)', 'Wählen Sie die ID der Eventliste, die durch das Event-Filter-Modul gefiltert werden soll.'];
$GLOBALS['TL_LANG']['tl_module']['organizationTypeTags'] = ['Anzuzeigende Organisationstypen', 'Optional: Begrenzen Sie die im Frontend anzeigbaren Organisationstyp-Tags. Leer = alle.'];
$GLOBALS['TL_LANG']['tl_module']['eventTypeTags'] = ['Anzuzeigende Veranstaltungstypen', 'Optional: Begrenzen Sie die im Frontend anzeigbaren Veranstaltungstyp-Tags. Leer = alle.'];
$GLOBALS['TL_LANG']['tl_module']['mapShowOrganizations'] = ['Organisationen anzeigen', 'Wenn aktiviert, werden Organisations-Marker auf der Karte dargestellt.'];
$GLOBALS['TL_LANG']['tl_module']['mapShowExternalOrganizations'] = ['Externe Organisationen anzeigen', 'Wenn aktiviert, werden externe Organisationen (isExternal=1) zusätzlich auf der Karte dargestellt. Standard: nein.'];
$GLOBALS['TL_LANG']['tl_module']['mapShowEvents'] = ['Veranstaltungen anzeigen', 'Wenn aktiviert, werden Event- (inkl. Orts-) Marker auf der Karte dargestellt.'];
$GLOBALS['TL_LANG']['tl_module']['mapEventColor'] = ['Event-Farbe (Kreise/Linien)', 'Farbe für Event-Cluster, Event-Punkte und Spiderfy-Verbindungslinien (Hex, z. B. #BC5067).'];
$GLOBALS['TL_LANG']['tl_module']['mapOrganizationColorScheme'] = ['Farbschema (Organisationstypen)', 'Kommagetrennte Farben für Organisationstypen/Tags, z. B. ff6600,77dd33,ff99bb. Markerfarbe richtet sich nach dem ersten Tag.'];
$GLOBALS['TL_LANG']['tl_module']['mapCenterMode'] = ['Karten-Zentrierung', 'Wählen Sie, ob die Karte anhand der Marker oder mit festen Koordinaten zentriert werden soll.'];
$GLOBALS['TL_LANG']['tl_module']['mapCenterMode_options'] = [
'markers' => 'Anhand der Marker (alle Marker sichtbar)',
'custom' => 'Feste Geodaten + Zoom-Level',
];
$GLOBALS['TL_LANG']['tl_module']['mapCenterLat'] = ['Breitengrad (Center)', 'Breitengrad für die feste Kartenzentrierung, z. B. 51.0538'];
$GLOBALS['TL_LANG']['tl_module']['mapCenterLng'] = ['Längengrad (Center)', 'Längengrad für die feste Kartenzentrierung, z. B. 13.3080'];
$GLOBALS['TL_LANG']['tl_module']['mapCenterZoom'] = ['Zoom-Level (Center)', 'Zoom-Level für die feste Kartenzentrierung (z. B. 12).'];
+1
View File
@@ -10,4 +10,5 @@ $GLOBALS['TL_LANG']['FMD']['member_organizations'] = ['My organizations', 'Lists
$GLOBALS['TL_LANG']['FMD']['organization_edit'] = ['Edit organization', 'Edit form for one organization.'];
$GLOBALS['TL_LANG']['FMD']['member_events'] = ['My events', 'Lists events of the member organizations.'];
$GLOBALS['TL_LANG']['FMD']['event_filter'] = ['Event filter', 'Filters upcoming events (tags, locations, organizers).'];
$GLOBALS['TL_LANG']['FMD']['eventmanager_map'] = ['Event map', 'Displays locations, organizations and events on a map.'];
$GLOBALS['TL_LANG']['FMD']['event_edit'] = ['Edit event', 'Edit form for one event.'];
+13
View File
@@ -13,3 +13,16 @@ $GLOBALS['TL_LANG']['tl_module']['frontendArchiveId'] = ['News archive ID', 'Arc
$GLOBALS['TL_LANG']['tl_module']['eventListDomId'] = ['Event list ID (DOM)', 'Select the event list ID that should be filtered by the event filter module.'];
$GLOBALS['TL_LANG']['tl_module']['organizationTypeTags'] = ['Displayed organization types', 'Optional: Limit which organization type tags can be selected in the frontend. Empty = all.'];
$GLOBALS['TL_LANG']['tl_module']['eventTypeTags'] = ['Displayed event types', 'Optional: Limit which event type tags can be selected in the frontend. Empty = all.'];
$GLOBALS['TL_LANG']['tl_module']['mapShowOrganizations'] = ['Show organizations', 'If enabled, organization markers are rendered on the map.'];
$GLOBALS['TL_LANG']['tl_module']['mapShowExternalOrganizations'] = ['Show external organizations', 'If enabled, external organizations (isExternal=1) are additionally rendered on the map. Default: no.'];
$GLOBALS['TL_LANG']['tl_module']['mapShowEvents'] = ['Show events', 'If enabled, event markers (including related locations) are rendered on the map.'];
$GLOBALS['TL_LANG']['tl_module']['mapEventColor'] = ['Event color (circles/lines)', 'Color for event clusters, event points and spiderfy connector lines (hex, e.g. #BC5067).'];
$GLOBALS['TL_LANG']['tl_module']['mapOrganizationColorScheme'] = ['Color scheme (organization types)', 'Comma-separated colors for organization type tags, e.g. ff6600,77dd33,ff99bb. Marker color follows the first tag.'];
$GLOBALS['TL_LANG']['tl_module']['mapCenterMode'] = ['Map centering', 'Choose whether the map should center by markers or fixed coordinates.'];
$GLOBALS['TL_LANG']['tl_module']['mapCenterMode_options'] = [
'markers' => 'By markers (fit all visible markers)',
'custom' => 'Fixed coordinates + zoom level',
];
$GLOBALS['TL_LANG']['tl_module']['mapCenterLat'] = ['Center latitude', 'Latitude for fixed map centering, e.g. 51.0538'];
$GLOBALS['TL_LANG']['tl_module']['mapCenterLng'] = ['Center longitude', 'Longitude for fixed map centering, e.g. 13.3080'];
$GLOBALS['TL_LANG']['tl_module']['mapCenterZoom'] = ['Center zoom level', 'Zoom level for fixed map centering (e.g. 12).'];
+131 -74
View File
@@ -31,7 +31,7 @@
</div>
</div>
<button type="button" id="eventfilter-reset" class="eventfilter-reset" hidden>Filter zurücksetzen</button>
<button type="button" id="eventfilter-reset" class="eventfilter-reset" aria-label="Alle Filter zurücksetzen" aria-controls="{{ targetEventListId|default('eventlist')|e('html_attr') }}" hidden>Filter zurücksetzen</button>
<p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
</div>
@@ -68,49 +68,22 @@
pointer-events: none;
}
#eventfilters .widget-select.active .ts-control {
outline: 2px solid currentColor;
outline-offset: 2px;
#eventfilters .widget-select.active select {
outline: 3px solid currentColor;
outline-offset: 3px;
}
#eventfilters .ts-control:focus-within {
outline: 2px solid currentColor;
outline-offset: 2px;
#eventfilters select:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
#eventfilters .eventfilter-reset[hidden] {
display: none;
}
#eventfilters .ts-wrapper.single .ts-control {
position: relative;
padding-right: 2rem;
}
#eventfilters .ts-wrapper.single .ts-control::after {
content: '';
position: absolute;
right: 0.75rem;
top: 50%;
width: 0;
height: 0;
border-left: 0.3rem solid transparent;
border-right: 0.3rem solid transparent;
border-top: 0.4rem solid currentColor;
transform: translateY(-30%);
pointer-events: none;
opacity: 0.7;
}
#eventfilters .ts-wrapper.single.dropdown-active .ts-control::after {
transform: translateY(-65%) rotate(180deg);
}
</style>
<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/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
<script type="module">
const filters = document.getElementById('eventfilters');
@@ -136,42 +109,118 @@
const orgWidget = orgSelect?.closest('.widget-select');
const resetButton = filters.querySelector('#eventfilter-reset');
const status = filters.querySelector('#eventfilter-status');
const stateStorageKey = 'event-filter-state';
const stateQueryKey = 'event_filter';
const animationMs = 220;
let hideTimers = new WeakMap();
let currentFilter = { type: 'all', value: '' };
let suppressedChangeEvents = 0;
const initTomSelect = (selectElement) => {
if (!selectElement || 'undefined' === typeof window.TomSelect) {
return null;
const hasOptionValue = (selectElement, value) => {
if (!selectElement) {
return false;
}
return new window.TomSelect(selectElement, {
create: true,
sortField: {
field: 'text',
direction: 'asc',
},
onInitialize() {
if (!this.control_input) {
return;
}
this.control_input.setAttribute('autocomplete', 'off');
this.control_input.setAttribute('autocorrect', 'off');
this.control_input.setAttribute('autocapitalize', 'off');
this.control_input.setAttribute('spellcheck', 'false');
this.control_input.setAttribute('name', `${selectElement.id}-ts-input`);
},
});
return Array.from(selectElement.options).some((option) => option.value === value);
};
const tagTom = initTomSelect(tagSelect);
const locationTom = initTomSelect(locationSelect);
const orgTom = initTomSelect(orgSelect);
const rawValueToFilterState = (rawValue) => {
const value = (rawValue || '').trim();
const setSelectValue = (selectElement, tomInstance, value) => {
if (!value) {
return { type: 'all', value: '' };
}
if (value.startsWith('tag-') && hasOptionValue(tagSelect, value)) {
return { type: 'tag', value: value.replace('tag-', '') };
}
if (value.startsWith('location-') && hasOptionValue(locationSelect, value)) {
return { type: 'location', value: value.replace('location-', '') };
}
if (value.startsWith('org-') && hasOptionValue(orgSelect, value)) {
return { type: 'org', value: value.replace('org-', '') };
}
return { type: 'all', value: '' };
};
const filterStateToRawValue = (filterState) => {
if (!filterState.value || filterState.type === 'all') {
return '';
}
if (filterState.type === 'tag') {
return `tag-${filterState.value}`;
}
if (filterState.type === 'location') {
return `location-${filterState.value}`;
}
if (filterState.type === 'org') {
return `org-${filterState.value}`;
}
return '';
};
const readUrlState = () => {
const url = new URL(window.location.href);
return (url.searchParams.get(stateQueryKey) || '').trim();
};
const writeUrlState = (value) => {
const url = new URL(window.location.href);
if (value) {
url.searchParams.set(stateQueryKey, value);
} else {
url.searchParams.delete(stateQueryKey);
}
window.history.replaceState(window.history.state, '', url);
};
const readStoredState = () => {
try {
return (window.sessionStorage.getItem(stateStorageKey) || '').trim();
} catch (error) {
return '';
}
};
const writeStoredState = (value) => {
try {
if (value) {
window.sessionStorage.setItem(stateStorageKey, value);
} else {
window.sessionStorage.removeItem(stateStorageKey);
}
} catch (error) {
// noop
}
};
const syncState = (filterState) => {
const rawValue = filterStateToRawValue(filterState);
writeStoredState(rawValue);
writeUrlState(rawValue);
};
const applyControlState = (filterState) => {
const tagValue = filterState.type === 'tag' ? `tag-${filterState.value}` : '';
const locationValue = filterState.type === 'location' ? `location-${filterState.value}` : '';
const orgValue = filterState.type === 'org' ? `org-${filterState.value}` : '';
setSelectValue(tagSelect, tagValue);
setSelectValue(locationSelect, locationValue);
setSelectValue(orgSelect, orgValue);
};
const setSelectValue = (selectElement, value) => {
if (!selectElement) {
return;
}
@@ -183,11 +232,7 @@
suppressedChangeEvents += 1;
try {
if (tomInstance) {
tomInstance.setValue(value, true);
} else {
selectElement.value = value;
}
selectElement.value = value;
} finally {
queueMicrotask(() => {
suppressedChangeEvents = Math.max(0, suppressedChangeEvents - 1);
@@ -303,6 +348,7 @@
});
updateStatus(filterState);
syncState(filterState);
};
tagSelect?.addEventListener('change', () => {
@@ -312,8 +358,8 @@
const selectedValue = tagSelect.value;
setSelectValue(locationSelect, locationTom, '');
setSelectValue(orgSelect, orgTom, '');
setSelectValue(locationSelect, '');
setSelectValue(orgSelect, '');
applyFilter(
!selectedValue
@@ -329,8 +375,8 @@
const selectedValue = locationSelect.value;
setSelectValue(tagSelect, tagTom, '');
setSelectValue(orgSelect, orgTom, '');
setSelectValue(tagSelect, '');
setSelectValue(orgSelect, '');
applyFilter(
!selectedValue
@@ -346,8 +392,8 @@
const selectedValue = orgSelect.value;
setSelectValue(tagSelect, tagTom, '');
setSelectValue(locationSelect, locationTom, '');
setSelectValue(tagSelect, '');
setSelectValue(locationSelect, '');
applyFilter(
!selectedValue
@@ -357,12 +403,23 @@
});
resetButton?.addEventListener('click', () => {
setSelectValue(tagSelect, tagTom, '');
setSelectValue(locationSelect, locationTom, '');
setSelectValue(orgSelect, orgTom, '');
setSelectValue(tagSelect, '');
setSelectValue(locationSelect, '');
setSelectValue(orgSelect, '');
applyFilter({ type: 'all', value: '' });
});
applyFilter(currentFilter);
const urlState = readUrlState();
const storedState = readStoredState();
const initialState = rawValueToFilterState(urlState || storedState);
applyControlState(initialState);
applyFilter(initialState);
window.addEventListener('popstate', () => {
const stateFromUrl = rawValueToFilterState(readUrlState());
applyControlState(stateFromUrl);
applyFilter(stateFromUrl);
});
</script>
@@ -0,0 +1,92 @@
{% set tags = mapOrganizationTags|default([]) %}
<section
id="{{ mapFilterWrapperId|e('html_attr') }}"
class="eventmanager-map-filter"
data-map-filter-wrapper="1"
role="region"
aria-label="Kartenfilter"
>
<button
type="button"
class="eventmanager-map-filter__toggle"
data-map-filter-toggle="1"
aria-expanded="true"
aria-controls="{{ mapFilterGroupId|e('html_attr') }}"
>
Bereiche ausblenden
</button>
<div
id="{{ mapFilterGroupId|e('html_attr') }}"
class="eventmanager-map-filter__group"
role="group"
aria-label="Organisationstypen"
>
{% if tags is iterable and tags|length > 0 %}
{% for tag in tags %}
<button
type="button"
class="eventmanager-map-filter__tag is-active"
data-map-tag-filter="{{ tag.id|e('html_attr') }}"
aria-pressed="true"
>{{ tag.label|e }}</button>
{% endfor %}
{% endif %}
<button
type="button"
class="eventmanager-map-filter__tag is-active"
data-map-event-toggle="1"
aria-pressed="true"
>Veranstaltungen</button>
</div>
<div class="eventmanager-map-filter__actions">
<button type="button" data-map-filter-action="all">Alle auswählen</button>
<button type="button" data-map-filter-action="none">Alle abwählen</button>
<button type="button" data-map-style-mode="street" aria-pressed="true">Straße</button>
<button type="button" data-map-style-mode="satellite" aria-pressed="false">Satellit</button>
</div>
</section>
<div
id="{{ mapContainerId|e('html_attr') }}"
class="eventmanager-map"
data-eventmanager-map="1"
data-map-filter-wrapper-id="{{ mapFilterWrapperId|default('')|e('html_attr') }}"
data-map-style="{{ mapStyleUrl|e('html_attr') }}"
data-map-data-id="{{ mapDataElementId|e('html_attr') }}"
data-map-event-color="{{ mapEventColor|default('#BC5067')|e('html_attr') }}"
data-map-organization-colors="{{ mapOrganizationColorScheme|default('')|e('html_attr') }}"
data-map-center-mode="{{ mapCenterMode|default('markers')|e('html_attr') }}"
data-map-center-lat="{{ mapCenterLat|default('')|e('html_attr') }}"
data-map-center-lng="{{ mapCenterLng|default('')|e('html_attr') }}"
data-map-center-zoom="{{ mapCenterZoom|default(12)|e('html_attr') }}"
></div>
<style>
.eventmanager-map-filter {
display: grid;
gap: .5rem;
margin-bottom: .75rem;
}
.eventmanager-map-filter__group,
.eventmanager-map-filter__actions {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.eventmanager-map-filter__tag[aria-pressed="true"] {
font-weight: 600;
}
.eventmanager-map {
width: 100%;
min-height: 420px;
}
</style>
<script type="application/json" id="{{ mapDataElementId|e('html_attr') }}">{{ mapItemsJson|raw }}</script>
<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js"></script>
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,96 @@
<?php
declare(strict_types=1);
namespace MummertMedia\EventManagerBundle\Controller\Frontend;
use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController;
use Contao\CoreBundle\DependencyInjection\Attribute\AsFrontendModule;
use Contao\CoreBundle\Twig\FragmentTemplate;
use Contao\ModuleModel;
use MummertMedia\EventManagerBundle\Service\MapModuleDataProvider;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
#[AsFrontendModule(type: 'eventmanager_map', category: 'eventmanager', template: 'frontend/event_map')]
class EventMapController extends AbstractFrontendModuleController
{
private const MAP_STYLE_URL = 'https://maps.mummert.media/metadaten/world-light.json';
private const DEFAULT_CENTER_MODE = 'markers';
private const DEFAULT_EVENT_COLOR = '#BC5067';
public function __construct(
private readonly MapModuleDataProvider $mapModuleDataProvider,
) {
}
protected function getResponse(FragmentTemplate $template, ModuleModel $model, Request $request): Response
{
$containerId = sprintf('eventmanager-map-%d', (int) ($model->id ?? 0));
$dataElementId = sprintf('%s-data', $containerId);
$filterWrapperId = sprintf('%s-filter', $containerId);
$filterGroupId = sprintf('%s-filter-group', $containerId);
$showOrganizations = '1' === (string) ($model->mapShowOrganizations ?? '');
$showExternalOrganizations = '1' === (string) ($model->mapShowExternalOrganizations ?? '');
$showEvents = '1' === (string) ($model->mapShowEvents ?? '');
$centerMode = (string) ($model->mapCenterMode ?? self::DEFAULT_CENTER_MODE);
$eventColor = $this->normalizeHexColor((string) ($model->mapEventColor ?? self::DEFAULT_EVENT_COLOR));
$organizationColorScheme = trim((string) ($model->mapOrganizationColorScheme ?? ''));
if (!in_array($centerMode, ['markers', 'custom'], true)) {
$centerMode = self::DEFAULT_CENTER_MODE;
}
$template->set('mapContainerId', $containerId);
$template->set('mapDataElementId', $dataElementId);
$template->set('mapFilterWrapperId', $filterWrapperId);
$template->set('mapFilterGroupId', $filterGroupId);
$template->set('mapStyleUrl', self::MAP_STYLE_URL);
$template->set('mapCenterMode', $centerMode);
$template->set('mapEventColor', $eventColor);
$template->set('mapOrganizationColorScheme', $organizationColorScheme);
$template->set('mapCenterLat', trim((string) ($model->mapCenterLat ?? '')));
$template->set('mapCenterLng', trim((string) ($model->mapCenterLng ?? '')));
$template->set('mapCenterZoom', (int) ($model->mapCenterZoom ?? 12));
$template->set('mapItemsJson', json_encode(
$this->mapModuleDataProvider->getMapItems($showOrganizations, $showEvents, $showExternalOrganizations),
\JSON_HEX_TAG | \JSON_HEX_AMP | \JSON_HEX_APOS | \JSON_HEX_QUOT | \JSON_UNESCAPED_UNICODE | \JSON_THROW_ON_ERROR,
));
$template->set('mapOrganizationTags', $this->mapModuleDataProvider->getOrganizationTags());
return $template->getResponse();
}
private function normalizeHexColor(string $value): string
{
$normalized = strtoupper(trim($value));
if (preg_match('/^#[0-9A-F]{6}$/', $normalized)) {
return $normalized;
}
if (preg_match('/^[0-9A-F]{6}$/', $normalized)) {
return '#'.$normalized;
}
if (preg_match('/^#[0-9A-F]{3}$/', $normalized)) {
return sprintf(
'#%1$s%1$s%2$s%2$s%3$s%3$s',
$normalized[1],
$normalized[2],
$normalized[3],
);
}
if (preg_match('/^[0-9A-F]{3}$/', $normalized)) {
return sprintf(
'#%1$s%1$s%2$s%2$s%3$s%3$s',
$normalized[0],
$normalized[1],
$normalized[2],
);
}
return self::DEFAULT_EVENT_COLOR;
}
}
@@ -53,7 +53,7 @@ class OrganizationListingTemplateDataListener
$organizationIds = array_values(array_unique(array_values($rowToOrganizationIdMap)));
$organizationTagMap = $this->fetchOrganizationTagMap($organizationIds);
$organizationLogoUuidMap = $this->fetchOrganizationLogoUuidMap($organizationIds);
$organizationLogoMap = $this->fetchOrganizationLogoMap($organizationIds);
$organizationTagLabelMap = [];
$rowTagIdsList = [];
@@ -74,7 +74,9 @@ class OrganizationListingTemplateDataListener
}
$tagData = $organizationTagMap[$organizationId] ?? ['ids' => [], 'labels' => []];
$logoUuid = $organizationLogoUuidMap[$organizationId] ?? '';
$logoData = $organizationLogoMap[$organizationId] ?? ['uuid' => '', 'isSvg' => false];
$logoUuid = (string) ($logoData['uuid'] ?? '');
$logoIsSvg = (bool) ($logoData['isSvg'] ?? false);
$tagIdsCsv = implode(',', $tagData['ids']);
$tagLabelsCsv = implode(', ', $tagData['labels']);
@@ -84,6 +86,7 @@ class OrganizationListingTemplateDataListener
if ('' !== $logoUuid) {
$tbody[$rowIndex]['logo_uuid']['content'] = $logoUuid;
$tbody[$rowIndex]['logo_is_svg']['content'] = $logoIsSvg ? '1' : '';
}
}
@@ -266,16 +269,19 @@ class OrganizationListingTemplateDataListener
}
/** @param list<int> $organizationIds
* @return array<int, string>
* @return array<int, array{uuid: string, isSvg: bool}>
*/
private function fetchOrganizationLogoUuidMap(array $organizationIds): array
private function fetchOrganizationLogoMap(array $organizationIds): array
{
if ([] === $organizationIds) {
return [];
}
$rows = $this->connection->executeQuery(
'SELECT o.id AS organization_id, o.logo AS logo_uuid FROM tl_organization o WHERE o.id IN (?)',
'SELECT o.id AS organization_id, o.logo AS logo_uuid, f.extension AS file_extension, f.path AS file_path
FROM tl_organization o
LEFT JOIN tl_files f ON f.uuid = o.logo
WHERE o.id IN (?)',
[$organizationIds],
[ArrayParameterType::INTEGER],
)->fetchAllAssociative();
@@ -285,12 +291,22 @@ class OrganizationListingTemplateDataListener
foreach ($rows as $row) {
$organizationId = (int) ($row['organization_id'] ?? 0);
$logoUuid = $this->normalizeUuid($row['logo_uuid'] ?? null);
$extension = strtolower(trim((string) ($row['file_extension'] ?? '')));
if ('' === $extension && isset($row['file_path']) && \is_scalar($row['file_path'])) {
$extension = strtolower((string) pathinfo((string) $row['file_path'], PATHINFO_EXTENSION));
}
$isSvg = 'svg' === $extension;
if ($organizationId <= 0 || '' === $logoUuid) {
continue;
}
$map[$organizationId] = $logoUuid;
$map[$organizationId] = [
'uuid' => $logoUuid,
'isSvg' => $isSvg,
];
}
return $map;
+516
View File
@@ -0,0 +1,516 @@
<?php
declare(strict_types=1);
namespace MummertMedia\EventManagerBundle\Service;
use Contao\Config;
use Contao\Date;
use Doctrine\DBAL\ArrayParameterType;
use Doctrine\DBAL\Connection;
use Doctrine\DBAL\ParameterType;
use Doctrine\DBAL\Query\QueryBuilder;
class MapModuleDataProvider
{
/**
* @var array<string,array<string,true>>
*/
private array $tableColumns = [];
public function __construct(
private readonly Connection $connection,
) {
}
/**
* @return list<array{type:string,markerType:string,id:int,title:string,latitude:float,longitude:float,extra:array<string,mixed>}>
*/
public function getMapItems(bool $includeOrganizations = true, bool $includeEvents = true, bool $includeExternalOrganizations = false): array
{
if (!$includeOrganizations && !$includeEvents) {
return [];
}
$locationTable = $this->resolveExistingTable(['tl_location']);
$organizationTable = $this->resolveExistingTable(['tl_organization', 'tl_organisation']);
$locationGeoColumns = null !== $locationTable ? $this->resolveGeoColumns($locationTable) : null;
if (null === $locationTable || null === $locationGeoColumns) {
return [];
}
$items = [];
$seen = [];
$organizationRows = $includeOrganizations
? $this->fetchOrganizationRows($organizationTable, $locationTable, $locationGeoColumns, $includeExternalOrganizations)
: [];
$organizationTagMap = $this->fetchOrganizationTagMap(array_values(array_unique(array_map(
static fn (array $row): int => (int) ($row['id'] ?? 0),
$organizationRows,
))));
if ($includeOrganizations) {
foreach ($organizationRows as $row) {
$id = (int) ($row['id'] ?? 0);
if ($id <= 0 || isset($seen['organisation'][$id])) {
continue;
}
$locationId = (int) ($row['location_id'] ?? 0);
if ($locationId > 0) {
$coords = $this->extractCoordinates($row['location_latitude'] ?? null, $row['location_longitude'] ?? null);
if (null === $coords) {
continue;
}
} else {
$coords = $this->extractCoordinates($row['latitude'] ?? null, $row['longitude'] ?? null);
}
if (null === $coords) {
continue;
}
$seen['organisation'][$id] = true;
$tagData = $organizationTagMap[$id] ?? ['ids' => [], 'labels' => []];
$items[] = [
'type' => 'organisation',
'markerType' => $this->buildOrganizationMarkerType($tagData['ids']),
'id' => $id,
'title' => trim((string) ($row['title'] ?? '')),
'latitude' => $coords['latitude'],
'longitude' => $coords['longitude'],
'extra' => [
'organizationTagIds' => $tagData['ids'],
'organizationTagLabels' => $tagData['labels'],
],
];
}
}
if ($includeEvents) {
foreach ($this->fetchLocationRows($locationTable, $locationGeoColumns) as $row) {
$id = (int) ($row['id'] ?? 0);
if ($id <= 0 || isset($seen['location'][$id])) {
continue;
}
$coords = $this->extractCoordinates($row['latitude'] ?? null, $row['longitude'] ?? null);
if (null === $coords) {
continue;
}
$seen['location'][$id] = true;
$items[] = [
'type' => 'location',
'markerType' => 'location',
'id' => $id,
'title' => trim((string) ($row['title'] ?? '')),
'latitude' => $coords['latitude'],
'longitude' => $coords['longitude'],
'extra' => [],
];
}
foreach ($this->fetchEventRows($locationTable, $locationGeoColumns) as $row) {
$id = (int) ($row['event_id'] ?? 0);
if ($id <= 0 || isset($seen['event'][$id])) {
continue;
}
$coords = $this->extractCoordinates($row['latitude'] ?? null, $row['longitude'] ?? null);
if (null === $coords) {
continue;
}
$seen['event'][$id] = true;
$items[] = [
'type' => 'event',
'markerType' => 'event',
'id' => $id,
'title' => trim((string) ($row['event_title'] ?? '')),
'latitude' => $coords['latitude'],
'longitude' => $coords['longitude'],
'extra' => [
'locationTitle' => trim((string) ($row['location_title'] ?? '')),
'startDate' => $this->formatStartDate((int) ($row['startDate'] ?? 0)),
],
];
}
}
return $items;
}
/**
* @return list<array{id:int,label:string}>
*/
public function getOrganizationTags(): array
{
if (!$this->tableExists('tl_tags')) {
return [];
}
$columns = $this->getColumnMap('tl_tags');
$labelColumn = isset($columns['title']) ? 'title' : (isset($columns['tag']) ? 'tag' : null);
if (null === $labelColumn) {
return [];
}
$qb = $this->connection->createQueryBuilder();
$qb
->select('t.id', sprintf('t.%s AS label', $labelColumn))
->from('tl_tags', 't')
->orderBy(sprintf('t.%s', $labelColumn), 'ASC');
if (isset($columns['invisible'])) {
$qb->andWhere("(t.invisible IS NULL OR t.invisible = '' OR t.invisible = '0')");
}
$rows = $qb->executeQuery()->fetchAllAssociative();
$tags = [];
$seen = [];
foreach ($rows as $row) {
$id = (int) ($row['id'] ?? 0);
$label = trim((string) ($row['label'] ?? ''));
if ($id <= 0 || '' === $label || isset($seen[$id])) {
continue;
}
$seen[$id] = true;
$tags[] = [
'id' => $id,
'label' => $label,
];
}
return $tags;
}
/**
* @param list<int> $organizationIds
* @return array<int, array{ids: list<string>, labels: list<string>}>
*/
private function fetchOrganizationTagMap(array $organizationIds): array
{
$organizationIds = array_values(array_unique(array_filter($organizationIds, static fn (int $id): bool => $id > 0)));
if ([] === $organizationIds || !$this->tableExists('tl_tags_rel') || !$this->tableExists('tl_tags')) {
return [];
}
$rows = $this->connection->executeQuery(
'SELECT r.pid AS organization_id, r.tag_id, t.tag AS label
FROM tl_tags_rel r
INNER JOIN tl_tags t ON t.id = r.tag_id
WHERE r.ptable = ? AND r.field = ? AND r.pid IN (?)
ORDER BY r.pid ASC, r.tag_id ASC',
['tl_organization', 'tags', $organizationIds],
[ParameterType::STRING, ParameterType::STRING, ArrayParameterType::INTEGER],
)->fetchAllAssociative();
if ([] === $rows) {
$rows = $this->connection->executeQuery(
'SELECT r.pid AS organization_id, r.tag_id, t.tag AS label
FROM tl_tags_rel r
INNER JOIN tl_tags t ON t.id = r.tag_id
WHERE r.ptable = ? AND r.pid IN (?)
ORDER BY r.pid ASC, r.tag_id ASC',
['tl_organization', $organizationIds],
[ParameterType::STRING, ArrayParameterType::INTEGER],
)->fetchAllAssociative();
}
$map = [];
$seen = [];
foreach ($rows as $row) {
$organizationId = (int) ($row['organization_id'] ?? 0);
$tagId = (int) ($row['tag_id'] ?? 0);
$label = trim((string) ($row['label'] ?? ''));
if ($organizationId <= 0 || $tagId <= 0 || '' === $label || isset($seen[$organizationId][$tagId])) {
continue;
}
$seen[$organizationId][$tagId] = true;
$map[$organizationId]['ids'][] = (string) $tagId;
$map[$organizationId]['labels'][] = $label;
}
foreach ($map as $organizationId => $tagData) {
$map[$organizationId]['ids'] = array_values(array_unique($tagData['ids'] ?? []));
$map[$organizationId]['labels'] = array_values(array_unique($tagData['labels'] ?? []));
}
return $map;
}
/**
* @param list<string> $tagIds
*/
private function buildOrganizationMarkerType(array $tagIds): string
{
$firstTagId = (string) ($tagIds[0] ?? '');
if ('' !== $firstTagId && ctype_digit($firstTagId) && (int) $firstTagId > 0) {
return sprintf('organisation-tag-%d', (int) $firstTagId);
}
return 'organisation';
}
/**
* @return list<array<string,mixed>>
*/
private function fetchOrganizationRows(?string $table, string $locationTable, array $locationGeoColumns, bool $includeExternalOrganizations): array
{
if (null === $table) {
return [];
}
$organizationGeoColumns = $this->resolveGeoColumns($table);
$organizationColumns = $this->getColumnMap($table);
$hasLocationReference = isset($organizationColumns['location_id']);
if (null === $organizationGeoColumns && !$hasLocationReference) {
return [];
}
$qb = $this->connection->createQueryBuilder();
$qb
->select('o.id', 'o.title')
->from($table, 'o')
->orderBy('o.id', 'ASC');
if (null !== $organizationGeoColumns) {
$qb
->addSelect(sprintf('o.%s AS latitude', $organizationGeoColumns['latitude']))
->addSelect(sprintf('o.%s AS longitude', $organizationGeoColumns['longitude']));
}
if ($hasLocationReference) {
$qb
->addSelect('o.location_id')
->leftJoin('o', $locationTable, 'ol', 'ol.id = o.location_id')
->addSelect(sprintf('ol.%s AS location_latitude', $locationGeoColumns['latitude']))
->addSelect(sprintf('ol.%s AS location_longitude', $locationGeoColumns['longitude']));
$this->applyPublicationConstraints($qb, 'ol', $locationTable);
}
if (!$includeExternalOrganizations && isset($organizationColumns['isexternal'])) {
$qb->andWhere("(o.isExternal IS NULL OR o.isExternal = '' OR o.isExternal = '0')");
}
$this->applyPublicationConstraints($qb, 'o', $table);
return $qb->executeQuery()->fetchAllAssociative();
}
/**
* @return list<array<string,mixed>>
*/
private function fetchLocationRows(string $locationTable, array $locationGeoColumns): array
{
$qb = $this->connection->createQueryBuilder();
$qb
->select('l.id', 'l.title')
->addSelect(sprintf('l.%s AS latitude', $locationGeoColumns['latitude']))
->addSelect(sprintf('l.%s AS longitude', $locationGeoColumns['longitude']))
->from($locationTable, 'l')
->orderBy('l.id', 'ASC');
$this->applyPublicationConstraints($qb, 'l', $locationTable);
return $qb->executeQuery()->fetchAllAssociative();
}
/**
* @return list<array<string,mixed>>
*/
private function fetchEventRows(string $locationTable, array $locationGeoColumns): array
{
if (!$this->tableExists('tl_calendar_events')) {
return [];
}
$eventColumns = $this->getColumnMap('tl_calendar_events');
$today = strtotime('today');
$qb = $this->connection->createQueryBuilder();
$qb
->select(
'e.id AS event_id',
'e.title AS event_title',
'e.startDate',
'l.title AS location_title',
sprintf('l.%s AS latitude', $locationGeoColumns['latitude']),
sprintf('l.%s AS longitude', $locationGeoColumns['longitude'])
)
->from('tl_calendar_events', 'e')
->innerJoin('e', $locationTable, 'l', 'l.id = e.location_id')
->andWhere('e.location_id > 0')
->orderBy('e.id', 'ASC');
if (isset($eventColumns['startdate'])) {
$qb
->andWhere('e.startDate >= :event_start_date_from')
->setParameter('event_start_date_from', $today);
}
$this->applyPublicationConstraints($qb, 'e', 'tl_calendar_events');
$this->applyPublicationConstraints($qb, 'l', $locationTable);
return $qb->executeQuery()->fetchAllAssociative();
}
private function applyPublicationConstraints(QueryBuilder $qb, string $alias, string $table): void
{
$columns = $this->getColumnMap($table);
$now = time();
if (isset($columns['published'])) {
$qb
->andWhere(sprintf('%s.published = :%s_published', $alias, $alias))
->setParameter(sprintf('%s_published', $alias), '1');
}
if (isset($columns['start'])) {
$qb
->andWhere(sprintf('(%1$s.start IS NULL OR %1$s.start = 0 OR %1$s.start <= :%1$s_start_now)', $alias))
->setParameter(sprintf('%s_start_now', $alias), $now);
}
if (isset($columns['stop'])) {
$qb
->andWhere(sprintf('(%1$s.stop IS NULL OR %1$s.stop = 0 OR %1$s.stop > :%1$s_stop_now)', $alias))
->setParameter(sprintf('%s_stop_now', $alias), $now);
}
}
/**
* @return array{latitude:float,longitude:float}|null
*/
private function extractCoordinates(mixed $latitude, mixed $longitude): ?array
{
if (null === $latitude || null === $longitude) {
return null;
}
$lat = trim(str_replace(',', '.', (string) $latitude));
$lng = trim(str_replace(',', '.', (string) $longitude));
if ('' === $lat || '' === $lng || !is_numeric($lat) || !is_numeric($lng)) {
return null;
}
$latitudeFloat = (float) $lat;
$longitudeFloat = (float) $lng;
if (
($latitudeFloat < -90.0 || $latitudeFloat > 90.0)
|| ($longitudeFloat < -180.0 || $longitudeFloat > 180.0)
|| (0.0 === $latitudeFloat && 0.0 === $longitudeFloat)
) {
return null;
}
return [
'latitude' => $latitudeFloat,
'longitude' => $longitudeFloat,
];
}
private function formatStartDate(int $timestamp): string
{
if ($timestamp <= 0) {
return '';
}
$format = (string) Config::get('dateFormat');
return Date::parse('' !== $format ? $format : 'd.m.Y', $timestamp);
}
/**
* @param list<string> $candidates
*/
private function resolveExistingTable(array $candidates): ?string
{
foreach ($candidates as $candidate) {
if ($this->tableExists($candidate)) {
return $candidate;
}
}
return null;
}
/**
* @return array{latitude:string,longitude:string}|null
*/
private function resolveGeoColumns(string $table): ?array
{
$columns = $this->getColumnMap($table);
if (isset($columns['latitude'], $columns['longitude'])) {
return [
'latitude' => 'latitude',
'longitude' => 'longitude',
];
}
if (isset($columns['lat'], $columns['lng'])) {
return [
'latitude' => 'lat',
'longitude' => 'lng',
];
}
return null;
}
private function tableExists(string $table): bool
{
try {
return $this->connection->createSchemaManager()->tablesExist([$table]);
} catch (\Throwable) {
return false;
}
}
/**
* @return array<string,true>
*/
private function getColumnMap(string $table): array
{
if (isset($this->tableColumns[$table])) {
return $this->tableColumns[$table];
}
$columns = [];
try {
foreach ($this->connection->createSchemaManager()->listTableColumns($table) as $name => $column) {
$columns[strtolower((string) $name)] = true;
}
} catch (\Throwable) {
$columns = [];
}
$this->tableColumns[$table] = $columns;
return $columns;
}
}