pagedJS reload preview : decrease timeout

This commit is contained in:
isUnknown 2025-12-04 15:55:52 +01:00
parent 07e5764ccd
commit 6a01909b38
3 changed files with 31 additions and 20 deletions

View file

@ -15,7 +15,9 @@ const currentFrameIndex = ref(1); // 1 or 2, which iframe is currently visible
let isTransitioning = false;
const activeFrame = computed(() => {
return currentFrameIndex.value === 1 ? previewFrame1.value : previewFrame2.value;
return currentFrameIndex.value === 1
? previewFrame1.value
: previewFrame2.value;
});
const renderPreview = async (shouldReloadFromFile = false) => {
@ -23,8 +25,10 @@ const renderPreview = async (shouldReloadFromFile = false) => {
isTransitioning = true;
// Determine which iframe is currently visible and which to render to
const visibleFrame = currentFrameIndex.value === 1 ? previewFrame1.value : previewFrame2.value;
const hiddenFrame = currentFrameIndex.value === 1 ? previewFrame2.value : previewFrame1.value;
const visibleFrame =
currentFrameIndex.value === 1 ? previewFrame1.value : previewFrame2.value;
const hiddenFrame =
currentFrameIndex.value === 1 ? previewFrame2.value : previewFrame1.value;
if (!hiddenFrame) {
isTransitioning = false;
@ -32,9 +36,14 @@ const renderPreview = async (shouldReloadFromFile = false) => {
}
// Save scroll position from visible frame
if (visibleFrame && visibleFrame.contentWindow && visibleFrame.contentDocument) {
if (
visibleFrame &&
visibleFrame.contentWindow &&
visibleFrame.contentDocument
) {
const scrollTop = visibleFrame.contentWindow.scrollY || 0;
const scrollHeight = visibleFrame.contentDocument.documentElement.scrollHeight;
const scrollHeight =
visibleFrame.contentDocument.documentElement.scrollHeight;
const clientHeight = visibleFrame.contentWindow.innerHeight;
const maxScroll = scrollHeight - clientHeight;
@ -67,7 +76,8 @@ const renderPreview = async (shouldReloadFromFile = false) => {
// Wait for PagedJS to finish rendering
setTimeout(() => {
// Restore scroll position
const scrollHeight = hiddenFrame.contentDocument.documentElement.scrollHeight;
const scrollHeight =
hiddenFrame.contentDocument.documentElement.scrollHeight;
const clientHeight = hiddenFrame.contentWindow.innerHeight;
const maxScroll = scrollHeight - clientHeight;
const targetScroll = savedScrollPercentage * maxScroll;
@ -94,9 +104,9 @@ const renderPreview = async (shouldReloadFromFile = false) => {
// Swap current frame
currentFrameIndex.value = currentFrameIndex.value === 1 ? 2 : 1;
isTransitioning = false;
}, 300); // Match CSS transition duration
}, 100); // Small delay to ensure scroll is set
}, 500); // Wait for PagedJS
}, 100); // Match CSS transition duration
}, 50); // Small delay to ensure scroll is set
}, 200); // Wait for PagedJS
};
};
@ -131,7 +141,7 @@ onMounted(() => renderPreview(true));
width: 100vw;
height: 100vh;
border: none;
transition: opacity 0.3s ease-in-out;
transition: opacity 0.1s ease-in-out;
}
.preview-frame:nth-of-type(1) {