mummert/eventmanager-bundle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add TipTap editor and switch tags to event/organization edit

Browse Source
This commit is contained in:
Jürgen Mummert
2026-03-01 12:54:36 +01:00
parent 76be3bcd09
commit 141e310320
7 changed files with 1062 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contao/templates/frontend/event_edit.html.twig
+295 -16
View File
@@ -11,6 +11,170 @@
<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 .event-editor-toolbar {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: .5rem 0;
}
.module-event-edit .event-editor-toolbar button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.2rem;
padding: .4rem .65rem;
border: 1px solid #cbd5e1;
border-radius: .375rem;
background: #f8fafc;
color: #1f2937;
font-size: .9rem;
font-weight: 600;
cursor: pointer;
line-height: 1;
}
.module-event-edit .event-editor-toolbar button img {
width: 1rem;
height: 1rem;
display: block;
filter: brightness(0) saturate(100%) invert(18%) sepia(18%) saturate(522%) hue-rotate(177deg) brightness(94%) contrast(91%);
transition: filter .15s ease;
}
.module-event-edit .event-editor-toolbar button:hover {
background: #eef2ff;
border-color: #a5b4fc;
}
.module-event-edit .event-editor-toolbar button:hover img {
filter: brightness(0) saturate(100%) invert(24%) sepia(57%) saturate(2496%) hue-rotate(231deg) brightness(87%) contrast(105%);
}
.module-event-edit .event-editor-toolbar button.is-active {
background: #4f46e5;
border-color: #4338ca;
color: #fff;
}
.module-event-edit .event-editor-toolbar button.is-active img {
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%) hue-rotate(63deg) brightness(106%) contrast(101%);
}
.module-event-edit .event-editor-toolbar button:disabled {
opacity: .45;
cursor: not-allowed;
background: #f1f5f9;
border-color: #d1d5db;
color: #6b7280;
}
.module-event-edit .event-editor-toolbar button:disabled img {
filter: brightness(0) saturate(100%) invert(49%) sepia(8%) saturate(616%) hue-rotate(175deg) brightness(91%) contrast(88%);
}
.module-event-edit .event-editor {
border: 1px solid #cbd5e1;
border-radius: .375rem;
padding: .75rem;
min-height: 14rem;
background: #fff;
}
.module-event-edit .event-editor .ProseMirror {
outline: none;
min-height: 12rem;
}
.module-event-edit .event-editor-counter {
margin-top: .5rem;
font-size: .85rem;
color: #475569;
}
.module-event-edit .event-editor-counter.is-over-limit {
color: #b91c1c;
font-weight: 600;
}
.module-event-edit .event-editor-shortcuts {
margin-top: .6rem;
font-size: .85rem;
color: #334155;
}
.module-event-edit .event-editor-shortcuts ul {
margin: .25rem 0 0;
padding-left: 1.1rem;
}
.module-event-edit .ns-tag-switches {
display: grid;
gap: .5rem;
margin-top: .35rem;
}
.module-event-edit .ns-tag-switch-item {
display: flex;
align-items: center;
gap: .65rem;
}
.module-event-edit .ns-tag-switch-item label {
margin: 0;
}
.module-event-edit .visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
white-space: nowrap;
}
.module-event-edit .ns-tag-switch-input {
appearance: none;
width: 2.5rem;
height: 1.4rem;
border-radius: 999px;
border: 1px solid #94a3b8;
background: #e2e8f0;
position: relative;
cursor: pointer;
transition: background-color .15s ease;
}
.module-event-edit .ns-tag-switch-input::after {
content: '';
position: absolute;
top: .1rem;
left: .12rem;
width: 1rem;
height: 1rem;
border-radius: 999px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
transition: transform .15s ease;
}
.module-event-edit .ns-tag-switch-input:checked {
background: #4f46e5;
border-color: #4338ca;
}
.module-event-edit .ns-tag-switch-input:checked::after {
transform: translateX(1.05rem);
}
.module-event-edit .ns-tag-switch-input:focus-visible {
outline: 2px solid #1d4ed8;
outline-offset: 2px;
}
.module-event-edit .filepond--root {
width: 400px;
height: 600px;
@@ -60,6 +224,8 @@
<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>
<script type="module" src="{{ asset('bundles/mummertmediaeventmanager/editor.js') }}?v=1"></script>
<script src="{{ asset('bundles/mummertmediaeventmanager/editor-fallback.js') }}?v=1"></script>
{{ form_start(form, { action: app.request.uri, attr: { 'aria-live': 'polite' } }) }}
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
@@ -77,9 +243,119 @@
{{ form_row(form.organization_ids) }}
{% endif %}
{{ form_row(form.location_id) }}
{{ form_row(form.tags) }}
{{ form_row(form.teaser) }}
{{ form_row(form.description) }}
<fieldset class="widget" aria-describedby="event-tags-help event-tags-errors">
<legend>{{ form.tags.vars.label }}</legend>
<p id="event-tags-help" class="event-editor-shortcuts">Mehrfachauswahl möglich. Mit Leertaste ein- und ausschalten.</p>
<div class="ns-tag-switches">
{% for tagField in form.tags %}
{% set tagLabelId = tagField.vars.id ~ '-label' %}
<div class="ns-tag-switch-item">
{{ form_widget(tagField, { attr: { 'aria-describedby': tagField.vars.id ~ '-state', 'aria-labelledby': tagLabelId } }) }}
{{ form_label(tagField, null, { label_attr: { id: tagLabelId } }) }}
<span
id="{{ tagField.vars.id }}-state"
class="visually-hidden"
data-switch-state-for="{{ tagField.vars.id }}"
>
{{ tagField.vars.checked ? 'Ein' : 'Aus' }}
</span>
</div>
{% endfor %}
</div>
<div id="event-tags-errors">{{ form_errors(form.tags) }}</div>
</fieldset>
<div class="widget">
{{ form_label(form.teaser, null, { label_attr: { id: form.teaser.vars.id ~ '-label' } }) }}
<div
class="event-editor-toolbar"
data-mm-editor-toolbar="{{ form.teaser.vars.id }}"
role="toolbar"
aria-label="Formatierungswerkzeuge Beschreibung"
aria-orientation="horizontal"
aria-describedby="{{ form.teaser.vars.id }}-shortcuts"
aria-controls="{{ form.teaser.vars.id }}-editor"
>
<button type="button" data-action="paragraph" title="Absatz">
<img src="{{ asset('bundles/newssubmission/icons/paragraph.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Absatz</span>
</button>
<button type="button" data-action="h2" title="Überschrift H2">
<img src="{{ asset('bundles/newssubmission/icons/h2.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">H2</span>
</button>
<button type="button" data-action="h3" title="Überschrift H3">
<img src="{{ asset('bundles/newssubmission/icons/h3.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">H3</span>
</button>
<button type="button" data-action="bold" title="Fett (Strg/Cmd+B)" aria-keyshortcuts="Control+B Meta+B">
<img src="{{ asset('bundles/newssubmission/icons/bold.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Fett</span>
</button>
<button type="button" data-action="italic" title="Kursiv (Strg/Cmd+I)" aria-keyshortcuts="Control+I Meta+I">
<img src="{{ asset('bundles/newssubmission/icons/italic.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Kursiv</span>
</button>
<button type="button" data-action="underline" title="Unterstrichen (Strg/Cmd+U)" aria-keyshortcuts="Control+U Meta+U">
<img src="{{ asset('bundles/newssubmission/icons/underline.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Unterstrichen</span>
</button>
<button type="button" data-action="bulletList" title="Liste">
<img src="{{ asset('bundles/newssubmission/icons/ul.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Liste</span>
</button>
<button type="button" data-action="orderedList" title="Nummerierte Liste">
<img src="{{ asset('bundles/newssubmission/icons/ol.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Nummerierte Liste</span>
</button>
<button type="button" data-action="indent" title="Einzug vergrößern">
<img src="{{ asset('bundles/newssubmission/icons/indent.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Einzug vergrößern</span>
</button>
<button type="button" data-action="outdent" title="Einzug verkleinern">
<img src="{{ asset('bundles/newssubmission/icons/outdent.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Einzug verkleinern</span>
</button>
<button type="button" data-action="undo" title="Rückgängig (Strg/Cmd+Z)" aria-keyshortcuts="Control+Z Meta+Z">
<img src="{{ asset('bundles/newssubmission/icons/undo.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Rückgängig</span>
</button>
<button type="button" data-action="redo" title="Wiederholen (Strg/Cmd+Shift+Z)" aria-keyshortcuts="Control+Shift+Z Meta+Shift+Z">
<img src="{{ asset('bundles/newssubmission/icons/redo.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Wiederholen</span>
</button>
</div>
<div id="{{ form.teaser.vars.id }}-shortcuts" class="event-editor-shortcuts">
<strong>Tastaturkürzel:</strong>
<ul>
<li><span aria-hidden="true">Strg/Cmd+B</span> – Fett</li>
<li><span aria-hidden="true">Strg/Cmd+I</span> – Kursiv</li>
<li><span aria-hidden="true">Strg/Cmd+U</span> – Unterstrichen</li>
<li><span aria-hidden="true">Strg/Cmd+Z</span> – Rückgängig</li>
<li><span aria-hidden="true">Strg/Cmd+Shift+Z</span> – Wiederholen</li>
<li>Pfeiltasten links/rechts in der Toolbar – zwischen Buttons wechseln</li>
</ul>
</div>
<div
id="{{ form.teaser.vars.id }}-editor"
class="event-editor"
data-mm-editor="tiptap"
data-textarea-id="{{ form.teaser.vars.id }}"
data-editor-label="Beschreibung"
role="textbox"
aria-multiline="true"
aria-labelledby="{{ form.teaser.vars.id }}-label"
aria-describedby="{{ form.teaser.vars.id }}-shortcuts {{ form.teaser.vars.id }}-counter {{ form.teaser.vars.id }}-errors"
></div>
<div id="{{ form.teaser.vars.id }}-counter" class="event-editor-counter" data-mm-editor-counter-for="{{ form.teaser.vars.id }}" role="status" aria-live="polite"></div>
{{ form_widget(form.teaser, { attr: { class: 'js-event-teaser-source', rows: 8, 'aria-hidden': 'true', tabindex: '-1' } }) }}
<div id="{{ form.teaser.vars.id }}-errors">{{ form_errors(form.teaser) }}</div>
</div>
{{ form_row(form.url) }}
{{ form_row(form.addImage) }}
@@ -104,7 +380,7 @@
(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');
const tagSwitches = document.querySelectorAll('input.ns-tag-switch-input[role="switch"]');
if (organizationSelect && typeof window.Choices === 'function') {
new window.Choices(organizationSelect, {
@@ -131,18 +407,21 @@
});
}
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'
});
}
const syncSwitchState = (input) => {
const isChecked = !!input.checked;
input.setAttribute('aria-checked', isChecked ? 'true' : 'false');
const stateNode = document.querySelector(`[data-switch-state-for="${input.id}"]`);
if (stateNode) {
stateNode.textContent = isChecked ? 'Ein' : 'Aus';
}
};
tagSwitches.forEach((input) => {
syncSwitchState(input);
input.addEventListener('change', () => syncSwitchState(input));
});
if (typeof window.flatpickr === 'function') {
const dateInputs = document.querySelectorAll('input.js-flatpickr-date');
contao/templates/frontend/organization_edit.html.twig
+305 -16
View File
@@ -5,10 +5,173 @@
<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://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 .event-editor-toolbar {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: .5rem 0;
}
.module-organization-edit .event-editor-toolbar button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.2rem;
padding: .4rem .65rem;
border: 1px solid #cbd5e1;
border-radius: .375rem;
background: #f8fafc;
color: #1f2937;
font-size: .9rem;
font-weight: 600;
cursor: pointer;
line-height: 1;
}
.module-organization-edit .event-editor-toolbar button img {
width: 1rem;
height: 1rem;
display: block;
filter: brightness(0) saturate(100%) invert(18%) sepia(18%) saturate(522%) hue-rotate(177deg) brightness(94%) contrast(91%);
transition: filter .15s ease;
}
.module-organization-edit .event-editor-toolbar button:hover {
background: #eef2ff;
border-color: #a5b4fc;
}
.module-organization-edit .event-editor-toolbar button:hover img {
filter: brightness(0) saturate(100%) invert(24%) sepia(57%) saturate(2496%) hue-rotate(231deg) brightness(87%) contrast(105%);
}
.module-organization-edit .event-editor-toolbar button.is-active {
background: #4f46e5;
border-color: #4338ca;
color: #fff;
}
.module-organization-edit .event-editor-toolbar button.is-active img {
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%) hue-rotate(63deg) brightness(106%) contrast(101%);
}
.module-organization-edit .event-editor-toolbar button:disabled {
opacity: .45;
cursor: not-allowed;
background: #f1f5f9;
border-color: #d1d5db;
color: #6b7280;
}
.module-organization-edit .event-editor-toolbar button:disabled img {
filter: brightness(0) saturate(100%) invert(49%) sepia(8%) saturate(616%) hue-rotate(175deg) brightness(91%) contrast(88%);
}
.module-organization-edit .event-editor {
border: 1px solid #cbd5e1;
border-radius: .375rem;
padding: .75rem;
min-height: 14rem;
background: #fff;
}
.module-organization-edit .event-editor .ProseMirror {
outline: none;
min-height: 12rem;
}
.module-organization-edit .event-editor-counter {
margin-top: .5rem;
font-size: .85rem;
color: #475569;
}
.module-organization-edit .event-editor-counter.is-over-limit {
color: #b91c1c;
font-weight: 600;
}
.module-organization-edit .event-editor-shortcuts {
margin-top: .6rem;
font-size: .85rem;
color: #334155;
}
.module-organization-edit .event-editor-shortcuts ul {
margin: .25rem 0 0;
padding-left: 1.1rem;
}
.module-organization-edit .ns-tag-switches {
display: grid;
gap: .5rem;
margin-top: .35rem;
}
.module-organization-edit .ns-tag-switch-item {
display: flex;
align-items: center;
gap: .65rem;
}
.module-organization-edit .ns-tag-switch-item label {
margin: 0;
}
.module-organization-edit .visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
white-space: nowrap;
}
.module-organization-edit .ns-tag-switch-input {
appearance: none;
width: 2.5rem;
height: 1.4rem;
border-radius: 999px;
border: 1px solid #94a3b8;
background: #e2e8f0;
position: relative;
cursor: pointer;
transition: background-color .15s ease;
}
.module-organization-edit .ns-tag-switch-input::after {
content: '';
position: absolute;
top: .1rem;
left: .12rem;
width: 1rem;
height: 1rem;
border-radius: 999px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
transition: transform .15s ease;
}
.module-organization-edit .ns-tag-switch-input:checked {
background: #4f46e5;
border-color: #4338ca;
}
.module-organization-edit .ns-tag-switch-input:checked::after {
transform: translateX(1.05rem);
}
.module-organization-edit .ns-tag-switch-input:focus-visible {
outline: 2px solid #1d4ed8;
outline-offset: 2px;
}
.module-organization-edit .filepond--root {
width: 400px;
height: 400px;
@@ -51,16 +214,139 @@
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>
<script type="module" src="{{ asset('bundles/mummertmediaeventmanager/editor.js') }}?v=1"></script>
<script src="{{ asset('bundles/mummertmediaeventmanager/editor-fallback.js') }}?v=1"></script>
{{ form_start(form, { attr: { 'aria-live': 'polite' } }) }}
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
<input type="hidden" id="remove_logo" name="remove_logo" value="0">
{{ form_widget(form) }}
{{ form_row(form.title) }}
{{ form_row(form.street) }}
{{ form_row(form.street2) }}
{{ form_row(form.postal) }}
{{ form_row(form.city) }}
{{ form_row(form.phone) }}
{{ form_row(form.email) }}
{{ form_row(form.website) }}
<div class="widget">
{{ form_label(form.description, null, { label_attr: { id: form.description.vars.id ~ '-label' } }) }}
<div
class="event-editor-toolbar"
data-mm-editor-toolbar="{{ form.description.vars.id }}"
role="toolbar"
aria-label="Formatierungswerkzeuge Beschreibung"
aria-orientation="horizontal"
aria-describedby="{{ form.description.vars.id }}-shortcuts"
aria-controls="{{ form.description.vars.id }}-editor"
>
<button type="button" data-action="paragraph" title="Absatz">
<img src="{{ asset('bundles/newssubmission/icons/paragraph.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Absatz</span>
</button>
<button type="button" data-action="h2" title="Überschrift H2">
<img src="{{ asset('bundles/newssubmission/icons/h2.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">H2</span>
</button>
<button type="button" data-action="h3" title="Überschrift H3">
<img src="{{ asset('bundles/newssubmission/icons/h3.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">H3</span>
</button>
<button type="button" data-action="bold" title="Fett (Strg/Cmd+B)" aria-keyshortcuts="Control+B Meta+B">
<img src="{{ asset('bundles/newssubmission/icons/bold.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Fett</span>
</button>
<button type="button" data-action="italic" title="Kursiv (Strg/Cmd+I)" aria-keyshortcuts="Control+I Meta+I">
<img src="{{ asset('bundles/newssubmission/icons/italic.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Kursiv</span>
</button>
<button type="button" data-action="underline" title="Unterstrichen (Strg/Cmd+U)" aria-keyshortcuts="Control+U Meta+U">
<img src="{{ asset('bundles/newssubmission/icons/underline.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Unterstrichen</span>
</button>
<button type="button" data-action="bulletList" title="Liste">
<img src="{{ asset('bundles/newssubmission/icons/ul.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Liste</span>
</button>
<button type="button" data-action="orderedList" title="Nummerierte Liste">
<img src="{{ asset('bundles/newssubmission/icons/ol.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Nummerierte Liste</span>
</button>
<button type="button" data-action="indent" title="Einzug vergrößern">
<img src="{{ asset('bundles/newssubmission/icons/indent.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Einzug vergrößern</span>
</button>
<button type="button" data-action="outdent" title="Einzug verkleinern">
<img src="{{ asset('bundles/newssubmission/icons/outdent.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Einzug verkleinern</span>
</button>
<button type="button" data-action="undo" title="Rückgängig (Strg/Cmd+Z)" aria-keyshortcuts="Control+Z Meta+Z">
<img src="{{ asset('bundles/newssubmission/icons/undo.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Rückgängig</span>
</button>
<button type="button" data-action="redo" title="Wiederholen (Strg/Cmd+Shift+Z)" aria-keyshortcuts="Control+Shift+Z Meta+Shift+Z">
<img src="{{ asset('bundles/newssubmission/icons/redo.svg') }}" alt="" aria-hidden="true">
<span class="visually-hidden">Wiederholen</span>
</button>
</div>
<div id="{{ form.description.vars.id }}-shortcuts" class="event-editor-shortcuts">
<strong>Tastaturkürzel:</strong>
<ul>
<li><span aria-hidden="true">Strg/Cmd+B</span> – Fett</li>
<li><span aria-hidden="true">Strg/Cmd+I</span> – Kursiv</li>
<li><span aria-hidden="true">Strg/Cmd+U</span> – Unterstrichen</li>
<li><span aria-hidden="true">Strg/Cmd+Z</span> – Rückgängig</li>
<li><span aria-hidden="true">Strg/Cmd+Shift+Z</span> – Wiederholen</li>
<li>Pfeiltasten links/rechts in der Toolbar – zwischen Buttons wechseln</li>
</ul>
</div>
<div
id="{{ form.description.vars.id }}-editor"
class="event-editor"
data-mm-editor="tiptap"
data-textarea-id="{{ form.description.vars.id }}"
data-editor-label="Beschreibung"
role="textbox"
aria-multiline="true"
aria-labelledby="{{ form.description.vars.id }}-label"
aria-describedby="{{ form.description.vars.id }}-shortcuts {{ form.description.vars.id }}-counter {{ form.description.vars.id }}-errors"
></div>
<div id="{{ form.description.vars.id }}-counter" class="event-editor-counter" data-mm-editor-counter-for="{{ form.description.vars.id }}" role="status" aria-live="polite"></div>
{{ form_widget(form.description, { attr: { class: 'js-organization-description-source', rows: 8, 'aria-hidden': 'true', tabindex: '-1' } }) }}
<div id="{{ form.description.vars.id }}-errors">{{ form_errors(form.description) }}</div>
</div>
<fieldset class="widget" aria-describedby="organization-tags-help organization-tags-errors">
<legend>{{ form.tags.vars.label }}</legend>
<p id="organization-tags-help" class="event-editor-shortcuts">Mehrfachauswahl möglich. Mit Leertaste ein- und ausschalten.</p>
<div class="ns-tag-switches">
{% for tagField in form.tags %}
{% set tagLabelId = tagField.vars.id ~ '-label' %}
<div class="ns-tag-switch-item">
{{ form_widget(tagField, { attr: { 'aria-describedby': tagField.vars.id ~ '-state', 'aria-labelledby': tagLabelId } }) }}
{{ form_label(tagField, null, { label_attr: { id: tagLabelId } }) }}
<span
id="{{ tagField.vars.id }}-state"
class="visually-hidden"
data-switch-state-for="{{ tagField.vars.id }}"
>
{{ tagField.vars.checked ? 'Ein' : 'Aus' }}
</span>
</div>
{% endfor %}
</div>
<div id="organization-tags-errors">{{ form_errors(form.tags) }}</div>
</fieldset>
{{ form_row(form.logoUpload) }}
<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>
@@ -70,20 +356,23 @@
<script>
(function () {
const typeSelect = document.querySelector('select.js-organization-tags-choice');
const tagSwitches = document.querySelectorAll('input.ns-tag-switch-input[role="switch"]');
if (typeSelect && typeof window.Choices === 'function') {
new window.Choices(typeSelect, {
searchEnabled: false,
shouldSort: false,
removeItemButton: true,
itemSelectText: '',
placeholder: true,
placeholderValue: typeSelect.dataset.placeholder || 'Typ auswählen …',
noResultsText: 'Keine Treffer',
noChoicesText: 'Keine Optionen verfügbar'
});
}
const syncSwitchState = (input) => {
const isChecked = !!input.checked;
input.setAttribute('aria-checked', isChecked ? 'true' : 'false');
const stateNode = document.querySelector(`[data-switch-state-for="${input.id}"]`);
if (stateNode) {
stateNode.textContent = isChecked ? 'Ein' : 'Aus';
}
};
tagSwitches.forEach((input) => {
syncSwitchState(input);
input.addEventListener('change', () => syncSwitchState(input));
});
const currentLogoPath = {{ (currentLogoPath is defined and currentLogoPath) ? ('/' ~ currentLogoPath)|json_encode|raw : 'null' }};
const logoInput = document.querySelector('input.js-logo-upload');