studio-variable/geoproject-app
5
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

disable: comment out PagePopup and page hover/highlight feature

Browse source 
Keep the code aside for potential re-activation later.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-24 13:37:07 +01:00
parent 9ed028a560
commit 59dfa18ec7
3 changed files with 49 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/App.vue
View file

@ -2,7 +2,7 @@
import PagedJsWrapper from './components/PagedJsWrapper.vue';
import EditorPanel from './components/editor/EditorPanel.vue';
import ElementPopup from './components/ElementPopup.vue';
import PagePopup from './components/PagePopup.vue';
// import PagePopup from './components/PagePopup.vue'; // DISABLED: page template styling feature
import PreviewLoader from './components/PreviewLoader.vue';
import SaveButton from './components/SaveButton.vue';
import { onMounted, ref, computed, provide } from 'vue';
@ -19,22 +19,22 @@ const narrativeStore = useNarrativeStore();
const previewFrame1 = ref(null);
const previewFrame2 = ref(null);
const elementPopup = ref(null);
const pagePopup = ref(null);
// const pagePopup = ref(null); // DISABLED: page template styling feature
const activeTab = ref('');
provide('activeTab', activeTab);
// Setup iframe interactions (hover, click, labels)
const {
hoveredPage,
selectedPages,
// hoveredPage, // DISABLED: page template styling feature
// selectedPages, // DISABLED: page template styling feature
hoveredElement,
selectedElement,
handleIframeMouseMove,
handleIframeClick,
handlePagePopupClose,
// handlePagePopupClose, // DISABLED: page template styling feature
handleElementPopupClose,
} = useIframeInteractions({ elementPopup, pagePopup });
} = useIframeInteractions({ elementPopup });
// Setup preview renderer with double buffering
const {
@ -67,7 +67,7 @@ const {
} = useKeyboardShortcuts({
stylesheetStore,
elementPopup,
pagePopup,
// pagePopup, // DISABLED: page template styling feature
activeTab,
printPreview,
});
@ -117,11 +117,13 @@ onMounted(async () => {
:iframeRef="activeFrame"
@close="handleElementPopupClose"
/>
<!-- DISABLED: page template styling feature
<PagePopup
ref="pagePopup"
:iframeRef="activeFrame"
@close="handlePagePopupClose"
/>
-->
<button class="print-btn" @click="printPreview" :title="`Imprimer (${isMac ? '⌘' : 'Ctrl'}+P)`">
<svg

86
src/composables/useIframeInteractions.js
View file

@ -4,13 +4,13 @@ import { ref } from 'vue';
* Composable for managing interactions with pages and elements in the iframe
* Handles hover effects, labels, and click events for both pages and content elements
*/
export function useIframeInteractions({ elementPopup, pagePopup }) {
// Page interaction state
const hoveredPage = ref(null);
const selectedPages = ref([]); // Pages with active border (when popup is open)
export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED: page template styling feature */ }) {
// DISABLED: page template styling feature
// const hoveredPage = ref(null);
// const selectedPages = ref([]); // Pages with active border (when popup is open)
const hoveredElement = ref(null); // Currently hovered content element
const selectedElement = ref(null); // Selected element (when popup is open)
const EDGE_THRESHOLD = 30; // px from edge to trigger hover
// const EDGE_THRESHOLD = 30; // px from edge to trigger hover // DISABLED: page template styling feature
// Text elements that can trigger ElementPopup (excluding containers, images, etc.)
const CONTENT_ELEMENTS = [
@ -34,6 +34,7 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
'FIGCAPTION',
];
/* DISABLED: page template styling feature
// Check if mouse position is near the edges of a page element
const isNearPageEdge = (pageElement, mouseX, mouseY) => {
const rect = pageElement.getBoundingClientRect();
@ -64,6 +65,7 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
(p) => (p.getAttribute('data-page-type') || 'default') === pageType
);
};
*/
// Get selector for element (same logic as ElementPopup)
const getSelectorFromElement = (element) => {
@ -117,6 +119,7 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
}
};
/* DISABLED: page template styling feature
// Create and position page label on hover
const createPageLabel = (page) => {
const doc = page.ownerDocument;
@ -148,6 +151,7 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
label.remove();
}
};
*/
// Check if element is a content element (or find closest content parent)
const getContentElement = (element) => {
@ -161,6 +165,7 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
return null;
};
/* DISABLED: page template styling feature
// Clear selection highlight from all selected pages
const clearSelectedPages = () => {
selectedPages.value.forEach((page) => {
@ -168,6 +173,7 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
});
selectedPages.value = [];
};
*/
// Clear selected element highlight
const clearSelectedElement = () => {
@ -188,6 +194,7 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
// Handle mouse movement in iframe
const handleIframeMouseMove = (event) => {
/* DISABLED: page template styling feature
const pages = event.target.ownerDocument.querySelectorAll('.pagedjs_page');
let foundPage = null;
@ -217,44 +224,31 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
hoveredPage.value = foundPage;
}
*/
// If not near page edge, check for content element hover
if (!foundPage) {
const contentElement = getContentElement(event.target);
const doc = event.target.ownerDocument;
// Check for content element hover
const contentElement = getContentElement(event.target);
const doc = event.target.ownerDocument;
if (contentElement !== hoveredElement.value) {
// Remove highlight from previous element (only if not selected)
if (
hoveredElement.value &&
hoveredElement.value !== selectedElement.value
) {
hoveredElement.value.classList.remove('element-hovered');
}
// Remove previous labels
removeElementLabel(doc);
removePageLabel(doc);
// Add highlight to new element (only if not already selected)
if (contentElement && contentElement !== selectedElement.value) {
contentElement.classList.add('element-hovered');
createElementLabel(contentElement);
}
hoveredElement.value = contentElement;
}
} else {
// Clear element hover when hovering page edge
if (contentElement !== hoveredElement.value) {
// Remove highlight from previous element (only if not selected)
if (
hoveredElement.value &&
hoveredElement.value !== selectedElement.value
) {
hoveredElement.value.classList.remove('element-hovered');
hoveredElement.value = null;
}
// Remove element label when hovering page edge
removeElementLabel(event.target.ownerDocument);
// Remove previous label
removeElementLabel(doc);
// Add highlight to new element (only if not already selected)
if (contentElement && contentElement !== selectedElement.value) {
contentElement.classList.add('element-hovered');
createElementLabel(contentElement);
}
hoveredElement.value = contentElement;
}
};
@ -262,6 +256,7 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
const handleIframeClick = (event) => {
const element = event.target;
/* DISABLED: page template styling feature
// Check if clicking near a page edge
if (hoveredPage.value) {
event.stopPropagation();
@ -286,35 +281,28 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
elementPopup.value.close();
return;
}
*/
// Only show popup for elements inside the page template
const isInsidePage = element.closest('.pagedjs_page');
if (!isInsidePage) {
clearSelectedPages();
clearSelectedElement();
elementPopup.value.close();
pagePopup.value.close();
return;
}
// Only show ElementPopup for content elements, not divs
const contentElement = getContentElement(element);
if (!contentElement) {
clearSelectedPages();
clearSelectedElement();
elementPopup.value.close();
pagePopup.value.close();
return;
}
// Clear page selections
clearSelectedPages();
// If popup is already open and we're clicking another element, close it
if (elementPopup.value.visible) {
clearSelectedElement();
elementPopup.value.close();
pagePopup.value.close();
return;
}
@ -332,7 +320,6 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
// Get document and remove labels when opening popup
const doc = event.target.ownerDocument;
removeElementLabel(doc);
removePageLabel(doc);
// Select the new element
selectedElement.value = contentElement;
@ -342,13 +329,14 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
const count = getSimilarElementsCount(contentElement, doc);
elementPopup.value.handleIframeClick(event, contentElement, count);
pagePopup.value.close();
};
// Handlers for popup close events
/* DISABLED: page template styling feature
const handlePagePopupClose = () => {
clearSelectedPages();
};
*/
const handleElementPopupClose = () => {
clearSelectedElement();
@ -356,17 +344,17 @@ export function useIframeInteractions({ elementPopup, pagePopup }) {
return {
// State
hoveredPage,
selectedPages,
// hoveredPage, // DISABLED: page template styling feature
// selectedPages, // DISABLED: page template styling feature
hoveredElement,
selectedElement,
// Handlers
handleIframeMouseMove,
handleIframeClick,
handlePagePopupClose,
// handlePagePopupClose, // DISABLED: page template styling feature
handleElementPopupClose,
// Utilities
clearSelectedPages,
// clearSelectedPages, // DISABLED: page template styling feature
clearSelectedElement,
};
}

4
src/composables/useKeyboardShortcuts.js
View file

@ -7,7 +7,7 @@ import { onMounted, onUnmounted } from 'vue';
export function useKeyboardShortcuts({
stylesheetStore,
elementPopup,
pagePopup,
// pagePopup, // DISABLED: page template styling feature
activeTab,
printPreview
}) {
@ -22,10 +22,12 @@ export function useKeyboardShortcuts({
elementPopup.value.close();
return;
}
/* DISABLED: page template styling feature
if (pagePopup.value?.visible) {
pagePopup.value.close();
return;
}
*/
}
// Backslash key - toggle editor panel