feat: implement page numbers, running titles, and smooth iframe transitions
Add functional page number and running title toggles with proper positioning for left/right pages. Implement smooth crossfade transitions between iframe reloads to eliminate visual flicker during PagedJS rendering. Page Numbers & Running Titles: - Page numbers toggle: adds counter(page) to @bottom-left (left pages) or @bottom-right (right pages) - Running title toggle: adds string(title) from h2 chapter titles - Combined positioning: both elements appear side-by-side in same margin box - Left pages: "1 Chapter Title" in @bottom-left - Right pages: "Chapter Title 2" in @bottom-right - Automatic CSS rule management: adds/removes @page:left, @page:right, and string-set rules based on checkbox state - Bidirectional sync: checkboxes reflect existing CSS state on load Smooth Iframe Transitions: - Dual iframe system: two iframes alternate as visible/hidden - Crossfade technique: hidden iframe loads new content while visible remains displayed, then smooth 300ms opacity transition - Scroll preservation: saves scroll percentage from visible iframe, restores to hidden iframe after PagedJS render - Collision prevention: isTransitioning flag prevents overlapping renders - Active frame tracking: computed property ensures ElementPopup always references the visible iframe Technical details: - Uses srcdoc to inject HTML with dynamic CSS - Z-index and opacity manipulation for layering - CSS transitions (opacity 0.3s ease-in-out) - Automatic frame swapping after transition completes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
9af36fb422
commit
07e5764ccd
2 changed files with 166 additions and 20 deletions
91
src/App.vue
91
src/App.vue
|
|
@ -2,23 +2,40 @@
|
|||
import PagedJsWrapper from './components/PagedJsWrapper.vue';
|
||||
import EditorPanel from './components/editor/EditorPanel.vue';
|
||||
import ElementPopup from './components/ElementPopup.vue';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { onMounted, ref, watch, computed } from 'vue';
|
||||
import { useStylesheetStore } from './stores/stylesheet';
|
||||
|
||||
const stylesheetStore = useStylesheetStore();
|
||||
const previewFrame = ref(null);
|
||||
const previewFrame1 = ref(null);
|
||||
const previewFrame2 = ref(null);
|
||||
const elementPopup = ref(null);
|
||||
|
||||
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) => {
|
||||
const iframe = previewFrame.value;
|
||||
if (!iframe) return;
|
||||
if (isTransitioning) return;
|
||||
isTransitioning = true;
|
||||
|
||||
if (iframe.contentWindow && iframe.contentDocument) {
|
||||
const scrollTop = iframe.contentWindow.scrollY || 0;
|
||||
const scrollHeight = iframe.contentDocument.documentElement.scrollHeight;
|
||||
const clientHeight = iframe.contentWindow.innerHeight;
|
||||
// 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;
|
||||
|
|
@ -28,7 +45,8 @@ const renderPreview = async (shouldReloadFromFile = false) => {
|
|||
await stylesheetStore.loadStylesheet();
|
||||
}
|
||||
|
||||
iframe.srcdoc = `
|
||||
// Render to the hidden frame
|
||||
hiddenFrame.srcdoc = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
|
@ -40,20 +58,45 @@ const renderPreview = async (shouldReloadFromFile = false) => {
|
|||
</html>
|
||||
`;
|
||||
|
||||
iframe.onload = () => {
|
||||
iframe.contentDocument.addEventListener(
|
||||
hiddenFrame.onload = () => {
|
||||
hiddenFrame.contentDocument.addEventListener(
|
||||
'click',
|
||||
elementPopup.value.handleIframeClick
|
||||
);
|
||||
|
||||
// Wait for PagedJS to finish rendering
|
||||
setTimeout(() => {
|
||||
const scrollHeight = iframe.contentDocument.documentElement.scrollHeight;
|
||||
const clientHeight = iframe.contentWindow.innerHeight;
|
||||
// Restore scroll position
|
||||
const scrollHeight = hiddenFrame.contentDocument.documentElement.scrollHeight;
|
||||
const clientHeight = hiddenFrame.contentWindow.innerHeight;
|
||||
const maxScroll = scrollHeight - clientHeight;
|
||||
const targetScroll = savedScrollPercentage * maxScroll;
|
||||
|
||||
iframe.contentWindow.scrollTo(0, targetScroll);
|
||||
}, 500);
|
||||
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;
|
||||
}, 300); // Match CSS transition duration
|
||||
}, 100); // Small delay to ensure scroll is set
|
||||
}, 500); // Wait for PagedJS
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -74,18 +117,30 @@ onMounted(() => renderPreview(true));
|
|||
|
||||
<EditorPanel />
|
||||
|
||||
<iframe ref="previewFrame" id="preview-frame"></iframe>
|
||||
<iframe ref="previewFrame1" class="preview-frame"></iframe>
|
||||
<iframe ref="previewFrame2" class="preview-frame"></iframe>
|
||||
|
||||
<ElementPopup ref="elementPopup" :iframeRef="previewFrame" />
|
||||
<ElementPopup ref="elementPopup" :iframeRef="activeFrame" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
#preview-frame {
|
||||
.preview-frame {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
border: none;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.preview-frame:nth-of-type(1) {
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.preview-frame:nth-of-type(2) {
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue