public/assets/css/src/_global.scss

@@ -1,8 +0,0 @@
-button[disabled] {
-  cursor: not-allowed !important;
-  opacity: 0.6;
-}
-
-button[disabled]:hover {
-  background-color: inherit !important;
-}

public/assets/css/style.css

@@ -234,8 +234,8 @@ img {
   --space-m: 2rem;
   --space-big: 3em;
   --curve: cubic-bezier(0.86, 0, 0.07, 1);
-  --sans-serif: 'DM Sans', sans-serif;
-  --mono: 'Inconsolata', monospace;
+  --sans-serif: "DM Sans", sans-serif;
+  --mono: "Inconsolata", monospace;
   --input-h: 26px;
   --input-w: 160px;
   --input-w-small: 45px;
@@ -688,13 +688,4 @@ input[type=number] {
   line-height: 1.5;
   resize: none;
   outline: none;
-}
-
-button[disabled] {
-  cursor: not-allowed !important;
-  opacity: 0.6;
-}
-
-button[disabled]:hover {
-  background-color: inherit !important;
 }/*# sourceMappingURL=style.css.map */

public/assets/css/style.scss

@@ -8,4 +8,3 @@
 @use "src/_forms-section.scss" as *;
 @use "src/_buttons.scss" as *;
 @use "src/_settings-popup.scss" as *;
-@use "src/_global.scss" as *;

public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/map-static.png.txt

@@ -1 +1 @@
-Uuid: kmmswqjqh5mxyecl
+Uuid: f9jqf7vus7w0dx6z

public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/map.txt

@@ -15,9 +15,9 @@ Mapdata:
 background:
   type: osm
 center:
-  lat: 43.484330002696964
-  lon: 4.029111008525206
-zoom: 6.503825883663738
+  lat: 43.82684265866453
+  lon: 4.3375882121084715
+zoom: 11.37799302158894
 
 ----
 

public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt

@@ -26,6 +26,7 @@ body {
   font-family: "DM Sans", sans-serif;
   text-align: left;
   color: rgb(190, 9, 9);
+  background: blue;
 }
 
 p {

public/site/blueprints/pages/narrative.yml

@@ -35,7 +35,6 @@ columns:
         template:
           - map
           - geoformat
-        info: "{{ page.intendedTemplate }}"
   sidebar:
     width: 1/3
     sections:

public/site/blueprints/pages/projet.yml

@@ -7,17 +7,17 @@ columns:
       fields:
         type: fields
         fields:
-          subtitle:
+          subtitle: 
             label: Sous-titre
             type: text
             width: 1/2
-          cover:
+          cover: 
             label: Image de couverture
             type: files
             multiple: false
             width: 1/2
       pages:
-        label: Récits
+        label: Narratives
         type: pages
         template: narrative
   sidebar:
@@ -26,3 +26,6 @@ columns:
       files:
         label: Fichiers
         type: files
+
+
+

src/App.vue

@@ -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'; // DISABLED: page template styling feature
+import PagePopup from './components/PagePopup.vue';
 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); // DISABLED: page template styling feature
+const pagePopup = ref(null);
 const activeTab = ref('');
 
 provide('activeTab', activeTab);
 
 // Setup iframe interactions (hover, click, labels)
 const {
-  // hoveredPage, // DISABLED: page template styling feature
-  // selectedPages, // DISABLED: page template styling feature
+  hoveredPage,
+  selectedPages,
   hoveredElement,
   selectedElement,
   handleIframeMouseMove,
   handleIframeClick,
-  // handlePagePopupClose, // DISABLED: page template styling feature
+  handlePagePopupClose,
   handleElementPopupClose,
-} = useIframeInteractions({ elementPopup });
+} = useIframeInteractions({ elementPopup, pagePopup });
 
 // Setup preview renderer with double buffering
 const {
@@ -61,10 +61,13 @@ const activeFrame = computed(() => {
 const { printPreview } = usePrintPreview(activeFrame);
 
 // Setup keyboard shortcuts (depends on printPreview)
-const { handleKeyboardShortcut, isMac } = useKeyboardShortcuts({
+const {
+  handleKeyboardShortcut,
+  isMac
+} = useKeyboardShortcuts({
   stylesheetStore,
   elementPopup,
-  // pagePopup, // DISABLED: page template styling feature
+  pagePopup,
   activeTab,
   printPreview,
 });
@@ -114,19 +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)`"
-  >
+  <button class="print-btn" @click="printPreview" :title="`Imprimer (${isMac ? '⌘' : 'Ctrl'}+P)`">
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"

src/components/editor/EditorPanel.vue

@@ -24,8 +24,7 @@
         class="tab"
         :class="{ active: activeTab === 'contenu' }"
         @click="activeTab = 'contenu'"
-        title="fonctionnalité à venir"
-        disabled
+        title="Ouvrir l'onglet Contenu"
       >
         Contenu
       </button>
@@ -132,9 +131,11 @@ nav {
   position: relative;
   left: calc(var(--panel-w) * -1);
 
+
   background-color: var(--color-panel-bg);
   box-shadow: -5px 0px 12px;
 
+
   transition: left 0.3s var(--curve);
   pointer-events: all;
 }
@@ -144,7 +145,7 @@ nav {
 }
 
 .tab-panel {
-  height: calc(100% - var(--panel-nav-h) * 2);
+  height: calc(100% - var(--panel-nav-h)*2);
   overflow-y: auto;
   overflow-x: hidden;
   padding: 0 2em;

src/composables/useIframeInteractions.js

@@ -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 // 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)
+export function useIframeInteractions({ elementPopup, pagePopup }) {
+  // Page interaction state
+  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 // DISABLED: page template styling feature
+  const EDGE_THRESHOLD = 30; // px from edge to trigger hover
 
   // Text elements that can trigger ElementPopup (excluding containers, images, etc.)
   const CONTENT_ELEMENTS = [
@@ -34,7 +34,6 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
     '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();
@@ -65,7 +64,6 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
       (p) => (p.getAttribute('data-page-type') || 'default') === pageType
     );
   };
-  */
 
   // Get selector for element (same logic as ElementPopup)
   const getSelectorFromElement = (element) => {
@@ -119,7 +117,6 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
     }
   };
 
-  /* DISABLED: page template styling feature
   // Create and position page label on hover
   const createPageLabel = (page) => {
     const doc = page.ownerDocument;
@@ -151,7 +148,6 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
       label.remove();
     }
   };
-  */
 
   // Check if element is a content element (or find closest content parent)
   const getContentElement = (element) => {
@@ -165,7 +161,6 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
     return null;
   };
 
-  /* DISABLED: page template styling feature
   // Clear selection highlight from all selected pages
   const clearSelectedPages = () => {
     selectedPages.value.forEach((page) => {
@@ -173,7 +168,6 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
     });
     selectedPages.value = [];
   };
-  */
 
   // Clear selected element highlight
   const clearSelectedElement = () => {
@@ -194,7 +188,6 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
 
   // Handle mouse movement in iframe
   const handleIframeMouseMove = (event) => {
-    /* DISABLED: page template styling feature
     const pages = event.target.ownerDocument.querySelectorAll('.pagedjs_page');
     let foundPage = null;
 
@@ -224,31 +217,44 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
 
       hoveredPage.value = foundPage;
     }
-    */
 
-    // Check for content element hover
-    const contentElement = getContentElement(event.target);
-    const doc = event.target.ownerDocument;
+    // If not near page edge, check for content element hover
+    if (!foundPage) {
+      const contentElement = getContentElement(event.target);
+      const doc = event.target.ownerDocument;
 
-    if (contentElement !== hoveredElement.value) {
-      // Remove highlight from previous element (only if not selected)
+      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 (
         hoveredElement.value &&
         hoveredElement.value !== selectedElement.value
       ) {
         hoveredElement.value.classList.remove('element-hovered');
+        hoveredElement.value = null;
       }
-
-      // 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;
+      // Remove element label when hovering page edge
+      removeElementLabel(event.target.ownerDocument);
     }
   };
 
@@ -256,7 +262,6 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
   const handleIframeClick = (event) => {
     const element = event.target;
 
-    /* DISABLED: page template styling feature
     // Check if clicking near a page edge
     if (hoveredPage.value) {
       event.stopPropagation();
@@ -281,28 +286,35 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
       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;
     }
 
@@ -320,6 +332,7 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
     // Get document and remove labels when opening popup
     const doc = event.target.ownerDocument;
     removeElementLabel(doc);
+    removePageLabel(doc);
 
     // Select the new element
     selectedElement.value = contentElement;
@@ -329,14 +342,13 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
     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();
@@ -344,17 +356,17 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
 
   return {
     // State
-    // hoveredPage, // DISABLED: page template styling feature
-    // selectedPages, // DISABLED: page template styling feature
+    hoveredPage,
+    selectedPages,
     hoveredElement,
     selectedElement,
     // Handlers
     handleIframeMouseMove,
     handleIframeClick,
-    // handlePagePopupClose, // DISABLED: page template styling feature
+    handlePagePopupClose,
     handleElementPopupClose,
     // Utilities
-    // clearSelectedPages, // DISABLED: page template styling feature
+    clearSelectedPages,
     clearSelectedElement,
   };
 }

src/composables/useKeyboardShortcuts.js

@@ -7,7 +7,7 @@ import { onMounted, onUnmounted } from 'vue';
 export function useKeyboardShortcuts({
   stylesheetStore,
   elementPopup,
-  // pagePopup, // DISABLED: page template styling feature
+  pagePopup,
   activeTab,
   printPreview
 }) {
@@ -22,12 +22,10 @@ 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

src/composables/usePreviewRenderer.js

@@ -16,7 +16,6 @@ export function usePreviewRenderer({
   let savedScrollPercentage = 0;
   const currentFrameIndex = ref(1); // 1 or 2, which iframe is currently visible
   const isTransitioning = ref(false);
-  const initialized = ref(false);
   let keyboardShortcutHandler = null;
 
   /**
@@ -118,9 +117,6 @@ export function usePreviewRenderer({
             // Swap current frame
             currentFrameIndex.value = currentFrameIndex.value === 1 ? 2 : 1;
             isTransitioning.value = false;
-            if (!initialized.value) {
-              initialized.value = true;
-            }
           }, 200); // Match CSS transition duration
         }, 50); // Small delay to ensure scroll is set
       }, 200); // Wait for PagedJS
@@ -131,7 +127,6 @@ export function usePreviewRenderer({
   watch(
     () => stylesheetStore.content,
     () => {
-      if (!initialized.value) return;
       renderPreview();
     }
   );
@@ -140,7 +135,6 @@ export function usePreviewRenderer({
   watch(
     () => narrativeStore.data,
     () => {
-      if (!initialized.value) return;
       if (narrativeStore.data) {
         renderPreview();
       }
@@ -158,7 +152,6 @@ export function usePreviewRenderer({
     renderPreview,
     currentFrameIndex,
     isTransitioning,
-    initialized,
     setKeyboardShortcutHandler,
   };
 }

src/style.css

@@ -1 +1 @@
-/* @import '../public/assets/css/style.scss'; */
+@import '../public/assets/css/style.scss';