From 1f3649fc14a5add36c90bc1e090f6cf560f3252c Mon Sep 17 00:00:00 2001 From: isUnknown Date: Mon, 9 Mar 2026 17:04:05 +0100 Subject: [PATCH 01/10] fix element popup toggle: remove/re-enable cycle + inherited CSS comments MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove pre-toggle snapshot system that was re-adding CSS values after removeProps, causing toggles to not properly disable styles and breaking the off/on/off cycle. Reset refs to defaults on toggle-off so displayed CSS shows inherited values. Fix hasInCss to exclude commented blocks. Replace "valeur par défaut" with "hérité de la page" comments. Co-Authored-By: Claude Opus 4.6 --- src/composables/useElementSettings.js | 90 ++++++++++++++------------- 1 file changed, 48 insertions(+), 42 deletions(-) diff --git a/src/composables/useElementSettings.js b/src/composables/useElementSettings.js index 162256a..a32e61c 100644 --- a/src/composables/useElementSettings.js +++ b/src/composables/useElementSettings.js @@ -236,33 +236,30 @@ export function useElementSettings({ margin, padding, basePopup }) { } }; - // --- Pre-toggle CSS snapshot --- - // Saves the CSS values for a group before toggle ON, restores them on toggle OFF - const preToggleSnapshots = new Map(); // key: `${selector}::${group}` → { cssProp: extractedValue } - - const savePreToggleSnapshot = (group) => { - const key = `${selector.value}::${group}`; - const cssProps = settingGroups[group]; - const snapshot = {}; - for (const cssProp of cssProps) { - const val = stylesheetStore.extractValue(selector.value, cssProp); - if (val) snapshot[cssProp] = val; - } - preToggleSnapshots.set(key, snapshot); - }; - - const restorePreToggleSnapshot = (group) => { - const key = `${selector.value}::${group}`; - const snapshot = preToggleSnapshots.get(key); - if (!snapshot) return; - for (const [cssProp, val] of Object.entries(snapshot)) { - if (typeof val === 'object' && 'value' in val) { - updateProp(cssProp, val.value, val.unit); - } else { - updateProp(cssProp, val); + // --- Reset refs to inherited/default values when toggle is turned off --- + const resetRefsToDefaults = (group) => { + if (group === 'font') { + fontFamily.value = textDefaults.fontFamily; + italic.value = ELEMENT_DEFAULTS.italic; + bold.value = ELEMENT_DEFAULTS.bold; + // Re-apply inline defaults if applicable + const inlineDefaults = INLINE_DEFAULTS[currentTag.value]; + if (inlineDefaults) { + if (inlineDefaults.fontStyle === 'italic') italic.value = true; + if (inlineDefaults.fontWeight === 'bold') bold.value = true; } + } else if (group === 'fontSize') { + fontSize.value = textDefaults.fontSize.value; + fontSize.unit = textDefaults.fontSize.unit; + } else if (group === 'lineHeight') { + lineHeight.value = textDefaults.lineHeight.value; + lineHeight.unit = textDefaults.lineHeight.unit; + } else if (group === 'color') { + color.value = textDefaults.color; + // Re-apply inline default color if applicable + const inlineDefaults = INLINE_DEFAULTS[currentTag.value]; + if (inlineDefaults?.color) color.value = inlineDefaults.color; } - preToggleSnapshots.delete(key); }; // --- Toggle actions --- @@ -275,7 +272,6 @@ export function useElementSettings({ margin, padding, basePopup }) { settingEnabled[group] = enabled; isUpdatingFromStore = true; if (enabled) { - savePreToggleSnapshot(group); restoreFromCache(group); applyAllEnabledGroups(); } else { @@ -286,7 +282,8 @@ export function useElementSettings({ margin, padding, basePopup }) { } else { removeProps(settingGroups[group]); } - restorePreToggleSnapshot(group); + // Reset refs to defaults so displayedCss shows inherited values + resetRefsToDefaults(group); } saveElementState(); nextTick(() => { isUpdatingFromStore = false; }); @@ -353,10 +350,10 @@ export function useElementSettings({ margin, padding, basePopup }) { const INDEPENDENT_TAGS = new Set(['li', 'ul', 'ol', 'dt', 'dd', 'dl', 'table', 'tr', 'td', 'th', 'caption', 'figure', 'figcaption', 'pre', 'blockquote']); const isIndependentElement = computed(() => INDEPENDENT_TAGS.has(currentTag.value)); - // Check if the current selector has a CSS property in the store + // Check if the current selector has a CSS property in the store (active CSS only, not commented) const hasInCss = (cssProp) => { if (!selector.value) return false; - return !!stylesheetStore.extractValue(selector.value, cssProp); + return !!stylesheetStore.extractValue(selector.value, cssProp, false); }; const displayedCss = computed(() => { @@ -364,9 +361,10 @@ export function useElementSettings({ margin, padding, basePopup }) { const lines = []; for (const entry of displayedCssOrder) { if (entry.skip && entry.skip()) continue; + const groupEnabled = settingEnabled[entry.group]; // For inline elements, skip special groups (TextSettings defaults) when toggle is OFF // Exception: keep if the current tag has an inline default for this CSS property - if (entry.special && isInlineElement.value && !settingEnabled[entry.group]) { + if (entry.special && isInlineElement.value && !groupEnabled) { const tagDefaults = INLINE_DEFAULTS[currentTag.value]; const cssToDefaultKey = { 'color': 'color', 'font-family': 'fontFamily' }; const defaultKey = cssToDefaultKey[entry.css]; @@ -374,18 +372,26 @@ export function useElementSettings({ margin, padding, basePopup }) { } const val = entry.getValue(); if (val === null || val === undefined) continue; - // Show "valeur par défaut" only if the value actually matches the TextSettings default - let isTextDefault = false; - if (entry.special && !settingEnabled[entry.group]) { - const textDefaultValues = { - 'font-family': textDefaults.fontFamily === 'sans-serif' ? 'sans-serif' : `"${textDefaults.fontFamily}"`, - 'font-size': `${textDefaults.fontSize.value}${textDefaults.fontSize.unit}`, - 'line-height': `${textDefaults.lineHeight.value}${textDefaults.lineHeight.unit}`, - 'color': textDefaults.color, - }; - isTextDefault = val === textDefaultValues[entry.css]; + + // Determine inheritance comment for disabled groups + let comment = ''; + if (!groupEnabled) { + if (entry.special) { + // Special groups: show "hérité de la page" when value matches page-level default + const textDefaultValues = { + 'font-family': textDefaults.fontFamily === 'sans-serif' ? 'sans-serif' : `"${textDefaults.fontFamily}"`, + 'font-size': `${textDefaults.fontSize.value}${textDefaults.fontSize.unit}`, + 'line-height': `${textDefaults.lineHeight.value}${textDefaults.lineHeight.unit}`, + 'color': textDefaults.color, + }; + if (val === textDefaultValues[entry.css]) { + comment = ' /* hérité de la page */'; + } + } else if (hasInCss(entry.css)) { + // Non-special groups: show comment when CSS exists but toggle is off + comment = ' /* hérité de la page */'; + } } - const comment = isTextDefault ? ' /* valeur par défaut */' : ''; lines.push(` ${entry.css}: ${val};${comment}`); } for (const side of ['top', 'right', 'bottom', 'left']) { @@ -402,7 +408,7 @@ export function useElementSettings({ margin, padding, basePopup }) { }); const editableFullCss = computed(() => { - return displayedCss.value.replace(/ \/\* valeur par défaut \*\//g, ''); + return displayedCss.value.replace(/ \/\* (?:valeur par défaut|hérité de la page) \*\//g, ''); }); // --- CSS parsing & sync --- From df5e2e495c365b3620db146c91a6fa0344506488 Mon Sep 17 00:00:00 2001 From: sarahgarcin1 Date: Thu, 12 Mar 2026 10:18:08 +0100 Subject: [PATCH 02/10] modifs version web, demande alexandre --- public/assets/css/projet.css | 10 +- public/assets/css/web.css | 60 ++++++------ .../content/cohesion-des-mondes/project.txt | 4 + public/site/blueprints/pages/project.yml | 6 ++ public/site/templates/narrative-web.php | 92 +++++++++---------- public/site/templates/project.php | 6 +- 6 files changed, 91 insertions(+), 87 deletions(-) diff --git a/public/assets/css/projet.css b/public/assets/css/projet.css index 5380b18..64eae39 100644 --- a/public/assets/css/projet.css +++ b/public/assets/css/projet.css @@ -1,6 +1,6 @@ /* ═══════════════════════════════════════════════════════════ projet.css - Grille des récits — template projet.php + Grille des récits — template project.php ⚠ Ce fichier utilise UNIQUEMENT les variables définies dans style.css → --color-*, --sans-serif, --mono, --border-radius, --space-* @@ -14,8 +14,8 @@ /* ─────────────────────────────────────────── BASE BODY ─────────────────────────────────────────── */ -body[data-template="projet"] { - background-color: var(--nw-paper); +body[data-template="project"] { + background-color: var(--background-color); color: var(--nw-ink); min-height: 100vh; } @@ -143,6 +143,7 @@ body[data-template="projet"] { /*overflow: hidden;*/ transition: transform var(--nw-transition), box-shadow var(--nw-transition); border: 1px solid var(--nw-rule); + background: var(--nw-paper); /* Animation d'entrée en cascade */ opacity: 0; @@ -389,12 +390,11 @@ body[data-template="projet"] { @media (max-width: 900px) { .pj-header__content { padding: 2rem 1.5rem 2.5rem; } .pj-main { padding: 0 0 4rem; } - .pj-grid { grid-template-columns: 1fr; gap: 1px; } + .pj-grid { grid-template-columns: 1fr; padding: 0 1rem;} } @media (max-width: 600px) { .pj-card__cover { height: 180px; } - .pj-card__footer { flex-direction: column; align-items: stretch; } .pj-btn { justify-content: center; } } diff --git a/public/assets/css/web.css b/public/assets/css/web.css index 744513d..b2fc9d0 100644 --- a/public/assets/css/web.css +++ b/public/assets/css/web.css @@ -87,7 +87,6 @@ } .nw-sidenav__label { - font-family: var(--nw-font-ui); font-size: 0.89rem; font-weight: 500; letter-spacing: 0.04em; @@ -158,7 +157,6 @@ } .nw-sidenav__sub-label { - font-family: var(--nw-font-ui); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.03em; @@ -216,6 +214,7 @@ top: 20px; left: 20px; transition: transform 0.2s linear; + z-index: 10; } .nw-prev-btn a{ @@ -282,7 +281,6 @@ } .nw-hero__author { - font-family: var(--nw-font-ui); font-size: 0.875rem; color: rgba(255,255,255,0.75); letter-spacing: 0.06em; @@ -304,29 +302,19 @@ /* ─────────────────────────────────────────── INTRODUCTION ─────────────────────────────────────────── */ -.nw-introduction { - padding: 4rem 1rem; - background: var(--nw-paper); -} - .nw-introduction__body { + font-family: var(--nw-font-display); + color: #fff; font-size: 1.4rem; - line-height: 1.8; - color: var(--nw-ink-soft); + line-height: 1.4; + margin: 2rem 0 0; + text-shadow: 0 2px 20px rgba(0,0,0,0.3); font-weight: 300; font-style: italic; - border-left: 3px solid var(--nw-accent); - padding-left: 2rem; } -.nw-introduction__body p:first-child::first-letter { - font-family: var(--nw-font-display); - font-size: 5.7rem; - font-weight: 800; - line-height: 0.8; - float: left; - margin: 0.05em 0.12em 0 0; - color: var(--nw-accent); +.nw-introduction__body p{ + margin-bottom: 0; } /* ─────────────────────────────────────────── @@ -410,7 +398,6 @@ } .nw-tag { - font-family: var(--nw-font-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; @@ -451,16 +438,24 @@ background: var(--nw-paper-warm); } -.nw-section--map .nw-container { - margin-bottom: 2rem; +.nw-section--map__wrapper{ + display: flex; + flex-wrap: wrap; +} + +.nw-section__header__wrapper{ + width: 33.3333%; +} + +.nw-map-part{ + width: 66.6666%; + margin: 1.5rem 4rem 4rem 0; } .nw-map-wrap { position: relative; - width: 100%; height: clamp(400px, 55vh, 700px); - margin: 5rem 0 2rem; - border-top: 3px solid var(--nw-accent); + border: 1px solid var(--nw-rule); overflow: hidden; } @@ -530,7 +525,6 @@ display: inline-flex; align-items: center; gap: 0.3rem; - font-family: var(--nw-font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; @@ -676,6 +670,7 @@ color: var(--nw-ink-soft); } +.nw-map-marker__content a { color: var(--nw-accent); } .nw-map-marker__content p { margin: 0 0 1.1em; } .nw-map-marker__content h2, @@ -714,7 +709,6 @@ } .nw-map-marker__content figcaption { - font-family: var(--nw-font-ui); font-size: 0.78rem; color: var(--nw-ink-muted); font-style: italic; @@ -740,14 +734,13 @@ display: flex; flex-wrap: wrap; gap: 0.5rem; - padding-top: 1.5rem; + padding-top: 1rem; } .nw-file { display: inline-flex; align-items: center; gap: 0.4rem; - font-family: var(--nw-font-ui); font-size: 0.8rem; font-weight: 500; color: var(--nw-ink-soft); @@ -846,7 +839,6 @@ gap: 0.5rem; text-decoration: none; color: var(--nw-ink-soft); - font-family: var(--nw-font-ui); font-size: 0.82rem; font-weight: 500; transition: color var(--nw-transition); @@ -893,7 +885,6 @@ } .nw-chapitre__num { - font-family: var(--nw-font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; @@ -965,7 +956,6 @@ } .nw-chapitre__body figcaption { - font-family: var(--nw-font-ui); font-size: 0.8rem; color: var(--nw-ink-muted); padding: 0.5rem 1rem 0; @@ -992,6 +982,8 @@ @media (max-width: 768px) { .nw-hero__content { padding: 4rem 1.25rem 2.5rem; } .nw-container { padding: 0 1.25rem; } + .nw-section__header__wrapper {width: 100%;} + .nw-map-part {width: 100%; margin: 1.5rem 1rem;} .nw-map-wrap { height: 320px; } .nw-chapitre__body figure { margin: 1.5rem 0; } .nw-geoformat-hero { min-height: 35vh; } @@ -1000,7 +992,7 @@ } @media (max-width: 480px) { - .nw-introduction__body { padding-left: 1rem; font-size: 1rem; } + .nw-introduction__body { font-size: 1rem; } .nw-section { padding: 3rem 0; } } diff --git a/public/content/cohesion-des-mondes/project.txt b/public/content/cohesion-des-mondes/project.txt index e6801f5..7b5abc0 100644 --- a/public/content/cohesion-des-mondes/project.txt +++ b/public/content/cohesion-des-mondes/project.txt @@ -10,4 +10,8 @@ Cover: - file://glu48yweigbs4wds ---- +Background: #fff3e5 + +---- + Uuid: eybhqikol6kaorby \ No newline at end of file diff --git a/public/site/blueprints/pages/project.yml b/public/site/blueprints/pages/project.yml index 32de087..cd4787b 100644 --- a/public/site/blueprints/pages/project.yml +++ b/public/site/blueprints/pages/project.yml @@ -27,3 +27,9 @@ columns: files: label: Fichiers type: files + meta: + type: fields + fields: + background: + label: Couleur de fond + type: color diff --git a/public/site/templates/narrative-web.php b/public/site/templates/narrative-web.php index 751b129..d6035e3 100644 --- a/public/site/templates/narrative-web.php +++ b/public/site/templates/narrative-web.php @@ -123,19 +123,15 @@ foreach ($subpages as $subpage) { author()->isNotEmpty()): ?>

