Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Jürgen Mummert
|
141e310320 | ||
|
Jürgen Mummert
|
76be3bcd09 | ||
|
Jürgen Mummert
|
84a6f118dc | ||
|
Jürgen Mummert
|
3176e6e414 | ||
|
Jürgen Mummert
|
83c632f2dc | ||
|
Jürgen Mummert
|
15a93466b6 |
@@ -10,11 +10,222 @@
|
||||
<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 .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;
|
||||
}
|
||||
|
||||
.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--panel-root,
|
||||
.module-event-edit .filepond--root .filepond--item-panel,
|
||||
.module-event-edit .filepond--root .filepond--image-preview {
|
||||
background-color: #f7f7f7 !important;
|
||||
}
|
||||
|
||||
.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>
|
||||
<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 }}">
|
||||
@@ -32,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) }}
|
||||
|
||||
@@ -59,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, {
|
||||
@@ -86,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');
|
||||
@@ -212,14 +536,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>'
|
||||
};
|
||||
|
||||
|
||||
@@ -5,17 +5,348 @@
|
||||
<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">
|
||||
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
|
||||
<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;
|
||||
}
|
||||
|
||||
.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--panel-root,
|
||||
.module-organization-edit .filepond--root .filepond--item-panel,
|
||||
.module-organization-edit .filepond--root .filepond--image-preview {
|
||||
background-color: #f7f7f7 !important;
|
||||
}
|
||||
|
||||
.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://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>
|
||||
@@ -25,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');
|
||||
@@ -73,14 +407,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>'
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,112 @@
|
||||
(function () {
|
||||
const mounts = document.querySelectorAll('[data-mm-editor="tiptap"]');
|
||||
|
||||
if (!mounts.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const runFallback = (mount) => {
|
||||
if (!mount || mount.querySelector('.ProseMirror') || mount.getAttribute('data-mm-fallback-ready') === '1') {
|
||||
return;
|
||||
}
|
||||
|
||||
const textareaId = mount.getAttribute('data-textarea-id');
|
||||
|
||||
if (!textareaId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const textarea = document.getElementById(textareaId);
|
||||
|
||||
if (!textarea) {
|
||||
return;
|
||||
}
|
||||
|
||||
const toolbar = document.querySelector('[data-mm-editor-toolbar="' + textareaId + '"]');
|
||||
const form = textarea.closest('form');
|
||||
|
||||
mount.setAttribute('contenteditable', 'true');
|
||||
mount.setAttribute('data-mm-fallback-ready', '1');
|
||||
mount.classList.add('mm-fallback-editor');
|
||||
mount.innerHTML = textarea.value || '<p></p>';
|
||||
textarea.style.display = 'none';
|
||||
|
||||
const syncState = () => {
|
||||
textarea.value = mount.innerHTML;
|
||||
};
|
||||
|
||||
const focusMount = () => {
|
||||
mount.focus();
|
||||
};
|
||||
|
||||
mount.addEventListener('input', syncState);
|
||||
mount.addEventListener('blur', syncState);
|
||||
|
||||
if (toolbar) {
|
||||
toolbar.addEventListener('click', (event) => {
|
||||
const target = event.target.closest('button[data-action]');
|
||||
|
||||
if (!target || target.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
const action = target.getAttribute('data-action');
|
||||
|
||||
focusMount();
|
||||
|
||||
switch (action) {
|
||||
case 'paragraph':
|
||||
document.execCommand('formatBlock', false, 'p');
|
||||
break;
|
||||
case 'h2':
|
||||
document.execCommand('formatBlock', false, 'h2');
|
||||
break;
|
||||
case 'h3':
|
||||
document.execCommand('formatBlock', false, 'h3');
|
||||
break;
|
||||
case 'bold':
|
||||
document.execCommand('bold', false);
|
||||
break;
|
||||
case 'italic':
|
||||
document.execCommand('italic', false);
|
||||
break;
|
||||
case 'underline':
|
||||
document.execCommand('underline', false);
|
||||
break;
|
||||
case 'bulletList':
|
||||
document.execCommand('insertUnorderedList', false);
|
||||
break;
|
||||
case 'orderedList':
|
||||
document.execCommand('insertOrderedList', false);
|
||||
break;
|
||||
case 'indent':
|
||||
document.execCommand('indent', false);
|
||||
break;
|
||||
case 'outdent':
|
||||
document.execCommand('outdent', false);
|
||||
break;
|
||||
case 'undo':
|
||||
document.execCommand('undo', false);
|
||||
break;
|
||||
case 'redo':
|
||||
document.execCommand('redo', false);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
syncState();
|
||||
});
|
||||
}
|
||||
|
||||
if (form) {
|
||||
form.addEventListener('submit', syncState);
|
||||
}
|
||||
};
|
||||
|
||||
window.setTimeout(() => {
|
||||
mounts.forEach(runFallback);
|
||||
}, 900);
|
||||
})();
|
||||
@@ -0,0 +1,330 @@
|
||||
import { Editor } from 'https://esm.sh/@tiptap/core@3';
|
||||
import Document from 'https://esm.sh/@tiptap/extension-document@3';
|
||||
import Paragraph from 'https://esm.sh/@tiptap/extension-paragraph@3';
|
||||
import Text from 'https://esm.sh/@tiptap/extension-text@3';
|
||||
import Heading from 'https://esm.sh/@tiptap/extension-heading@3';
|
||||
import Bold from 'https://esm.sh/@tiptap/extension-bold@3';
|
||||
import Italic from 'https://esm.sh/@tiptap/extension-italic@3';
|
||||
import Underline from 'https://esm.sh/@tiptap/extension-underline@3';
|
||||
import BulletList from 'https://esm.sh/@tiptap/extension-bullet-list@3';
|
||||
import OrderedList from 'https://esm.sh/@tiptap/extension-ordered-list@3';
|
||||
import ListItem from 'https://esm.sh/@tiptap/extension-list-item@3';
|
||||
import CharacterCount from 'https://esm.sh/@tiptap/extension-character-count@3';
|
||||
import History from 'https://esm.sh/@tiptap/extension-history@3';
|
||||
|
||||
const CHARACTER_LIMIT = 30000;
|
||||
|
||||
(function () {
|
||||
const editorMounts = document.querySelectorAll('[data-mm-editor="tiptap"]');
|
||||
|
||||
if (!editorMounts.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const syncState = (editor, textarea) => {
|
||||
textarea.value = editor.getHTML();
|
||||
};
|
||||
|
||||
const updateEditorA11yState = (mount, textarea, textareaId, editor) => {
|
||||
if (!mount || !textareaId || !editor || !textarea) {
|
||||
return;
|
||||
}
|
||||
|
||||
const errorNode = document.getElementById(`${textareaId}-errors`);
|
||||
const hasError = !!(errorNode && errorNode.textContent && errorNode.textContent.trim().length > 0);
|
||||
const plainTextLength = editor.storage?.characterCount?.characters?.() ?? 0;
|
||||
const isEmpty = plainTextLength === 0;
|
||||
const label = mount.getAttribute('data-editor-label') || textarea.getAttribute('aria-label') || 'Text';
|
||||
|
||||
mount.setAttribute('aria-invalid', hasError ? 'true' : 'false');
|
||||
mount.setAttribute('aria-required', textarea.required ? 'true' : 'false');
|
||||
|
||||
const proseMirror = mount.querySelector('.ProseMirror');
|
||||
|
||||
if (!proseMirror) {
|
||||
return;
|
||||
}
|
||||
|
||||
proseMirror.setAttribute('role', 'textbox');
|
||||
proseMirror.setAttribute('aria-multiline', 'true');
|
||||
proseMirror.setAttribute('aria-invalid', hasError ? 'true' : 'false');
|
||||
proseMirror.setAttribute('aria-required', textarea.required ? 'true' : 'false');
|
||||
proseMirror.setAttribute('aria-label', label);
|
||||
proseMirror.setAttribute('data-empty', isEmpty ? 'true' : 'false');
|
||||
};
|
||||
|
||||
const updateCharacterCounter = (counterNode, editor) => {
|
||||
if (!counterNode || !editor?.storage?.characterCount) {
|
||||
return;
|
||||
}
|
||||
|
||||
const used = editor.storage.characterCount.characters();
|
||||
const words = editor.storage.characterCount.words();
|
||||
const remaining = CHARACTER_LIMIT - used;
|
||||
|
||||
counterNode.textContent = `${words.toLocaleString('de-DE')} Wörter · ${used.toLocaleString('de-DE')} / ${CHARACTER_LIMIT.toLocaleString('de-DE')} Zeichen`;
|
||||
counterNode.classList.toggle('is-over-limit', remaining < 0);
|
||||
};
|
||||
|
||||
const setupToolbarKeyboardNavigation = (toolbar) => {
|
||||
if (!toolbar) {
|
||||
return;
|
||||
}
|
||||
|
||||
const getEnabledButtons = () => Array.from(toolbar.querySelectorAll('button[data-action]:not(:disabled)'));
|
||||
|
||||
toolbar.addEventListener('keydown', (event) => {
|
||||
const activeElement = event.target.closest('button[data-action]');
|
||||
|
||||
if (!activeElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
const buttons = getEnabledButtons();
|
||||
|
||||
if (!buttons.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentIndex = buttons.indexOf(activeElement);
|
||||
|
||||
if (currentIndex < 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let nextIndex = currentIndex;
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowRight':
|
||||
nextIndex = (currentIndex + 1) % buttons.length;
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
|
||||
break;
|
||||
case 'Home':
|
||||
nextIndex = 0;
|
||||
break;
|
||||
case 'End':
|
||||
nextIndex = buttons.length - 1;
|
||||
break;
|
||||
case 'Enter':
|
||||
case ' ':
|
||||
event.preventDefault();
|
||||
activeElement.click();
|
||||
return;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
buttons[nextIndex].focus();
|
||||
});
|
||||
};
|
||||
|
||||
const updateToolbarState = (toolbar, editor) => {
|
||||
if (!toolbar) {
|
||||
return;
|
||||
}
|
||||
|
||||
const canIndent = editor.can().chain().focus().sinkListItem('listItem').run();
|
||||
const canOutdent = editor.can().chain().focus().liftListItem('listItem').run();
|
||||
const canUndo = editor.can().chain().focus().undo().run();
|
||||
const canRedo = editor.can().chain().focus().redo().run();
|
||||
|
||||
toolbar.querySelectorAll('button[data-action]').forEach((button) => {
|
||||
const action = button.getAttribute('data-action');
|
||||
let isActive = false;
|
||||
let isDisabled = false;
|
||||
|
||||
switch (action) {
|
||||
case 'paragraph':
|
||||
isActive = editor.isActive('paragraph');
|
||||
break;
|
||||
case 'h2':
|
||||
isActive = editor.isActive('heading', { level: 2 });
|
||||
break;
|
||||
case 'h3':
|
||||
isActive = editor.isActive('heading', { level: 3 });
|
||||
break;
|
||||
case 'bold':
|
||||
isActive = editor.isActive('bold');
|
||||
break;
|
||||
case 'italic':
|
||||
isActive = editor.isActive('italic');
|
||||
break;
|
||||
case 'underline':
|
||||
isActive = editor.isActive('underline');
|
||||
break;
|
||||
case 'bulletList':
|
||||
isActive = editor.isActive('bulletList');
|
||||
break;
|
||||
case 'orderedList':
|
||||
isActive = editor.isActive('orderedList');
|
||||
break;
|
||||
case 'indent':
|
||||
isDisabled = !canIndent;
|
||||
break;
|
||||
case 'outdent':
|
||||
isDisabled = !canOutdent;
|
||||
break;
|
||||
case 'undo':
|
||||
isDisabled = !canUndo;
|
||||
break;
|
||||
case 'redo':
|
||||
isDisabled = !canRedo;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
button.classList.toggle('is-active', isActive);
|
||||
button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
|
||||
button.disabled = isDisabled;
|
||||
button.setAttribute('aria-disabled', isDisabled ? 'true' : 'false');
|
||||
});
|
||||
};
|
||||
|
||||
editorMounts.forEach((mount) => {
|
||||
const textareaId = mount.getAttribute('data-textarea-id');
|
||||
|
||||
if (!textareaId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const textarea = document.getElementById(textareaId);
|
||||
|
||||
if (!textarea) {
|
||||
return;
|
||||
}
|
||||
|
||||
textarea.style.display = 'none';
|
||||
|
||||
const form = textarea.closest('form');
|
||||
const toolbar = document.querySelector(`[data-mm-editor-toolbar="${textareaId}"]`);
|
||||
const counterNode = document.querySelector(`[data-mm-editor-counter-for="${textareaId}"]`);
|
||||
|
||||
setupToolbarKeyboardNavigation(toolbar);
|
||||
|
||||
const editor = new Editor({
|
||||
element: mount,
|
||||
extensions: [
|
||||
Document,
|
||||
Paragraph,
|
||||
Text,
|
||||
Heading.configure({ levels: [2, 3] }),
|
||||
Bold,
|
||||
Italic,
|
||||
Underline,
|
||||
BulletList,
|
||||
OrderedList,
|
||||
ListItem,
|
||||
History,
|
||||
CharacterCount.configure({
|
||||
limit: CHARACTER_LIMIT,
|
||||
}),
|
||||
],
|
||||
content: textarea.value || '<p></p>',
|
||||
onCreate({ editor: currentEditor }) {
|
||||
updateToolbarState(toolbar, currentEditor);
|
||||
updateCharacterCounter(counterNode, currentEditor);
|
||||
updateEditorA11yState(mount, textarea, textareaId, currentEditor);
|
||||
},
|
||||
onUpdate({ editor: currentEditor }) {
|
||||
syncState(currentEditor, textarea);
|
||||
updateToolbarState(toolbar, currentEditor);
|
||||
updateCharacterCounter(counterNode, currentEditor);
|
||||
updateEditorA11yState(mount, textarea, textareaId, currentEditor);
|
||||
},
|
||||
onSelectionUpdate({ editor: currentEditor }) {
|
||||
updateToolbarState(toolbar, currentEditor);
|
||||
updateEditorA11yState(mount, textarea, textareaId, currentEditor);
|
||||
},
|
||||
});
|
||||
|
||||
editor.on('transaction', () => {
|
||||
updateToolbarState(toolbar, editor);
|
||||
updateCharacterCounter(counterNode, editor);
|
||||
updateEditorA11yState(mount, textarea, textareaId, editor);
|
||||
});
|
||||
|
||||
editor.on('focus', () => {
|
||||
updateToolbarState(toolbar, editor);
|
||||
updateCharacterCounter(counterNode, editor);
|
||||
updateEditorA11yState(mount, textarea, textareaId, editor);
|
||||
});
|
||||
|
||||
editor.on('blur', () => {
|
||||
updateToolbarState(toolbar, editor);
|
||||
updateCharacterCounter(counterNode, editor);
|
||||
updateEditorA11yState(mount, textarea, textareaId, editor);
|
||||
});
|
||||
|
||||
if (toolbar) {
|
||||
toolbar.addEventListener('click', (event) => {
|
||||
const target = event.target.closest('button[data-action]');
|
||||
|
||||
if (!target || target.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
const action = target.getAttribute('data-action');
|
||||
const chain = editor.chain().focus();
|
||||
|
||||
switch (action) {
|
||||
case 'paragraph':
|
||||
chain.setParagraph().run();
|
||||
break;
|
||||
case 'h2':
|
||||
chain.toggleHeading({ level: 2 }).run();
|
||||
break;
|
||||
case 'h3':
|
||||
chain.toggleHeading({ level: 3 }).run();
|
||||
break;
|
||||
case 'bold':
|
||||
chain.toggleBold().run();
|
||||
break;
|
||||
case 'italic':
|
||||
chain.toggleItalic().run();
|
||||
break;
|
||||
case 'underline':
|
||||
chain.toggleUnderline().run();
|
||||
break;
|
||||
case 'bulletList':
|
||||
chain.toggleBulletList().run();
|
||||
break;
|
||||
case 'orderedList':
|
||||
chain.toggleOrderedList().run();
|
||||
break;
|
||||
case 'indent':
|
||||
chain.sinkListItem('listItem').run();
|
||||
break;
|
||||
case 'outdent':
|
||||
chain.liftListItem('listItem').run();
|
||||
break;
|
||||
case 'undo':
|
||||
chain.undo().run();
|
||||
break;
|
||||
case 'redo':
|
||||
chain.redo().run();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
syncState(editor, textarea);
|
||||
updateToolbarState(toolbar, editor);
|
||||
});
|
||||
}
|
||||
|
||||
if (form) {
|
||||
form.addEventListener('submit', () => {
|
||||
syncState(editor, textarea);
|
||||
updateEditorA11yState(mount, textarea, textareaId, editor);
|
||||
});
|
||||
}
|
||||
|
||||
updateEditorA11yState(mount, textarea, textareaId, editor);
|
||||
});
|
||||
})();
|
||||
@@ -103,8 +103,9 @@ class EventEditController extends AbstractFrontendModuleController
|
||||
'endTime' => $this->resolveFormEndTime($event),
|
||||
'location_id' => (int) ($event['location_id'] ?? 0),
|
||||
'tags' => $currentTagIds,
|
||||
'teaser' => (string) ($event['teaser'] ?? ''),
|
||||
'description' => (string) ($event['description'] ?? ''),
|
||||
'teaser' => '' !== trim((string) ($event['teaser'] ?? ''))
|
||||
? (string) ($event['teaser'] ?? '')
|
||||
: (string) ($event['description'] ?? ''),
|
||||
'url' => (string) ($event['url'] ?? ''),
|
||||
'photographer' => (string) ($event['photographer'] ?? ''),
|
||||
'addImage' => '1' === (string) ($event['addImage'] ?? ''),
|
||||
|
||||
@@ -70,14 +70,13 @@ 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'] ?? ''),
|
||||
'description' => (string) ($organization['description'] ?? ''),
|
||||
'description' => $this->normalizeTextareaDescription((string) ($organization['description'] ?? '')),
|
||||
'tags' => $this->organizationRepository->getTagIdsForOrganization($organizationId),
|
||||
];
|
||||
|
||||
@@ -219,4 +218,14 @@ class OrganizationEditController extends AbstractFrontendModuleController
|
||||
|
||||
return $page instanceof PageModel ? $this->generateContentUrl($page) : '/';
|
||||
}
|
||||
|
||||
private function normalizeTextareaDescription(string $value): string
|
||||
{
|
||||
$decoded = html_entity_decode($value, ENT_QUOTES | ENT_HTML5, 'UTF-8');
|
||||
$decoded = preg_replace('/<\s*br\s*\/?>/i', "\n", $decoded) ?? $decoded;
|
||||
$decoded = preg_replace('/<\s*\/p\s*>\s*<\s*p[^>]*>/i', "\n\n", $decoded) ?? $decoded;
|
||||
$decoded = strip_tags($decoded);
|
||||
|
||||
return trim($decoded);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -119,17 +119,19 @@ class EventType extends AbstractType
|
||||
],
|
||||
])
|
||||
->add('tags', ChoiceType::class, [
|
||||
'label' => 'Typen',
|
||||
'label' => 'Kategorien',
|
||||
'choices' => $options['tag_choices'],
|
||||
'expanded' => true,
|
||||
'multiple' => true,
|
||||
'required' => false,
|
||||
'attr' => [
|
||||
'class' => 'js-event-tags-choice',
|
||||
'data-placeholder' => 'Typen suchen …',
|
||||
],
|
||||
'choice_attr' => static function (): array {
|
||||
return [
|
||||
'role' => 'switch',
|
||||
'class' => 'ns-tag-switch-input',
|
||||
];
|
||||
},
|
||||
])
|
||||
->add('teaser', TextareaType::class, ['label' => 'Teaser', 'required' => false])
|
||||
->add('description', TextareaType::class, ['label' => 'Beschreibung', 'required' => false])
|
||||
->add('teaser', TextareaType::class, ['label' => 'Beschreibung', 'required' => false])
|
||||
->add('url', UrlType::class, [
|
||||
'label' => 'Link (extern)',
|
||||
'required' => false,
|
||||
|
||||
@@ -20,23 +20,25 @@ 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])
|
||||
->add('description', TextareaType::class, ['label' => 'Beschreibung', 'required' => false])
|
||||
->add('tags', ChoiceType::class, [
|
||||
'label' => 'Typen',
|
||||
'label' => 'Kategorien',
|
||||
'choices' => $options['tag_choices'],
|
||||
'expanded' => true,
|
||||
'multiple' => true,
|
||||
'required' => false,
|
||||
'attr' => [
|
||||
'class' => 'js-organization-tags-choice',
|
||||
'data-placeholder' => 'Typ auswählen …',
|
||||
],
|
||||
'choice_attr' => static function (): array {
|
||||
return [
|
||||
'role' => 'switch',
|
||||
'class' => 'ns-tag-switch-input',
|
||||
];
|
||||
},
|
||||
])
|
||||
->add('logoUpload', FileType::class, [
|
||||
'label' => 'Logo hochladen',
|
||||
|
||||
@@ -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'] ?? '',
|
||||
|
||||
Reference in New Issue
Block a user