Forge-Store/Forge-Engine
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Bande de pages : un seul carré visible (la page active), les flèches changent de page
Build and deploy / test-python (push) Successful in 9m16s
Details
Build and deploy / test-js (push) Successful in 51s
Details
Build and deploy / lint-python (push) Successful in 4m11s
Details
Build and deploy / lint-js (push) Failing after 1m23s
Details
Build and deploy / build-and-push (push) Skipped
Details
Build and deploy / deploy (push) Skipped
Details
Build and deploy / sonarqube (push) Failing after 4m14s
Details

Browse Source 
Remplace le bandeau scrollable multi-cartes par un vrai carrousel
une-page-à-la-fois : un seul carré affiché (la page active), les
grandes flèches ‹/› aux extrémités changent directement la page
affichée (au lieu de juste faire défiler la vue). Les petites flèches
←/→ au-dessus du carré restent pour réordonner la page active parmi
ses sœurs, sans changer l'affichage — distinctes des flèches de
navigation.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
2026-09-22 15:08:09 +02:00
co-authored by Claude Sonnet 5
parent a2b95bd547
commit e33b11458c
3 changed files with 117 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/document/document_edit.html
+46 -42
View File
@@ -101,54 +101,58 @@
<button type="button"
class="docPageStripNav"
id="docPageStripPrev"
aria-label="Défiler vers la gauche"
title="Défiler vers la gauche">‹</button>
aria-label="Page précédente"
title="Page précédente">‹</button>
<div class="docPageList" id="docPageList">
{% for page in pages %}
<div class="docPageListItem {{ 'is-active' if page.id == active_page.id else '' }}"
role="button"
tabindex="0"
data-page-id="{{ page.id }}">
{# //NOSONAR Web:S6819,Web:MouseEventWithoutKeyboardEquivalentCheck - div+role=button
volontaire : la rangée contient de vrais <button> d'action (monter/descendre/
renommer/supprimer), qu'un <button> englobant ne pourrait pas contenir
validement. L'équivalent clavier (Entrée/Espace) est posé côté JS
(forgeDocRenderPageList), donc le finding clavier de Sonar est un faux positif
: l'analyseur statique ne voit pas les addEventListener dynamiques. #}
<div class="docPageListActions">
<button type="button"
class="docPageListMove"
data-dir="up"
data-page-id="{{ page.id }}"
aria-label="Déplacer vers la gauche"
title="Déplacer vers la gauche">←</button>
<button type="button"
class="docPageListMove"
data-dir="down"
data-page-id="{{ page.id }}"
aria-label="Déplacer vers la droite"
title="Déplacer vers la droite">→</button>
<button type="button"
class="docPageListRename"
data-page-id="{{ page.id }}"
aria-label="Renommer cette page"
title="Renommer cette page">✎</button>
<button type="button"
class="docPageListDelete"
data-page-id="{{ page.id }}"
aria-label="Supprimer cette page"
title="Supprimer cette page">✕</button>
</div>
<div class="docPageListSquare">{{ loop.index }}</div>
<span class="docPageListTitle"><span class="docPageListTitleText">{{ page.title }}</span></span>
{# active_page est toujours pages[0] au chargement initial (voir
routes/document/document_edit.py) — index 0 fixe, jamais recalculé
ici ; un changement de page ensuite est entièrement géré côté
client par forgeDocRenderPageList, qui recalcule le VRAI index. #}
{% set active_index = 0 %}
<div class="docPageListItem is-active" role="button" tabindex="0" data-page-id="{{ active_page.id }}">
{# //NOSONAR Web:S6819,Web:MouseEventWithoutKeyboardEquivalentCheck - div+role=button
volontaire : la rangée contient de vrais <button> d'action (réordonner/renommer/
supprimer), qu'un <button> englobant ne pourrait pas contenir validement.
L'équivalent clavier (Entrée/Espace) est posé côté JS (forgeDocRenderPageList),
donc le finding clavier de Sonar est un faux positif : l'analyseur statique ne
voit pas les addEventListener dynamiques. #}
<div class="docPageListActions">
<button type="button"
class="docPageListMove"
data-dir="up"
data-page-id="{{ active_page.id }}"
aria-label="Réordonner vers la gauche"
title="Réordonner vers la gauche"
{{ 'disabled' if active_index == 0 else '' }}>←</button>
<button type="button"
class="docPageListMove"
data-dir="down"
data-page-id="{{ active_page.id }}"
aria-label="Réordonner vers la droite"
title="Réordonner vers la droite"
{{ 'disabled' if active_index == pages|length - 1 else '' }}>→</button>
<button type="button"
class="docPageListRename"
data-page-id="{{ active_page.id }}"
aria-label="Renommer cette page"
title="Renommer cette page">✎</button>
<button type="button"
class="docPageListDelete"
data-page-id="{{ active_page.id }}"
aria-label="Supprimer cette page"
title="Supprimer cette page"
{{ 'disabled' if pages|length <= 1 else '' }}>✕</button>
</div>
{% endfor %}
<div class="docPageListSquare">{{ active_index + 1 }}</div>
<span class="docPageListTitle"><span class="docPageListTitleText">{{ active_page.title }}</span></span>
<span class="docPageListCounter">{{ active_index + 1 }} / {{ pages|length }}</span>
</div>
</div>
<button type="button"
class="docPageStripNav"
id="docPageStripNext"
aria-label="Défiler vers la droite"
title="Défiler vers la droite">›</button>
aria-label="Page suivante"
title="Page suivante">›</button>
</div>
<button type="button" class="docBtnSecondary docPageListAdd" id="docPageListAdd">+ Ajouter une page</button>
</div>