9e02813d19
Displays a spinning loader in the top-right corner of the iframe while PagedJS is rendering. The loader automatically adjusts position when the editor panel is open. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
221 lines
5.5 KiB
Vue
221 lines
5.5 KiB
Vue
<script setup>
|
|
import PagedJsWrapper from './components/PagedJsWrapper.vue';
|
|
import EditorPanel from './components/editor/EditorPanel.vue';
|
|
import ElementPopup from './components/ElementPopup.vue';
|
|
import { onMounted, ref, watch, computed, provide } from 'vue';
|
|
import { useStylesheetStore } from './stores/stylesheet';
|
|
import Coloris from '@melloware/coloris';
|
|
|
|
const stylesheetStore = useStylesheetStore();
|
|
const previewFrame1 = ref(null);
|
|
const previewFrame2 = ref(null);
|
|
const elementPopup = ref(null);
|
|
const activeTab = ref('');
|
|
|
|
provide('activeTab', activeTab);
|
|
|
|
let savedScrollPercentage = 0;
|
|
const currentFrameIndex = ref(1); // 1 or 2, which iframe is currently visible
|
|
const isTransitioning = ref(false);
|
|
|
|
const activeFrame = computed(() => {
|
|
return currentFrameIndex.value === 1
|
|
? previewFrame1.value
|
|
: previewFrame2.value;
|
|
});
|
|
|
|
const renderPreview = async (shouldReloadFromFile = false) => {
|
|
if (isTransitioning.value) return;
|
|
isTransitioning.value = 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;
|
|
|
|
if (!hiddenFrame) {
|
|
isTransitioning.value = false;
|
|
return;
|
|
}
|
|
|
|
// Save scroll position from visible frame
|
|
if (
|
|
visibleFrame &&
|
|
visibleFrame.contentWindow &&
|
|
visibleFrame.contentDocument
|
|
) {
|
|
const scrollTop = visibleFrame.contentWindow.scrollY || 0;
|
|
const scrollHeight =
|
|
visibleFrame.contentDocument.documentElement.scrollHeight;
|
|
const clientHeight = visibleFrame.contentWindow.innerHeight;
|
|
const maxScroll = scrollHeight - clientHeight;
|
|
|
|
savedScrollPercentage = maxScroll > 0 ? scrollTop / maxScroll : 0;
|
|
}
|
|
|
|
if (shouldReloadFromFile || !stylesheetStore.content) {
|
|
await stylesheetStore.loadStylesheet();
|
|
}
|
|
|
|
// Render to the hidden frame
|
|
hiddenFrame.srcdoc = `
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="/assets/css/pagedjs-interface.css">
|
|
<style id="dynamic-styles">${stylesheetStore.content}</style>
|
|
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"><\/script>
|
|
</head>
|
|
<body>${document.getElementById('content-source').innerHTML}</body>
|
|
</html>
|
|
`;
|
|
|
|
hiddenFrame.onload = () => {
|
|
hiddenFrame.contentDocument.addEventListener(
|
|
'click',
|
|
elementPopup.value.handleIframeClick
|
|
);
|
|
|
|
// Close Coloris when clicking in the iframe
|
|
hiddenFrame.contentDocument.addEventListener('click', () => {
|
|
Coloris.close();
|
|
});
|
|
|
|
// Wait for PagedJS to finish rendering
|
|
setTimeout(() => {
|
|
// Restore scroll position
|
|
const scrollHeight =
|
|
hiddenFrame.contentDocument.documentElement.scrollHeight;
|
|
const clientHeight = hiddenFrame.contentWindow.innerHeight;
|
|
const maxScroll = scrollHeight - clientHeight;
|
|
const targetScroll = savedScrollPercentage * maxScroll;
|
|
|
|
hiddenFrame.contentWindow.scrollTo(0, targetScroll);
|
|
|
|
// Start crossfade transition
|
|
setTimeout(() => {
|
|
// Make hidden frame visible (it's already behind)
|
|
hiddenFrame.style.opacity = '1';
|
|
hiddenFrame.style.zIndex = '1';
|
|
|
|
// Fade out visible frame
|
|
if (visibleFrame) {
|
|
visibleFrame.style.opacity = '0';
|
|
}
|
|
|
|
// After fade completes, swap the frames
|
|
setTimeout(() => {
|
|
if (visibleFrame) {
|
|
visibleFrame.style.zIndex = '0';
|
|
}
|
|
|
|
// Swap current frame
|
|
currentFrameIndex.value = currentFrameIndex.value === 1 ? 2 : 1;
|
|
isTransitioning.value = false;
|
|
}, 200); // Match CSS transition duration
|
|
}, 50); // Small delay to ensure scroll is set
|
|
}, 200); // Wait for PagedJS
|
|
};
|
|
};
|
|
|
|
watch(
|
|
() => stylesheetStore.content,
|
|
() => {
|
|
renderPreview();
|
|
}
|
|
);
|
|
|
|
onMounted(() => renderPreview(true));
|
|
</script>
|
|
|
|
<template>
|
|
<div id="content-source" style="display: none">
|
|
<PagedJsWrapper />
|
|
</div>
|
|
|
|
<EditorPanel />
|
|
|
|
<iframe
|
|
ref="previewFrame1"
|
|
class="preview-frame"
|
|
:class="{ shifted: activeTab.length > 0 }"
|
|
></iframe>
|
|
<iframe
|
|
ref="previewFrame2"
|
|
class="preview-frame"
|
|
:class="{ shifted: activeTab.length > 0 }"
|
|
></iframe>
|
|
|
|
<div v-if="isTransitioning" class="preview-loader" :class="{ shifted: activeTab.length > 0 }">
|
|
<div class="spinner"></div>
|
|
</div>
|
|
|
|
<ElementPopup ref="elementPopup" :iframeRef="activeFrame" />
|
|
</template>
|
|
|
|
<style>
|
|
.preview-frame {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
border: none;
|
|
margin-left: 0;
|
|
transform: scale(1) translateY(0);
|
|
height: 100vh;
|
|
transition: all 0.2s ease-in-out var(--curve);
|
|
}
|
|
|
|
.preview-frame.shifted {
|
|
margin-left: 19rem;
|
|
transform: scale(0.7) translateY(-30vh);
|
|
height: 142vh;
|
|
}
|
|
|
|
.preview-frame:nth-of-type(1) {
|
|
z-index: 1;
|
|
opacity: 1;
|
|
}
|
|
|
|
.preview-frame:nth-of-type(2) {
|
|
z-index: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.preview-loader {
|
|
position: fixed;
|
|
top: 2rem;
|
|
right: 2rem;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
transition: all 0.2s ease-in-out var(--curve);
|
|
}
|
|
|
|
.preview-loader.shifted {
|
|
right: calc(2rem + 19rem * 0.7);
|
|
top: calc(2rem - 30vh * 0.7);
|
|
transform: scale(0.7);
|
|
}
|
|
|
|
.spinner {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
border-top: 3px solid #fff;
|
|
border-right: 3px solid transparent;
|
|
box-sizing: border-box;
|
|
animation: rotation 1s linear infinite;
|
|
}
|
|
|
|
@keyframes rotation {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|