Jürgen Mummert
510 lines
18 KiB
Twig
510 lines
18 KiB
Twig
{% extends "@Contao/frontend_module/_base.html.twig" %}
|
||
|
||
{% block content %}
|
||
<link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css">
|
||
<style>
|
||
.news-editor-toolbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: .5rem;
|
||
margin: .5rem 0;
|
||
}
|
||
|
||
.news-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;
|
||
}
|
||
|
||
.news-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;
|
||
}
|
||
|
||
.news-editor-toolbar button:hover {
|
||
background: #eef2ff;
|
||
border-color: #a5b4fc;
|
||
}
|
||
|
||
.news-editor-toolbar button:hover img {
|
||
filter: brightness(0) saturate(100%) invert(24%) sepia(57%) saturate(2496%) hue-rotate(231deg) brightness(87%) contrast(105%);
|
||
}
|
||
|
||
.news-editor-toolbar button.is-active {
|
||
background: #4f46e5;
|
||
border-color: #4338ca;
|
||
color: #fff;
|
||
}
|
||
|
||
.news-editor-toolbar button.is-active img {
|
||
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%) hue-rotate(63deg) brightness(106%) contrast(101%);
|
||
}
|
||
|
||
.news-editor-toolbar button:disabled {
|
||
opacity: .45;
|
||
cursor: not-allowed;
|
||
background: #f1f5f9;
|
||
border-color: #d1d5db;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.news-editor-toolbar button:disabled img {
|
||
filter: brightness(0) saturate(100%) invert(49%) sepia(8%) saturate(616%) hue-rotate(175deg) brightness(91%) contrast(88%);
|
||
}
|
||
|
||
.news-editor {
|
||
border: 1px solid #cbd5e1;
|
||
border-radius: .375rem;
|
||
padding: .75rem;
|
||
min-height: 14rem;
|
||
background: #fff;
|
||
}
|
||
|
||
.news-editor .ProseMirror {
|
||
outline: none;
|
||
min-height: 12rem;
|
||
}
|
||
|
||
.news-editor-counter {
|
||
margin-top: .5rem;
|
||
font-size: .85rem;
|
||
color: #475569;
|
||
}
|
||
|
||
.news-editor-counter.is-over-limit {
|
||
color: #b91c1c;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.news-editor-shortcuts {
|
||
margin-top: .6rem;
|
||
font-size: .85rem;
|
||
color: #334155;
|
||
}
|
||
|
||
.news-editor-shortcuts ul {
|
||
margin: .25rem 0 0;
|
||
padding-left: 1.1rem;
|
||
}
|
||
|
||
.news-error-summary {
|
||
margin: 0 0 1rem;
|
||
padding: .75rem 1rem;
|
||
border: 1px solid #dc2626;
|
||
border-radius: .375rem;
|
||
background: #fef2f2;
|
||
color: #7f1d1d;
|
||
}
|
||
|
||
.news-error-summary ul {
|
||
margin: .4rem 0 0;
|
||
padding-left: 1.15rem;
|
||
}
|
||
|
||
.news-form-hint {
|
||
margin: 0 0 .85rem;
|
||
color: #334155;
|
||
font-size: .9rem;
|
||
}
|
||
|
||
.ns-tag-switches {
|
||
display: grid;
|
||
gap: .5rem;
|
||
margin-top: .35rem;
|
||
}
|
||
|
||
.ns-tag-switch-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .65rem;
|
||
}
|
||
|
||
.ns-tag-switch-item label {
|
||
margin: 0;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.ns-tag-switch-input:checked {
|
||
background: #4f46e5;
|
||
border-color: #4338ca;
|
||
}
|
||
|
||
.ns-tag-switch-input:checked::after {
|
||
transform: translateX(1.05rem);
|
||
}
|
||
|
||
.ns-tag-switch-input:focus-visible {
|
||
outline: 2px solid #1d4ed8;
|
||
outline-offset: 2px;
|
||
}
|
||
</style>
|
||
|
||
{% if errorMessage %}
|
||
<p role="alert">{{ errorMessage }}</p>
|
||
{% endif %}
|
||
|
||
{{ form_start(form, {
|
||
action: app.request.uri,
|
||
attr: {
|
||
enctype: 'multipart/form-data',
|
||
id: 'news-submission-form',
|
||
'aria-describedby': 'news-form-hint'
|
||
}
|
||
}) }}
|
||
<input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
|
||
|
||
<p id="news-form-hint" class="news-form-hint">Pflichtfelder sind mit einem Stern markiert.</p>
|
||
|
||
{% if form.vars.submitted and not form.vars.valid %}
|
||
<div class="news-error-summary" role="alert" aria-labelledby="news-error-summary-title" tabindex="-1">
|
||
<strong id="news-error-summary-title">Bitte korrigieren Sie die markierten Felder:</strong>
|
||
<ul>
|
||
{% for field in form %}
|
||
{% if field.vars.errors|length > 0 and field.vars.id is not empty %}
|
||
<li>
|
||
<a href="#{{ field.vars.id }}">{{ field.vars.label|default(field.vars.name) }}</a>
|
||
</li>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</ul>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{{ form_row(form.headline, { attr: { autocomplete: 'off' } }) }}
|
||
{{ form_row(form.subheadline, { attr: { autocomplete: 'off' } }) }}
|
||
{{ form_row(form.externalLink, { attr: { autocomplete: 'url', inputmode: 'url' } }) }}
|
||
|
||
<fieldset class="widget" aria-describedby="news-tags-help news-tags-errors">
|
||
<legend>{{ form.tags.vars.label }}</legend>
|
||
<p id="news-tags-help" class="news-form-hint">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="news-tags-errors">{{ form_errors(form.tags) }}</div>
|
||
</fieldset>
|
||
|
||
<div class="widget">
|
||
{{ form_label(form.articleText, null, { label_attr: { id: form.articleText.vars.id ~ '-label' } }) }}
|
||
|
||
<div
|
||
class="news-editor-toolbar"
|
||
data-news-editor-toolbar="{{ form.articleText.vars.id }}"
|
||
role="toolbar"
|
||
aria-label="Formatierungswerkzeuge Artikeltext"
|
||
aria-orientation="horizontal"
|
||
aria-describedby="{{ form.articleText.vars.id }}-shortcuts"
|
||
aria-controls="{{ form.articleText.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.articleText.vars.id }}-shortcuts" class="news-editor-shortcuts">
|
||
<strong>Tastaturkürzel:</strong>
|
||
<ul>
|
||
<li><span aria-hidden="true">Strg/Cmd+B</span> <span class="visually-hidden">Tastenkürzel Strg oder Command plus B</span> – Fett</li>
|
||
<li><span aria-hidden="true">Strg/Cmd+I</span> <span class="visually-hidden">Tastenkürzel Strg oder Command plus I</span> – Kursiv</li>
|
||
<li><span aria-hidden="true">Strg/Cmd+U</span> <span class="visually-hidden">Tastenkürzel Strg oder Command plus U</span> – Unterstrichen</li>
|
||
<li><span aria-hidden="true">Strg/Cmd+Z</span> <span class="visually-hidden">Tastenkürzel Strg oder Command plus Z</span> – Rückgängig</li>
|
||
<li><span aria-hidden="true">Strg/Cmd+Shift+Z</span> <span class="visually-hidden">Tastenkürzel Strg oder Command plus Umschalt plus Z</span> – Wiederholen</li>
|
||
<li>Pfeiltasten links/rechts in der Toolbar – zwischen Buttons wechseln</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div
|
||
id="{{ form.articleText.vars.id }}-editor"
|
||
class="news-editor"
|
||
data-news-editor="tiptap"
|
||
data-textarea-id="{{ form.articleText.vars.id }}"
|
||
role="textbox"
|
||
aria-multiline="true"
|
||
aria-labelledby="{{ form.articleText.vars.id }}-label"
|
||
aria-describedby="{{ form.articleText.vars.id }}-shortcuts {{ form.articleText.vars.id }}-counter {{ form.articleText.vars.id }}-errors"
|
||
></div>
|
||
<div id="{{ form.articleText.vars.id }}-counter" class="news-editor-counter" data-news-editor-counter-for="{{ form.articleText.vars.id }}" role="status" aria-live="polite"></div>
|
||
{{ form_widget(form.articleText, { attr: { class: 'js-news-article-source', rows: 8, 'aria-hidden': 'true', tabindex: '-1' } }) }}
|
||
<div id="{{ form.articleText.vars.id }}-errors">{{ form_errors(form.articleText) }}</div>
|
||
</div>
|
||
|
||
<div class="widget" aria-describedby="news-image-toggle-help {{ form.addImage.vars.id }}-state">
|
||
<div class="ns-tag-switch-item">
|
||
{{ form_widget(form.addImage, { attr: {
|
||
'aria-describedby': form.addImage.vars.id ~ '-state',
|
||
'aria-controls': 'news-image-fields',
|
||
'aria-expanded': form.addImage.vars.checked ? 'true' : 'false',
|
||
'aria-labelledby': form.addImage.vars.id ~ '-label'
|
||
} }) }}
|
||
{{ form_label(form.addImage, null, { label_attr: { id: form.addImage.vars.id ~ '-label' } }) }}
|
||
<span
|
||
id="{{ form.addImage.vars.id }}-state"
|
||
class="visually-hidden"
|
||
data-switch-state-for="{{ form.addImage.vars.id }}"
|
||
>
|
||
{{ form.addImage.vars.checked ? 'Ein' : 'Aus' }}
|
||
</span>
|
||
</div>
|
||
<p id="news-image-toggle-help" class="news-form-hint">Wenn aktiviert, werden Felder für Bild, Fotograf und Alternativtext eingeblendet.</p>
|
||
{{ form_errors(form.addImage) }}
|
||
</div>
|
||
|
||
<div id="news-image-fields" style="display:none;" hidden aria-hidden="true" role="group" aria-label="Bildangaben" aria-live="polite">
|
||
{{ form_row(form.imageUpload) }}
|
||
{{ form_row(form.imageToken) }}
|
||
{{ form_row(form.photographer) }}
|
||
{{ form_row(form.altText) }}
|
||
</div>
|
||
|
||
{% if form.publicName is defined %}
|
||
{{ form_row(form.publicName) }}
|
||
{% endif %}
|
||
|
||
{% if form.publicEmail is defined %}
|
||
{{ form_row(form.publicEmail) }}
|
||
{% endif %}
|
||
|
||
{{ form_row(form.honeypot) }}
|
||
|
||
{% if showAltcha %}
|
||
<div class="widget">
|
||
<label for="ns-altcha" id="ns-altcha-label">Sicherheitsprüfung</label>
|
||
<altcha-widget
|
||
id="ns-altcha"
|
||
name="altcha"
|
||
challengeurl="{{ altchaChallengeUrl }}"
|
||
maxnumber="{{ altchaMaxNumber }}"
|
||
aria-labelledby="ns-altcha-label"
|
||
></altcha-widget>
|
||
</div>
|
||
<script type="module" src="https://cdn.jsdelivr.net/npm/altcha/dist/altcha.min.js"></script>
|
||
{% endif %}
|
||
|
||
<button type="submit">News einreichen</button>
|
||
{{ form_end(form) }}
|
||
|
||
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
|
||
<script type="module" src="{{ asset('bundles/newssubmission/editor.js') }}?v=9"></script>
|
||
<script>
|
||
(function () {
|
||
const errorSummary = document.querySelector('.news-error-summary');
|
||
const addImage = document.getElementById('{{ form.addImage.vars.id }}');
|
||
const imageWrap = document.getElementById('news-image-fields');
|
||
const photographer = document.getElementById('{{ form.photographer.vars.id }}');
|
||
const fileInput = document.querySelector('input.js-news-filepond');
|
||
const tokenInput = document.getElementById('{{ form.imageToken.vars.id }}');
|
||
const tagSwitches = document.querySelectorAll('input.ns-tag-switch-input[role="switch"]');
|
||
|
||
if (errorSummary) {
|
||
requestAnimationFrame(() => {
|
||
errorSummary.focus();
|
||
});
|
||
}
|
||
|
||
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 updateImageState = () => {
|
||
if (!addImage || !imageWrap) {
|
||
return;
|
||
}
|
||
|
||
const active = addImage.checked;
|
||
addImage.setAttribute('aria-checked', active ? 'true' : 'false');
|
||
addImage.setAttribute('aria-expanded', active ? 'true' : 'false');
|
||
|
||
const addImageStateNode = document.querySelector(`[data-switch-state-for="${addImage.id}"]`);
|
||
|
||
if (addImageStateNode) {
|
||
addImageStateNode.textContent = active ? 'Ein' : 'Aus';
|
||
}
|
||
|
||
imageWrap.style.display = active ? '' : 'none';
|
||
imageWrap.hidden = !active;
|
||
imageWrap.setAttribute('aria-hidden', active ? 'false' : 'true');
|
||
|
||
if (!active && imageWrap.contains(document.activeElement)) {
|
||
addImage.focus();
|
||
}
|
||
|
||
if (photographer) {
|
||
photographer.required = active;
|
||
}
|
||
|
||
if (!active && tokenInput) {
|
||
tokenInput.value = '';
|
||
}
|
||
};
|
||
|
||
if (addImage) {
|
||
addImage.addEventListener('change', updateImageState);
|
||
updateImageState();
|
||
}
|
||
|
||
if (fileInput && tokenInput && typeof FilePond !== 'undefined') {
|
||
const pond = FilePond.create(fileInput, {
|
||
allowMultiple: false,
|
||
instantUpload: true,
|
||
acceptedFileTypes: ['image/jpeg', 'image/png', 'image/webp'],
|
||
maxFileSize: '6MB',
|
||
credits: false,
|
||
server: {
|
||
process: {
|
||
url: '{{ uploadProcessUrl }}',
|
||
method: 'POST',
|
||
ondata: (formData) => {
|
||
formData.append('REQUEST_TOKEN', '{{ requestToken }}');
|
||
return formData;
|
||
},
|
||
headers: {
|
||
'X-CSRF-Token': '{{ requestToken }}'
|
||
},
|
||
onload: (response) => {
|
||
tokenInput.value = response;
|
||
return response;
|
||
}
|
||
},
|
||
revert: {
|
||
url: '{{ uploadRevertUrl }}',
|
||
method: 'POST',
|
||
headers: {
|
||
'X-CSRF-Token': '{{ requestToken }}'
|
||
},
|
||
onload: () => {
|
||
tokenInput.value = '';
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
if (addImage) {
|
||
addImage.addEventListener('change', () => {
|
||
if (!addImage.checked) {
|
||
pond.removeFiles();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
})();
|
||
</script>
|
||
{% endblock %}
|