Par author()) ?>

+ + intro()->isNotEmpty()): ?> +
+ intro() ?> +
+ - -intro()->isNotEmpty()): ?> -
-
-
- intro() ?> -
-
-
-
-
-
-

title()) ?>

- tags()->isNotEmpty()): ?> -
- tags()->split(',') as $tag): ?> - - -
+
+
+
+

title()) ?>

+ tags()->isNotEmpty()): ?> +
+ tags()->split(',') as $tag): ?> + + +
+ +
+ + intro()->isNotEmpty()): ?> +
intro() ?>
-
- - intro()->isNotEmpty()): ?> -
intro() ?>
- -
- - - children()->listed()->filterBy('intendedTemplate', 'marker'); - $mapId = 'map-' . $subpage->uid(); - ?> -
-
-
- - - files()->isNotEmpty()): ?> -
-
- files() as $file): ?> - - ↓ - filename()) ?> - -
-
- + + + children()->listed()->filterBy('intendedTemplate', 'marker'); + $mapId = 'map-' . $subpage->uid(); + ?> +
+
+
+
+ + files()->isNotEmpty()): ?> +
+ files() as $file): ?> + + ↓ + filename()) ?> + + +
+ +
+ + isNotEmpty()): ?> diff --git a/public/site/templates/project.php b/public/site/templates/project.php index d935dce..7a9b86c 100644 --- a/public/site/templates/project.php +++ b/public/site/templates/project.php @@ -22,7 +22,11 @@ - + +background()->isNotEmpty()){ $background = $page->background();} +else{$background = "#FFF";}?> +
-
-
+
+

