Release 0.5.3
This commit is contained in:
hnzio committed
1 parent
25da870601
commit
f466df2c5c
13 files changed
+1367
-771
No files matched your search
+356
-497
@@ -2,25 +2,24 @@
|
||||
import { enhance, type SubmitFunction } from '$app/forms';
|
||||
import { beforeNavigate, goto } from '$app/navigation';
|
||||
import { resolve } from '$app/paths';
|
||||
import { onDestroy, tick, untrack } from 'svelte';
|
||||
import EditorialMarkdownField from '#lib/components/EditorialMarkdownField.svelte';
|
||||
import MarkdownPreview from '#lib/components/MarkdownPreview.svelte';
|
||||
import { onDestroy, onMount, untrack } from 'svelte';
|
||||
import MarkdownEditorField from '#lib/components/MarkdownEditorField.svelte';
|
||||
import PieceEditorDialog from '#lib/components/PieceEditorDialog.svelte';
|
||||
import PresentationDisplay from '#lib/components/PresentationDisplay.svelte';
|
||||
import type { PresentationContent } from '#lib/server/presentation.js';
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
type ContextPanel = 'sources' | 'classification' | 'presentation';
|
||||
|
||||
let { data, form }: PageProps = $props();
|
||||
let draft = $state(untrack(() => ({ ...data.piece })));
|
||||
let durationMinutes = $state(untrack(() => Number((data.piece.durationSeconds / 60).toFixed(2))));
|
||||
let revision = $state(untrack(() => data.piece.revision));
|
||||
let sources = $state(untrack(() => data.piece.sources.map((source) => ({ ...source }))));
|
||||
let rendered = $state(untrack(() => ({ ...data.rendered })));
|
||||
let activeSection = $state<'script' | 'research' | 'presentation'>('script');
|
||||
let saveState = $state<'idle' | 'dirty' | 'saving' | 'saved' | 'error' | 'conflict'>('idle');
|
||||
let saveMessage = $state('Alle Änderungen gespeichert');
|
||||
let classificationEditing = $state(false);
|
||||
let presentationEditing = $state(false);
|
||||
let mobileContext = $state<ContextPanel | null>(null);
|
||||
let sourceImageUnavailable = $state(false);
|
||||
let editorDialog: { showModal: () => void; close: () => void };
|
||||
let editorForm: HTMLFormElement;
|
||||
let previewForm: HTMLFormElement;
|
||||
let saveButton: HTMLButtonElement;
|
||||
@@ -41,13 +40,34 @@
|
||||
let sourcePreviewImage = $derived(
|
||||
draft.presentationImageUrl
|
||||
? resolve('/fundus/[id]/praesentation/preview-image', { id: data.piece.id })
|
||||
: data.piece.media[0]
|
||||
? `/media/${data.piece.media[0].id}`
|
||||
: ''
|
||||
: ''
|
||||
);
|
||||
let previewContent = $derived<PresentationContent>({
|
||||
mode: draft.presentationMode,
|
||||
title: draft.title,
|
||||
html: rendered.presentation,
|
||||
source: featuredSource
|
||||
? {
|
||||
label: featuredSource.label || featuredSource.url,
|
||||
url: featuredSource.url,
|
||||
timecodeSeconds: featuredSource.timecodeSeconds
|
||||
}
|
||||
: null,
|
||||
previewTitle: draft.presentationTitle,
|
||||
description: draft.presentationDescription,
|
||||
imageUrl: draft.presentationImageUrl,
|
||||
siteName: draft.presentationSiteName,
|
||||
provider: draft.presentationProvider as PresentationContent['provider'],
|
||||
providerId: draft.presentationProviderId,
|
||||
embedUrl:
|
||||
draft.presentationProvider === 'youtube' && draft.presentationProviderId
|
||||
? `https://www.youtube-nocookie.com/embed/${draft.presentationProviderId}${featuredSource?.timecodeSeconds ? `?start=${featuredSource.timecodeSeconds}` : ''}`
|
||||
: draft.presentationProvider === 'tiktok' && draft.presentationProviderId
|
||||
? `https://www.tiktok.com/player/v1/${draft.presentationProviderId}`
|
||||
: ''
|
||||
});
|
||||
let pendingHref: string | null = null;
|
||||
let allowNavigation = false;
|
||||
let contextTrigger: HTMLElement | null = null;
|
||||
|
||||
const statusLabels = {
|
||||
inbox: 'Eingang',
|
||||
@@ -55,6 +75,7 @@
|
||||
ready: 'Sendefertig'
|
||||
};
|
||||
|
||||
onMount(() => editorDialog.showModal());
|
||||
onDestroy(() => clearTimeout(timer));
|
||||
beforeNavigate((navigation) => {
|
||||
if (allowNavigation) return;
|
||||
@@ -92,6 +113,23 @@
|
||||
editorForm.requestSubmit(saveButton);
|
||||
}
|
||||
|
||||
function requestClose() {
|
||||
const target = resolve('/fundus');
|
||||
if (saveState === 'error' || saveState === 'conflict') {
|
||||
if (!confirm('Ungespeicherte Änderungen verwerfen und Editor schließen?')) return;
|
||||
allowNavigation = true;
|
||||
void goto(target);
|
||||
return;
|
||||
}
|
||||
if (saveState === 'dirty' || saveState === 'saving') {
|
||||
pendingHref = new URL(target, window.location.href).href;
|
||||
if (!saving) submitSave();
|
||||
return;
|
||||
}
|
||||
allowNavigation = true;
|
||||
void goto(target);
|
||||
}
|
||||
|
||||
function addSource() {
|
||||
sources.push({ label: '', url: '', timecodeSeconds: null });
|
||||
scheduleSave();
|
||||
@@ -119,23 +157,6 @@
|
||||
if (!draft.presentationImageManual) draft.presentationImageUrl = '';
|
||||
}
|
||||
|
||||
async function openContext(event: MouseEvent, panel: ContextPanel) {
|
||||
contextTrigger = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
|
||||
mobileContext = panel;
|
||||
await tick();
|
||||
document.querySelector<HTMLElement>(`[data-context-close="${panel}"]`)?.focus();
|
||||
}
|
||||
|
||||
function closeContext() {
|
||||
mobileContext = null;
|
||||
contextTrigger?.focus();
|
||||
contextTrigger = null;
|
||||
}
|
||||
|
||||
function handleEscape(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape' && mobileContext) closeContext();
|
||||
}
|
||||
|
||||
const enhanceSave: SubmitFunction = () => {
|
||||
const submittedGeneration = generation;
|
||||
saving = true;
|
||||
@@ -176,259 +197,84 @@
|
||||
</script>
|
||||
|
||||
<svelte:head><title>{draft.title} | Fundus | Sendewerk</title></svelte:head>
|
||||
<svelte:window onkeydown={handleEscape} />
|
||||
|
||||
<div class="page-wrap editor-page worksheet-page">
|
||||
{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
|
||||
|
||||
<form
|
||||
bind:this={editorForm}
|
||||
use:enhance={enhanceSave}
|
||||
method="POST"
|
||||
action="?/save"
|
||||
class="piece-editor worksheet-editor"
|
||||
oninput={scheduleSave}
|
||||
onchange={scheduleSave}
|
||||
<div class="piece-editor-route">
|
||||
{#if form?.error}<div class="form-message error route-editor-error" role="alert">
|
||||
{form.error}
|
||||
</div>{/if}
|
||||
<PieceEditorDialog
|
||||
bind:this={editorDialog}
|
||||
bind:activeSection
|
||||
labelledby="piece-editor-title"
|
||||
onrequestclose={requestClose}
|
||||
>
|
||||
<input type="hidden" name="revision" value={revision} />
|
||||
<header class="worksheet-header">
|
||||
<div class="worksheet-heading">
|
||||
<a class="back-link" href={resolve('/fundus')}>← Fundus</a>
|
||||
<h1 class="sr-only">{draft.title}</h1>
|
||||
<label class="worksheet-title">
|
||||
<span class="sr-only">Titel</span>
|
||||
<textarea
|
||||
name="title"
|
||||
required
|
||||
rows="1"
|
||||
maxlength="200"
|
||||
aria-label="Titel"
|
||||
bind:value={draft.title}></textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class:problem={saveState === 'error' || saveState === 'conflict'}
|
||||
class="save-indicator"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
<i></i><span>{saveMessage}</span>
|
||||
</div>
|
||||
</header>
|
||||
{#snippet header()}
|
||||
<p class="eyebrow">Fundus-Original</p>
|
||||
<label class="piece-dialog-title">
|
||||
<span class="sr-only">Titel</span>
|
||||
<textarea
|
||||
form="piece-editor-form"
|
||||
name="title"
|
||||
required
|
||||
rows="1"
|
||||
maxlength="200"
|
||||
aria-label="Titel"
|
||||
bind:value={draft.title}
|
||||
oninput={scheduleSave}></textarea>
|
||||
</label>
|
||||
<h1 class="sr-only" id="piece-editor-title">{draft.title}</h1>
|
||||
<small>Original im Fundus · Änderungen wirken nicht rückwirkend auf Einplanungen.</small>
|
||||
{/snippet}
|
||||
|
||||
<nav class="mobile-editor-tools" aria-label="Piece-Werkzeuge">
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded={mobileContext === 'sources'}
|
||||
onclick={(event) => openContext(event, 'sources')}>Quellen</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded={mobileContext === 'classification'}
|
||||
onclick={(event) => openContext(event, 'classification')}>Einordnung</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded={mobileContext === 'presentation'}
|
||||
onclick={(event) => openContext(event, 'presentation')}>Präsentation</button
|
||||
>
|
||||
<a href="#piece-media">Bilder</a>
|
||||
</nav>
|
||||
<form
|
||||
bind:this={editorForm}
|
||||
id="piece-editor-form"
|
||||
use:enhance={enhanceSave}
|
||||
method="POST"
|
||||
action="?/save"
|
||||
class="piece-dialog-form"
|
||||
oninput={scheduleSave}
|
||||
onchange={scheduleSave}
|
||||
>
|
||||
<input type="hidden" name="revision" value={revision} />
|
||||
|
||||
<div class="editor-workspace">
|
||||
<main class="editorial-worksheet" aria-label="Redaktionelles Arbeitsblatt">
|
||||
<section
|
||||
class:has-image={sourcePreviewImage && !sourceImageUnavailable}
|
||||
class="source-feature"
|
||||
>
|
||||
{#if sourcePreviewImage && !sourceImageUnavailable}
|
||||
<img src={sourcePreviewImage} alt="" onerror={() => (sourceImageUnavailable = true)} />
|
||||
{/if}
|
||||
<section class="piece-editor-panel" hidden={activeSection !== 'script'}>
|
||||
<div class="piece-panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Fundstück</p>
|
||||
{#if featuredSource}
|
||||
<h2>{draft.presentationTitle || featuredSource.label || 'Quelle'}</h2>
|
||||
{#if draft.presentationDescription}<p>{draft.presentationDescription}</p>{/if}
|
||||
<small>{featuredSource.label || featuredSource.url}</small>
|
||||
<!-- The URL is a server-validated external HTTP(S) source. -->
|
||||
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
|
||||
<a href={featuredSource.url} target="_blank" rel="noopener noreferrer"
|
||||
>Original öffnen ↗</a
|
||||
>
|
||||
{:else}
|
||||
<h2>Noch keine Quelle</h2>
|
||||
<p>Eine Quelle lässt sich ergänzen, ohne den Schreibstand zu verlassen.</p>
|
||||
<button
|
||||
class="text-button"
|
||||
type="button"
|
||||
onclick={(event) => openContext(event, 'sources')}>Quelle ergänzen</button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="writing-sheet">
|
||||
<header class="writing-sheet-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Arbeitsstand</p>
|
||||
<h2>Gedanken und Sendungstext</h2>
|
||||
</div>
|
||||
<small>Markdown wird beim Speichern sicher formatiert.</small>
|
||||
</header>
|
||||
|
||||
<EditorialMarkdownField
|
||||
name="researchText"
|
||||
label="Eigene Gedanken & Recherche"
|
||||
inputLabel="Private Recherche"
|
||||
hint="Nur intern"
|
||||
emptyText="Beobachtungen, Links und offene Fragen festhalten"
|
||||
bind:value={draft.researchText}
|
||||
html={rendered.research}
|
||||
privateField
|
||||
rows={9}
|
||||
/>
|
||||
|
||||
<div class="script-heading">
|
||||
<p class="eyebrow">Für die Sendung</p>
|
||||
<p class="eyebrow">Für die Moderation</p>
|
||||
<h2>Sendungstext</h2>
|
||||
<p>Einleitung, Moderation und Übergang bleiben getrennt gespeichert.</p>
|
||||
</div>
|
||||
<div class="script-sections">
|
||||
<EditorialMarkdownField
|
||||
name="intro"
|
||||
label="Einleitung"
|
||||
emptyText="Wie beginnt dieses Thema in der Sendung?"
|
||||
bind:value={draft.intro}
|
||||
html={rendered.intro}
|
||||
/>
|
||||
<EditorialMarkdownField
|
||||
name="moderationNotes"
|
||||
label="Moderationsstichpunkte"
|
||||
emptyText="Die wichtigsten Punkte für die Moderation notieren"
|
||||
bind:value={draft.moderationNotes}
|
||||
html={rendered.moderation}
|
||||
/>
|
||||
<EditorialMarkdownField
|
||||
name="transitionText"
|
||||
label="Überleitung"
|
||||
emptyText="Den Übergang zum nächsten Thema vorbereiten"
|
||||
bind:value={draft.transitionText}
|
||||
html={rendered.transition}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<aside
|
||||
class:context-open={mobileContext}
|
||||
class="editor-context"
|
||||
aria-label="Werkzeuge zum Piece"
|
||||
>
|
||||
<section
|
||||
class:mobile-active={mobileContext === 'sources'}
|
||||
class="context-card source-editor"
|
||||
aria-labelledby="source-context-title"
|
||||
>
|
||||
<header class="context-card-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Fundstück</p>
|
||||
<h2 id="source-context-title">Quellen</h2>
|
||||
</div>
|
||||
<button
|
||||
class="context-close"
|
||||
data-context-close="sources"
|
||||
type="button"
|
||||
aria-label="Quellen schließen"
|
||||
onclick={closeContext}>×</button
|
||||
<small>Die drei Teile bleiben getrennt gespeichert.</small>
|
||||
</div>
|
||||
<div class="piece-writing-stack">
|
||||
<MarkdownEditorField
|
||||
name="intro"
|
||||
label="Einleitung"
|
||||
placeholder="Wie beginnt dieses Thema in der Sendung?"
|
||||
bind:value={draft.intro}
|
||||
/>
|
||||
<MarkdownEditorField
|
||||
name="moderationNotes"
|
||||
label="Moderationsstichpunkte"
|
||||
placeholder="Argumente, Fragen und Ablaufpunkte"
|
||||
rows={10}
|
||||
bind:value={draft.moderationNotes}
|
||||
/>
|
||||
<MarkdownEditorField
|
||||
name="transitionText"
|
||||
label="Überleitung"
|
||||
placeholder="Wie geht es zum nächsten Thema weiter?"
|
||||
bind:value={draft.transitionText}
|
||||
/>
|
||||
</div>
|
||||
<details class="piece-meta-details">
|
||||
<summary>
|
||||
<span>Status, Dauer und Einordnung</span>
|
||||
<small
|
||||
>{statusLabels[draft.status as keyof typeof statusLabels]} · {durationMinutes || 0} Min.</small
|
||||
>
|
||||
</header>
|
||||
{#if sources.length}
|
||||
<div class="source-list">
|
||||
{#each sources as source, index (index)}
|
||||
<div class="source-row">
|
||||
<label
|
||||
>Name<input
|
||||
name="sourceLabel"
|
||||
maxlength="200"
|
||||
bind:value={source.label}
|
||||
/></label
|
||||
>
|
||||
<label
|
||||
>URL<input
|
||||
name="sourceUrl"
|
||||
type="url"
|
||||
maxlength="2000"
|
||||
bind:value={source.url}
|
||||
/></label
|
||||
>
|
||||
<label
|
||||
>Zeitmarke in Sekunden<input
|
||||
name="sourceTimecode"
|
||||
type="number"
|
||||
min="0"
|
||||
max="86400"
|
||||
bind:value={source.timecodeSeconds}
|
||||
/></label
|
||||
>
|
||||
<button
|
||||
class="text-button danger-text"
|
||||
type="button"
|
||||
onclick={() => removeSource(index)}>Entfernen</button
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<p class="context-empty">Noch keine Quelle hinterlegt.</p>
|
||||
{/if}
|
||||
<button class="secondary-button context-wide-action" type="button" onclick={addSource}
|
||||
>Quelle hinzufügen</button
|
||||
>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class:mobile-active={mobileContext === 'classification'}
|
||||
class="context-card classification-editor"
|
||||
aria-labelledby="classification-context-title"
|
||||
>
|
||||
<header class="context-card-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Überblick</p>
|
||||
<h2 id="classification-context-title">Einordnung</h2>
|
||||
</div>
|
||||
<button
|
||||
class="context-close"
|
||||
data-context-close="classification"
|
||||
type="button"
|
||||
aria-label="Einordnung schließen"
|
||||
onclick={closeContext}>×</button
|
||||
>
|
||||
</header>
|
||||
<div class="classification-summary">
|
||||
<strong>{statusLabels[draft.status as keyof typeof statusLabels]}</strong>
|
||||
<span>{durationMinutes || 0} Min.</span>
|
||||
<span
|
||||
>{data.taxonomy.formats.find((item) => item.id === draft.formatId)?.name ??
|
||||
'Ohne Format'}</span
|
||||
>
|
||||
</div>
|
||||
{#if draft.summary}<p class="context-summary-copy">{draft.summary}</p>{/if}
|
||||
<div class="context-tags">
|
||||
{#each data.taxonomy.topics.filter( (item) => draft.topicIds.includes(item.id) ) as item (item.id)}<span
|
||||
>{item.name}</span
|
||||
>{/each}
|
||||
{#each data.taxonomy.categories.filter( (item) => draft.categoryIds.includes(item.id) ) as item (item.id)}<span
|
||||
>{item.name}</span
|
||||
>{/each}
|
||||
</div>
|
||||
<button
|
||||
class="text-button context-edit-toggle"
|
||||
type="button"
|
||||
aria-expanded={classificationEditing}
|
||||
onclick={() => (classificationEditing = !classificationEditing)}
|
||||
>{classificationEditing ? 'Einordnung schließen' : 'Einordnung bearbeiten'}</button
|
||||
>
|
||||
<div class="context-fields" hidden={!classificationEditing}>
|
||||
</summary>
|
||||
<div class="piece-meta-grid">
|
||||
<label
|
||||
>Status<select name="status" bind:value={draft.status}
|
||||
><option value="inbox">Eingang</option><option value="preparing"
|
||||
@@ -454,7 +300,7 @@
|
||||
>{/each}</select
|
||||
></label
|
||||
>
|
||||
<label
|
||||
<label class="wide-field"
|
||||
>Kurzbeschreibung<textarea
|
||||
name="summary"
|
||||
rows="3"
|
||||
@@ -488,57 +334,90 @@
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class:mobile-active={mobileContext === 'presentation'}
|
||||
class="context-card presentation-editor"
|
||||
aria-labelledby="presentation-context-title"
|
||||
>
|
||||
<header class="context-card-heading">
|
||||
<section class="piece-editor-panel" hidden={activeSection !== 'research'}>
|
||||
<div class="piece-panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Nicht öffentlich</p>
|
||||
<h2>Recherche & Quellen</h2>
|
||||
</div>
|
||||
<small>Recherche und Material bleiben innerhalb der Redaktion.</small>
|
||||
</div>
|
||||
<MarkdownEditorField
|
||||
name="researchText"
|
||||
label="Private Recherche"
|
||||
placeholder="Hintergrund, Prüfung und offene Fragen"
|
||||
rows={10}
|
||||
privateField
|
||||
bind:value={draft.researchText}
|
||||
/>
|
||||
<section class="piece-source-editor">
|
||||
<div class="piece-subsection-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Publikum</p>
|
||||
<h2 id="presentation-context-title">Präsentation</h2>
|
||||
<p class="eyebrow">Fundstellen</p>
|
||||
<h3>Quellen</h3>
|
||||
</div>
|
||||
<button
|
||||
class="context-close"
|
||||
data-context-close="presentation"
|
||||
type="button"
|
||||
aria-label="Präsentation schließen"
|
||||
onclick={closeContext}>×</button
|
||||
>
|
||||
</header>
|
||||
<div class="audience-preview">
|
||||
<span
|
||||
>{draft.presentationMode === 'text'
|
||||
? 'Text'
|
||||
: draft.presentationMode === 'link'
|
||||
? 'Linkvorschau'
|
||||
: 'Video'}</span
|
||||
>
|
||||
<strong>{draft.presentationTitle || draft.title}</strong>
|
||||
{#if draft.presentationMode === 'text' && rendered.presentation}<MarkdownPreview
|
||||
html={rendered.presentation}
|
||||
/>{:else if draft.presentationDescription}<p>
|
||||
{draft.presentationDescription}
|
||||
</p>{:else}<p>Noch keine Vorschauangaben.</p>{/if}
|
||||
</div>
|
||||
<div class="presentation-card-actions">
|
||||
<button
|
||||
class="text-button"
|
||||
type="button"
|
||||
aria-expanded={presentationEditing}
|
||||
onclick={() => (presentationEditing = !presentationEditing)}
|
||||
>{presentationEditing ? 'Einstellungen schließen' : 'Präsentation bearbeiten'}</button
|
||||
>
|
||||
<a
|
||||
class="secondary-button"
|
||||
href={resolve('/fundus/[id]/praesentation', { id: data.piece.id })}
|
||||
target="_blank"
|
||||
rel="noopener">Präsentation testen</a
|
||||
<button class="secondary-button" type="button" onclick={addSource}
|
||||
>Quelle hinzufügen</button
|
||||
>
|
||||
</div>
|
||||
<div class="presentation-controls" hidden={!presentationEditing}>
|
||||
{#if sources.length}<div class="source-list">
|
||||
{#each sources as source, index (index)}<div class="source-row">
|
||||
<label
|
||||
>Name<input
|
||||
name="sourceLabel"
|
||||
maxlength="200"
|
||||
bind:value={source.label}
|
||||
/></label
|
||||
><label
|
||||
>URL<input
|
||||
name="sourceUrl"
|
||||
type="url"
|
||||
maxlength="2000"
|
||||
bind:value={source.url}
|
||||
/></label
|
||||
><label
|
||||
>Zeitmarke in Sekunden<input
|
||||
name="sourceTimecode"
|
||||
type="number"
|
||||
min="0"
|
||||
max="86400"
|
||||
bind:value={source.timecodeSeconds}
|
||||
/></label
|
||||
><button
|
||||
class="text-button danger-text"
|
||||
type="button"
|
||||
onclick={() => removeSource(index)}>Entfernen</button
|
||||
>
|
||||
</div>{/each}
|
||||
</div>{:else}<p class="context-empty">Noch keine Quelle hinterlegt.</p>{/if}
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="piece-editor-panel" hidden={activeSection !== 'presentation'}>
|
||||
<div class="piece-panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Öffentliche Ausgabe</p>
|
||||
<h2>Präsentation</h2>
|
||||
</div>
|
||||
<a
|
||||
class="secondary-button"
|
||||
href={resolve('/fundus/[id]/praesentation', { id: data.piece.id })}
|
||||
target="_blank"
|
||||
rel="noopener">In neuem Fenster testen</a
|
||||
>
|
||||
</div>
|
||||
<div class="piece-presentation-layout">
|
||||
<div class="piece-presentation-controls">
|
||||
<MarkdownEditorField
|
||||
name="presentationText"
|
||||
label="Öffentlicher Text"
|
||||
placeholder="Text für die Publikumsausgabe"
|
||||
rows={8}
|
||||
bind:value={draft.presentationText}
|
||||
/>
|
||||
<div class="presentation-mode-picker" role="group" aria-label="Darstellung">
|
||||
{#each [['text', 'Text'], ['link', 'Linkvorschau'], ['video', 'Video']] as mode (mode[0])}<label
|
||||
><input
|
||||
@@ -549,129 +428,167 @@
|
||||
/>{mode[1]}</label
|
||||
>{/each}
|
||||
</div>
|
||||
{#if draft.presentationMode === 'text'}
|
||||
<input
|
||||
type="hidden"
|
||||
name="presentationSourcePosition"
|
||||
value={draft.presentationSourcePosition ?? ''}
|
||||
/>
|
||||
<input type="hidden" name="presentationTitle" value={draft.presentationTitle} />
|
||||
<input
|
||||
type="hidden"
|
||||
name="presentationDescription"
|
||||
value={draft.presentationDescription}
|
||||
/>
|
||||
<input type="hidden" name="presentationImageUrl" value={draft.presentationImageUrl} />
|
||||
<EditorialMarkdownField
|
||||
name="presentationText"
|
||||
label="Präsentationstext"
|
||||
emptyText="Text für die Publikumsausgabe schreiben"
|
||||
bind:value={draft.presentationText}
|
||||
html={rendered.presentation}
|
||||
rows={8}
|
||||
/>
|
||||
{:else}
|
||||
<input type="hidden" name="presentationText" value={draft.presentationText} />
|
||||
<div class="presentation-settings">
|
||||
<label
|
||||
>Quelle<select
|
||||
name="presentationSourcePosition"
|
||||
bind:value={draft.presentationSourcePosition}
|
||||
onchange={presentationSourceChanged}
|
||||
><option value={null}>Quelle auswählen</option
|
||||
>{#each sources as source, index (index)}{#if source.url}<option value={index}
|
||||
>{source.label || source.url}</option
|
||||
>{/if}{/each}</select
|
||||
></label
|
||||
<div class="presentation-settings">
|
||||
<label
|
||||
>Quelle<select
|
||||
name="presentationSourcePosition"
|
||||
bind:value={draft.presentationSourcePosition}
|
||||
onchange={presentationSourceChanged}
|
||||
><option value={null}>Quelle auswählen</option
|
||||
>{#each sources as source, index (index)}{#if source.url}<option value={index}
|
||||
>{source.label || source.url}</option
|
||||
>{/if}{/each}</select
|
||||
></label
|
||||
>
|
||||
<label
|
||||
>Titel<input
|
||||
name="presentationTitle"
|
||||
maxlength="300"
|
||||
bind:value={draft.presentationTitle}
|
||||
oninput={() => (draft.presentationTitleManual = true)}
|
||||
/></label
|
||||
>
|
||||
<label
|
||||
>Bild-URL<input
|
||||
name="presentationImageUrl"
|
||||
type="url"
|
||||
maxlength="2000"
|
||||
bind:value={draft.presentationImageUrl}
|
||||
oninput={() => (draft.presentationImageManual = true)}
|
||||
/></label
|
||||
>
|
||||
<label class="wide-field"
|
||||
>Anreißer<textarea
|
||||
name="presentationDescription"
|
||||
rows="3"
|
||||
maxlength="1000"
|
||||
bind:value={draft.presentationDescription}
|
||||
oninput={() => (draft.presentationDescriptionManual = true)}></textarea></label
|
||||
>
|
||||
<div class="presentation-preview-actions wide-field">
|
||||
<button
|
||||
class="secondary-button"
|
||||
type="button"
|
||||
onclick={() => previewForm.requestSubmit()}
|
||||
disabled={actionsBlocked || draft.presentationSourcePosition === null}
|
||||
>Vorschau laden</button
|
||||
><small
|
||||
>{draft.presentationMetadataFetchedAtUtc
|
||||
? `Zuletzt geladen: ${new Date(draft.presentationMetadataFetchedAtUtc).toLocaleString('de-DE')}`
|
||||
: 'Noch keine Metadaten geladen.'}</small
|
||||
>
|
||||
<label
|
||||
>Titel<input
|
||||
name="presentationTitle"
|
||||
maxlength="300"
|
||||
bind:value={draft.presentationTitle}
|
||||
oninput={() => (draft.presentationTitleManual = true)}
|
||||
/></label
|
||||
>
|
||||
<label
|
||||
>Bild-URL<input
|
||||
name="presentationImageUrl"
|
||||
type="url"
|
||||
maxlength="2000"
|
||||
bind:value={draft.presentationImageUrl}
|
||||
oninput={() => (draft.presentationImageManual = true)}
|
||||
/></label
|
||||
>
|
||||
<label
|
||||
>Anreißer<textarea
|
||||
name="presentationDescription"
|
||||
rows="3"
|
||||
maxlength="1000"
|
||||
bind:value={draft.presentationDescription}
|
||||
oninput={() => (draft.presentationDescriptionManual = true)}></textarea></label
|
||||
>
|
||||
<div class="presentation-preview-actions">
|
||||
<button
|
||||
class="secondary-button"
|
||||
type="button"
|
||||
onclick={() => previewForm.requestSubmit()}
|
||||
disabled={actionsBlocked || draft.presentationSourcePosition === null}
|
||||
>Vorschau laden</button
|
||||
><small
|
||||
>{draft.presentationMetadataFetchedAtUtc
|
||||
? `Zuletzt geladen: ${new Date(draft.presentationMetadataFetchedAtUtc).toLocaleString('de-DE')}`
|
||||
: 'Noch keine Metadaten geladen.'}</small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="hidden"
|
||||
name="presentationTitleManual"
|
||||
value={draft.presentationTitleManual ? '1' : '0'}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="presentationDescriptionManual"
|
||||
value={draft.presentationDescriptionManual ? '1' : '0'}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="presentationImageManual"
|
||||
value={draft.presentationImageManual ? '1' : '0'}
|
||||
/>
|
||||
<input type="hidden" name="presentationSiteName" value={draft.presentationSiteName} />
|
||||
<input type="hidden" name="presentationProvider" value={draft.presentationProvider} />
|
||||
<input type="hidden" name="presentationProviderId" value={draft.presentationProviderId} />
|
||||
<input
|
||||
type="hidden"
|
||||
name="presentationMetadataFetchedAtUtc"
|
||||
value={draft.presentationMetadataFetchedAtUtc ?? ''}
|
||||
/>
|
||||
</section>
|
||||
<aside class="piece-presentation-preview" aria-label="Präsentationsvorschau">
|
||||
<PresentationDisplay
|
||||
content={previewContent}
|
||||
imageSrc={sourceImageUnavailable ? '' : sourcePreviewImage}
|
||||
/>
|
||||
</aside>
|
||||
</div>
|
||||
<input
|
||||
type="hidden"
|
||||
name="presentationTitleManual"
|
||||
value={draft.presentationTitleManual ? '1' : '0'}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="presentationDescriptionManual"
|
||||
value={draft.presentationDescriptionManual ? '1' : '0'}
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="presentationImageManual"
|
||||
value={draft.presentationImageManual ? '1' : '0'}
|
||||
/>
|
||||
<input type="hidden" name="presentationSiteName" value={draft.presentationSiteName} />
|
||||
<input type="hidden" name="presentationProvider" value={draft.presentationProvider} />
|
||||
<input type="hidden" name="presentationProviderId" value={draft.presentationProviderId} />
|
||||
<input
|
||||
type="hidden"
|
||||
name="presentationMetadataFetchedAtUtc"
|
||||
value={draft.presentationMetadataFetchedAtUtc ?? ''}
|
||||
/>
|
||||
</section>
|
||||
</form>
|
||||
|
||||
<section class="context-card asset-summary">
|
||||
<div>
|
||||
<p class="eyebrow">Material</p>
|
||||
<h2>Bilder</h2>
|
||||
<p>
|
||||
{data.piece.media.length
|
||||
? `${data.piece.media.length} gespeichert`
|
||||
: 'Noch keine Bilder'}
|
||||
</p>
|
||||
</div>
|
||||
<a class="text-link" href="#piece-media">Bilder verwalten ↓</a>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
<section class="piece-editor-panel piece-media-panel" hidden={activeSection !== 'research'}>
|
||||
<div class="piece-subsection-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Private Dateien</p>
|
||||
<h3>Material</h3>
|
||||
</div>
|
||||
<small>JPEG, PNG, WebP oder GIF bis 5 MB</small>
|
||||
</div>
|
||||
{#if data.piece.media.length}<div class="media-grid">
|
||||
{#each data.piece.media as media (media.id)}<figure>
|
||||
<img src={`/media/${media.id}`} alt={media.altText} />
|
||||
<figcaption>
|
||||
<span>{media.altText || media.originalName}</span>
|
||||
<form method="POST" action="?/deleteImage">
|
||||
<input type="hidden" name="revision" value={revision} /><input
|
||||
type="hidden"
|
||||
name="mediaId"
|
||||
value={media.id}
|
||||
/><button class="text-button danger-text" type="submit" disabled={actionsBlocked}
|
||||
>Entfernen</button
|
||||
>
|
||||
</form>
|
||||
</figcaption>
|
||||
</figure>{/each}
|
||||
</div>{/if}
|
||||
<form method="POST" action="?/upload" enctype="multipart/form-data" class="upload-form">
|
||||
<input type="hidden" name="revision" value={revision} /><label
|
||||
>Bild<input
|
||||
name="image"
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp,image/gif"
|
||||
required
|
||||
/></label
|
||||
><label
|
||||
>Alternativtext<input
|
||||
name="altText"
|
||||
maxlength="300"
|
||||
placeholder="Was ist auf dem Bild zu sehen?"
|
||||
/></label
|
||||
><button class="secondary-button" type="submit" disabled={actionsBlocked}
|
||||
>Bild hochladen</button
|
||||
>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<div class="editor-savebar">
|
||||
<span class:problem={saveState === 'error' || saveState === 'conflict'}>{saveMessage}</span>
|
||||
<button bind:this={saveButton} class="primary-button" type="submit" disabled={saving}
|
||||
>Jetzt speichern</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
{#snippet footer()}
|
||||
<div class="piece-dialog-secondary-actions">
|
||||
<form method="POST" action="?/duplicate">
|
||||
<button class="text-button" type="submit" disabled={actionsBlocked}>Duplizieren</button>
|
||||
</form>
|
||||
<form method="POST" action="?/archive">
|
||||
<input type="hidden" name="revision" value={revision} /><button
|
||||
class="text-button danger-text"
|
||||
type="submit"
|
||||
aria-label="Piece archivieren"
|
||||
disabled={actionsBlocked}>Archivieren</button
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
<div class="piece-dialog-primary-action">
|
||||
<span
|
||||
class="save-indicator"
|
||||
class:problem={saveState === 'error' || saveState === 'conflict'}
|
||||
role="status"
|
||||
aria-live="polite">{saveMessage}</span
|
||||
>
|
||||
<button
|
||||
bind:this={saveButton}
|
||||
class="primary-button"
|
||||
type="submit"
|
||||
form="piece-editor-form"
|
||||
disabled={saving}>Jetzt speichern</button
|
||||
>
|
||||
</div>
|
||||
{/snippet}
|
||||
</PieceEditorDialog>
|
||||
|
||||
<form
|
||||
bind:this={previewForm}
|
||||
@@ -682,62 +599,4 @@
|
||||
>
|
||||
<input type="hidden" name="revision" value={revision} />
|
||||
</form>
|
||||
|
||||
<section id="piece-media" class="editor-section media-editor supporting-editor-section">
|
||||
<div class="section-title">
|
||||
<p class="eyebrow">Private Dateien</p>
|
||||
<h2>Bilder</h2>
|
||||
<small>JPEG, PNG, WebP oder GIF bis 5 MB; nur angemeldet abrufbar.</small>
|
||||
</div>
|
||||
{#if data.piece.media.length}<div class="media-grid">
|
||||
{#each data.piece.media as media (media.id)}<figure>
|
||||
<img src={`/media/${media.id}`} alt={media.altText} />
|
||||
<figcaption>
|
||||
<span>{media.altText || media.originalName}</span>
|
||||
<form method="POST" action="?/deleteImage">
|
||||
<input type="hidden" name="revision" value={revision} /><input
|
||||
type="hidden"
|
||||
name="mediaId"
|
||||
value={media.id}
|
||||
/><button class="text-button danger-text" type="submit" disabled={actionsBlocked}
|
||||
>Entfernen</button
|
||||
>
|
||||
</form>
|
||||
</figcaption>
|
||||
</figure>{/each}
|
||||
</div>{/if}
|
||||
<form method="POST" action="?/upload" enctype="multipart/form-data" class="upload-form">
|
||||
<input type="hidden" name="revision" value={revision} /><label
|
||||
>Bild<input
|
||||
name="image"
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp,image/gif"
|
||||
required
|
||||
/></label
|
||||
><label
|
||||
>Alternativtext<input
|
||||
name="altText"
|
||||
maxlength="300"
|
||||
placeholder="Was ist auf dem Bild zu sehen?"
|
||||
/></label
|
||||
><button class="secondary-button" type="submit" disabled={actionsBlocked}
|
||||
>Bild hochladen</button
|
||||
>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="editor-actions">
|
||||
<form method="POST" action="?/duplicate">
|
||||
<button class="secondary-button" type="submit" disabled={actionsBlocked}
|
||||
>Piece duplizieren</button
|
||||
>
|
||||
</form>
|
||||
<form method="POST" action="?/archive">
|
||||
<input type="hidden" name="revision" value={revision} /><button
|
||||
class="secondary-button danger-text"
|
||||
type="submit"
|
||||
disabled={actionsBlocked}>Piece archivieren</button
|
||||
>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
Reference in new issue
Block a user