ca95546180
- Adjust transition duration to 200ms for smoother crossfade - Add explicit default values for iframe transform properties - Simplify transition with 'all' shorthand - Set explicit transition duration for editor panel 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
182 lines
4.8 KiB
Vue
182 lines
4.8 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
|
|
let isTransitioning = false;
|
|
|
|
const activeFrame = computed(() => {
|
|
return currentFrameIndex.value === 1
|
|
? previewFrame1.value
|
|
: previewFrame2.value;
|
|
});
|
|
|
|
const renderPreview = async (shouldReloadFromFile = false) => {
|
|
if (isTransitioning) return;
|
|
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;
|
|
|
|
if (!hiddenFrame) {
|
|
isTransitioning = 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 = 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>
|
|
|
|
<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;
|
|
}
|
|
</style>
|