title()) ?>

tags()->isNotEmpty()): ?> @@ -158,22 +158,16 @@ foreach ($subpages as $subpage) {
- - intro()->isNotEmpty()): ?> -
intro() ?>
- -
- - - children()->listed()->filterBy('intendedTemplate', 'marker'); - $mapId = 'map-' . $subpage->uid(); - ?> -
-
-
-
- + + children()->listed()->filterBy('intendedTemplate', 'marker'); + $mapId = 'map-' . $subpage->uid(); + ?> +
+
+
+
+ files()->isNotEmpty()): ?>
files() as $file): ?> @@ -185,8 +179,13 @@ foreach ($subpages as $subpage) {
-
+ intro()->isNotEmpty()): ?> +
intro() ?>
+ + + +
isNotEmpty()): ?> From 75e7f375b3ddb2c2a47bb747645fa4bec2e7a526 Mon Sep 17 00:00:00 2001 From: Julie Blanc Date: Mon, 23 Mar 2026 11:13:50 +0100 Subject: [PATCH 05/10] img popup base --- package-lock.json | 4 - public/assets/css/pagedjs-interface.css | 23 ++ public/assets/css/src/_colors.scss | 14 ++ public/assets/css/src/_toggle-setting.scss | 2 +- public/assets/css/style.css | 15 +- public/assets/css/style.css.map | 2 +- public/assets/svg/image.svg | 1 + src/App.vue | 10 +- src/components/ElementPopup.vue | 1 + src/components/ImagePopup.vue | 255 +++++++++++++++++++++ src/components/PagedJsWrapper.vue | 2 + src/components/blocks/ImageBlock.vue | 10 +- src/components/editor/EditorPanel.vue | 2 + src/components/editor/ImageSettings.vue | 79 +++++++ src/components/ui/BasePopup.vue | 2 + src/composables/useIframeInteractions.js | 104 ++++++++- src/composables/useImageDefaults.js | 12 + src/composables/usePopupPosition.js | 8 +- src/stores/stylesheet.js | 5 +- src/utils/defaults.js | 4 + 20 files changed, 532 insertions(+), 23 deletions(-) create mode 100644 public/assets/svg/image.svg create mode 100644 src/components/ImagePopup.vue create mode 100644 src/components/editor/ImageSettings.vue create mode 100644 src/composables/useImageDefaults.js diff --git a/package-lock.json b/package-lock.json index 43080fc..7710fc4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1833,7 +1833,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -2012,7 +2011,6 @@ "integrity": "sha512-+VUy01yfDqNmIVMd/LLKl2TTtY0ovZN0rTonh+FhKr65mFwIYgU9WzgIZKS7U9/SPCQvWTsTGx9jyt+qRm/XFw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@bufbuild/protobuf": "^2.5.0", "buffer-builder": "^0.2.0", @@ -2491,7 +2489,6 @@ "integrity": "sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -2566,7 +2563,6 @@ "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.25.tgz", "integrity": "sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==", "license": "MIT", - "peer": true, "dependencies": { "@vue/compiler-dom": "3.5.25", "@vue/compiler-sfc": "3.5.25", diff --git a/public/assets/css/pagedjs-interface.css b/public/assets/css/pagedjs-interface.css index 2361147..e538214 100644 --- a/public/assets/css/pagedjs-interface.css +++ b/public/assets/css/pagedjs-interface.css @@ -192,6 +192,29 @@ font-family: sans-serif; } +.block-image.element-hovered { + outline: 2px solid #0d996050 !important; + cursor: pointer !important; +} + +.block-image.element-selected { + outline: 2px dashed #0d9960 !important; +} + +.image-hover-label { + position: absolute; + background: #0d9960; + color: white; + padding: 0.25rem 0.5rem; + border-radius: 4px; + font-size: 0.875rem; + font-weight: 600; + opacity: 0.3; + pointer-events: none; + z-index: 9999; + font-family: sans-serif; +} + /* Marks (to delete when merge in paged.js) */ .pagedjs_marks-crop { diff --git a/public/assets/css/src/_colors.scss b/public/assets/css/src/_colors.scss index 41c7892..a30967e 100644 --- a/public/assets/css/src/_colors.scss +++ b/public/assets/css/src/_colors.scss @@ -102,4 +102,18 @@ --color-700: #6930f5; --color-800: #5d28e6; --color-900: #5223d6; +} + + +[data-color-type="image"]{ + --color-050: #f0faf5; + --color-100: #d9f2e6; + --color-200: #b3e5cd; + --color-300: #7dd4b0; + --color-400: #43c08e; + --color-500: #1aad74; + --color-600: #0d9960; + --color-700: #0a8452; + --color-800: #087043; + --color-900: #065c35; } \ No newline at end of file diff --git a/public/assets/css/src/_toggle-setting.scss b/public/assets/css/src/_toggle-setting.scss index 5871089..c9dac1b 100644 --- a/public/assets/css/src/_toggle-setting.scss +++ b/public/assets/css/src/_toggle-setting.scss @@ -30,7 +30,7 @@ } .toggle-setting:checked + label{ - background: var(--color-purple); + background: var(--color-700); &::after { transform: translateX(10px); diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 091e050..2cb37f4 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -189,6 +189,19 @@ --color-900: #5223d6; } +[data-color-type=image] { + --color-050: #f0faf5; + --color-100: #d9f2e6; + --color-200: #b3e5cd; + --color-300: #7dd4b0; + --color-400: #43c08e; + --color-500: #1aad74; + --color-600: #0d9960; + --color-700: #0a8452; + --color-800: #087043; + --color-900: #065c35; +} + body, html { padding: 0; @@ -647,7 +660,7 @@ input[type=number] { } .toggle-setting:checked + label { - background: var(--color-purple); + background: var(--color-700); } .toggle-setting:checked + label::after { transform: translateX(10px); diff --git a/public/assets/css/style.css.map b/public/assets/css/style.css.map index eafcd95..38c7127 100644 --- a/public/assets/css/style.css.map +++ b/public/assets/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["src/_fonts.scss","style.css","src/_colors.scss","src/_reset.scss","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_panel-settings.scss","src/_forms.scss","src/_panel-tabs.scss","src/_actions-btn.scss","src/_toggle-setting.scss","src/_settings-popup.scss","src/_setting__section.scss","src/_global.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["src/_fonts.scss","style.css","src/_colors.scss","src/_reset.scss","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_panel-settings.scss","src/_forms.scss","src/_panel-tabs.scss","src/_actions-btn.scss","src/_toggle-setting.scss","src/_settings-popup.scss","src/_setting__section.scss","src/_global.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/public/assets/svg/image.svg b/public/assets/svg/image.svg new file mode 100644 index 0000000..b79cea0 --- /dev/null +++ b/public/assets/svg/image.svg @@ -0,0 +1 @@ + diff --git a/src/App.vue b/src/App.vue index f84f12e..0aaed16 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,6 +2,7 @@ import PagedJsWrapper from './components/PagedJsWrapper.vue'; import EditorPanel from './components/editor/EditorPanel.vue'; import ElementPopup from './components/ElementPopup.vue'; +import ImagePopup from './components/ImagePopup.vue'; // import PagePopup from './components/PagePopup.vue'; // DISABLED: page template styling feature import PreviewLoader from './components/PreviewLoader.vue'; import SaveButton from './components/SaveButton.vue'; @@ -23,6 +24,7 @@ const { loadFontsFromCss } = useProjectFonts(); const previewFrame1 = ref(null); const previewFrame2 = ref(null); const elementPopup = ref(null); +const imagePopup = ref(null); // const pagePopup = ref(null); // DISABLED: page template styling feature const activeTab = ref(''); @@ -38,7 +40,8 @@ const { handleIframeClick, // handlePagePopupClose, // DISABLED: page template styling feature handleElementPopupClose, -} = useIframeInteractions({ elementPopup }); + handleImagePopupClose, +} = useIframeInteractions({ elementPopup, imagePopup }); // Setup preview renderer with double buffering const { @@ -126,6 +129,11 @@ onMounted(async () => { :iframeRef="activeFrame" @close="handleElementPopupClose" /> + + +
+
+ + +
+
+ +
+

Valeur par défaut : {{ imageDefaults.width.value }}{{ imageDefaults.width.unit }}

+
+ + + + + + + + diff --git a/src/components/PagedJsWrapper.vue b/src/components/PagedJsWrapper.vue index a766bec..4ff5bfe 100644 --- a/src/components/PagedJsWrapper.vue +++ b/src/components/PagedJsWrapper.vue @@ -55,6 +55,7 @@ :key="block.id" :is="getBlockComponent(block.type)" :content="block.content" + v-bind="block.type === 'image' ? { blockId: block.id } : {}" />
@@ -97,6 +98,7 @@ :key="block.id" :is="getBlockComponent(block.type)" :content="block.content" + v-bind="block.type === 'image' ? { blockId: block.id } : {}" /> diff --git a/src/components/blocks/ImageBlock.vue b/src/components/blocks/ImageBlock.vue index 057db60..f2839ba 100644 --- a/src/components/blocks/ImageBlock.vue +++ b/src/components/blocks/ImageBlock.vue @@ -1,6 +1,6 @@ @@ -56,39 +84,68 @@ import InputWithUnit from './ui/InputWithUnit.vue'; import BasePopup from './ui/BasePopup.vue'; import { useStylesheetStore } from '../stores/stylesheet'; import { useImageDefaults } from '../composables/useImageDefaults'; +import { IMAGE_DEFAULTS } from '../utils/defaults'; +import { useCssUpdater } from '../composables/useCssUpdater'; +import { useDebounce } from '../composables/useDebounce'; const emit = defineEmits(['close']); const stylesheetStore = useStylesheetStore(); const imageDefaults = useImageDefaults(); +const { updateStyle, removeProperty } = useCssUpdater(); +const { debouncedUpdate } = useDebounce(400); const basePopup = ref(null); const visible = computed(() => basePopup.value?.visible ?? false); +const currentFigure = ref(null); const selector = ref(''); + +// --- Width state --- const width = reactive({ value: 100, unit: '%' }); const widthEnabled = ref(false); -const widthCache = ref(null); // { value, unit } | null — persists user value when toggle is OFF +const widthCache = ref(null); + +// --- Height state --- +const heightAuto = ref(true); +const heightPx = reactive({ value: IMAGE_DEFAULTS.height.value, unit: IMAGE_DEFAULTS.height.unit }); +const heightEnabled = ref(false); +const heightCache = ref(null); // { auto, value, unit } | null +const measuredHeight = ref(null); // Actual height captured on first uncheck, per open session -// Per-selector persistent state const elementStates = new Map(); let isUpdatingFromStore = false; -// InputWithUnit model +// --- Models --- const widthModel = computed({ get: () => ({ value: width.value, unit: width.unit }), set: (v) => { width.value = v.value; width.unit = v.unit; }, }); -// Watch width changes → update CSS when toggle is ON + +// --- Watchers --- + watch(() => [width.value, width.unit], () => { if (isUpdatingFromStore || !widthEnabled.value || !selector.value) return; - stylesheetStore.updateProperty(selector.value, 'width', width.value, width.unit); - saveState(); + debouncedUpdate(() => { + stylesheetStore.updateProperty(selector.value, 'width', width.value, width.unit); + saveState(); + }); }); -// Sync greyed field with imageDefaults when toggle is OFF and no cache +const onHeightValueChange = (v) => { + heightPx.value = v.value; + heightPx.unit = v.unit; + if (isUpdatingFromStore || !heightEnabled.value || heightAuto.value || !selector.value) return; + measuredHeight.value = v.value; + debouncedUpdate(() => { + stylesheetStore.updateProperty(selector.value, 'height', heightPx.value, heightPx.unit); + saveState(); + }); +}; + +// Sync greyed width field with imageDefaults when toggle OFF and no cache watch(() => imageDefaults.width, (val) => { if (!widthEnabled.value && widthCache.value === null) { isUpdatingFromStore = true; @@ -98,16 +155,26 @@ watch(() => imageDefaults.width, (val) => { } }, { deep: true }); -// --- Toggle --- +// Sync greyed height field with imageDefaults when toggle OFF and no cache +watch(() => imageDefaults.height, (val) => { + if (!heightEnabled.value && heightCache.value === null) { + isUpdatingFromStore = true; + heightAuto.value = val.auto; + heightPx.value = val.value; + heightPx.unit = val.unit; + nextTick(() => { isUpdatingFromStore = false; }); + } +}, { deep: true }); -const onSectionClick = () => { +// --- Width toggle --- + +const onWidthSectionClick = () => { if (!widthEnabled.value) onToggleWidth(true); }; const onToggleWidth = (enabled) => { isUpdatingFromStore = true; widthEnabled.value = enabled; - if (enabled) { if (widthCache.value) { width.value = widthCache.value.value; @@ -117,23 +184,97 @@ const onToggleWidth = (enabled) => { stylesheetStore.updateProperty(selector.value, 'width', width.value, width.unit); } else { widthCache.value = { value: width.value, unit: width.unit }; - removeWidthProp(); + removeProp('width'); width.value = imageDefaults.width.value; width.unit = imageDefaults.width.unit; } - saveState(); nextTick(() => { isUpdatingFromStore = false; }); }; +// --- Height toggle --- + +const onHeightSectionClick = () => { + if (!heightEnabled.value) onToggleHeight(true); +}; + +const onToggleHeight = (enabled) => { + isUpdatingFromStore = true; + heightEnabled.value = enabled; + if (enabled) { + if (heightCache.value) { + heightAuto.value = heightCache.value.auto; + heightPx.value = heightCache.value.value; + heightPx.unit = heightCache.value.unit; + heightCache.value = null; + } + applyHeight(); + if (!heightAuto.value) updateStyle(`${selector.value} img`, 'height', '100%'); + } else { + heightCache.value = { auto: heightAuto.value, value: heightPx.value, unit: heightPx.unit }; + removeProp('height'); + removeProperty(`${selector.value} img`, 'height'); + heightAuto.value = imageDefaults.height.auto; + heightPx.value = imageDefaults.height.value; + heightPx.unit = imageDefaults.height.unit; + } + saveState(); + nextTick(() => { isUpdatingFromStore = false; }); +}; + +// Auto checkbox (only active when heightEnabled) +const onToggleHeightAuto = (auto) => { + if (!heightEnabled.value) return; + isUpdatingFromStore = true; + if (!auto && heightAuto.value) { + // Unchecking auto → use measured height (capture once, reuse on subsequent unchecks) + if (measuredHeight.value === null) { + measuredHeight.value = getActualImageHeight(); + } + heightPx.value = measuredHeight.value; + heightPx.unit = 'px'; + } + heightAuto.value = auto; + applyHeight(); + if (!auto) { + updateStyle(`${selector.value} img`, 'height', '100%'); + } else { + removeProperty(`${selector.value} img`, 'height'); + } + saveState(); + nextTick(() => { isUpdatingFromStore = false; }); +}; + +const getActualImageHeight = () => { + if (currentFigure.value) { + const img = currentFigure.value.querySelector('img'); + if (img) { + const h = Math.round(img.getBoundingClientRect().height); + if (h > 0) return Math.min(h, 800); + } + const figH = Math.round(currentFigure.value.getBoundingClientRect().height); + if (figH > 0) return Math.min(figH, 800); + } + return IMAGE_DEFAULTS.height.value; +}; + // --- CSS helpers --- -const removeWidthProp = () => { +const applyHeight = () => { + if (!selector.value) return; + if (heightAuto.value) { + stylesheetStore.updateProperty(selector.value, 'height', 'auto'); + } else { + stylesheetStore.updateProperty(selector.value, 'height', heightPx.value, heightPx.unit); + } +}; + +const removeProp = (prop) => { if (!selector.value) return; const block = stylesheetStore.extractBlock(selector.value); if (!block || !stylesheetStore.customCss.includes(block)) return; - - const newBlock = block.replace(/[ \t]*width\s*:[^;]*;[ \t]*\n?/g, ''); + const escaped = prop.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + const newBlock = block.replace(new RegExp(`[ \\t]*${escaped}\\s*:[^;]*;[ \\t]*\\n?`, 'g'), ''); const inner = newBlock.replace(/^[^{]*\{/, '').replace(/\}[^}]*$/, ''); if (!inner.trim()) { stylesheetStore.replaceInCustomCss(block, ''); @@ -146,10 +287,21 @@ const removeWidthProp = () => { const displayedCss = computed(() => { if (!selector.value) return ''; + const lines = []; + + // Width const widthVal = `${width.value}${width.unit}`; - const defaultVal = `${imageDefaults.width.value}${imageDefaults.width.unit}`; - const comment = (!widthEnabled.value && widthVal === defaultVal) ? ' /* hérité de .block-image */' : ''; - return `${selector.value} {\n width: ${widthVal};${comment}\n}`; + const defaultWidthVal = `${imageDefaults.width.value}${imageDefaults.width.unit}`; + const widthComment = (!widthEnabled.value && widthVal === defaultWidthVal) ? ' /* hérité de .block-image */' : ''; + lines.push(` width: ${widthVal};${widthComment}`); + + // Height + const heightVal = heightAuto.value ? 'auto' : `${heightPx.value}${heightPx.unit}`; + const defaultHeightVal = imageDefaults.height.auto ? 'auto' : `${imageDefaults.height.value}${imageDefaults.height.unit}`; + const heightComment = (!heightEnabled.value && heightVal === defaultHeightVal) ? ' /* hérité de .block-image */' : ''; + lines.push(` height: ${heightVal};${heightComment}`); + + return `${selector.value} {\n${lines.join('\n')}\n}`; }); const editableCss = computed(() => { @@ -161,13 +313,30 @@ const editableCss = computed(() => { const handleCssInput = (newCss) => { isUpdatingFromStore = true; - const match = newCss.match(/width\s*:\s*([\d.]+)(%|px)/i); - if (match) { - width.value = parseFloat(match[1]); - width.unit = match[2]; + const widthMatch = newCss.match(/width\s*:\s*([\d.]+)(%|px)/i); + if (widthMatch) { + width.value = parseFloat(widthMatch[1]); + width.unit = widthMatch[2]; } - const newBlock = `${selector.value} {\n width: ${width.value}${width.unit};\n}\n`; + const heightMatch = newCss.match(/height\s*:\s*([^;]+)/i); + if (heightMatch) { + const hVal = heightMatch[1].trim(); + if (hVal === 'auto') { + heightAuto.value = true; + } else { + const m = hVal.match(/([\d.]+)px/i); + if (m) { + heightAuto.value = false; + heightPx.value = parseFloat(m[1]); + heightPx.unit = 'px'; + } + } + } + + const widthLine = ` width: ${width.value}${width.unit};`; + const heightLine = ` height: ${heightAuto.value ? 'auto' : `${heightPx.value}${heightPx.unit}`};`; + const newBlock = `${selector.value} {\n${widthLine}\n${heightLine}\n}\n`; const oldBlock = stylesheetStore.extractBlock(selector.value) || ''; if (oldBlock) { stylesheetStore.replaceInCustomCss(oldBlock, newBlock); @@ -183,9 +352,13 @@ const handleCssInput = (newCss) => { const saveState = () => { if (!selector.value) return; elementStates.set(selector.value, { - toggle: widthEnabled.value, - cache: widthCache.value ? { ...widthCache.value } : null, - value: { value: width.value, unit: width.unit }, + widthToggle: widthEnabled.value, + widthCache: widthCache.value ? { ...widthCache.value } : null, + widthValue: { value: width.value, unit: width.unit }, + heightToggle: heightEnabled.value, + heightCache: heightCache.value ? { ...heightCache.value } : null, + heightAuto: heightAuto.value, + heightValue: { value: heightPx.value, unit: heightPx.unit }, }); }; @@ -194,39 +367,58 @@ const saveState = () => { const handleImageClick = (figure, event) => { const uniqueClass = Array.from(figure.classList).find(cls => cls.startsWith('block-image--')); const sel = uniqueClass - ? `.${uniqueClass}` + ? `.block-image.${uniqueClass}` : figure.classList.contains('geoformat-cover-image') ? '.geoformat-cover-image' : null; if (!sel) return; isUpdatingFromStore = true; selector.value = sel; + currentFigure.value = figure; + measuredHeight.value = null; - const stored = elementStates.get(selector.value); + const stored = elementStates.get(sel); if (stored) { - widthEnabled.value = stored.toggle; - widthCache.value = stored.cache ? { ...stored.cache } : null; - if (stored.toggle) { - width.value = stored.value.value; - width.unit = stored.value.unit; - } else if (stored.cache) { - width.value = stored.cache.value; - width.unit = stored.cache.unit; - } else { - width.value = imageDefaults.width.value; - width.unit = imageDefaults.width.unit; - } + widthEnabled.value = stored.widthToggle; + widthCache.value = stored.widthCache ? { ...stored.widthCache } : null; + width.value = stored.widthToggle ? stored.widthValue.value : (stored.widthCache ? stored.widthCache.value : imageDefaults.width.value); + width.unit = stored.widthToggle ? stored.widthValue.unit : (stored.widthCache ? stored.widthCache.unit : imageDefaults.width.unit); + + heightEnabled.value = stored.heightToggle; + heightCache.value = stored.heightCache ? { ...stored.heightCache } : null; + heightAuto.value = stored.heightAuto; + heightPx.value = stored.heightToggle ? stored.heightValue.value : (stored.heightCache ? stored.heightCache.value : imageDefaults.height.value); + heightPx.unit = stored.heightToggle ? stored.heightValue.unit : (stored.heightCache ? stored.heightCache.unit : imageDefaults.height.unit); } else { + // Width widthEnabled.value = false; widthCache.value = null; - - const cssVal = stylesheetStore.extractValue(selector.value, 'width'); - if (cssVal && cssVal.value !== undefined) { - width.value = cssVal.value; - width.unit = cssVal.unit; - widthEnabled.value = true; + const wCss = stylesheetStore.extractValue(sel, 'width'); + if (wCss && wCss.value !== undefined) { + width.value = wCss.value; + width.unit = wCss.unit; + const isDefaultWidth = wCss.value === imageDefaults.width.value && wCss.unit === imageDefaults.width.unit; + if (!isDefaultWidth) widthEnabled.value = true; } else { - width.value = imageDefaults.width.value; - width.unit = imageDefaults.width.unit; + width.value = imageDefaults.width.value; width.unit = imageDefaults.width.unit; + } + + // Height + heightEnabled.value = false; + heightCache.value = null; + const hCss = stylesheetStore.extractValue(sel, 'height'); + const hStr = typeof hCss === 'string' ? hCss : null; + if (hStr === 'auto') { + heightAuto.value = true; // toggle reste OFF — c'est la valeur par défaut + } else if (hStr) { + const m = hStr.match(/([\d.]+)px/i); + if (m) { heightAuto.value = false; heightPx.value = parseFloat(m[1]); heightPx.unit = 'px'; heightEnabled.value = true; } + else { heightAuto.value = imageDefaults.height.auto; heightPx.value = imageDefaults.height.value; heightPx.unit = imageDefaults.height.unit; } + } else if (hCss && hCss.value !== undefined) { + heightAuto.value = false; heightPx.value = hCss.value; heightPx.unit = hCss.unit; heightEnabled.value = true; + } else { + heightAuto.value = imageDefaults.height.auto; + heightPx.value = imageDefaults.height.value; + heightPx.unit = imageDefaults.height.unit; } } @@ -239,6 +431,7 @@ const handleImageClick = (figure, event) => { const handleClose = () => { saveState(); selector.value = ''; + currentFigure.value = null; if (basePopup.value?.visible) basePopup.value.close(); emit('close'); }; diff --git a/src/components/PagedJsWrapper.vue b/src/components/PagedJsWrapper.vue index 50c4d07..f479394 100644 --- a/src/components/PagedJsWrapper.vue +++ b/src/components/PagedJsWrapper.vue @@ -69,7 +69,9 @@ :data-page-type="item.template" >

{{ item.title }}

- +
+ +
{{ tag }}
@@ -93,7 +95,11 @@ {{ marker.title }} - + @@ -38,36 +59,83 @@ import { useCssSync } from '../../composables/useCssSync'; import { useDebounce } from '../../composables/useDebounce'; import { useImageDefaults } from '../../composables/useImageDefaults'; -const { updateStyle } = useCssUpdater(); -const { extractNumericValue } = useCssSync(); +const { updateStyle, removeProperty } = useCssUpdater(); +const { extractNumericValue, extractValue } = useCssSync(); const { debouncedUpdate } = useDebounce(500); const imageDefaults = useImageDefaults(); -// State — initial value from defaults.js (overwritten by syncFromStore) +const IMAGE_SELECTORS = ['.block-image', '.geoformat-cover-image']; + +// Width const width = ref({ ...IMAGE_DEFAULTS.width }); -// Start true to block immediate watchers during setup +// Height +const heightAuto = ref(IMAGE_DEFAULTS.height.auto); +const height = ref({ value: IMAGE_DEFAULTS.height.value, unit: IMAGE_DEFAULTS.height.unit }); + let isUpdatingFromStore = true; +// Width watcher watch(width, (val) => { if (isUpdatingFromStore) return; imageDefaults.width = { value: val.value, unit: val.unit }; debouncedUpdate(() => { - updateStyle('.block-image', 'width', `${val.value}${val.unit}`); - updateStyle('.geoformat-cover-image', 'width', `${val.value}${val.unit}`); + IMAGE_SELECTORS.forEach(sel => updateStyle(sel, 'width', `${val.value}${val.unit}`)); }); }, { deep: true, immediate: true }); +// Height auto toggle +const onHeightAutoChange = (auto) => { + if (isUpdatingFromStore) return; + heightAuto.value = auto; + const cssVal = auto ? 'auto' : `${height.value.value}${height.value.unit}`; + IMAGE_SELECTORS.forEach(sel => { + updateStyle(sel, 'height', cssVal); + if (auto) { + removeProperty(`${sel} img`, 'height'); + } else { + updateStyle(`${sel} img`, 'height', '100%'); + } + }); + imageDefaults.height = { auto, value: height.value.value, unit: height.value.unit }; +}; + +// Height value watcher (only when not auto) +watch(height, (val) => { + if (isUpdatingFromStore || heightAuto.value) return; + imageDefaults.height = { auto: false, value: val.value, unit: val.unit }; + debouncedUpdate(() => { + IMAGE_SELECTORS.forEach(sel => { + updateStyle(sel, 'height', `${val.value}${val.unit}`); + updateStyle(`${sel} img`, 'height', '100%'); + }); + }); +}, { deep: true }); + const syncFromStore = () => { isUpdatingFromStore = true; if (imageDefaults._initialized) { width.value = { value: imageDefaults.width.value, unit: imageDefaults.width.unit }; + heightAuto.value = imageDefaults.height.auto; + height.value = { value: imageDefaults.height.value, unit: imageDefaults.height.unit }; } else { const widthVal = extractNumericValue('.block-image', 'width', ['%', 'px']); if (widthVal) width.value = widthVal; + const heightVal = extractValue('.block-image', 'height'); + if (!heightVal || heightVal === 'auto') { + heightAuto.value = true; + } else { + const m = heightVal.match(/([\d.]+)px/i); + if (m) { + heightAuto.value = false; + height.value = { value: parseFloat(m[1]), unit: 'px' }; + } + } + imageDefaults.width = { value: width.value.value, unit: width.value.unit }; + imageDefaults.height = { auto: heightAuto.value, value: height.value.value, unit: height.value.unit }; imageDefaults._initialized = true; } diff --git a/src/composables/useImageDefaults.js b/src/composables/useImageDefaults.js index 175d90c..6f0cf1f 100644 --- a/src/composables/useImageDefaults.js +++ b/src/composables/useImageDefaults.js @@ -4,6 +4,7 @@ import { IMAGE_DEFAULTS } from '../utils/defaults'; // Singleton reactive — ImageSettings writes here, ImagePopup reads when toggle is disabled const defaults = reactive({ width: { ...IMAGE_DEFAULTS.width }, + height: { auto: IMAGE_DEFAULTS.height.auto, value: IMAGE_DEFAULTS.height.value, unit: IMAGE_DEFAULTS.height.unit }, _initialized: false, }); diff --git a/src/stores/stylesheet.js b/src/stores/stylesheet.js index 475cd96..bc59568 100644 --- a/src/stores/stylesheet.js +++ b/src/stores/stylesheet.js @@ -261,7 +261,17 @@ export const useStylesheetStore = defineStore('stylesheet', () => { // Image defaults set('.block-image', 'width', IMAGE_DEFAULTS.width.value, IMAGE_DEFAULTS.width.unit); + set('.block-image', 'height', 'auto'); + set('.block-image img', 'object-fit', 'cover'); + set('.block-image img', 'display', 'flex'); set('.geoformat-cover-image', 'width', IMAGE_DEFAULTS.width.value, IMAGE_DEFAULTS.width.unit); + set('.geoformat-cover-image', 'height', 'auto'); + set('.geoformat-cover-image img', 'object-fit', 'cover'); + set('.geoformat-cover-image img', 'display', 'flex'); + set('.block-carte', 'width', IMAGE_DEFAULTS.width.value, IMAGE_DEFAULTS.width.unit); + set('.block-carte', 'height', 'auto'); + set('.block-carte img', 'object-fit', 'cover'); + set('.block-carte img', 'display', 'flex'); // Inline element defaults (em, i, strong, b, a) for (const [tag, props] of Object.entries(INLINE_DEFAULTS)) { diff --git a/src/utils/defaults.js b/src/utils/defaults.js index 07f6c2b..6171278 100644 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -128,6 +128,7 @@ export const PARAGRAPH_CLASS_DEFAULTS = Object.freeze({ export const IMAGE_DEFAULTS = Object.freeze({ width: Object.freeze({ value: 100, unit: '%' }), + height: Object.freeze({ auto: true, value: 400, unit: 'px' }), }); export const INLINE_DEFAULTS = Object.freeze({ From a85a810b1e46d78a0056f6ce595e83de0d9dbe39 Mon Sep 17 00:00:00 2001 From: Julie Blanc Date: Mon, 23 Mar 2026 12:40:47 +0100 Subject: [PATCH 08/10] reglages cartes --- public/assets/css/pagedjs-interface.css | 20 +- public/assets/svg/carte.svg | 1 + src/App.vue | 10 +- src/components/CartePopup.vue | 357 +++++++++++++++++++++++ src/components/PagedJsWrapper.vue | 6 +- src/components/editor/CarteSettings.vue | 138 +++++++++ src/components/editor/EditorPanel.vue | 2 + src/composables/useCarteDefaults.js | 13 + src/composables/useIframeInteractions.js | 98 ++++++- src/stores/stylesheet.js | 4 +- src/utils/defaults.js | 5 + 11 files changed, 641 insertions(+), 13 deletions(-) create mode 100644 public/assets/svg/carte.svg create mode 100644 src/components/CartePopup.vue create mode 100644 src/components/editor/CarteSettings.vue create mode 100644 src/composables/useCarteDefaults.js diff --git a/public/assets/css/pagedjs-interface.css b/public/assets/css/pagedjs-interface.css index ad8fec3..41c3268 100644 --- a/public/assets/css/pagedjs-interface.css +++ b/public/assets/css/pagedjs-interface.css @@ -193,13 +193,15 @@ } .block-image.element-hovered, -.geoformat-cover-image.element-hovered { +.geoformat-cover-image.element-hovered, +.block-carte.element-hovered { outline: 2px solid #0d996050 !important; cursor: pointer !important; } .block-image.element-selected, -.geoformat-cover-image.element-selected { +.geoformat-cover-image.element-selected, +.block-carte.element-selected { outline: 2px dashed #0d9960 !important; } @@ -217,6 +219,20 @@ font-family: sans-serif; } +.carte-hover-label { + position: absolute; + background: #0d9960; + color: white; + padding: 0.25rem 0.5rem; + border-radius: 4px; + font-size: 0.875rem; + font-weight: 600; + opacity: 0.3; + pointer-events: none; + z-index: 9999; + font-family: sans-serif; +} + /* Marks (to delete when merge in paged.js) */ .pagedjs_marks-crop { diff --git a/public/assets/svg/carte.svg b/public/assets/svg/carte.svg new file mode 100644 index 0000000..585776d --- /dev/null +++ b/public/assets/svg/carte.svg @@ -0,0 +1 @@ + diff --git a/src/App.vue b/src/App.vue index 0aaed16..78bd81a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,6 +3,7 @@ import PagedJsWrapper from './components/PagedJsWrapper.vue'; import EditorPanel from './components/editor/EditorPanel.vue'; import ElementPopup from './components/ElementPopup.vue'; import ImagePopup from './components/ImagePopup.vue'; +import CartePopup from './components/CartePopup.vue'; // import PagePopup from './components/PagePopup.vue'; // DISABLED: page template styling feature import PreviewLoader from './components/PreviewLoader.vue'; import SaveButton from './components/SaveButton.vue'; @@ -25,6 +26,7 @@ const previewFrame1 = ref(null); const previewFrame2 = ref(null); const elementPopup = ref(null); const imagePopup = ref(null); +const cartePopup = ref(null); // const pagePopup = ref(null); // DISABLED: page template styling feature const activeTab = ref(''); @@ -41,7 +43,8 @@ const { // handlePagePopupClose, // DISABLED: page template styling feature handleElementPopupClose, handleImagePopupClose, -} = useIframeInteractions({ elementPopup, imagePopup }); + handleCartePopupClose, +} = useIframeInteractions({ elementPopup, imagePopup, cartePopup }); // Setup preview renderer with double buffering const { @@ -134,6 +137,11 @@ onMounted(async () => { ref="imagePopup" @close="handleImagePopupClose" /> + + +
+
+ + +
+
+ +
+

Valeur par défaut : {{ carteDefaults.width.value }}{{ carteDefaults.width.unit }}

+
+ + +
+
+ + +
+
+
+ + +
+ +
+

Valeur par défaut : {{ carteDefaults.height.auto ? 'auto' : carteDefaults.height.value + carteDefaults.height.unit }}

+
+ + + + + + + + diff --git a/src/components/PagedJsWrapper.vue b/src/components/PagedJsWrapper.vue index f479394..a0d3c9a 100644 --- a/src/components/PagedJsWrapper.vue +++ b/src/components/PagedJsWrapper.vue @@ -69,7 +69,7 @@ :data-page-type="item.template" >

{{ item.title }}

-
+
@@ -133,6 +133,10 @@ import { const narrativeStore = useNarrativeStore(); const hasNarrativeData = computed(() => narrativeStore.data !== null); + +const getCarteBlockId = (itemId) => { + return (itemId || '').split('/').pop()?.replace(/[^a-z0-9]/gi, '').slice(0, 8) || ''; +}; const flattenedContent = computed(() => narrativeStore.flattenedContent); // Filter out hidden blocks diff --git a/src/components/editor/CarteSettings.vue b/src/components/editor/CarteSettings.vue new file mode 100644 index 0000000..6832280 --- /dev/null +++ b/src/components/editor/CarteSettings.vue @@ -0,0 +1,138 @@ + + + diff --git a/src/components/editor/EditorPanel.vue b/src/components/editor/EditorPanel.vue index 826bd73..da75abc 100644 --- a/src/components/editor/EditorPanel.vue +++ b/src/components/editor/EditorPanel.vue @@ -54,6 +54,7 @@ +
@@ -72,6 +73,7 @@ import { inject } from 'vue'; import PageSettings from './PageSettings.vue'; import TextSettings from './TextSettings.vue'; import ImageSettings from './ImageSettings.vue'; +import CarteSettings from './CarteSettings.vue'; import StylesheetViewer from '../StylesheetViewer.vue'; const activeTab = inject('activeTab'); diff --git a/src/composables/useCarteDefaults.js b/src/composables/useCarteDefaults.js new file mode 100644 index 0000000..bc84f91 --- /dev/null +++ b/src/composables/useCarteDefaults.js @@ -0,0 +1,13 @@ +import { reactive } from 'vue'; +import { CARTE_DEFAULTS } from '../utils/defaults'; + +// Singleton reactive — CarteSettings writes here, CartePopup reads when toggle is disabled +const defaults = reactive({ + width: { ...CARTE_DEFAULTS.width }, + height: { auto: CARTE_DEFAULTS.height.auto, value: CARTE_DEFAULTS.height.value, unit: CARTE_DEFAULTS.height.unit }, + _initialized: false, +}); + +export function useCarteDefaults() { + return defaults; +} diff --git a/src/composables/useIframeInteractions.js b/src/composables/useIframeInteractions.js index dbf5e25..76ea3c7 100644 --- a/src/composables/useIframeInteractions.js +++ b/src/composables/useIframeInteractions.js @@ -4,14 +4,16 @@ 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, imagePopup /*, pagePopup // DISABLED: page template styling feature */ }) { +export function useIframeInteractions({ elementPopup, imagePopup, cartePopup /*, 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 hoveredFigure = ref(null); // Currently hovered block-image figure - const selectedElement = ref(null); // Selected element (when popup is open) - const selectedFigure = ref(null); // Selected figure (when image popup is open) + const hoveredElement = ref(null); + const hoveredFigure = ref(null); // block-image or geoformat-cover-image + const hoveredCarte = ref(null); // block-carte + const selectedElement = ref(null); + const selectedFigure = ref(null); // selected block-image + const selectedCarte = ref(null); // selected block-carte // 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.) @@ -197,6 +199,42 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup / return null; }; + // Find closest block-carte figure ancestor + const getCarteFigure = (element) => { + let current = element; + while (current && current.tagName !== 'BODY') { + if (current.tagName === 'FIGURE' && current.classList.contains('block-carte')) return current; + current = current.parentElement; + } + return null; + }; + + // Create and position carte label on hover + const createCarteLabel = (figure) => { + const doc = figure.ownerDocument; + const existing = doc.querySelector('.carte-hover-label'); + if (existing) existing.remove(); + + const uniqueClass = Array.from(figure.classList).find(cls => cls.startsWith('block-carte--')); + const labelText = uniqueClass ? `.${uniqueClass}` : '.block-carte'; + + const rect = figure.getBoundingClientRect(); + const scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop; + const scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft; + + const label = doc.createElement('div'); + label.className = 'carte-hover-label'; + label.textContent = labelText; + label.style.top = `${rect.top + scrollTop - 32}px`; + label.style.left = `${rect.left + scrollLeft}px`; + doc.body.appendChild(label); + }; + + const removeCarteLabel = (doc) => { + const label = doc.querySelector('.carte-hover-label'); + if (label) label.remove(); + }; + // Check if element is a content element (or find closest content parent) const getContentElement = (element) => { let current = element; @@ -285,8 +323,22 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup / hoveredFigure.value = imageFigure; } + // Check for block-carte figure hover + const carteFigure = (!imageFigure) ? getCarteFigure(event.target) : null; + if (carteFigure !== hoveredCarte.value) { + if (hoveredCarte.value && hoveredCarte.value !== selectedCarte.value) { + hoveredCarte.value.classList.remove('element-hovered'); + } + removeCarteLabel(doc); + if (carteFigure && carteFigure !== selectedCarte.value) { + carteFigure.classList.add('element-hovered'); + createCarteLabel(carteFigure); + } + hoveredCarte.value = carteFigure; + } + // Check for content element hover - const contentElement = imageFigure ? null : getContentElement(event.target); + const contentElement = (imageFigure || carteFigure) ? null : getContentElement(event.target); if (contentElement !== hoveredElement.value) { // Remove highlight from previous element (only if not selected) @@ -347,6 +399,7 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup / clearSelectedElement(); if (elementPopup.value.visible) elementPopup.value.close(); imagePopup.value?.close(); + cartePopup.value?.close(); return; } @@ -376,8 +429,31 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup / return; } - // Close image popup if open when clicking a text element + // Check if clicking a block-carte figure + const carteFigure = getCarteFigure(element); + if (carteFigure) { + clearSelectedElement(); + if (elementPopup.value.visible) elementPopup.value.close(); + imagePopup.value?.close(); + const doc2 = event.target.ownerDocument; + removeElementLabel(doc2); + removeCarteLabel(doc2); + if (cartePopup.value?.visible) { + if (selectedCarte.value) { selectedCarte.value.classList.remove('element-selected'); selectedCarte.value = null; } + cartePopup.value.close(); + return; + } + carteFigure.classList.remove('element-hovered'); + carteFigure.classList.add('element-selected'); + hoveredCarte.value = null; + selectedCarte.value = carteFigure; + cartePopup.value?.handleCarteClick(carteFigure, event); + return; + } + + // Close image and carte popups when clicking a text element imagePopup.value?.close(); + cartePopup.value?.close(); // Only show ElementPopup for content elements, not divs const contentElement = getContentElement(element); @@ -437,6 +513,13 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup / } }; + const handleCartePopupClose = () => { + if (selectedCarte.value) { + selectedCarte.value.classList.remove('element-selected'); + selectedCarte.value = null; + } + }; + return { // State // hoveredPage, // DISABLED: page template styling feature @@ -449,6 +532,7 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup / // handlePagePopupClose, // DISABLED: page template styling feature handleElementPopupClose, handleImagePopupClose, + handleCartePopupClose, // Utilities // clearSelectedPages, // DISABLED: page template styling feature clearSelectedElement, diff --git a/src/stores/stylesheet.js b/src/stores/stylesheet.js index bc59568..000436e 100644 --- a/src/stores/stylesheet.js +++ b/src/stores/stylesheet.js @@ -5,7 +5,7 @@ import * as cssComments from '../utils/css-comments'; import prettier from 'prettier/standalone'; import parserPostcss from 'prettier/plugins/postcss'; import { getCsrfToken } from '../utils/kirby-auth'; -import { PAGE_DEFAULTS, TEXT_DEFAULTS, IMAGE_DEFAULTS, HEADING_DEFAULTS, INLINE_DEFAULTS, PARAGRAPH_CLASS_DEFAULTS } from '../utils/defaults'; +import { PAGE_DEFAULTS, TEXT_DEFAULTS, IMAGE_DEFAULTS, CARTE_DEFAULTS, HEADING_DEFAULTS, INLINE_DEFAULTS, PARAGRAPH_CLASS_DEFAULTS } from '../utils/defaults'; export const useStylesheetStore = defineStore('stylesheet', () => { // Base state @@ -268,7 +268,7 @@ export const useStylesheetStore = defineStore('stylesheet', () => { set('.geoformat-cover-image', 'height', 'auto'); set('.geoformat-cover-image img', 'object-fit', 'cover'); set('.geoformat-cover-image img', 'display', 'flex'); - set('.block-carte', 'width', IMAGE_DEFAULTS.width.value, IMAGE_DEFAULTS.width.unit); + set('.block-carte', 'width', CARTE_DEFAULTS.width.value, CARTE_DEFAULTS.width.unit); set('.block-carte', 'height', 'auto'); set('.block-carte img', 'object-fit', 'cover'); set('.block-carte img', 'display', 'flex'); diff --git a/src/utils/defaults.js b/src/utils/defaults.js index 6171278..daa3a47 100644 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -131,6 +131,11 @@ export const IMAGE_DEFAULTS = Object.freeze({ height: Object.freeze({ auto: true, value: 400, unit: 'px' }), }); +export const CARTE_DEFAULTS = Object.freeze({ + width: Object.freeze({ value: 100, unit: '%' }), + height: Object.freeze({ auto: true, value: 400, unit: 'px' }), +}); + export const INLINE_DEFAULTS = Object.freeze({ em: Object.freeze({ fontStyle: 'italic' }), i: Object.freeze({ fontStyle: 'italic' }), From bf877c23d20270205cf2805345fd18ef86dd5d73 Mon Sep 17 00:00:00 2001 From: Julie Blanc Date: Mon, 23 Mar 2026 13:00:28 +0100 Subject: [PATCH 09/10] position relative to images --- src/components/CartePopup.vue | 358 +++++++++++++++-------- src/components/ImagePopup.vue | 522 ++++++++++++++++++---------------- 2 files changed, 522 insertions(+), 358 deletions(-) diff --git a/src/components/CartePopup.vue b/src/components/CartePopup.vue index aace673..572f03a 100644 --- a/src/components/CartePopup.vue +++ b/src/components/CartePopup.vue @@ -6,7 +6,7 @@ :display-css="displayedCss" :editable-css="editableCss" :popup-width="440" - :popup-height="320" + :popup-height="550" :show-inheritance="false" @close="handleClose" @css-input="handleCssInput" @@ -18,35 +18,19 @@ @@ -76,6 +87,7 @@