Jürgen Mummert
311 lines
12 KiB
Twig
311 lines
12 KiB
Twig
{% extends "@Contao/frontend_module/_base.html.twig" %}
|
|
|
|
{% block content %}
|
|
{% if error is defined and error %}
|
|
<p role="alert">{{ error }}</p>
|
|
<p><a href="{{ backUrl }}">Zurück</a></p>
|
|
{% elseif form is defined and form %}
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
|
<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">
|
|
<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>
|
|
|
|
{{ form_start(form, { action: app.request.uri, attr: { 'aria-live': 'polite' } }) }}
|
|
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
|
|
<input type="hidden" id="remove_image" name="remove_image" value="0">
|
|
|
|
{{ form_row(form.title) }}
|
|
{{ form_row(form.startDate) }}
|
|
{{ form_row(form.endDate) }}
|
|
{{ form_row(form.addTime) }}
|
|
<div id="event-time-wrap" style="display:none;" hidden aria-hidden="true">
|
|
{{ form_row(form.startTime) }}
|
|
{{ form_row(form.endTime) }}
|
|
</div>
|
|
{% if form.organization_ids is defined %}
|
|
{{ form_row(form.organization_ids) }}
|
|
{% endif %}
|
|
{{ form_row(form.location_id) }}
|
|
{{ form_row(form.tags) }}
|
|
{{ form_row(form.teaser) }}
|
|
{{ form_row(form.description) }}
|
|
{{ form_row(form.url) }}
|
|
{{ form_row(form.addImage) }}
|
|
|
|
<div id="event-image-upload-wrap" style="display:none;" hidden aria-hidden="true">
|
|
{{ form_row(form.eventUpload) }}
|
|
{{ form_row(form.photographer) }}
|
|
<p class="help-text">Die Angabe des Urhebers ist notwendig. Ihnen muss eine Genehmigung zur Verwendung des Bildes vorliegen.</p>
|
|
</div>
|
|
|
|
{{ form_row(form.termsAccepted) }}
|
|
{{ form_row(form.isSoldOut) }}
|
|
{{ form_row(form.isCanceled) }}
|
|
{{ form_row(form.published) }}
|
|
<div class="actions" aria-label="Formularaktionen">
|
|
<button type="submit" id="save-btn" disabled>Speichern</button>
|
|
<button type="submit" id="save-back-btn" name="save_back" value="1" disabled>Speichern und Zurück</button>
|
|
<a href="{{ backUrl }}" aria-label="Zurück zur vorherigen Seite">Zurück</a>
|
|
</div>
|
|
{{ form_end(form) }}
|
|
|
|
<script>
|
|
(function () {
|
|
const locationSelect = document.querySelector('select.js-location-choice');
|
|
const organizationSelect = document.querySelector('select.js-organization-choice');
|
|
const typeSelect = document.querySelector('select.js-event-tags-choice');
|
|
|
|
if (organizationSelect && typeof window.Choices === 'function') {
|
|
new window.Choices(organizationSelect, {
|
|
searchEnabled: true,
|
|
shouldSort: false,
|
|
removeItemButton: true,
|
|
itemSelectText: '',
|
|
placeholder: true,
|
|
placeholderValue: organizationSelect.dataset.placeholder || 'Veranstalter suchen …',
|
|
noResultsText: 'Keine Treffer',
|
|
noChoicesText: 'Keine Optionen verfügbar'
|
|
});
|
|
}
|
|
|
|
if (locationSelect && typeof window.Choices === 'function') {
|
|
new window.Choices(locationSelect, {
|
|
searchEnabled: true,
|
|
shouldSort: false,
|
|
itemSelectText: '',
|
|
placeholder: true,
|
|
placeholderValue: locationSelect.dataset.placeholder || 'Suchen …',
|
|
noResultsText: 'Keine Treffer',
|
|
noChoicesText: 'Keine Optionen verfügbar'
|
|
});
|
|
}
|
|
|
|
if (typeSelect && typeof window.Choices === 'function') {
|
|
new window.Choices(typeSelect, {
|
|
searchEnabled: false,
|
|
shouldSort: false,
|
|
removeItemButton: true,
|
|
itemSelectText: '',
|
|
placeholder: true,
|
|
placeholderValue: typeSelect.dataset.placeholder || 'Typen suchen …',
|
|
noResultsText: 'Keine Treffer',
|
|
noChoicesText: 'Keine Optionen verfügbar'
|
|
});
|
|
}
|
|
|
|
if (typeof window.flatpickr === 'function') {
|
|
const dateInputs = document.querySelectorAll('input.js-flatpickr-date');
|
|
dateInputs.forEach(function (input) {
|
|
window.flatpickr(input, {
|
|
locale: 'de',
|
|
dateFormat: 'Y-m-d',
|
|
allowInput: true
|
|
});
|
|
});
|
|
|
|
const timeInputs = document.querySelectorAll('input.js-flatpickr-time');
|
|
timeInputs.forEach(function (input) {
|
|
window.flatpickr(input, {
|
|
locale: 'de',
|
|
enableTime: true,
|
|
noCalendar: true,
|
|
dateFormat: 'H:i',
|
|
time_24hr: true,
|
|
allowInput: true
|
|
});
|
|
});
|
|
}
|
|
|
|
const addImageToggle = document.querySelector('input.js-add-image-toggle');
|
|
const addTimeToggle = document.querySelector('input.js-add-time-toggle');
|
|
const timeWrap = document.getElementById('event-time-wrap');
|
|
const startTimeInput = document.getElementById('{{ form.startTime.vars.id }}');
|
|
const imageWrap = document.getElementById('event-image-upload-wrap');
|
|
const imageInput = document.querySelector('input.js-event-image-upload');
|
|
const photographerInput = document.querySelector('input.js-photographer');
|
|
const removeImageInput = document.getElementById('remove_image');
|
|
const currentImagePath = {{ (currentImagePath is defined and currentImagePath) ? ('/' ~ currentImagePath)|json_encode|raw : 'null' }};
|
|
const hadInitialImage = !!currentImagePath;
|
|
let pondDirty = false;
|
|
|
|
const form = document.querySelector('form');
|
|
const saveButton = document.getElementById('save-btn');
|
|
const saveBackButton = document.getElementById('save-back-btn');
|
|
if (!form || !saveButton || !saveBackButton) {
|
|
return;
|
|
}
|
|
const initial = new FormData(form);
|
|
const hasChanges = () => {
|
|
const current = new FormData(form);
|
|
for (const [key, value] of current.entries()) {
|
|
if (initial.getAll(key).join(',') !== current.getAll(key).join(',')) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
const updateButtons = () => {
|
|
const changed = hasChanges() || pondDirty;
|
|
saveButton.disabled = !changed;
|
|
saveBackButton.disabled = !changed;
|
|
};
|
|
|
|
const setImageVisibility = () => {
|
|
if (!addImageToggle || !imageWrap) {
|
|
return;
|
|
}
|
|
|
|
addImageToggle.setAttribute('aria-controls', 'event-image-upload-wrap');
|
|
addImageToggle.setAttribute('aria-expanded', addImageToggle.checked ? 'true' : 'false');
|
|
|
|
imageWrap.style.display = addImageToggle.checked ? '' : 'none';
|
|
imageWrap.hidden = !addImageToggle.checked;
|
|
imageWrap.setAttribute('aria-hidden', addImageToggle.checked ? 'false' : 'true');
|
|
|
|
if (photographerInput) {
|
|
photographerInput.required = !!addImageToggle.checked;
|
|
}
|
|
|
|
if (!addImageToggle.checked && removeImageInput) {
|
|
removeImageInput.value = hadInitialImage ? '1' : '0';
|
|
}
|
|
|
|
updateButtons();
|
|
};
|
|
|
|
const setTimeVisibility = () => {
|
|
if (!addTimeToggle || !timeWrap) {
|
|
return;
|
|
}
|
|
|
|
addTimeToggle.setAttribute('aria-controls', 'event-time-wrap');
|
|
addTimeToggle.setAttribute('aria-expanded', addTimeToggle.checked ? 'true' : 'false');
|
|
|
|
timeWrap.style.display = addTimeToggle.checked ? '' : 'none';
|
|
timeWrap.hidden = !addTimeToggle.checked;
|
|
timeWrap.setAttribute('aria-hidden', addTimeToggle.checked ? 'false' : 'true');
|
|
|
|
if (startTimeInput) {
|
|
startTimeInput.required = !!addTimeToggle.checked;
|
|
}
|
|
|
|
updateButtons();
|
|
};
|
|
|
|
if (addTimeToggle) {
|
|
addTimeToggle.addEventListener('change', setTimeVisibility);
|
|
setTimeVisibility();
|
|
}
|
|
|
|
if (addImageToggle) {
|
|
addImageToggle.addEventListener('change', setImageVisibility);
|
|
setImageVisibility();
|
|
}
|
|
|
|
if (imageInput && typeof window.FilePond !== 'undefined') {
|
|
if (typeof window.FilePondPluginImagePreview !== 'undefined') {
|
|
window.FilePond.registerPlugin(window.FilePondPluginImagePreview);
|
|
}
|
|
|
|
const filePondOptions = {
|
|
instantUpload: false,
|
|
storeAsFile: true,
|
|
allowMultiple: false,
|
|
allowReplace: true,
|
|
credits: false,
|
|
acceptedFileTypes: ['image/*'],
|
|
labelIdle: 'Bild hierher ziehen oder <span class="filepond--label-action">durchsuchen</span>'
|
|
};
|
|
|
|
if (currentImagePath) {
|
|
filePondOptions.files = [
|
|
{
|
|
source: currentImagePath,
|
|
options: {
|
|
type: 'local'
|
|
}
|
|
}
|
|
];
|
|
|
|
filePondOptions.server = {
|
|
load: (source, load, error, progress, abort) => {
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open('GET', source);
|
|
xhr.responseType = 'blob';
|
|
xhr.onload = function () {
|
|
if (xhr.status >= 200 && xhr.status < 300) {
|
|
load(xhr.response);
|
|
} else {
|
|
error('Laden fehlgeschlagen');
|
|
}
|
|
};
|
|
xhr.onerror = function () {
|
|
error('Laden fehlgeschlagen');
|
|
};
|
|
xhr.send();
|
|
|
|
return {
|
|
abort: () => {
|
|
xhr.abort();
|
|
abort();
|
|
}
|
|
};
|
|
}
|
|
};
|
|
}
|
|
|
|
const pond = window.FilePond.create(imageInput, filePondOptions);
|
|
|
|
const syncPondState = () => {
|
|
const files = pond.getFiles();
|
|
const hasLocalFile = files.some((file) => window.FilePond.FileOrigin && file.origin === window.FilePond.FileOrigin.LOCAL);
|
|
const hasNewFile = files.some((file) => window.FilePond.FileOrigin && file.origin !== window.FilePond.FileOrigin.LOCAL);
|
|
const imageEnabled = addImageToggle ? addImageToggle.checked : true;
|
|
|
|
pondDirty = imageEnabled && (hasNewFile || (hadInitialImage && !hasLocalFile));
|
|
|
|
if (removeImageInput) {
|
|
if (!imageEnabled) {
|
|
removeImageInput.value = hadInitialImage ? '1' : '0';
|
|
} else {
|
|
removeImageInput.value = hadInitialImage && !hasLocalFile && !hasNewFile ? '1' : '0';
|
|
}
|
|
}
|
|
|
|
updateButtons();
|
|
};
|
|
|
|
syncPondState();
|
|
|
|
pond.on('removefile', function () {
|
|
syncPondState();
|
|
});
|
|
|
|
pond.on('addfile', function () {
|
|
syncPondState();
|
|
});
|
|
|
|
pond.on('updatefiles', function () {
|
|
syncPondState();
|
|
});
|
|
}
|
|
|
|
form.addEventListener('input', function () {
|
|
updateButtons();
|
|
});
|
|
form.addEventListener('change', function () {
|
|
updateButtons();
|
|
});
|
|
})();
|
|
</script>
|
|
{% else %}
|
|
<p>Kein Formular verfügbar.</p>
|
|
{% endif %}
|
|
{% endblock %}
|