Ajoute le système de modèles/thèmes de document ("Utiliser un modèle")
Nouveau bouton dans le topbar de l'éditeur, à côté d'Aperçu, qui ouvre une modale listant les thèmes du catalogue (document_engine/themes/). Cliquer un thème charge un VRAI aperçu (rendu serveur réel dans un iframe, jamais une resucée CSS côté client) avec le choix de garder le contenu actuel ou de le remplacer par le contenu de démonstration du modèle. Architecture pensée pour une centaine de thèmes futurs : chaque thème est une feuille de style externe (static/document/themes/<id>.css) qui habille les classes fixes du moteur, jamais du code qui en changerait la structure. Premier thème implémenté pour valider le mécanisme : "Sécurité Incendie" (6 pages de contenu réel, quiz inclus). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
a34bcf4159
commit
864ae697fd
@@ -2276,3 +2276,122 @@ img.docImage {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Modale "Utiliser un modèle" (voir static/document/js/
|
||||
document-editor.js, forgeDocOpenTemplateModal) : liste des thèmes du
|
||||
catalogue à gauche, aperçu RÉEL du thème sélectionné (chargé dans un
|
||||
<iframe> pointant sur /document/<slug>/theme/<id>/preview, jamais un
|
||||
style recopié à la main) à droite. Plus large que la modale générique
|
||||
par défaut (comme #docScenarioTreeModal ci-dessus), pour laisser de
|
||||
la place à l'aperçu. ---- */
|
||||
.docModalDialog--wide {
|
||||
width: min(980px, 95vw);
|
||||
max-height: min(85vh, 760px);
|
||||
}
|
||||
|
||||
.docTemplateModalBody {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.docTemplateList {
|
||||
width: 260px;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid var(--doc-border);
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.docTemplateCard {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border: 1px solid var(--doc-border);
|
||||
border-radius: 10px;
|
||||
background: var(--doc-card);
|
||||
color: var(--doc-text);
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.docTemplateCard.is-active {
|
||||
border-color: var(--doc-accent);
|
||||
box-shadow: 0 0 0 1px var(--doc-accent);
|
||||
}
|
||||
|
||||
.docTemplateCardName {
|
||||
font-size: 13.5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.docTemplateCardCategory {
|
||||
font-size: 11.5px;
|
||||
color: var(--doc-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.docTemplatePreviewPane {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--doc-bg);
|
||||
}
|
||||
|
||||
.docTemplatePreviewFrame {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
border: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.docTemplatePreviewFrame.is-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.docTemplatePreviewEmpty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--doc-muted);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.docTemplatePreviewActions {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 14px 16px;
|
||||
border-top: 1px solid var(--doc-border);
|
||||
}
|
||||
|
||||
.docTemplatePreviewActions[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.docTemplatePreviewActions .docBtnSecondary {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (width <= 720px) {
|
||||
.docTemplateModalBody {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.docTemplateList {
|
||||
width: 100%;
|
||||
max-height: 160px;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--doc-border);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2839,6 +2839,107 @@ function forgeDocBindScenarioTreeModal() {
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
* Modale "Utiliser un modèle" — liste les thèmes du catalogue (voir
|
||||
* document_engine/themes/theme_catalog.py, transmis tel quel via
|
||||
* FORGE_DOCUMENT.themes) et prévisualise RÉELLEMENT le thème sélectionné
|
||||
* dans un <iframe> pointant sur /document/<slug>/theme/<id>/preview
|
||||
* (jamais un style recopié à la main côté client — ce qui est
|
||||
* prévisualisé est exactement ce qui s'affichera une fois appliqué).
|
||||
* ------------------------------------------------------------------- */
|
||||
|
||||
// eslint-disable-next-line no-var, vars-on-top
|
||||
var forgeDocSelectedTemplateId = null;
|
||||
|
||||
function forgeDocRenderTemplateList() {
|
||||
const list = document.getElementById('docTemplateList');
|
||||
const themes = window.FORGE_DOCUMENT.themes || [];
|
||||
if (!themes.length) {
|
||||
list.innerHTML = '<div class="docEmptyState">Aucun modèle disponible pour le moment.</div>';
|
||||
return;
|
||||
}
|
||||
list.innerHTML = themes.map((t) => `
|
||||
<button type="button" class="docTemplateCard ${t.id === forgeDocSelectedTemplateId ? 'is-active' : ''}" data-theme-id="${t.id}">
|
||||
<div class="docTemplateCardName">${forgeDocEscapeHtml(t.name)}</div>
|
||||
<div class="docTemplateCardCategory">${forgeDocEscapeHtml(t.category)}</div>
|
||||
</button>
|
||||
`).join('');
|
||||
list.querySelectorAll('.docTemplateCard').forEach((btn) => {
|
||||
btn.addEventListener('click', () => forgeDocSelectTemplate(btn.dataset.themeId));
|
||||
});
|
||||
}
|
||||
|
||||
function forgeDocSelectTemplate(themeId) {
|
||||
forgeDocSelectedTemplateId = themeId;
|
||||
forgeDocRenderTemplateList();
|
||||
const frame = document.getElementById('docTemplatePreviewFrame');
|
||||
const empty = document.getElementById('docTemplatePreviewEmpty');
|
||||
const actions = document.getElementById('docTemplatePreviewActions');
|
||||
frame.src = `/document/${window.forgeDocState.slug}/theme/${themeId}/preview`;
|
||||
frame.classList.add('is-visible');
|
||||
empty.hidden = true;
|
||||
actions.hidden = false;
|
||||
}
|
||||
|
||||
function forgeDocApplyTemplate(mode) {
|
||||
if (!forgeDocSelectedTemplateId) return;
|
||||
if (mode === 'template_content') {
|
||||
const confirmed = window.confirm( // eslint-disable-line no-alert
|
||||
'Remplacer tout le contenu actuel du document par le contenu de démonstration de ce modèle ? Cette action est irréversible.',
|
||||
);
|
||||
if (!confirmed) return;
|
||||
}
|
||||
fetch(`/document/${window.forgeDocState.slug}/theme/apply`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ theme_id: forgeDocSelectedTemplateId, mode }),
|
||||
}).then((r) => r.json()).then((result) => {
|
||||
if (result.error) { alert(result.error); return; } // eslint-disable-line no-alert
|
||||
// Le thème change le CSS chargé en <head> (voir templates/document/
|
||||
// document_edit.html, extra_head) et potentiellement tout le contenu
|
||||
// (mode "template_content") — un rechargement complet est le seul
|
||||
// moyen simple de rester synchronisé avec la vérité serveur, jamais
|
||||
// une resynchronisation partielle de l'état client ici.
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
function forgeDocOpenTemplateModal() {
|
||||
document.getElementById('docTemplateModal').classList.add('is-open');
|
||||
forgeDocSelectedTemplateId = window.FORGE_DOCUMENT.activeThemeId || null;
|
||||
forgeDocRenderTemplateList();
|
||||
const frame = document.getElementById('docTemplatePreviewFrame');
|
||||
const empty = document.getElementById('docTemplatePreviewEmpty');
|
||||
const actions = document.getElementById('docTemplatePreviewActions');
|
||||
if (forgeDocSelectedTemplateId) {
|
||||
forgeDocSelectTemplate(forgeDocSelectedTemplateId);
|
||||
} else {
|
||||
frame.classList.remove('is-visible');
|
||||
frame.src = 'about:blank';
|
||||
empty.hidden = false;
|
||||
actions.hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
function forgeDocCloseTemplateModal() {
|
||||
document.getElementById('docTemplateModal').classList.remove('is-open');
|
||||
document.getElementById('docTemplatePreviewFrame').src = 'about:blank';
|
||||
}
|
||||
|
||||
function forgeDocBindTemplateModal() {
|
||||
document.getElementById('docTemplateBtn').addEventListener('click', forgeDocOpenTemplateModal);
|
||||
document.getElementById('docTemplateModalClose').addEventListener('click', forgeDocCloseTemplateModal);
|
||||
document.getElementById('docTemplateModal').addEventListener('click', (e) => {
|
||||
if (e.target.id === 'docTemplateModal') forgeDocCloseTemplateModal();
|
||||
});
|
||||
document.getElementById('docTemplateKeepContentBtn').addEventListener('click', () => forgeDocApplyTemplate('keep_content'));
|
||||
document.getElementById('docTemplateUseContentBtn').addEventListener('click', () => forgeDocApplyTemplate('template_content'));
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key !== 'Escape') return;
|
||||
if (document.getElementById('docTemplateModal').classList.contains('is-open')) forgeDocCloseTemplateModal();
|
||||
});
|
||||
}
|
||||
|
||||
function forgeDocRenderProps(el) {
|
||||
const panel = document.getElementById('docPropsPanel');
|
||||
if (!el) {
|
||||
@@ -3032,6 +3133,7 @@ function forgeDocInit() {
|
||||
forgeDocBindMobileNav();
|
||||
forgeDocBindKeyboardShortcuts();
|
||||
forgeDocBindScenarioTreeModal();
|
||||
forgeDocBindTemplateModal();
|
||||
forgeDocBindSidebarTabs();
|
||||
forgeDocRenderPageManagerList();
|
||||
forgeDocBindPageManagerDrag();
|
||||
|
||||
@@ -0,0 +1,169 @@
|
||||
/* Thème "Sécurité Incendie" (document_engine/themes/theme_catalog.py) —
|
||||
habille UNIQUEMENT le contenu (jamais .docPage lui-même : format A4
|
||||
paysage, fond blanc et espacement restent la mécanique du moteur, voir
|
||||
static/document/document-editor.css — un thème ne les redéfinit
|
||||
jamais, sous peine de casser le format garanti de la page). Chargé
|
||||
APRÈS document-editor.css (voir templates/document/
|
||||
document_edit.html et document_theme_preview.html), donc prioritaire
|
||||
à spécificité égale sur les quelques couleurs de contenu que le
|
||||
moteur pose par défaut (--forge-text, --doc-text). */
|
||||
|
||||
.docPageContent {
|
||||
--theme-ink: #241f1c;
|
||||
--theme-ink-muted: #6b6259;
|
||||
--theme-line: #e7dfd2;
|
||||
--theme-safety-red: #c8102e;
|
||||
--theme-safety-red-dark: #8f0b20;
|
||||
--theme-safety-red-tint: #fbe9ec;
|
||||
--theme-hazard-amber: #e3a72e;
|
||||
--theme-hazard-amber-dark: #a97815;
|
||||
--theme-ok-green: #2e7d46;
|
||||
--theme-font-display: "Oswald", sans-serif;
|
||||
--theme-font-body: "Source Sans 3", sans-serif;
|
||||
|
||||
font-family: var(--theme-font-body);
|
||||
|
||||
--forge-text: var(--theme-ink);
|
||||
--forge-text-muted: var(--theme-ink-muted);
|
||||
}
|
||||
|
||||
.docText[data-kind="titre"] {
|
||||
font-family: var(--theme-font-display);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.docText[data-kind="paragraphe"] {
|
||||
font-family: var(--theme-font-body);
|
||||
}
|
||||
|
||||
/* ---- Étiquette (badge) : encart compact type avertissement/repère ---- */
|
||||
.docBadge {
|
||||
display: inline-block;
|
||||
font-family: var(--theme-font-body);
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: var(--theme-safety-red-dark);
|
||||
background: var(--theme-safety-red-tint);
|
||||
padding: 8px 12px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
/* ---- Liste à puces / numérotée : coche sécurité / pastille panneau ---- */
|
||||
.docList {
|
||||
font-family: var(--theme-font-body);
|
||||
}
|
||||
|
||||
.docList li {
|
||||
background: #faf7f2;
|
||||
border: 1px solid var(--theme-line);
|
||||
border-left: 3px solid var(--theme-hazard-amber);
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.docList[data-kind="liste_puces"] li::before {
|
||||
content: "";
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-top: 1px;
|
||||
border-radius: 4px;
|
||||
background: var(--theme-ok-green);
|
||||
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z"/></svg>') center / 11px no-repeat;
|
||||
}
|
||||
|
||||
.docList[data-kind="liste_numerotee"] {
|
||||
counter-reset: doc-theme-step;
|
||||
}
|
||||
|
||||
.docList[data-kind="liste_numerotee"] li::before {
|
||||
counter-increment: doc-theme-step;
|
||||
content: counter(doc-theme-step);
|
||||
flex-shrink: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: var(--theme-safety-red);
|
||||
color: #fff;
|
||||
font-family: var(--theme-font-display);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.docList[data-kind="liste_numerotee"] li {
|
||||
border-left-color: var(--theme-safety-red);
|
||||
}
|
||||
|
||||
/* ---- Carte : classes de feu (repère en pastille + titre + description) ---- */
|
||||
.docCard {
|
||||
background: #faf7f2;
|
||||
border: 1px solid var(--theme-line);
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.docCardLabel {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
font-family: var(--theme-font-display);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: var(--theme-ink-muted);
|
||||
}
|
||||
|
||||
.docCardTitle {
|
||||
font-family: var(--theme-font-body);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-ink);
|
||||
}
|
||||
|
||||
.docCardDescription {
|
||||
font-family: var(--theme-font-body);
|
||||
font-size: 10.5px;
|
||||
color: var(--theme-ink-muted);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* ---- Bouton d'action ---- */
|
||||
.docButton {
|
||||
font-family: var(--theme-font-display);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
background: var(--theme-safety-red);
|
||||
color: #fff;
|
||||
box-shadow: 0 6px 16px -6px rgb(200 16 46 / 55%);
|
||||
}
|
||||
|
||||
/* ---- Image : cadre discret pour un pictogramme dessiné ---- */
|
||||
.docImage {
|
||||
background: #fdf3de;
|
||||
border: 1px solid var(--theme-line);
|
||||
}
|
||||
|
||||
/* ---- Quiz : palette rouge sécurité sur fond blanc ---- */
|
||||
.docQuizKicker {
|
||||
font-family: var(--theme-font-display);
|
||||
color: var(--theme-safety-red);
|
||||
}
|
||||
|
||||
.docQuizPlayerTitle {
|
||||
font-family: var(--theme-font-display);
|
||||
}
|
||||
|
||||
.docQuizOption {
|
||||
background: #faf7f2;
|
||||
border-color: var(--theme-line);
|
||||
}
|
||||
|
||||
.docQuizOptionLetter {
|
||||
font-family: var(--theme-font-display);
|
||||
}
|
||||
Reference in New Issue
Block a user