mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
Rework contenus-edit: auto-save, OverType toolbar, dynamic sidebar links
- Auto-save: new autosave.js with 1.5s debounce, watches all forms with
data-autosave, POSTs to form action with Accept: application/json, shows
saving/saved/error status indicator
- All action handlers (page.php, apropos.php, form-help.php) now detect
JSON Accept header and return {success, csrf_token} or {error} responses
- OverType toolbar enabled (toolbar:true) on all three markdown editors
(page, about_page, form_help)
- Sidebar links: replaced fixed erg_site_url / source_code_url rows with
dynamic sidebar_links array of {label, url} objects. Add/remove via JS.
Fallback migration reads legacy keys if sidebar_links is empty.
- Updated AboutController and about.php template to render dynamic links
- Updated apropos.css: unified .apropos-toc-link replacing .apropos-toc-erg
and .apropos-toc-source
- New CSS: autosave-status states, sidebar-link-row layout
- Removed all Enregistrer + Annuler buttons — auto-save and h1 back-arrow
make them redundant
This commit is contained in:
Pontoporeia
@@ -6,7 +6,7 @@
|
||||
* $groups array Existing groups data
|
||||
*/
|
||||
?>
|
||||
<form action="/admin/actions/apropos.php" method="post" class="admin-form" id="apropos-form-<?= $aproposKey ?>">
|
||||
<form action="/admin/actions/apropos.php" method="post" class="admin-form" id="apropos-form-<?= $aproposKey ?>" data-autosave>
|
||||
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
|
||||
<input type="hidden" name="apropos_key" value="<?= htmlspecialchars($aproposKey) ?>">
|
||||
|
||||
@@ -55,10 +55,7 @@
|
||||
<button type="button" class="btn btn--primary add-group-btn-f"
|
||||
data-key="<?= $aproposKey ?>">+ Ajouter un contact</button>
|
||||
|
||||
<div class="admin-form-footer">
|
||||
<button type="submit" class="btn btn--primary">Enregistrer</button>
|
||||
<a href="/admin/contenus.php" class="btn btn--secondary admin-cancel-link">Annuler</a>
|
||||
</div>
|
||||
<div class="autosave-status" data-autosave-status></div>
|
||||
|
||||
<template id="entry-template-f-<?= $aproposKey ?>">
|
||||
<div class="apropos-entry">
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
<!-- ── Markdown content ──────────────────────────────────────────────── -->
|
||||
<h2>Contenu de la page</h2>
|
||||
<form action="/admin/actions/page.php" method="post" class="admin-form">
|
||||
<form action="/admin/actions/page.php" method="post" class="admin-form" data-autosave>
|
||||
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION["csrf_token"]) ?>">
|
||||
<input type="hidden" name="slug" value="about">
|
||||
|
||||
@@ -13,11 +13,7 @@
|
||||
<input type="hidden" id="content" name="content"
|
||||
value="<?= htmlspecialchars($initialContent) ?>">
|
||||
<div id="editor"></div>
|
||||
|
||||
<div class="admin-form-footer">
|
||||
<button type="submit" class="btn btn--primary">Enregistrer</button>
|
||||
<a href="/admin/contenus.php" class="btn btn--secondary admin-cancel-link">Annuler</a>
|
||||
</div>
|
||||
<div class="autosave-status" data-autosave-status></div>
|
||||
</form>
|
||||
|
||||
<!-- ── Contacts ──────────────────────────────────────────────────────── -->
|
||||
@@ -30,32 +26,103 @@
|
||||
|
||||
<!-- ── 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">
|
||||
<form action="/admin/actions/apropos.php" method="post" class="admin-form" id="sidebar-links-form" data-autosave>
|
||||
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
|
||||
<input type="hidden" name="apropos_key" value="erg_site_url">
|
||||
<label for="apropos-erg-site-url">Site de l'erg :</label>
|
||||
<input type="url" id="apropos-erg-site-url" name="url"
|
||||
value="<?= htmlspecialchars($ergSiteUrl ?? '') ?>"
|
||||
placeholder="https://erg.be">
|
||||
<div class="admin-form-footer">
|
||||
<button type="submit" class="btn btn--primary">Enregistrer</button>
|
||||
<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>
|
||||
|
||||
<form action="/admin/actions/apropos.php" method="post" class="admin-form" style="margin-top:var(--space-m)">
|
||||
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
|
||||
<input type="hidden" name="apropos_key" value="source_code_url">
|
||||
<label for="apropos-source-code-url">Code source :</label>
|
||||
<input type="url" id="apropos-source-code-url" name="url"
|
||||
value="<?= htmlspecialchars($sourceCodeUrl ?? '') ?>"
|
||||
placeholder="https://git.erg.school/PostERG/xamxam">
|
||||
<div class="admin-form-footer">
|
||||
<button type="submit" class="btn btn--primary">Enregistrer</button>
|
||||
<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>
|
||||
</form>
|
||||
</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">
|
||||
<form action="/admin/actions/page.php" method="post" class="admin-form" data-autosave>
|
||||
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION["csrf_token"]) ?>">
|
||||
<input type="hidden" name="slug" value="<?= htmlspecialchars($pageSlug) ?>">
|
||||
|
||||
@@ -63,16 +130,12 @@
|
||||
<input type="hidden" id="content" name="content"
|
||||
value="<?= htmlspecialchars($initialContent) ?>">
|
||||
<div id="editor"></div>
|
||||
|
||||
<div class="admin-form-footer">
|
||||
<button type="submit" class="btn btn--primary">Enregistrer</button>
|
||||
<a href="/admin/contenus.php" class="btn btn--secondary admin-cancel-link">Annuler</a>
|
||||
</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">
|
||||
<form action="/admin/actions/form-help.php" method="post" class="admin-form" data-autosave>
|
||||
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
|
||||
<input type="hidden" name="form_help_key" value="<?= htmlspecialchars($formHelpKey) ?>">
|
||||
|
||||
@@ -80,11 +143,7 @@
|
||||
<input type="hidden" id="content" name="content"
|
||||
value="<?= htmlspecialchars($initialContent) ?>">
|
||||
<div id="editor"></div>
|
||||
|
||||
<div class="admin-form-footer">
|
||||
<button type="submit" class="btn btn--primary">Enregistrer</button>
|
||||
<a href="/admin/contenus.php#form-help-blocks" class="btn btn--secondary admin-cancel-link">Annuler</a>
|
||||
</div>
|
||||
<div class="autosave-status" data-autosave-status></div>
|
||||
</form>
|
||||
|
||||
<?php else: ?>
|
||||
|
||||
@@ -44,16 +44,15 @@ function renderEntries(array $entries): string
|
||||
<?php endif; ?>
|
||||
<li><a href="#apropos-credits">Crédits</a></li>
|
||||
</ul>
|
||||
<div class="apropos-toc-erg">
|
||||
<a href="<?= htmlspecialchars($ergSiteUrl ?: 'https://erg.be') ?>" target="_blank" rel="noopener">
|
||||
Site de l'erg ↗
|
||||
</a>
|
||||
</div>
|
||||
<div class="apropos-toc-source">
|
||||
<a href="<?= htmlspecialchars($sourceCodeUrl ?: 'https://git.erg.school/PostERG/xamxam') ?>" target="_blank" rel="noopener">
|
||||
Code source ↗
|
||||
<?php if (!empty($sidebarLinks)): ?>
|
||||
<?php foreach ($sidebarLinks as $sl): ?>
|
||||
<div class="apropos-toc-link">
|
||||
<a href="<?= htmlspecialchars($sl['url'] ?? '#') ?>" target="_blank" rel="noopener">
|
||||
<?= htmlspecialchars($sl['label'] ?? 'Lien') ?> ↗
|
||||
</a>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</nav>
|
||||
|
||||
<!-- MIDDLE: main prose + sections -->
|
||||
|
||||
Reference in New Issue
Block a user