Ajoute l'alignement vertical du contenu d'une page, réglable depuis l'onglet "Pages"
Nouvelle colonne _document_pages.vertical_align (top/center/bottom,
"top" par défaut, migration incluse pour les supports existants).
Quand l'onglet "Pages" du panneau gauche est actif, le panneau
Propriétés (droite) affiche maintenant l'alignement de la page active
au lieu des propriétés d'un élément — un contrôle segmenté qui persiste
via une nouvelle route dédiée et met à jour le canevas immédiatement.
Le contenu-seed des thèmes porte désormais aussi ce réglage par page
(seed_pages devient une liste de {vertical_align, blocks} plutôt qu'une
liste de listes de blocs) : la page de titre du thème "Sécurité
Incendie" est centrée verticalement, comme demandé, cohérente avec la
maquette d'origine. L'aperçu de thème (iframe de la modale) reflète
aussi ce réglage par page.
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
be62275675
commit
746feb3796
@@ -169,7 +169,9 @@ function forgeDocCheckPageOverflow() {
|
||||
|
||||
function forgeDocRefreshCanvas() {
|
||||
return forgeDocApiRender().then((data) => {
|
||||
document.getElementById('docPageContent').innerHTML = data.html;
|
||||
const contentEl = document.getElementById('docPageContent');
|
||||
contentEl.innerHTML = data.html;
|
||||
contentEl.dataset.verticalAlign = data.vertical_align;
|
||||
window.forgeDocState.elements = data.elements;
|
||||
forgeDocRebuildIndex();
|
||||
forgeDocBindCanvasInteractions();
|
||||
@@ -178,7 +180,7 @@ function forgeDocRefreshCanvas() {
|
||||
forgeDocApplySelectionClass();
|
||||
} else {
|
||||
window.forgeDocState.selectedId = null;
|
||||
forgeDocRenderProps(null);
|
||||
forgeDocRefreshRightPanelDefault();
|
||||
}
|
||||
}).then(() => forgeDocCheckPageOverflow());
|
||||
}
|
||||
@@ -518,6 +520,14 @@ function forgeDocApiPageMove(pageId, newIndex) {
|
||||
}).then((r) => r.json());
|
||||
}
|
||||
|
||||
function forgeDocApiPageVerticalAlign(pageId, verticalAlign) {
|
||||
return fetch(`/document/${window.forgeDocState.slug}/pages/${pageId}/vertical-align`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ vertical_align: verticalAlign }),
|
||||
}).then((r) => r.json());
|
||||
}
|
||||
|
||||
function forgeDocOrderedPages() {
|
||||
return [...window.forgeDocState.pages].sort((a, b) => a.order_index - b.order_index);
|
||||
}
|
||||
@@ -542,7 +552,7 @@ function forgeDocSwitchPage(pageId) {
|
||||
window.forgeDocState.redoStack = [];
|
||||
forgeDocUpdateHistoryButtons();
|
||||
window.forgeDocState.selectedId = null;
|
||||
forgeDocRenderProps(null);
|
||||
forgeDocRefreshRightPanelDefault();
|
||||
forgeDocRenderPageManagerList();
|
||||
forgeDocUpdatePageNavPill();
|
||||
return forgeDocRefreshCanvas();
|
||||
@@ -565,6 +575,18 @@ function forgeDocRenamePage(pageId, title) {
|
||||
});
|
||||
}
|
||||
|
||||
function forgeDocSetPageVerticalAlign(pageId, verticalAlign) {
|
||||
return forgeDocApiPageVerticalAlign(pageId, verticalAlign).then((result) => {
|
||||
const page = window.forgeDocState.pages.find((p) => p.id === pageId);
|
||||
if (page) page.vertical_align = result.vertical_align;
|
||||
if (pageId === window.forgeDocState.activePageId) {
|
||||
const contentEl = document.getElementById('docPageContent');
|
||||
if (contentEl) contentEl.dataset.verticalAlign = result.vertical_align;
|
||||
}
|
||||
forgeDocRenderPageProps();
|
||||
});
|
||||
}
|
||||
|
||||
function forgeDocDeletePage(pageId) {
|
||||
// Filet de sécurité client (en plus du refus serveur, voir
|
||||
// routes/document/document_page_delete.py) : jamais même tenter de
|
||||
@@ -758,6 +780,16 @@ function forgeDocSwitchSidebarTab(tabName) {
|
||||
tabs[name].setAttribute('aria-selected', String(isActive));
|
||||
panels[name].hidden = !isActive;
|
||||
});
|
||||
// Le panneau Propriétés (droite) suit l'onglet actif (retour
|
||||
// utilisateur du 24/09/2026) : la page active sur "Pages", l'élément
|
||||
// sélectionné (ou rien) sur "Mise en page" — jamais les deux en même
|
||||
// temps.
|
||||
if (tabName === 'pages') {
|
||||
forgeDocRenderPageProps();
|
||||
} else {
|
||||
const { selectedId } = window.forgeDocState;
|
||||
forgeDocRenderProps(selectedId !== null ? window.forgeDocState.elementsById[selectedId] : null);
|
||||
}
|
||||
}
|
||||
|
||||
function forgeDocBindSidebarTabs() {
|
||||
@@ -1608,6 +1640,53 @@ function forgeDocDeleteButtonHtml() {
|
||||
return '<button type="button" class="docDeleteBtn" id="docDeletePropBtn">🗑 Supprimer cet élément</button>';
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
* Propriétés de PAGE (alignement vertical du contenu) — affichées dans
|
||||
* le panneau de droite quand l'onglet "Pages" du panneau de gauche est
|
||||
* actif (retour utilisateur du 24/09/2026), à la place des propriétés
|
||||
* d'un élément sélectionné. Jamais les deux en même temps : changer
|
||||
* d'onglet ou sélectionner un élément bascule l'un ou l'autre (voir
|
||||
* forgeDocSwitchSidebarTab/forgeDocRefreshRightPanelDefault).
|
||||
* ------------------------------------------------------------------- */
|
||||
|
||||
function forgeDocIsPagesTabActive() {
|
||||
const tab = document.getElementById('docTabPages');
|
||||
return !!tab && tab.classList.contains('is-active');
|
||||
}
|
||||
|
||||
function forgeDocRenderPageProps() {
|
||||
const panel = document.getElementById('docPropsPanel');
|
||||
if (!panel) return;
|
||||
const page = window.forgeDocState.pages.find((p) => p.id === window.forgeDocState.activePageId);
|
||||
if (!page) {
|
||||
panel.innerHTML = '<div class="docSectionLabel">Propriétés</div><div class="docEmptyState">Aucune page active.</div>';
|
||||
return;
|
||||
}
|
||||
const align = page.vertical_align || 'top';
|
||||
const options = [
|
||||
{ value: 'top', label: 'Haut' },
|
||||
{ value: 'center', label: 'Centré' },
|
||||
{ value: 'bottom', label: 'Bas' },
|
||||
];
|
||||
panel.innerHTML = `
|
||||
${forgeDocPropsHeader('page')}
|
||||
<div class="docField">
|
||||
<span class="docFieldLabel">Alignement vertical du contenu</span>
|
||||
<div class="docSegmented" id="docPageAlignSeg">
|
||||
${options.map((o) => `<button type="button" class="docSegBtn ${align === o.value ? 'is-active' : ''}" data-align="${o.value}">${o.label}</button>`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
panel.querySelectorAll('#docPageAlignSeg .docSegBtn').forEach((btn) => {
|
||||
btn.addEventListener('click', () => forgeDocSetPageVerticalAlign(page.id, btn.dataset.align));
|
||||
});
|
||||
}
|
||||
|
||||
function forgeDocRefreshRightPanelDefault() {
|
||||
if (forgeDocIsPagesTabActive()) forgeDocRenderPageProps();
|
||||
else forgeDocRenderProps(null);
|
||||
}
|
||||
|
||||
function forgeDocRenderTextProps(panel, el) {
|
||||
const a = el.attributes;
|
||||
panel.innerHTML = `
|
||||
@@ -3091,7 +3170,7 @@ function forgeDocBindDeselectOnBackgroundClick() {
|
||||
if (e.target.closest('[data-element-id]')) return;
|
||||
window.forgeDocState.selectedId = null;
|
||||
forgeDocApplySelectionClass();
|
||||
forgeDocRenderProps(null);
|
||||
forgeDocRefreshRightPanelDefault();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user