Met la page entière à l'échelle dans l'aperçu de modèle, sans barre de défilement

La page a une largeur/un ratio fixes côté moteur (960px, A4 paysage) —
sans mise à l'échelle, elle débordait verticalement de la fenêtre
d'aperçu (plus petite qu'un canevas d'édition en plein écran) et
défilait/rognait au lieu de tenir entière. Un script calcule maintenant
le facteur d'échelle qui la fait toujours tenir en entier (transform:
scale, jamais un agrandissement au-delà de 1), recalculé au
redimensionnement.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
2026-09-24 10:02:47 +02:00
co-authored by Claude Sonnet 5
parent 7730b3688f
commit be62275675
+49 -1
View File
@@ -23,11 +23,25 @@
.previewPages {
flex: 1;
min-height: 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
overflow: auto;
overflow: hidden;
}
/* La page réelle a une largeur/un ratio FIXES côté moteur
(--doc-page-width/aspect-ratio, voir static/document/
document-editor.css) — sans mise à l'échelle, elle déborde
verticalement de cette fenêtre d'aperçu plus petite qu'un canevas
d'édition en plein écran, et défile/rogne au lieu de tenir
entière (retour utilisateur du 24/09/2026). `forgeDocFitPreviewPage`
calcule un facteur d'échelle qui la fait TOUJOURS tenir
entièrement, sans barre de défilement. */
.previewPages .docPage {
flex-shrink: 0;
transform-origin: center center;
}
.previewPages .docPage[hidden] {
@@ -105,6 +119,40 @@
});
render();
}());
(function fitPreviewPage() {
// Toutes les pages partagent EXACTEMENT la même largeur/le même ratio
// fixes côté moteur (--doc-page-width/aspect-ratio) quel que soit leur
// contenu (voir static/document/document-editor.css) : mesurer une
// seule page suffit à connaître la taille "naturelle" de toutes.
var container = document.querySelector('.previewPages');
var pages = Array.prototype.slice.call(document.querySelectorAll('.previewPages .docPage'));
if (!container || !pages.length) return;
var reference = pages[0];
function applyFit() {
var wasHidden = reference.hidden;
var previousTransform = reference.style.transform;
reference.hidden = false;
reference.style.transform = 'none';
var naturalWidth = reference.offsetWidth;
var naturalHeight = reference.offsetHeight;
reference.hidden = wasHidden;
reference.style.transform = previousTransform;
if (!naturalWidth || !naturalHeight) return;
var availableWidth = container.clientWidth - 32;
var availableHeight = container.clientHeight - 32;
// Jamais agrandie au-delà de sa taille réelle (max 1) — un simple
// rétrécissement pour tenir, jamais un zoom artificiel.
var scale = Math.min(availableWidth / naturalWidth, availableHeight / naturalHeight, 1);
pages.forEach(function scalePage(page) {
page.style.transform = 'scale(' + scale + ')';
});
}
applyFit();
window.addEventListener('resize', applyFit);
}());
</script>
</body>
</html>