geoproject-app/src/App.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;
        }, 100); // 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;
  transition: opacity 0.1s ease-in-out, margin-left ease-in-out var(--curve),
    transform ease-in-out var(--curve), height 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>