williamandClaude Sonnet 5
864ae697fd
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>
293 lines
13 KiB
HTML
293 lines
13 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Forge Engine — {{ support.name }}{% endblock %}
|
||
{% block body_class %}objectEditBody{% endblock %}
|
||
{% block content_class %}{% endblock %}
|
||
{% block extra_head %}
|
||
<link rel="stylesheet"
|
||
href="{{ url_for('static', filename='document/document-editor.css') }}">
|
||
{% if active_theme %}
|
||
{% if active_theme.font_url %}
|
||
<link rel="stylesheet" href="{{ active_theme.font_url }}">
|
||
{% endif %}
|
||
<link rel="stylesheet"
|
||
href="{{ url_for('static', filename=active_theme.css_path) }}">
|
||
{% endif %}
|
||
{% endblock %}
|
||
{% block content %}
|
||
<div class="docEditor3" id="docEditor3" data-slug="{{ support.slug }}">
|
||
<div class="docTopbar">
|
||
<div class="docCrumb">
|
||
<a href="{{ url_for('index') }}" class="docCrumbDim">Mes formations</a>
|
||
<svg width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round">
|
||
<path d="M9 6l6 6-6 6" />
|
||
</svg>
|
||
<span class="docCrumbCur">{{ support.name }}</span>
|
||
</div>
|
||
<div class="docTopbarActions">
|
||
<button type="button"
|
||
class="docIconBtn"
|
||
id="docUndoBtn"
|
||
aria-label="Annuler"
|
||
disabled
|
||
title="Annuler (Ctrl+Z)">
|
||
<svg width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1.8"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round">
|
||
<path d="M8 6L4 10l4 4" />
|
||
<path d="M4 10h9a6 6 0 1 1-4.2 10.2" />
|
||
</svg>
|
||
</button>
|
||
<button type="button"
|
||
class="docIconBtn"
|
||
id="docRedoBtn"
|
||
aria-label="Rétablir"
|
||
disabled
|
||
title="Rétablir (Ctrl+Y)">
|
||
<svg width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1.8"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round">
|
||
<path d="M16 6l4 4-4 4" />
|
||
<path d="M20 10h-9a6 6 0 1 0 4.2 10.2" />
|
||
</svg>
|
||
</button>
|
||
<div class="docDividerV"></div>
|
||
<button type="button"
|
||
class="docBtnSecondary docBtnPrimary"
|
||
id="docPreviewBtn">
|
||
<svg width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1.8"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round">
|
||
<path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6z" />
|
||
<circle cx="12" cy="12" r="3" />
|
||
</svg><span class="docBtnLabel">Aperçu</span>
|
||
</button>
|
||
<button type="button"
|
||
class="docBtnSecondary"
|
||
id="docTemplateBtn">
|
||
<svg width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1.8"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round">
|
||
<rect x="3" y="3" width="7" height="7" rx="1" />
|
||
<rect x="14" y="3" width="7" height="7" rx="1" />
|
||
<rect x="3" y="14" width="7" height="7" rx="1" />
|
||
<rect x="14" y="14" width="7" height="7" rx="1" />
|
||
</svg><span class="docBtnLabel">Utiliser un modèle</span>
|
||
</button>
|
||
<div class="docDividerV"></div>
|
||
<div class="docWidthPicker"
|
||
id="docWidthPicker"
|
||
role="group"
|
||
aria-label="Largeur d'aperçu">
|
||
<button type="button" class="docWidthBtn is-active" data-width="">Bureau</button>
|
||
<button type="button" class="docWidthBtn" data-width="768">Tablette</button>
|
||
<button type="button" class="docWidthBtn" data-width="375">Mobile</button>
|
||
</div>
|
||
<div class="docDividerV"></div>
|
||
<button type="button"
|
||
class="docIconBtn docThemeToggle"
|
||
id="docThemeToggle"
|
||
aria-label="Changer de thème"></button>
|
||
</div>
|
||
</div>
|
||
<div class="docBodyWrap">
|
||
<div class="docSidebarClose" id="docCloseLeft">← Retour au document</div>
|
||
<div class="docSidebar docSidebarLeft" id="docSidebarLeft">
|
||
{# Panneau gauche à onglets (retour utilisateur du 23/09/2026 :
|
||
"il dois avoir deux onglets") : "Mise en page" (bibliothèque
|
||
d'éléments, contenu inchangé) actif par défaut — le panneau
|
||
"Pages" (gestion complète des pages : liste/réordonner/ajouter/
|
||
supprimer/renommer) est un espace dédié plein-écran plutôt que
|
||
de se partager la hauteur avec la bibliothèque comme les
|
||
itérations précédentes (bande de vignettes, puis carrousel). #}
|
||
<div class="docSidebarTabs" role="tablist">
|
||
<button type="button"
|
||
class="docSidebarTab"
|
||
id="docTabPages"
|
||
role="tab"
|
||
aria-selected="false"
|
||
aria-controls="docTabPanelPages"
|
||
data-tab="pages">Pages</button>
|
||
<button type="button"
|
||
class="docSidebarTab is-active"
|
||
id="docTabLayout"
|
||
role="tab"
|
||
aria-selected="true"
|
||
aria-controls="docTabPanelLayout"
|
||
data-tab="layout">Mise en page</button>
|
||
</div>
|
||
<div class="docSidebarTabPanel"
|
||
id="docTabPanelPages"
|
||
role="tabpanel"
|
||
aria-labelledby="docTabPages"
|
||
hidden>
|
||
{# Bouton d'ajout EN HAUT, toujours visible (retour utilisateur du
|
||
23/09/2026 : "le bouton pour ajouter une page dois être en haut
|
||
toujours visible" — avec beaucoup de pages, il disparaissait en
|
||
bas de la liste défilante). #}
|
||
<button type="button" class="docBtnSecondary docPageManagerAdd" id="docPageManagerAdd">+ Ajouter une page</button>
|
||
<div class="docPageManagerList" id="docPageManagerList">
|
||
{% for page in pages %}
|
||
<div class="docPageRow {{ 'is-active' if page.id == active_page.id else '' }}"
|
||
role="button"
|
||
tabindex="0"
|
||
draggable="true"
|
||
data-page-id="{{ page.id }}">
|
||
{# //NOSONAR Web:S6819,Web:MouseEventWithoutKeyboardEquivalentCheck - div+role=button
|
||
volontaire : la rangée contient de vrais <button> d'action (renommer/supprimer),
|
||
qu'un <button> englobant ne pourrait pas contenir validement. L'équivalent clavier
|
||
(Entrée/Espace) est posé côté JS (forgeDocRenderPageManagerList), donc le finding
|
||
clavier de Sonar est un faux positif : l'analyseur statique ne voit pas les
|
||
addEventListener dynamiques. #}
|
||
<span class="docPageRowHandle" aria-hidden="true">⠿</span>
|
||
<span class="docPageRowNumber">{{ loop.index }}</span>
|
||
<span class="docPageRowTitle"><span class="docPageRowTitleText">{{ page.title }}</span></span>
|
||
<span class="docPageRowActions">
|
||
<button type="button"
|
||
class="docPageRowRename"
|
||
data-page-id="{{ page.id }}"
|
||
aria-label="Renommer cette page"
|
||
title="Renommer cette page">✎</button>
|
||
<button type="button"
|
||
class="docPageRowDelete"
|
||
data-page-id="{{ page.id }}"
|
||
aria-label="Supprimer cette page"
|
||
title="Supprimer cette page"
|
||
{{ 'disabled' if pages|length <= 1 else '' }}>✕</button>
|
||
</span>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
<div class="docSidebarTabPanel" id="docTabPanelLayout" role="tabpanel" aria-labelledby="docTabLayout">
|
||
{% for category_key, category in element_library.items() %}
|
||
<div>
|
||
<div class="docSectionLabel">{{ category.label }}</div>
|
||
<div class="docLibList">
|
||
{% for kind in category.kinds %}
|
||
<div class="docLibItem docLibItem--row"
|
||
draggable="true"
|
||
data-add="{{ kind }}">
|
||
<span class="docLibIcon docLibIcon--{{ kind }}"></span>
|
||
<span>{{ element_kind_labels[kind] }}</span>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
<div class="docCanvasArea" id="docCanvasArea">
|
||
<div class="docPage" id="docPage">
|
||
<div class="docPageContent" id="docPageContent">{{ rendered_document|safe }}</div>
|
||
{# //NOSONAR S5247 - rendered_document vient de document_engine.render_document, qui échappe (html.escape) tout contenu utilisateur avant interpolation (voir document_engine/rendering/render_document_element.py) ; jamais de HTML brut non échappé ici #}
|
||
</div>
|
||
<button type="button"
|
||
class="docPreviewExitBtn"
|
||
id="docPreviewExitBtn"
|
||
aria-label="Retour à l'éditeur"
|
||
title="Retour à l'éditeur">✕ Retour à l'éditeur</button>
|
||
<div class="docZoomPill">
|
||
<button type="button" id="docZoomOut" aria-label="Zoom -">−</button>
|
||
<span id="docZoomVal">100%</span>
|
||
<button type="button" id="docZoomIn" aria-label="Zoom +">+</button>
|
||
</div>
|
||
<div class="docPageNavPill" id="docPageNavPill">
|
||
<button type="button" id="docPagePrevBtn" aria-label="Page précédente">‹</button>
|
||
<span id="docPageNavLabel"></span>
|
||
<button type="button" id="docPageNextBtn" aria-label="Page suivante">›</button>
|
||
</div>
|
||
</div>
|
||
<div class="docSidebarClose" id="docCloseRight">← Retour au document</div>
|
||
<div class="docSidebar docSidebarRight" id="docSidebarRight">
|
||
<div id="docPropsPanel">
|
||
<div class="docSectionLabel">Propriétés</div>
|
||
<div class="docEmptyState">Sélectionnez un élément du document pour voir ses propriétés.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="docBottomNav" id="docBottomNav">
|
||
<button type="button" data-target="left">Éléments</button>
|
||
<button type="button" data-target="doc" class="is-active">Document</button>
|
||
<button type="button" data-target="right">Propriétés</button>
|
||
</div>
|
||
</div>
|
||
<div class="docModalBackdrop" id="docScenarioTreeModal">
|
||
<div class="docModalDialog">
|
||
<div class="docModalHeader">
|
||
<span class="docModalTitle" id="docScenarioTreeModalTitle">Arbre du scénario</span>
|
||
<button type="button"
|
||
class="docModalCloseBtn"
|
||
id="docScenarioTreeModalClose"
|
||
aria-label="Fermer">✕</button>
|
||
</div>
|
||
<div class="docModalBody" id="docScenarioTreeModalBody"></div>
|
||
</div>
|
||
</div>
|
||
<div class="docModalBackdrop" id="docTemplateModal">
|
||
<div class="docModalDialog docModalDialog--wide">
|
||
<div class="docModalHeader">
|
||
<span class="docModalTitle">Utiliser un modèle</span>
|
||
<button type="button"
|
||
class="docModalCloseBtn"
|
||
id="docTemplateModalClose"
|
||
aria-label="Fermer">✕</button>
|
||
</div>
|
||
<div class="docModalBody docTemplateModalBody">
|
||
<div class="docTemplateList" id="docTemplateList"></div>
|
||
<div class="docTemplatePreviewPane">
|
||
<iframe class="docTemplatePreviewFrame"
|
||
id="docTemplatePreviewFrame"
|
||
title="Aperçu du modèle"></iframe>
|
||
<div class="docTemplatePreviewEmpty"
|
||
id="docTemplatePreviewEmpty">Sélectionnez un modèle pour le visualiser.</div>
|
||
<div class="docTemplatePreviewActions"
|
||
id="docTemplatePreviewActions"
|
||
hidden>
|
||
<button type="button" class="docBtnSecondary" id="docTemplateKeepContentBtn">Utiliser mon contenu actuel</button>
|
||
<button type="button" class="docBtnSecondary docBtnPrimary" id="docTemplateUseContentBtn">Utiliser le contenu du modèle</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
window.FORGE_DOCUMENT = {
|
||
slug: {{ support.slug|tojson }},
|
||
elements: {{ elements|tojson }},
|
||
elementKindLabels: {{ element_kind_labels|tojson }},
|
||
pages: {{ pages|tojson }},
|
||
activePageId: {{ active_page.id|tojson }},
|
||
themes: {{ document_themes|tojson }},
|
||
activeThemeId: {{ support.theme|tojson }}
|
||
};
|
||
</script>
|
||
<script src="{{ url_for('static', filename='document/js/document-editor.js') }}"></script>
|
||
{% endblock %}
|