7ed57d000b
Move StylesheetViewer from standalone fixed panel to integrated component within EditorPanel's "code" tab. Maintains full functionality including: - Bidirectional sync with Pinia store and PagedJS preview - Toggle between read/edit modes - CSS syntax highlighting - Debounced updates Changes: - EditorPanel.vue: Import and render StylesheetViewer in code tab - EditorPanel.vue: Add flexbox layout for proper height management - StylesheetViewer.vue: Convert from fixed positioning to flex container - App.vue: Remove standalone StylesheetViewer component 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
91 lines
2.4 KiB
Vue
91 lines
2.4 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 } from 'vue';
|
|
import { useStylesheetStore } from './stores/stylesheet';
|
|
|
|
const stylesheetStore = useStylesheetStore();
|
|
const previewFrame = ref(null);
|
|
const elementPopup = ref(null);
|
|
|
|
let savedScrollPercentage = 0;
|
|
|
|
const renderPreview = async (shouldReloadFromFile = false) => {
|
|
const iframe = previewFrame.value;
|
|
if (!iframe) return;
|
|
|
|
if (iframe.contentWindow && iframe.contentDocument) {
|
|
const scrollTop = iframe.contentWindow.scrollY || 0;
|
|
const scrollHeight = iframe.contentDocument.documentElement.scrollHeight;
|
|
const clientHeight = iframe.contentWindow.innerHeight;
|
|
const maxScroll = scrollHeight - clientHeight;
|
|
|
|
savedScrollPercentage = maxScroll > 0 ? scrollTop / maxScroll : 0;
|
|
}
|
|
|
|
if (shouldReloadFromFile || !stylesheetStore.content) {
|
|
await stylesheetStore.loadStylesheet();
|
|
}
|
|
|
|
iframe.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>
|
|
`;
|
|
|
|
iframe.onload = () => {
|
|
iframe.contentDocument.addEventListener(
|
|
'click',
|
|
elementPopup.value.handleIframeClick
|
|
);
|
|
|
|
setTimeout(() => {
|
|
const scrollHeight = iframe.contentDocument.documentElement.scrollHeight;
|
|
const clientHeight = iframe.contentWindow.innerHeight;
|
|
const maxScroll = scrollHeight - clientHeight;
|
|
const targetScroll = savedScrollPercentage * maxScroll;
|
|
|
|
iframe.contentWindow.scrollTo(0, targetScroll);
|
|
}, 500);
|
|
};
|
|
};
|
|
|
|
watch(
|
|
() => stylesheetStore.content,
|
|
() => {
|
|
renderPreview();
|
|
}
|
|
);
|
|
|
|
onMounted(() => renderPreview(true));
|
|
</script>
|
|
|
|
<template>
|
|
<div id="content-source" style="display: none">
|
|
<PagedJsWrapper />
|
|
</div>
|
|
|
|
<EditorPanel />
|
|
|
|
<iframe ref="previewFrame" id="preview-frame"></iframe>
|
|
|
|
<ElementPopup ref="elementPopup" :iframeRef="previewFrame" />
|
|
</template>
|
|
|
|
<style>
|
|
#preview-frame {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
border: none;
|
|
}
|
|
</style>
|