pagedJS reload preview : decrease timeout
This commit is contained in:
parent
07e5764ccd
commit
6a01909b38
3 changed files with 31 additions and 20 deletions
30
src/App.vue
30
src/App.vue
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue