Files
xamxam/app/templates/admin/contenus-edit.php
Pontoporeia 38ef550397 feat: render actual elements in markdown cheatsheet instead of labels
Replace text labels (h1, bold, italic) with rendered HTML in the Rendu column:
headings, strong, em, del, code, links, blockquote, lists, hr, sup, small
2026-06-10 00:18:49 +02:00

193 lines
9.8 KiB
PHP

<main id="main-content">
<h1><a href="/admin/contenus.php" class="admin-back-btn" title="Retour"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H107.31l18.35,18.34a8,8,0,0,1-11.32,11.32l-32-32a8,8,0,0,1,0-11.32l32-32a8,8,0,0,1,11.32,11.32L107.31,120H168A8,8,0,0,1,176,128Z"></path></svg></a> Éditer : <?= htmlspecialchars($editTitle) ?></h1>
<?php if ($editType === 'about_page'): ?>
<!-- ── Markdown content ──────────────────────────────────────────────── -->
<h2>Contenu de la page</h2>
<form action="/admin/actions/page.php" method="post" class="admin-form"
hx-post="/admin/actions/page.php"
hx-trigger="overtype:change delay:1500ms"
hx-swap="none"
hx-on::after-request="handleAutosaveResponse(event)">
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION["csrf_token"]) ?>">
<input type="hidden" name="slug" value="about">
<label for="editor">Contenu (Markdown) :</label>
<button type="button" class="btn btn--sm"
hx-get="/admin/markdown-cheatsheet-fragment.php"
hx-target="#md-cheatsheet-container"
hx-swap="innerHTML"
hx-on::after-request="document.getElementById('md-cheatsheet-dialog').showModal()">
Aide Markdown
</button>
<input type="hidden" id="content" name="content"
value="<?= htmlspecialchars($initialContent) ?>">
<div id="editor"></div>
<div class="autosave-status" data-autosave-status></div>
</form>
<!-- ── Contacts ──────────────────────────────────────────────────────── -->
<h2 style="margin-top:3rem;">Contacts</h2>
<?php
$aproposKey = 'contacts';
$groups = $aboutContacts ?? [];
include APP_ROOT . '/templates/admin/apropos-groups-form.php';
?>
<!-- ── Sidebar links ─────────────────────────────────────────────────── -->
<h2 style="margin-top:3rem;">Liens de la barre latérale</h2>
<form action="/admin/actions/apropos.php" method="post" class="admin-form" id="sidebar-links-form"
hx-post="/admin/actions/apropos.php"
hx-trigger="change delay:1500ms, input delay:1500ms"
hx-swap="none"
hx-on::after-request="handleAutosaveResponse(event)">
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
<input type="hidden" name="apropos_key" value="sidebar_links">
<?php foreach ($sidebarLinks as $li => $link): ?>
<div class="sidebar-link-row">
<div class="sidebar-link-fields">
<div>
<label for="sl_<?= $li ?>_label">Label :</label>
<input type="text" id="sl_<?= $li ?>_label"
name="links[<?= $li ?>][label]"
value="<?= htmlspecialchars($link['label'] ?? '') ?>"
placeholder="Site de l'erg">
</div>
<div>
<label for="sl_<?= $li ?>_url">URL :</label>
<input type="url" id="sl_<?= $li ?>_url"
name="links[<?= $li ?>][url]"
value="<?= htmlspecialchars($link['url'] ?? '') ?>"
placeholder="https://erg.be">
</div>
</div>
<button type="button" class="admin-icon-btn admin-icon-btn--delete remove-sidebar-link-btn"
title="Supprimer ce lien">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM112,168V104a8,8,0,0,1,16,0v64a8,8,0,0,1-16,0Zm48,0V104a8,8,0,0,1,16,0v64a8,8,0,0,1-16,0Z"></path></svg>
</button>
</div>
<?php endforeach; ?>
<button type="button" class="btn btn--primary btn--sm" id="add-sidebar-link-btn">+ Ajouter un lien</button>
<div class="autosave-status" data-autosave-status></div>
</form>
<template id="sidebar-link-tpl">
<div class="sidebar-link-row">
<div class="sidebar-link-fields">
<div>
<label>Label :</label>
<input type="text" name="links[{{li}}][label]" placeholder="Site de l'erg">
</div>
<div>
<label>URL :</label>
<input type="url" name="links[{{li}}][url]" placeholder="https://erg.be">
</div>
</div>
<button type="button" class="admin-icon-btn admin-icon-btn--delete remove-sidebar-link-btn"
title="Supprimer ce lien">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM112,168V104a8,8,0,0,1,16,0v64a8,8,0,0,1-16,0Zm48,0V104a8,8,0,0,1,16,0v64a8,8,0,0,1-16,0Z"></path></svg>
</button>
</div>
</template>
<script>
(function() {
var form = document.getElementById('sidebar-links-form');
var tpl = document.getElementById('sidebar-link-tpl');
var tplHtml = tpl.innerHTML;
function reindexLinks() {
var rows = form.querySelectorAll('.sidebar-link-row');
rows.forEach(function(row, i) {
row.querySelectorAll('input').forEach(function(inp) {
if (inp.name) {
inp.name = inp.name.replace(/links\[\d+\]/, 'links[' + i + ']');
}
if (inp.id) {
inp.id = inp.id.replace(/sl_\d+/, 'sl_' + i);
}
});
row.querySelectorAll('label[for]').forEach(function(lbl) {
lbl.setAttribute('for', lbl.getAttribute('for').replace(/sl_\d+/, 'sl_' + i));
});
});
}
// Event delegation for remove buttons (including dynamically added)
form.addEventListener('click', function(e) {
if (!e.target.closest('.remove-sidebar-link-btn')) return;
e.preventDefault();
e.target.closest('.sidebar-link-row').remove();
reindexLinks();
});
// Add button
var addBtn = document.getElementById('add-sidebar-link-btn');
addBtn.addEventListener('click', function() {
var rows = form.querySelectorAll('.sidebar-link-row');
var idx = rows.length;
var html = tplHtml.split('{{li}}').join(idx);
this.insertAdjacentHTML('beforebegin', html);
});
})();
</script>
<?php elseif ($editType === 'page' && $pageSlug !== 'about'): ?>
<form action="/admin/actions/page.php" method="post" class="admin-form"
hx-post="/admin/actions/page.php"
hx-trigger="overtype:change delay:1500ms"
hx-swap="none"
hx-on::after-request="handleAutosaveResponse(event)">
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION["csrf_token"]) ?>">
<input type="hidden" name="slug" value="<?= htmlspecialchars($pageSlug) ?>">
<label for="editor">Contenu (Markdown) :</label>
<button type="button" class="btn btn--sm"
hx-get="/admin/markdown-cheatsheet-fragment.php"
hx-target="#md-cheatsheet-container"
hx-swap="innerHTML"
hx-on::after-request="document.getElementById('md-cheatsheet-dialog').showModal()">
Aide Markdown
</button>
<input type="hidden" id="content" name="content"
value="<?= htmlspecialchars($initialContent) ?>">
<div id="editor"></div>
<div class="autosave-status" data-autosave-status></div>
</form>
<?php elseif ($editType === 'form_help'): ?>
<p class="param-note">Ce texte est affiché dans le formulaire de soumission des étudiant·es (lien de partage). Supporte le Markdown.</p>
<form action="/admin/actions/form-help.php" method="post" class="admin-form"
hx-post="/admin/actions/form-help.php"
hx-trigger="overtype:change delay:1500ms"
hx-swap="none"
hx-on::after-request="handleAutosaveResponse(event)">
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
<input type="hidden" name="form_help_key" value="<?= htmlspecialchars($formHelpKey) ?>">
<label for="editor">Contenu (Markdown) :</label>
<button type="button" class="btn btn--sm"
hx-get="/admin/markdown-cheatsheet-fragment.php"
hx-target="#md-cheatsheet-container"
hx-swap="innerHTML"
hx-on::after-request="document.getElementById('md-cheatsheet-dialog').showModal()">
Aide Markdown
</button>
<input type="hidden" id="content" name="content"
value="<?= htmlspecialchars($initialContent) ?>">
<div id="editor"></div>
<div class="autosave-status" data-autosave-status></div>
</form>
<?php else: ?>
<?php
$groups = is_array($value) ? $value : [];
?>
<?php include APP_ROOT . '/templates/admin/apropos-groups-form.php'; ?>
<?php endif; ?>
</main>