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:
co-authored by
Claude Sonnet 5
parent
7730b3688f
commit
be62275675
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user