cedricAbonnel/varlog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit form: categorie, date et SEO deplaces en colonne droite

Browse Source
This commit is contained in:
Cedric Abonnel
2026-05-12 01:05:10 +02:00
parent 1f64d461e7
commit 048cd06b2a
1 changed files with 235 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/post_form.php
+235 -145
View File
@@ -13,11 +13,19 @@ $dateValue = isset($published_at)
data-uuid="<?= htmlspecialchars($uuid) ?>" data-uuid="<?= htmlspecialchars($uuid) ?>"
data-insert-url="<?= htmlspecialchars($insertUrl ?? '') ?>" data-insert-url="<?= htmlspecialchars($insertUrl ?? '') ?>"
hidden></div> hidden></div>
<form method="POST" action="<?= htmlspecialchars($formAction) ?>">
<div class="row g-4"> <div class="row g-4">
<div class="col-lg-8"> <div class="col-lg-8">
<?php endif; ?>
<h1 class="mb-4"><?= $action === 'edit' ? 'Modifier l\'article' : 'Nouvel article' ?></h1> <h1 class="mb-4">Modifier l'article</h1>
<?php else: ?>
<h1 class="mb-4">Nouvel article</h1>
<form method="POST" action="<?= htmlspecialchars($formAction) ?>" enctype="multipart/form-data">
<?php endif; ?>
<?php if (!empty($errors)): ?> <?php if (!empty($errors)): ?>
<div class="alert alert-danger"> <div class="alert alert-danger">
@@ -29,7 +37,6 @@ $dateValue = isset($published_at)
</div> </div>
<?php endif; ?> <?php endif; ?>
<form method="POST" action="<?= htmlspecialchars($formAction) ?>"<?= $action === 'create' ? ' enctype="multipart/form-data"' : '' ?>>
<div class="mb-3"> <div class="mb-3">
<label for="title" class="form-label">Titre</label> <label for="title" class="form-label">Titre</label>
<input type="text" class="form-control" id="title" name="title" required <input type="text" class="form-control" id="title" name="title" required
@@ -46,6 +53,7 @@ $dateValue = isset($published_at)
placeholder="généré automatiquement depuis le titre"> placeholder="généré automatiquement depuis le titre">
</div> </div>
<?php if ($action === 'create'): ?>
<div class="mb-3"> <div class="mb-3">
<label for="category" class="form-label">Catégorie</label> <label for="category" class="form-label">Catégorie</label>
<div class="d-flex align-items-center gap-2"> <div class="d-flex align-items-center gap-2">
@@ -58,7 +66,7 @@ $dateValue = isset($published_at)
<small id="cat-hint" class="text-muted d-block mt-1"></small> <small id="cat-hint" class="text-muted d-block mt-1"></small>
<div id="cat-free-swatches" class="d-flex flex-wrap gap-1 mt-2"></div> <div id="cat-free-swatches" class="d-flex flex-wrap gap-1 mt-2"></div>
</div> </div>
<?php endif; ?>
<div class="mb-2"> <div class="mb-2">
<small class="text-muted"> <small class="text-muted">
@@ -72,6 +80,7 @@ $dateValue = isset($published_at)
<textarea class="form-control font-monospace" id="content" name="content" rows="12"><?= htmlspecialchars($content ?? '') ?></textarea> <textarea class="form-control font-monospace" id="content" name="content" rows="12"><?= htmlspecialchars($content ?? '') ?></textarea>
</div> </div>
<?php if ($action === 'create'): ?>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-6"> <div class="col-md-6">
<label for="published_at" class="form-label">Date de publication</label> <label for="published_at" class="form-label">Date de publication</label>
@@ -86,111 +95,136 @@ $dateValue = isset($published_at)
</div> </div>
</div> </div>
<?php if ($action === 'create'): ?>
<div class="mb-3"> <div class="mb-3">
<label for="files" class="form-label">Ajouter des fichiers</label> <label for="files" class="form-label">Ajouter des fichiers</label>
<input type="file" class="form-control" id="files" name="files[]" multiple> <input type="file" class="form-control" id="files" name="files[]" multiple>
<div class="form-text">Images → nommées <code>sha256-taille.ext</code>. Vidéos, PDF → nom sanitisé.</div> <div class="form-text">Images → nommées <code>sha256-taille.ext</code>. Vidéos, PDF → nom sanitisé.</div>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($existingFiles)): ?> <?php if (!empty($existingFiles)): ?>
<?php $coverFile = $article['cover'] ?? ''; ?> <?php $coverFile = $article['cover'] ?? ''; ?>
<?php $filesMeta = $article['files_meta'] ?? []; ?> <?php $filesMeta = $article['files_meta'] ?? []; ?>
<div class="mb-3"> <div class="mb-3">
<p class="form-label fw-semibold">Fichiers existants</p> <p class="form-label fw-semibold">Fichiers existants</p>
<div class="list-group"> <div class="list-group">
<?php foreach ($existingFiles as $i => $f): ?> <?php foreach ($existingFiles as $i => $f): ?>
<?php <?php
$fileUrl = '/file?uuid=' . rawurlencode($uuid) . '&name=' . rawurlencode($f['name']); $fileUrl = '/file?uuid=' . rawurlencode($uuid) . '&name=' . rawurlencode($f['name']);
$fmeta = $filesMeta[$f['name']] ?? []; $fmeta = $filesMeta[$f['name']] ?? [];
$isCoverFile = ($f['name'] === $coverFile); $isCoverFile = ($f['name'] === $coverFile);
?> ?>
<div class="list-group-item py-2"> <div class="list-group-item py-2">
<div class="d-flex align-items-center gap-3"> <div class="d-flex align-items-center gap-3">
<!-- Miniature --> <!-- Miniature -->
<?php if ($f['is_image']): ?> <?php if ($f['is_image']): ?>
<a href="<?= htmlspecialchars($fileUrl) ?>" target="_blank" rel="noopener" class="flex-shrink-0"> <a href="<?= htmlspecialchars($fileUrl) ?>" target="_blank" rel="noopener" class="flex-shrink-0">
<img src="<?= htmlspecialchars($fileUrl) ?>" alt="" <img src="<?= htmlspecialchars($fileUrl) ?>" alt=""
style="width:56px;height:56px;object-fit:cover;border-radius:4px;<?= $isCoverFile ? 'outline:2px solid #0d6efd' : '' ?>"> style="width:56px;height:56px;object-fit:cover;border-radius:4px;<?= $isCoverFile ? 'outline:2px solid #0d6efd' : '' ?>">
</a> </a>
<?php else: ?> <?php else: ?>
<span style="width:56px;text-align:center;font-size:1.6rem;flex-shrink:0"> <span style="width:56px;text-align:center;font-size:1.6rem;flex-shrink:0">
<?= match(true) { <?= match(true) {
str_starts_with($f['mime'], 'video/') => '🎬', str_starts_with($f['mime'], 'video/') => '🎬',
str_starts_with($f['mime'], 'audio/') => '🎵', str_starts_with($f['mime'], 'audio/') => '🎵',
$f['mime'] === 'application/pdf' => '📑', $f['mime'] === 'application/pdf' => '📑',
default => '📄', default => '📄',
} ?> } ?>
</span> </span>
<?php endif; ?> <?php endif; ?>
<!-- Infos + méta --> <!-- Infos + méta -->
<div class="flex-grow-1 overflow-hidden"> <div class="flex-grow-1 overflow-hidden">
<div class="d-flex align-items-center gap-2 mb-1"> <div class="d-flex align-items-center gap-2 mb-1">
<code class="text-truncate small"><?= htmlspecialchars($f['name']) ?></code> <code class="text-truncate small"><?= htmlspecialchars($f['name']) ?></code>
<small class="text-muted text-nowrap"><?= number_format($f['size'] / 1024, 1) ?> Ko</small> <small class="text-muted text-nowrap"><?= number_format($f['size'] / 1024, 1) ?> Ko</small>
<?php if ($isCoverFile): ?> <?php if ($isCoverFile): ?>
<span class="badge bg-primary">cover</span> <span class="badge bg-primary">cover</span>
<?php endif; ?>
</div>
<?php if ($f['is_image']): ?>
<div class="d-flex gap-2 flex-wrap">
<input type="hidden" name="fmeta_name[]" value="<?= htmlspecialchars($f['name']) ?>">
<input type="text" name="fmeta_author[]"
class="form-control form-control-sm"
style="max-width:220px"
placeholder="Auteur / crédit"
value="<?= htmlspecialchars($fmeta['author'] ?? '') ?>">
<input type="url" name="fmeta_source[]"
class="form-control form-control-sm font-monospace"
style="max-width:280px"
placeholder="URL source"
value="<?= htmlspecialchars($fmeta['source_url'] ?? '') ?>">
</div>
<?php endif; ?> <?php endif; ?>
</div> </div>
<?php if ($f['is_image']): ?>
<!-- Actions --> <div class="d-flex gap-2 flex-wrap">
<div class="d-flex flex-column gap-1 flex-shrink-0 align-items-end"> <input type="hidden" name="fmeta_name[]" value="<?= htmlspecialchars($f['name']) ?>">
<?php if ($f['is_image'] && !$isCoverFile): ?> <input type="text" name="fmeta_author[]"
<div class="form-check mb-0"> class="form-control form-control-sm"
<input class="form-check-input" type="radio" style="max-width:220px"
name="cover_file" id="cover_<?= $i ?>" placeholder="Auteur / crédit"
value="<?= htmlspecialchars($f['name']) ?>"> value="<?= htmlspecialchars($fmeta['author'] ?? '') ?>">
<label class="form-check-label small" for="cover_<?= $i ?>">Cover</label> <input type="url" name="fmeta_source[]"
</div> class="form-control form-control-sm font-monospace"
<?php elseif ($isCoverFile): ?> style="max-width:280px"
<input type="hidden" name="cover_file" value="<?= htmlspecialchars($f['name']) ?>"> placeholder="URL source"
<small class="text-primary">✓ Cover</small> value="<?= htmlspecialchars($fmeta['source_url'] ?? '') ?>">
<?php endif; ?>
<div class="d-flex gap-1">
<button type="button" class="btn btn-sm btn-outline-secondary"
data-copy-md-name="<?= htmlspecialchars($fmeta['title'] ?? $f['name']) ?>"
data-copy-md-is-image="<?= $f['is_image'] ? '1' : '0' ?>">
MD
</button>
<button type="submit" form="del-file-<?= $i ?>"
class="btn btn-sm btn-outline-danger"
data-confirm="Supprimer « <?= htmlspecialchars($f['name']) ?> » ?">
✕
</button>
</div> </div>
<?php endif; ?>
</div>
<!-- Actions -->
<div class="d-flex flex-column gap-1 flex-shrink-0 align-items-end">
<?php if ($f['is_image'] && !$isCoverFile): ?>
<div class="form-check mb-0">
<input class="form-check-input" type="radio"
name="cover_file" id="cover_<?= $i ?>"
value="<?= htmlspecialchars($f['name']) ?>">
<label class="form-check-label small" for="cover_<?= $i ?>">Cover</label>
</div>
<?php elseif ($isCoverFile): ?>
<input type="hidden" name="cover_file" value="<?= htmlspecialchars($f['name']) ?>">
<small class="text-primary">✓ Cover</small>
<?php endif; ?>
<div class="d-flex gap-1">
<button type="button" class="btn btn-sm btn-outline-secondary"
data-copy-md-name="<?= htmlspecialchars($fmeta['title'] ?? $f['name']) ?>"
data-copy-md-is-image="<?= $f['is_image'] ? '1' : '0' ?>">
MD
</button>
<button type="submit" form="del-file-<?= $i ?>"
class="btn btn-sm btn-outline-danger"
data-confirm="Supprimer « <?= htmlspecialchars($f['name']) ?> » ?">
✕
</button>
</div> </div>
</div> </div>
</div> </div>
<?php endforeach; ?> </div>
</div> <?php endforeach; ?>
</div> </div>
<?php endif; ?> </div>
<?php endif; ?>
<?php if ($action === 'edit'): ?>
</div><!-- /col-lg-8 -->
<div class="col-lg-4">
<div class="mb-3">
<label for="category" class="form-label">Catégorie</label>
<div class="d-flex align-items-center gap-2">
<input type="text" class="form-control form-control-sm" id="category" name="category"
value="<?= htmlspecialchars($category ?? '') ?>"
placeholder="ex : informatique, loisirs, photo…"
autocomplete="off">
<div id="cat-swatch" title="" style="width:40px;height:28px;border-radius:6px;flex-shrink:0;background:#e5e7eb;transition:background .25s"></div>
</div>
<small id="cat-hint" class="text-muted d-block mt-1"></small>
<div id="cat-free-swatches" class="d-flex flex-wrap gap-1 mt-2"></div>
</div>
<div class="mb-3">
<label for="published_at" class="form-label">Date de publication</label>
<input type="datetime-local" class="form-control" id="published_at" name="published_at" value="<?= $dateValue ?>">
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" id="published" name="published"
<?= ($published ?? false) ? 'checked' : '' ?>>
<label class="form-check-label" for="published">Publié</label>
</div>
</div>
<?php if ($action === 'edit'): ?>
<div class="mb-3"> <div class="mb-3">
<label for="revision_comment" class="form-label">Commentaire de révision <small class="text-muted">(optionnel)</small></label> <label for="revision_comment" class="form-label">Commentaire de révision <small class="text-muted">(optionnel)</small></label>
<input type="text" class="form-control" id="revision_comment" name="revision_comment" <input type="text" class="form-control" id="revision_comment" name="revision_comment"
placeholder="ex. Correction typos, ajout section X…"> placeholder="ex. Correction typos, ajout section X…">
</div> </div>
<?php endif; ?>
<div class="card mb-3 border-secondary"> <div class="card mb-3 border-secondary">
<div class="card-header bg-transparent py-2"> <div class="card-header bg-transparent py-2">
@@ -243,67 +277,14 @@ $dateValue = isset($published_at)
</div> </div>
</div> </div>
<div class="d-flex align-items-center gap-3 flex-wrap"> <div class="d-flex align-items-center gap-3 flex-wrap mb-4">
<button type="submit" class="btn btn-success">Enregistrer</button> <button type="submit" class="btn btn-success">Enregistrer</button>
<a href="/" class="btn btn-secondary">Annuler</a> <a href="/" class="btn btn-secondary">Annuler</a>
<?php if ($action === 'edit'): ?>
<span id="autosave-indicator" class="text-muted small"></span> <span id="autosave-indicator" class="text-muted small"></span>
<?php endif; ?>
</div> </div>
</form>
<?php if ($action === 'edit' && !empty($existingFiles)): ?> <hr class="my-3">
<?php foreach ($existingFiles as $i => $f): ?>
<form id="del-file-<?= $i ?>" method="POST"
action="/?action=delete_file&uuid=<?= rawurlencode($uuid) ?>">
<input type="hidden" name="name" value="<?= htmlspecialchars($f['name']) ?>">
</form>
<?php endforeach; ?>
<?php endif; ?>
<?php if ($action === 'edit' && !empty($article['revisions'])): ?>
<hr class="my-4">
<div>
<button class="btn btn-sm btn-link text-secondary text-decoration-none p-0 fw-semibold"
type="button" data-bs-toggle="collapse" data-bs-target="#historyPanel">
▸ Historique des révisions (<?= count($article['revisions']) ?>)
</button>
<div class="collapse mt-3" id="historyPanel">
<table class="table table-sm table-hover align-middle">
<thead>
<tr><th>#</th><th>Date</th><th>Titre à l'époque</th><th>Commentaire</th><th></th></tr>
</thead>
<tbody>
<?php foreach (array_reverse($article['revisions']) as $rev): ?>
<tr>
<td class="text-muted small"><?= (int)($rev['n'] ?? 0) ?></td>
<td class="small text-nowrap">
<?= htmlspecialchars(date('d/m/Y H:i', strtotime((string)($rev['date'] ?? '')))) ?>
</td>
<td class="small text-truncate" style="max-width:200px">
<?= htmlspecialchars($rev['title'] ?? '') ?>
</td>
<td class="small text-muted">
<?= htmlspecialchars($rev['comment'] ?? '') ?: '<span class="text-muted">–</span>' ?>
</td>
<td>
<a href="/?action=diff&uuid=<?= rawurlencode($uuid) ?>&rev=<?= (int)($rev['n'] ?? 0) ?>"
class="btn btn-outline-secondary btn-sm" target="_blank">
Diff
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
<?php endif; ?>
<?php if ($action === 'edit'): ?>
</div><!-- /col-lg-8 -->
<div class="col-lg-4">
<?php $sidebarImages = array_filter($existingFiles ?? [], fn ($f) => $f['is_image']); ?> <?php $sidebarImages = array_filter($existingFiles ?? [], fn ($f) => $f['is_image']); ?>
<?php if ($sidebarImages): ?> <?php if ($sidebarImages): ?>
@@ -375,9 +356,118 @@ $dateValue = isset($published_at)
</a> </a>
<?php endif; ?> <?php endif; ?>
</div> </div>
</div><!-- /col-lg-4 -->
</div><!-- /col-lg-4 -->
</div><!-- /row --> </div><!-- /row -->
</form>
<?php if (!empty($existingFiles)): ?>
<?php foreach ($existingFiles as $i => $f): ?>
<form id="del-file-<?= $i ?>" method="POST"
action="/?action=delete_file&uuid=<?= rawurlencode($uuid) ?>">
<input type="hidden" name="name" value="<?= htmlspecialchars($f['name']) ?>">
</form>
<?php endforeach; ?>
<?php endif; ?>
<?php if (!empty($article['revisions'])): ?>
<hr class="my-4">
<div>
<button class="btn btn-sm btn-link text-secondary text-decoration-none p-0 fw-semibold"
type="button" data-bs-toggle="collapse" data-bs-target="#historyPanel">
▸ Historique des révisions (<?= count($article['revisions']) ?>)
</button>
<div class="collapse mt-3" id="historyPanel">
<table class="table table-sm table-hover align-middle">
<thead>
<tr><th>#</th><th>Date</th><th>Titre à l'époque</th><th>Commentaire</th><th></th></tr>
</thead>
<tbody>
<?php foreach (array_reverse($article['revisions']) as $rev): ?>
<tr>
<td class="text-muted small"><?= (int)($rev['n'] ?? 0) ?></td>
<td class="small text-nowrap">
<?= htmlspecialchars(date('d/m/Y H:i', strtotime((string)($rev['date'] ?? '')))) ?>
</td>
<td class="small text-truncate" style="max-width:200px">
<?= htmlspecialchars($rev['title'] ?? '') ?>
</td>
<td class="small text-muted">
<?= htmlspecialchars($rev['comment'] ?? '') ?: '<span class="text-muted">–</span>' ?>
</td>
<td>
<a href="/?action=diff&uuid=<?= rawurlencode($uuid) ?>&rev=<?= (int)($rev['n'] ?? 0) ?>"
class="btn btn-outline-secondary btn-sm" target="_blank">
Diff
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
<?php endif; ?>
<?php else: /* create */ ?>
<div class="card mb-3 border-secondary">
<div class="card-header bg-transparent py-2">
<button class="btn btn-sm btn-link text-secondary text-decoration-none p-0 fw-semibold"
type="button" data-bs-toggle="collapse" data-bs-target="#seoPanel" aria-expanded="false">
▸ SEO — titre, description, image
</button>
</div>
<div class="collapse" id="seoPanel">
<div class="card-body">
<div class="mb-3">
<label for="seo_title" class="form-label">
Titre SEO
<small class="text-muted">(balise &lt;title&gt; et og:title)</small>
</label>
<input type="text" class="form-control" id="seo_title" name="seo_title"
maxlength="70"
value="<?= htmlspecialchars($seoTitle ?? '') ?>"
placeholder="Généré automatiquement depuis le titre">
<div class="d-flex justify-content-between mt-1">
<small class="text-muted">Idéal : 30–60 caractères</small>
<small id="seo_title_counter" class="text-muted">0 / 60</small>
</div>
</div>
<div class="mb-3">
<label for="seo_description" class="form-label">
Description SEO
<small class="text-muted">(meta description et og:description)</small>
</label>
<textarea class="form-control" id="seo_description" name="seo_description"
rows="3" maxlength="200"
placeholder="Générée automatiquement depuis le début du contenu"><?= htmlspecialchars($seoDescription ?? '') ?></textarea>
<div class="d-flex justify-content-between mt-1">
<small class="text-muted">Idéal : 120–155 caractères</small>
<small id="seo_desc_counter" class="text-muted">0 / 155</small>
</div>
</div>
<div class="mb-2">
<label for="og_image" class="form-label">
Image Open Graph
<small class="text-muted">(URL absolue, optionnel)</small>
</label>
<input type="url" class="form-control font-monospace" id="og_image" name="og_image"
value="<?= htmlspecialchars($ogImage ?? '') ?>"
placeholder="https://varlog.a5l.fr/…">
</div>
</div>
</div>
</div>
<div class="d-flex align-items-center gap-3 flex-wrap">
<button type="submit" class="btn btn-success">Enregistrer</button>
<a href="/" class="btn btn-secondary">Annuler</a>
</div>
</form>
<?php endif; ?> <?php endif; ?>