Compare commits

..

11 Commits

Author SHA1 Message Date
Jürgen Mummert 84a6f118dc Adjust organization address fields and brighten FilePond preview 2026-03-01 12:00:46 +01:00
Jürgen Mummert 3176e6e414 Fix FilePond label interaction CSS conflicts 2026-03-01 11:52:43 +01:00
Jürgen Mummert 83c632f2dc Tune FilePond panel aspect ratios 2026-03-01 11:34:24 +01:00
Jürgen Mummert 15a93466b6 Adjust FilePond sizing and upload resize rules 2026-03-01 10:56:38 +01:00
Jürgen Mummert 3942569fb3 fix(member-events): confirm actions reliably and normalize duplicate titles 2026-03-01 10:22:53 +01:00
Jürgen Mummert ccf60a31e7 refactor(member-events): group editor actions in dedicated wrapper 2026-03-01 10:04:36 +01:00
Jürgen Mummert 000fdb8e79 fix(filter): adjust clear button spacing and hide select arrow when active 2026-02-27 21:15:09 +01:00
Jürgen Mummert 8b213ec619 fix(map): harden protomaps flavor loading with base-style fallback 2026-02-27 21:10:26 +01:00
Jürgen Mummert b29aaaa1a3 Event filter: replace reset button with per-select clear icons 2026-02-27 20:30:56 +01:00
Jürgen Mummert 7cb1097899 Refactor map cleanup: central popup manager and dead code removal 2026-02-27 19:58:24 +01:00
Jürgen Mummert 088bc58102 Map: satellite hybrid overlays for labels and roads 2026-02-27 19:31:36 +01:00
14 changed files with 559 additions and 293 deletions
+35 -64
View File
@@ -13,6 +13,39 @@ $GLOBALS['TL_DCA']['tl_module']['palettes']['eventmanager_map'] = '{title_legend
$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';
$getUsedOrganizationTagOptions = static function (): array {
$database = Database::getInstance();
$labelExpression = $database->fieldExists('title', 'tl_tags')
? "COALESCE(NULLIF(t.title, ''), t.tag)"
: 't.tag';
$rows = $database
->prepare(sprintf(
'SELECT DISTINCT t.id, %1$s AS label
FROM tl_tags_rel r
INNER JOIN tl_tags t ON t.id=r.tag_id
WHERE r.ptable=? AND (r.field=? OR r.field IS NULL OR r.field = \'\')
ORDER BY label ASC',
$labelExpression,
))
->execute('tl_organization', 'tags')
->fetchAllAssoc();
$options = [];
foreach ($rows as $row) {
$label = trim((string) ($row['label'] ?? ''));
if ('' === $label) {
continue;
}
$options[(int) $row['id']] = $label;
}
return $options;
};
$GLOBALS['TL_DCA']['tl_module']['fields']['editPage'] = [
'label' => &$GLOBALS['TL_LANG']['tl_module']['editPage'],
'exclude' => true,
@@ -73,38 +106,7 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['organizationTypeTags'] = [
'label' => &$GLOBALS['TL_LANG']['tl_module']['organizationTypeTags'],
'exclude' => true,
'inputType' => 'checkbox',
'options_callback' => static function () {
$database = Database::getInstance();
$labelExpression = $database->fieldExists('title', 'tl_tags')
? "COALESCE(NULLIF(t.title, ''), t.tag)"
: 't.tag';
$rows = Database::getInstance()
->prepare(sprintf(
'SELECT DISTINCT t.id, %1$s AS label
FROM tl_tags_rel r
INNER JOIN tl_tags t ON t.id=r.tag_id
WHERE r.ptable=? AND r.field=?
ORDER BY label ASC',
$labelExpression,
))
->execute('tl_organization', 'tags')
->fetchAllAssoc();
$options = [];
foreach ($rows as $row) {
$label = trim((string) ($row['label'] ?? ''));
if ('' === $label) {
continue;
}
$options[(int) $row['id']] = $label;
}
return $options;
},
'options_callback' => $getUsedOrganizationTagOptions,
'eval' => ['multiple' => true, 'tl_class' => 'clr'],
'sql' => ['type' => 'blob', 'notnull' => false],
'save_callback' => [
@@ -229,38 +231,7 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['mapInitialOrganizationTagId'] = [
'label' => &$GLOBALS['TL_LANG']['tl_module']['mapInitialOrganizationTagId'],
'exclude' => true,
'inputType' => 'select',
'options_callback' => static function (): array {
$database = Database::getInstance();
$labelExpression = $database->fieldExists('title', 'tl_tags')
? "COALESCE(NULLIF(t.title, ''), t.tag)"
: 't.tag';
$rows = $database
->prepare(sprintf(
'SELECT DISTINCT t.id, %1$s AS label
FROM tl_tags_rel r
INNER JOIN tl_tags t ON t.id=r.tag_id
WHERE r.ptable=? AND r.field=?
ORDER BY label ASC',
$labelExpression,
))
->execute('tl_organization', 'tags')
->fetchAllAssoc();
$options = [];
foreach ($rows as $row) {
$label = trim((string) ($row['label'] ?? ''));
if ('' === $label) {
continue;
}
$options[(int) $row['id']] = $label;
}
return $options;
},
'options_callback' => $getUsedOrganizationTagOptions,
'eval' => ['includeBlankOption' => true, 'chosen' => true, 'tl_class' => 'w50'],
'sql' => ['type' => 'integer', 'unsigned' => true, 'default' => 0],
];
@@ -10,11 +10,50 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/airbnb.css">
<link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css">
<link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css">
<style>
.module-event-edit .filepond--root {
width: 400px;
height: 600px;
}
.module-event-edit .filepond--root .filepond--drop-label {
height: 100%;
inset: 0;
}
.module-event-edit .filepond--root .filepond--drop-label label {
display: block;
width: auto;
float: none;
margin: 0;
padding: 0;
text-align: center;
font-weight: inherit;
}
.module-event-edit .filepond--root .filepond--drop-label,
.module-event-edit .filepond--root .filepond--drop-label label,
.module-event-edit .filepond--root .filepond--file-action-button {
pointer-events: auto;
}
.module-event-edit .filepond--root .filepond--image-preview-wrapper {
background: #f7f7f7;
}
.module-event-edit .filepond--root .filepond--image-preview-overlay-idle,
.module-event-edit .filepond--root .filepond--image-preview-overlay-success,
.module-event-edit .filepond--root .filepond--image-preview-overlay-failure {
background: rgba(255, 255, 255, 0.65);
}
</style>
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/de.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.min.js"></script>
{{ form_start(form, { action: app.request.uri, attr: { 'aria-live': 'polite' } }) }}
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
@@ -212,14 +251,46 @@
if (typeof window.FilePondPluginImagePreview !== 'undefined') {
window.FilePond.registerPlugin(window.FilePondPluginImagePreview);
}
if (typeof window.FilePondPluginImageResize !== 'undefined') {
window.FilePond.registerPlugin(window.FilePondPluginImageResize);
}
if (typeof window.FilePondPluginImageTransform !== 'undefined') {
window.FilePond.registerPlugin(window.FilePondPluginImageTransform);
}
const filePondOptions = {
instantUpload: false,
storeAsFile: true,
allowMultiple: false,
allowReplace: true,
stylePanelAspectRatio: 0.6666667,
styleItemPanelAspectRatio: 0.6666667,
credits: false,
acceptedFileTypes: ['image/*'],
allowImageResize: true,
imageResizeUpscale: false,
allowImageTransform: true,
onaddfile: function (error, fileItem) {
if (error || !fileItem || typeof fileItem.setMetadata !== 'function') {
return;
}
const fileType = fileItem.fileType || (fileItem.file && fileItem.file.type) || '';
if (fileType === 'image/svg+xml') {
fileItem.setMetadata('resize', null);
return;
}
fileItem.setMetadata('resize', {
mode: 'contain',
upscale: false,
size: {
width: 2000,
height: 2000
}
});
},
labelIdle: 'Bild hierher ziehen oder <span class="filepond--label-action">durchsuchen</span>'
};
@@ -8,6 +8,7 @@
<option value="tag-{{ tag.id }}">{{ tag.title }} ({{ tag.count }})</option>
{% endfor %}
</select>
<button type="button" class="eventfilter-clear" data-eventfilter-clear="tag" aria-label="Kategorie-Filter zurücksetzen" hidden><span class="icon-cross"></span></button>
</div>
<div class="widget-select places">
@@ -18,6 +19,7 @@
<option value="location-{{ location.id }}">{{ location.title }} ({{ location.count }})</option>
{% endfor %}
</select>
<button type="button" class="eventfilter-clear" data-eventfilter-clear="location" aria-label="Ort-Filter zurücksetzen" hidden><span class="icon-cross"></span></button>
</div>
<div class="widget-select org">
@@ -28,11 +30,10 @@
<option value="org-{{ organization.id }}">{{ organization.title }} ({{ organization.count }})</option>
{% endfor %}
</select>
<button type="button" class="eventfilter-clear" data-eventfilter-clear="org" aria-label="Veranstalter-Filter zurücksetzen" hidden><span class="icon-cross"></span></button>
</div>
</div>
<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>
@@ -73,12 +74,37 @@
outline-offset: 3px;
}
#eventfilters .widget-select.active::before {
display: none;
}
#eventfilters select:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
#eventfilters .eventfilter-reset[hidden] {
#eventfilters .widget-select {
position: relative;
}
#eventfilters .eventfilter-clear {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
padding: 1em;
line-height: 1;
}
#eventfilters .eventfilter-clear[hidden] {
display: none;
}
@@ -107,7 +133,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 +307,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 +446,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();
@@ -112,4 +112,4 @@
</style>
<script type="application/json" id="{{ mapDataElementId|e('html_attr') }}">{{ mapItemsJson|raw }}</script>
<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260226i"></script>
<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260227b"></script>
@@ -16,30 +16,32 @@
</span>
{% if isEditor %}
<form method="post" style="display:inline;" aria-label="Sichtbarkeit für {{ item.title }} ändern">
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
<input type="hidden" name="action" value="toggle_published">
<input type="hidden" name="event_id" value="{{ item.id }}">
<button type="submit" aria-label="{{ item.published ? 'Auf inaktiv setzen' : 'Auf aktiv setzen' }} für {{ item.title }}">{{ item.published ? 'aktiv' : 'inaktiv' }}</button>
</form>
<div class="member-events-actions">
<form method="post" style="display:inline;" aria-label="Sichtbarkeit für {{ item.title }} ändern">
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
<input type="hidden" name="action" value="toggle_published">
<input type="hidden" name="event_id" value="{{ item.id }}">
<button type="submit" aria-label="{{ item.published ? 'Auf inaktiv setzen' : 'Auf aktiv setzen' }} für {{ item.title }}">{{ item.published ? 'aktiv' : 'inaktiv' }}</button>
</form>
{% if item.editUrl %}
<a href="{{ item.editUrl }}" aria-label="{{ item.title }} bearbeiten">Bearbeiten</a>
{% endif %}
{% if item.editUrl %}
<a href="{{ item.editUrl }}" aria-label="{{ item.title }} bearbeiten">Bearbeiten</a>
{% endif %}
<form method="post" style="display:inline;" aria-label="{{ item.title }} duplizieren">
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
<input type="hidden" name="action" value="duplicate">
<input type="hidden" name="event_id" value="{{ item.id }}">
<button type="submit" aria-label="{{ item.title }} duplizieren">Duplizieren</button>
</form>
<form method="post" style="display:inline;" data-confirm-message="{{ ('Möchten Sie das Event \"' ~ item.title ~ '\" wirklich duplizieren?')|e('html_attr') }}" aria-label="{{ item.title }} duplizieren">
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
<input type="hidden" name="action" value="duplicate">
<input type="hidden" name="event_id" value="{{ item.id }}">
<button type="submit" aria-label="{{ item.title }} duplizieren">Duplizieren</button>
</form>
<form method="post" style="display:inline;" onsubmit="return confirm('wirklich löschen?');" aria-label="{{ item.title }} löschen">
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
<input type="hidden" name="action" value="delete">
<input type="hidden" name="event_id" value="{{ item.id }}">
<button type="submit" aria-label="{{ item.title }} löschen">Löschen</button>
</form>
<form method="post" style="display:inline;" data-confirm-message="{{ ('Möchten Sie das Event \"' ~ item.title ~ '\" wirklich löschen?')|e('html_attr') }}" aria-label="{{ item.title }} löschen">
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
<input type="hidden" name="action" value="delete">
<input type="hidden" name="event_id" value="{{ item.id }}">
<button type="submit" aria-label="{{ item.title }} löschen">Löschen</button>
</form>
</div>
{% endif %}
</li>
{% endfor %}
@@ -54,6 +56,8 @@
</form>
{% endif %}
<script src="/bundles/mummertmediaeventmanager/assets/member-events-confirm.js?v=20260301a"></script>
<h2>Vergangene Veranstaltungen</h2>
{% if pastEvents is empty %}
<p>Keine vergangenen Veranstaltungen gefunden.</p>
@@ -69,30 +73,32 @@
</span>
{% if isEditor %}
<form method="post" style="display:inline;" aria-label="Sichtbarkeit für {{ item.title }} ändern">
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
<input type="hidden" name="action" value="toggle_published">
<input type="hidden" name="event_id" value="{{ item.id }}">
<button type="submit" aria-label="{{ item.published ? 'Auf inaktiv setzen' : 'Auf aktiv setzen' }} für {{ item.title }}">{{ item.published ? 'aktiv' : 'inaktiv' }}</button>
</form>
<div class="member-events-actions">
<form method="post" style="display:inline;" aria-label="Sichtbarkeit für {{ item.title }} ändern">
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
<input type="hidden" name="action" value="toggle_published">
<input type="hidden" name="event_id" value="{{ item.id }}">
<button type="submit" aria-label="{{ item.published ? 'Auf inaktiv setzen' : 'Auf aktiv setzen' }} für {{ item.title }}">{{ item.published ? 'aktiv' : 'inaktiv' }}</button>
</form>
{% if item.editUrl %}
<a href="{{ item.editUrl }}" aria-label="{{ item.title }} bearbeiten">Bearbeiten</a>
{% endif %}
{% if item.editUrl %}
<a href="{{ item.editUrl }}" aria-label="{{ item.title }} bearbeiten">Bearbeiten</a>
{% endif %}
<form method="post" style="display:inline;" aria-label="{{ item.title }} duplizieren">
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
<input type="hidden" name="action" value="duplicate">
<input type="hidden" name="event_id" value="{{ item.id }}">
<button type="submit" aria-label="{{ item.title }} duplizieren">Duplizieren</button>
</form>
<form method="post" style="display:inline;" data-confirm-message="{{ ('Möchten Sie das Event \"' ~ item.title ~ '\" wirklich duplizieren?')|e('html_attr') }}" aria-label="{{ item.title }} duplizieren">
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
<input type="hidden" name="action" value="duplicate">
<input type="hidden" name="event_id" value="{{ item.id }}">
<button type="submit" aria-label="{{ item.title }} duplizieren">Duplizieren</button>
</form>
<form method="post" style="display:inline;" onsubmit="return confirm('wirklich löschen?');" aria-label="{{ item.title }} löschen">
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
<input type="hidden" name="action" value="delete">
<input type="hidden" name="event_id" value="{{ item.id }}">
<button type="submit" aria-label="{{ item.title }} löschen">Löschen</button>
</form>
<form method="post" style="display:inline;" data-confirm-message="{{ ('Möchten Sie das Event \"' ~ item.title ~ '\" wirklich löschen?')|e('html_attr') }}" aria-label="{{ item.title }} löschen">
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
<input type="hidden" name="action" value="delete">
<input type="hidden" name="event_id" value="{{ item.id }}">
<button type="submit" aria-label="{{ item.title }} löschen">Löschen</button>
</form>
</div>
{% endif %}
</li>
{% endfor %}
@@ -8,9 +8,48 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
<link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css">
<link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css">
<style>
.module-organization-edit .filepond--root {
width: 400px;
height: 400px;
}
.module-organization-edit .filepond--root .filepond--drop-label {
height: 100%;
inset: 0;
}
.module-organization-edit .filepond--root .filepond--drop-label label {
display: block;
width: auto;
float: none;
margin: 0;
padding: 0;
text-align: center;
font-weight: inherit;
}
.module-organization-edit .filepond--root .filepond--drop-label,
.module-organization-edit .filepond--root .filepond--drop-label label,
.module-organization-edit .filepond--root .filepond--file-action-button {
pointer-events: auto;
}
.module-organization-edit .filepond--root .filepond--image-preview-wrapper {
background: #f7f7f7;
}
.module-organization-edit .filepond--root .filepond--image-preview-overlay-idle,
.module-organization-edit .filepond--root .filepond--image-preview-overlay-success,
.module-organization-edit .filepond--root .filepond--image-preview-overlay-failure {
background: rgba(255, 255, 255, 0.65);
}
</style>
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.min.js"></script>
{{ form_start(form, { attr: { 'aria-live': 'polite' } }) }}
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
@@ -73,14 +112,46 @@
if (typeof window.FilePondPluginImagePreview !== 'undefined') {
window.FilePond.registerPlugin(window.FilePondPluginImagePreview);
}
if (typeof window.FilePondPluginImageResize !== 'undefined') {
window.FilePond.registerPlugin(window.FilePondPluginImageResize);
}
if (typeof window.FilePondPluginImageTransform !== 'undefined') {
window.FilePond.registerPlugin(window.FilePondPluginImageTransform);
}
const filePondOptions = {
instantUpload: false,
storeAsFile: true,
allowMultiple: false,
allowReplace: true,
stylePanelAspectRatio: 1,
styleItemPanelAspectRatio: 1,
credits: false,
acceptedFileTypes: ['image/*'],
allowImageResize: true,
imageResizeUpscale: false,
allowImageTransform: true,
onaddfile: function (error, fileItem) {
if (error || !fileItem || typeof fileItem.setMetadata !== 'function') {
return;
}
const fileType = fileItem.fileType || (fileItem.file && fileItem.file.type) || '';
if (fileType === 'image/svg+xml') {
fileItem.setMetadata('resize', null);
return;
}
fileItem.setMetadata('resize', {
mode: 'contain',
upscale: false,
size: {
width: 800,
height: 800
}
});
},
labelIdle: 'Logo hierher ziehen oder <span class="filepond--label-action">durchsuchen</span>'
};
+239 -147
View File
@@ -10,14 +10,71 @@ const DEFAULT_ZOOM = 6;
const DEFAULT_EVENT_COLOR = '#BC5067';
const EVENT_FADE_DURATION_MS = 200;
const EVENT_CLUSTER_LAYER_ID = 'eventmanager-events-clusters';
const EVENT_CLUSTER_SPIDERFY_LAYER_ID = 'eventmanager-events-clusters-spiderfy';
const EVENT_UNCLUSTERED_LAYER_ID = 'eventmanager-events-unclustered';
const SATELLITE_SOURCE_ID = 'eventmanager-satellite-source';
const SATELLITE_LAYER_ID = 'eventmanager-satellite-layer';
const SATELLITE_TILE_URL = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
const SATELLITE_LABELS_SOURCE_ID = 'eventmanager-satellite-labels-source';
const SATELLITE_LABELS_LAYER_ID = 'eventmanager-satellite-labels-layer';
const SATELLITE_LABELS_TILE_URL = 'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}';
const SATELLITE_ROADS_SOURCE_ID = 'eventmanager-satellite-roads-source';
const SATELLITE_ROADS_LAYER_ID = 'eventmanager-satellite-roads-layer';
const SATELLITE_ROADS_TILE_URL = 'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}';
const SATELLITE_ATTRIBUTION = '&copy; Esri, Maxar';
const PROTOMAPS_SOURCE_ID = 'protomaps';
const DEFAULT_BASE_STYLE_URL = 'https://maps.mummert.media/metadaten/world-light.json';
const PROTOMAPS_PM_TILES_URL = 'pmtiles://https://maps.mummert.media/tiles/world.pmtiles';
const PROTOMAPS_ATTRIBUTION = '<a href="https://github.com/protomaps/basemaps">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>';
const PROTOMAPS_GLYPHS_URL = 'https://maps.mummert.media/fonts/{fontstack}/{range}.pbf';
const PROTOMAPS_SPRITE_URL = 'https://maps.mummert.media/sprites/v4/light';
const PROTOMAPS_FLAVOR_URL = 'https://maps.mummert.media/metadaten/flavors/bio.json';
const PROTOMAPS_BASEMAPS_ESM_URLS = [
'https://cdn.jsdelivr.net/npm/@protomaps/basemaps@5/+esm',
'https://esm.sh/@protomaps/basemaps@5',
];
const PROTOMAPS_BASEMAPS_UMD_URL = 'https://unpkg.com/@protomaps/basemaps@5/dist/basemaps.js';
let dependenciesPromise = null;
let basemapsApiPromise = null;
const protomapsStylePromises = new Map();
const getBasemapsApi = async () => {
if (basemapsApiPromise) {
return basemapsApiPromise;
}
basemapsApiPromise = (async () => {
for (const url of PROTOMAPS_BASEMAPS_ESM_URLS) {
try {
const module = await import(url);
const moduleApi = module && 'object' === typeof module
? (module.layers ? module : (module.default && module.default.layers ? module.default : null))
: null;
if (moduleApi && 'function' === typeof moduleApi.layers) {
return moduleApi;
}
} catch (error) {
continue;
}
}
await loadScript(PROTOMAPS_BASEMAPS_UMD_URL);
if (window.basemaps && 'function' === typeof window.basemaps.layers) {
return window.basemaps;
}
throw new Error('Failed to load Protomaps basemaps API');
})();
basemapsApiPromise = basemapsApiPromise.catch((error) => {
basemapsApiPromise = null;
throw error;
});
return basemapsApiPromise;
};
const ensureStylesheet = (href) => {
if (!href) {
@@ -89,6 +146,69 @@ const ensureDependencies = async () => {
return dependenciesPromise;
};
const getProtomapsStyle = async (baseStyleUrl = DEFAULT_BASE_STYLE_URL) => {
const normalizedBaseStyleUrl = String(baseStyleUrl || DEFAULT_BASE_STYLE_URL).trim() || DEFAULT_BASE_STYLE_URL;
if (protomapsStylePromises.has(normalizedBaseStyleUrl)) {
return protomapsStylePromises.get(normalizedBaseStyleUrl);
}
const stylePromise = (async () => {
const baseStyleResponse = await fetch(normalizedBaseStyleUrl, { credentials: 'omit' });
if (!baseStyleResponse.ok) {
throw new Error(`Failed to load base map style: ${baseStyleResponse.status}`);
}
const baseStyle = await baseStyleResponse.json();
const baseSources = baseStyle?.sources && 'object' === typeof baseStyle.sources
? baseStyle.sources
: {};
const protomapsSource = baseSources[PROTOMAPS_SOURCE_ID] && 'object' === typeof baseSources[PROTOMAPS_SOURCE_ID]
? baseSources[PROTOMAPS_SOURCE_ID]
: {
type: 'vector',
attribution: PROTOMAPS_ATTRIBUTION,
url: PROTOMAPS_PM_TILES_URL,
};
try {
const basemapsApi = await getBasemapsApi();
const flavorResponse = await fetch(PROTOMAPS_FLAVOR_URL, { credentials: 'omit' });
if (!flavorResponse.ok) {
throw new Error(`Failed to load Protomaps flavor: ${flavorResponse.status}`);
}
const flavor = await flavorResponse.json();
const generatedLayers = basemapsApi.layers(PROTOMAPS_SOURCE_ID, flavor, { lang: 'de' });
return {
...baseStyle,
version: 8,
glyphs: baseStyle?.glyphs || PROTOMAPS_GLYPHS_URL,
sprite: baseStyle?.sprite || PROTOMAPS_SPRITE_URL,
sources: {
...baseSources,
[PROTOMAPS_SOURCE_ID]: protomapsSource,
},
layers: generatedLayers,
};
} catch (error) {
return baseStyle;
}
})();
const cachedStylePromise = stylePromise.catch((error) => {
protomapsStylePromises.delete(normalizedBaseStyleUrl);
throw error;
});
protomapsStylePromises.set(normalizedBaseStyleUrl, cachedStylePromise);
return cachedStylePromise;
};
const rewriteGlyphUrl = (url) => {
if (!url) {
return url;
@@ -156,7 +276,7 @@ const parseItems = (container) => {
const unique = new Map();
parsed.forEach((item) => {
if (!item || !['event', 'location', 'organisation'].includes(item.type)) {
if (!item || !['event', 'organisation'].includes(item.type)) {
return;
}
@@ -291,9 +411,7 @@ const ensureSatelliteLayer = (map) => {
const markerLayerCandidates = [
EVENT_CLUSTER_LAYER_ID,
EVENT_CLUSTER_SPIDERFY_LAYER_ID,
EVENT_UNCLUSTERED_LAYER_ID,
'eventmanager-non-events',
];
const beforeId = markerLayerCandidates.find((layerId) => map.getLayer(layerId));
@@ -312,6 +430,44 @@ const ensureSatelliteLayer = (map) => {
'raster-saturation': 0,
},
}, beforeId);
map.addSource(SATELLITE_ROADS_SOURCE_ID, {
type: 'raster',
tiles: [SATELLITE_ROADS_TILE_URL],
tileSize: 256,
attribution: SATELLITE_ATTRIBUTION,
});
map.addLayer({
id: SATELLITE_ROADS_LAYER_ID,
type: 'raster',
source: SATELLITE_ROADS_SOURCE_ID,
layout: {
visibility: 'none',
},
paint: {
'raster-opacity': 1,
},
}, beforeId);
map.addSource(SATELLITE_LABELS_SOURCE_ID, {
type: 'raster',
tiles: [SATELLITE_LABELS_TILE_URL],
tileSize: 256,
attribution: SATELLITE_ATTRIBUTION,
});
map.addLayer({
id: SATELLITE_LABELS_LAYER_ID,
type: 'raster',
source: SATELLITE_LABELS_SOURCE_ID,
layout: {
visibility: 'none',
},
paint: {
'raster-opacity': 1,
},
}, beforeId);
};
const setSatelliteMode = (map, enabled) => {
@@ -325,7 +481,16 @@ const setSatelliteMode = (map, enabled) => {
return;
}
const hybridOverlayLayerIds = [SATELLITE_ROADS_LAYER_ID, SATELLITE_LABELS_LAYER_ID];
map.setLayoutProperty(SATELLITE_LAYER_ID, 'visibility', enabled ? 'visible' : 'none');
hybridOverlayLayerIds.forEach((layerId) => {
if (map.getLayer(layerId)) {
map.setLayoutProperty(layerId, 'visibility', enabled ? 'visible' : 'none');
map.setPaintProperty(layerId, 'raster-opacity-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
map.setPaintProperty(layerId, 'raster-opacity', enabled ? 1 : 0);
}
});
map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-opacity-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-brightness-min-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
map.setPaintProperty(SATELLITE_LAYER_ID, 'raster-brightness-max-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
@@ -473,7 +638,7 @@ const toFeature = (item) => ({
},
});
const initOrganizationMarkers = (map, organizationItems, organizationColor) => {
const initOrganizationMarkers = (map, organizationItems, organizationColor, openPopup) => {
if (!organizationItems.length) {
return {
setOnlyTagId: () => {},
@@ -489,16 +654,21 @@ const initOrganizationMarkers = (map, organizationItems, organizationColor) => {
const marker = new maplibregl.Marker(organizationColor ? { color: organizationColor } : undefined)
.setLngLat([item.longitude, item.latitude]);
if (popupHtml) {
marker.setPopup(new maplibregl.Popup({ offset: 15 }).setHTML(String(popupHtml)));
}
marker.addTo(map);
const markerElement = marker.getElement();
if (markerElement) {
markerElement.style.zIndex = String(Math.round((90 - item.latitude) * 1000));
markerElement.style.cursor = 'pointer';
if (popupHtml && typeof openPopup === 'function') {
markerElement.addEventListener('click', (event) => {
event.preventDefault();
event.stopPropagation();
openPopup([item.longitude, item.latitude], String(popupHtml));
});
}
}
return {
@@ -552,7 +722,7 @@ const initOrganizationMarkers = (map, organizationItems, organizationColor) => {
};
};
const bindExternalTagFilters = (container, map, organizationMarkerManager, eventLayerManager) => {
const bindExternalTagFilters = (container, map, organizationMarkerManager, eventLayerManager, closePopup) => {
const wrapperId = container.dataset.mapFilterWrapperId || '';
if (!wrapperId || !organizationMarkerManager) {
@@ -667,6 +837,9 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
setEventButtonState(false);
updateExclusiveButtonAccessibility();
if (typeof closePopup === 'function') {
closePopup();
}
applyFilter();
});
});
@@ -708,6 +881,9 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
tagButtons.forEach((button) => setButtonState(button, false));
setEventButtonState(eventsOnly);
updateExclusiveButtonAccessibility();
if (typeof closePopup === 'function') {
closePopup();
}
applyFilter();
});
} else if (eventToggleButton) {
@@ -794,119 +970,7 @@ const bindExternalTagFilters = (container, map, organizationMarkerManager, event
applyMapStyleMode();
};
const initLocationLayers = (map, locationItems, markerImageId) => {
if (!locationItems.length) {
return {
setVisible: () => {},
};
}
const sourceId = 'eventmanager-non-events-source';
const layerId = 'eventmanager-non-events';
map.addSource(sourceId, {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: locationItems.map(toFeature),
},
});
map.addLayer({
id: layerId,
type: 'symbol',
source: sourceId,
layout: {
'icon-image': markerImageId,
'icon-size': 1,
'icon-anchor': 'bottom',
'icon-allow-overlap': true,
'icon-ignore-placement': true,
'symbol-sort-key': ['*', -1, ['to-number', ['get', 'latitude'], 0]],
},
paint: {
'icon-opacity': 1,
'icon-translate': [0, 4],
},
});
map.on('click', layerId, (event) => {
const blockingLayers = [
EVENT_CLUSTER_LAYER_ID,
EVENT_CLUSTER_SPIDERFY_LAYER_ID,
EVENT_UNCLUSTERED_LAYER_ID,
].filter((id) => map.getLayer(id));
if (blockingLayers.length) {
const topEventFeatures = map.queryRenderedFeatures(event.point, { layers: blockingLayers });
if (topEventFeatures.length) {
return;
}
}
const feature = event.features && event.features[0] ? event.features[0] : null;
if (!feature) {
return;
}
const popupHtml = feature?.properties?.popupHtml || '';
const coordinates = event.lngLat ? [event.lngLat.lng, event.lngLat.lat] : null;
if (!coordinates) {
return;
}
new maplibregl.Popup({ offset: 15 })
.setLngLat(coordinates)
.setHTML(String(popupHtml))
.addTo(map);
});
map.on('mouseenter', layerId, () => {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', layerId, () => {
map.getCanvas().style.cursor = '';
});
const setLayerLayoutVisibility = (isVisible) => {
if (!map.getLayer(layerId)) {
return;
}
map.setLayoutProperty(layerId, 'visibility', isVisible ? 'visible' : 'none');
};
const fadeLayerOpacity = (value) => {
if (!map.getLayer(layerId)) {
return;
}
map.setPaintProperty(layerId, 'icon-opacity-transition', { duration: EVENT_FADE_DURATION_MS, delay: 0 });
map.setPaintProperty(layerId, 'icon-opacity', value);
};
return {
setVisible: (isVisible) => {
if (isVisible) {
setLayerLayoutVisibility(true);
fadeLayerOpacity(1);
return;
}
fadeLayerOpacity(0);
window.setTimeout(() => {
setLayerLayoutVisibility(false);
}, EVENT_FADE_DURATION_MS + 10);
},
};
};
const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMarkerImageId) => {
const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMarkerImageId, openPopup, closePopup) => {
const sourceId = 'eventmanager-events-source';
const clusterLayerId = EVENT_CLUSTER_LAYER_ID;
const unclusteredLayerId = EVENT_UNCLUSTERED_LAYER_ID;
@@ -983,10 +1047,9 @@ const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMark
return;
}
new maplibregl.Popup({ offset: 15 })
.setLngLat([lng, lat])
.setHTML(String(popupHtml))
.addTo(map);
if (typeof openPopup === 'function') {
openPopup([lng, lat], String(popupHtml));
}
};
map.on('click', unclusteredLayerId, (event) => {
@@ -1071,7 +1134,7 @@ const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMark
},
spiderLeavesPaint: {
'icon-opacity': 1,
'icon-translate': [0, 9],
'icon-translate': [-3, 9],
},
onLeafClick: (feature, spiderEvent) => {
const clickCoordinates = spiderEvent?.lngLat
@@ -1155,6 +1218,10 @@ const initEventLayers = (map, eventItems, eventColor, markerImageId, clusterMark
}
}
if (typeof closePopup === 'function') {
closePopup();
}
fadeLayerOpacity(clusterLayerId, 'icon-opacity', 0);
fadeLayerOpacity(clusterLayerId, 'text-opacity', 0);
fadeLayerOpacity(unclusteredLayerId, 'icon-opacity', 0);
@@ -1200,7 +1267,7 @@ const initSingleMap = (container) => {
container.dataset.mapInitialized = '1';
ensureDependencies()
.then(() => {
.then(async () => {
if (typeof maplibregl === 'undefined') {
return;
}
@@ -1211,7 +1278,8 @@ const initSingleMap = (container) => {
window.__eventmanagerPmtilesRegistered = true;
}
const style = container.dataset.mapStyle || 'https://maps.mummert.media/metadaten/world-light.json';
const baseStyleUrl = container.dataset.mapStyle || DEFAULT_BASE_STYLE_URL;
const style = await getProtomapsStyle(baseStyleUrl);
const map = new maplibregl.Map({
container,
style,
@@ -1232,6 +1300,44 @@ const initSingleMap = (container) => {
},
});
let activePopup = null;
const closePopup = () => {
if (!activePopup) {
return;
}
activePopup.remove();
activePopup = null;
};
const openPopup = (coordinates, popupHtml) => {
if (!Array.isArray(coordinates) || coordinates.length !== 2 || !popupHtml) {
return;
}
const [lng, lat] = coordinates.map((value) => Number(value));
if (!Number.isFinite(lng) || !Number.isFinite(lat)) {
return;
}
closePopup();
const popup = new maplibregl.Popup({ offset: 15 })
.setLngLat([lng, lat])
.setHTML(String(popupHtml))
.addTo(map);
popup.on('close', () => {
if (activePopup === popup) {
activePopup = null;
}
});
activePopup = popup;
};
map.on('style.load', () => {
applyDefaultProjection(map);
});
@@ -1281,9 +1387,6 @@ const initSingleMap = (container) => {
const organizationItems = items
.filter((item) => item.type === 'organisation')
.sort((firstItem, secondItem) => secondItem.latitude - firstItem.latitude);
const locationItems = items
.filter((item) => item.type === 'location')
.sort((firstItem, secondItem) => secondItem.latitude - firstItem.latitude);
const eventItems = items
.filter((item) => item.type === 'event')
.sort((firstItem, secondItem) => secondItem.latitude - firstItem.latitude);
@@ -1304,25 +1407,14 @@ const initSingleMap = (container) => {
return;
}
const organizationMarkerManager = initOrganizationMarkers(map, organizationItems, organizationColor);
const locationLayerManager = initLocationLayers(map, locationItems, eventMarkerImageId);
const organizationMarkerManager = initOrganizationMarkers(map, organizationItems, organizationColor, openPopup);
let eventLayerManager = null;
if (eventItems.length) {
eventLayerManager = initEventLayers(map, eventItems, eventColor, eventMarkerImageId, clusterMarkerImageId);
eventLayerManager = initEventLayers(map, eventItems, eventColor, eventMarkerImageId, clusterMarkerImageId, openPopup, closePopup);
}
const combinedEventLayerManager = {
setVisible: (isVisible) => {
locationLayerManager.setVisible(isVisible);
if (eventLayerManager) {
eventLayerManager.setVisible(isVisible);
}
},
};
bindExternalTagFilters(container, map, organizationMarkerManager, combinedEventLayerManager);
bindExternalTagFilters(container, map, organizationMarkerManager, eventLayerManager, closePopup);
if ('markers' === centerMode) {
fitBounds(allCoordinates);
+28
View File
@@ -0,0 +1,28 @@
(function () {
var decodeHtmlEntities = function (value) {
var textarea = document.createElement('textarea');
textarea.innerHTML = String(value || '');
return textarea.value;
};
var handleSubmit = function (event) {
var target = event.target;
if (!(target instanceof HTMLFormElement)) {
return;
}
var message = decodeHtmlEntities(target.getAttribute('data-confirm-message') || '');
if (!message) {
return;
}
if (!window.confirm(message)) {
event.preventDefault();
}
};
document.addEventListener('submit', handleSubmit, true);
})();
@@ -65,7 +65,14 @@ class MemberEventsController extends AbstractFrontendModuleController
if ('toggle_published' === $action) {
$this->eventRepository->togglePublished($eventId);
} elseif ('duplicate' === $action) {
$this->eventRepository->duplicate($eventId);
$newEventId = $this->eventRepository->duplicate($eventId);
if ($newEventId > 0 && $editPage instanceof PageModel) {
return new RedirectResponse($this->generateContentUrl($editPage, [
'event' => (string) $newEventId,
'ref' => base64_encode($backUrl),
]));
}
} elseif ('delete' === $action) {
$this->eventRepository->delete($eventId);
}
@@ -70,10 +70,9 @@ class OrganizationEditController extends AbstractFrontendModuleController
$formData = [
'title' => (string) ($organization['title'] ?? ''),
'street' => (string) ($organization['street'] ?? ''),
'street2' => (string) ($organization['street2'] ?? ''),
'postal' => (string) ($organization['postal'] ?? ''),
'city' => (string) ($organization['city'] ?? ''),
'state' => (string) ($organization['state'] ?? ''),
'country' => (string) ($organization['country'] ?? ''),
'phone' => (string) ($organization['phone'] ?? ''),
'email' => (string) ($organization['email'] ?? ''),
'website' => (string) ($organization['website'] ?? ''),
+1 -2
View File
@@ -20,10 +20,9 @@ class OrganizationType extends AbstractType
$builder
->add('title', TextType::class, ['label' => 'Titel', 'required' => true])
->add('street', TextType::class, ['label' => 'Straße', 'required' => false])
->add('street2', TextType::class, ['label' => 'Weitere Adressangaben', 'required' => false])
->add('postal', TextType::class, ['label' => 'PLZ', 'required' => false])
->add('city', TextType::class, ['label' => 'Ort', 'required' => false])
->add('state', TextType::class, ['label' => 'Bundesland', 'required' => false])
->add('country', TextType::class, ['label' => 'Land', 'required' => false])
->add('phone', TextType::class, ['label' => 'Telefon', 'required' => false])
->add('email', EmailType::class, ['label' => 'E-Mail', 'required' => false])
->add('website', TextType::class, ['label' => 'Webseite', 'required' => false])
+2 -1
View File
@@ -84,7 +84,8 @@ class EventRepository
unset($row['id']);
if (array_key_exists('title', $row)) {
$row['title'] = trim((string) $row['title'].' (Kopie)');
$normalizedTitle = html_entity_decode((string) $row['title'], ENT_QUOTES | ENT_HTML5, 'UTF-8');
$row['title'] = trim($normalizedTitle.' (Kopie)');
}
if (array_key_exists('alias', $row)) {
-18
View File
@@ -347,24 +347,6 @@ class MapModuleDataProvider
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>>
*/
+1 -2
View File
@@ -71,10 +71,9 @@ class OrganizationRepository
[
'title' => $data['title'] ?? '',
'street' => $data['street'] ?? '',
'street2' => $data['street2'] ?? '',
'postal' => $data['postal'] ?? '',
'city' => $data['city'] ?? '',
'state' => $data['state'] ?? '',
'country' => $data['country'] ?? '',
'phone' => $data['phone'] ?? '',
'email' => $data['email'] ?? '',
'website' => $data['website'] ?? '',