-
-
-
-
- children()->listed()->filterBy('intendedTemplate', 'marker');
- $mapId = 'map-' . $subpage->uid();
- ?>
-
title()) ?>
- tags()->isNotEmpty()): ?> - - -
-
![]()
{
const styles = {};
+ if (props.content.width && props.content.width !== '100%') {
+ styles.width = props.content.width;
+ }
+
if (props.content.position === 'center') {
styles.margin = '0 auto';
} else if (props.content.position === 'right') {
diff --git a/src/components/editor/CarteSettings.vue b/src/components/editor/CarteSettings.vue
deleted file mode 100644
index 6832280..0000000
--- a/src/components/editor/CarteSettings.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-
-
-
-
-
-
-
diff --git a/src/components/editor/EditorPanel.vue b/src/components/editor/EditorPanel.vue
index da75abc..882b2fd 100644
--- a/src/components/editor/EditorPanel.vue
+++ b/src/components/editor/EditorPanel.vue
@@ -53,8 +53,6 @@
-
-
-
- files()->isNotEmpty()): ?>
-
- files() as $file): ?>
-
- ↓
- filename()) ?>
-
-
-
-
+
+
+
+ intro()->isNotEmpty()): ?>
+
+
+ children()->listed()->filterBy('intendedTemplate', 'marker');
+ $mapId = 'map-' . $subpage->uid();
+ ?>
+ title()) ?>
+ tags()->isNotEmpty()): ?> + - - intro()->isNotEmpty()): ?> -intro() ?>
-
+ intro() ?>
+
+
+
+
+
+ files()->isNotEmpty()): ?>
+
+
+
+
isNotEmpty()): ?>
+ files() as $file): ?>
+
+ ↓
+ filename()) ?>
+
+
+
+
diff --git a/public/site/templates/project.php b/public/site/templates/project.php
index 7a9b86c..d935dce 100644
--- a/public/site/templates/project.php
+++ b/public/site/templates/project.php
@@ -22,11 +22,7 @@
-
-background()->isNotEmpty()){ $background = $page->background();}
-else{$background = "#FFF";}?>
-
+
-
-
-
- {{ selector.replace('.block-image.', '.') || '' }}
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/PagedJsWrapper.vue b/src/components/PagedJsWrapper.vue
index a0d3c9a..a766bec 100644
--- a/src/components/PagedJsWrapper.vue
+++ b/src/components/PagedJsWrapper.vue
@@ -33,9 +33,7 @@
class="geoformat"
:data-page-type="item.template"
>
-
- ![]()
-
+ ![]()
![]()
@@ -133,10 +123,6 @@ 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
@@ -169,17 +155,11 @@ const getBlockComponent = (type) => {
}
.narrative-cover .cover-image,
-.geoformat .geoformat-cover-image {
+.geoformat .cover-image {
max-width: 100%;
height: auto;
}
-.geoformat .geoformat-cover-image img {
- max-width: 100%;
- height: auto;
- display: block;
-}
-
.narrative-cover h1 {
margin-top: 1rem;
}
@@ -242,17 +222,11 @@ const getBlockComponent = (type) => {
break-before: page;
}
-.block-carte {
+.carte-image {
max-width: 100%;
height: auto;
}
-.block-carte img {
- max-width: 100%;
- height: auto;
- display: block;
-}
-
.marker {
margin-top: 1.5rem;
}
@@ -269,4 +243,10 @@ const getBlockComponent = (type) => {
flex-shrink: 0;
object-fit: contain;
}
+
+.marker-cover {
+ max-width: 100%;
+ height: auto;
+ margin: 0.5rem 0;
+}
diff --git a/src/components/StylesheetViewer.vue b/src/components/StylesheetViewer.vue
index a30b7a2..63939ed 100644
--- a/src/components/StylesheetViewer.vue
+++ b/src/components/StylesheetViewer.vue
@@ -204,11 +204,12 @@ watch(isCustomCssEditable, async (newValue, oldValue) => {
flex-direction: column;
background: #21252b;
border-radius: 0.25rem;
+ overflow: hidden;
}
.custom-section {
flex: 1;
- max-height: 45.2rem;
+ min-height: 300px;
}
.section-header {
@@ -300,7 +301,6 @@ h3 {
display: flex;
flex-direction: column;
flex: 1;
- overflow: auto;
}
.readonly {
@@ -321,6 +321,8 @@ h3 {
textarea {
width: 100%;
flex: 1;
+ min-height: 300px;
+ max-height: 500px;
overflow-y: auto;
background: #1e1e1e;
color: #abb2bf;
diff --git a/src/components/blocks/ImageBlock.vue b/src/components/blocks/ImageBlock.vue
index f2839ba..057db60 100644
--- a/src/components/blocks/ImageBlock.vue
+++ b/src/components/blocks/ImageBlock.vue
@@ -1,6 +1,6 @@
-
-
-
-
-
-
-
-
-
- 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/ElementPopup.vue b/src/components/ElementPopup.vue
index 2db0b84..451612a 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -2,7 +2,6 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Valeur par défaut : {{ imageDefaults.width.value }}{{ imageDefaults.width.unit }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Valeur par défaut : {{ imageDefaults.height.auto ? 'auto' : imageDefaults.height.value + imageDefaults.height.unit }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ item.title }}
{{ item.subtitle }}
@@ -57,7 +55,6 @@
:key="block.id"
:is="getBlockComponent(block.type)"
:content="block.content"
- v-bind="block.type === 'image' ? { blockId: block.id } : {}"
/>
@@ -69,9 +66,7 @@
:data-page-type="item.template"
>
- ![]()
-
+ ![]()
@@ -95,18 +90,13 @@
{{ marker.title }}
- {{ item.title }}
-
-
-
-
- Réglage des cartes par défaut
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -72,8 +70,6 @@
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/components/editor/ImageSettings.vue b/src/components/editor/ImageSettings.vue
deleted file mode 100644
index 0dc05c6..0000000
--- a/src/components/editor/ImageSettings.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-
-
-
-
-
-
-
diff --git a/src/components/ui/BasePopup.vue b/src/components/ui/BasePopup.vue
index 6e2710c..da3c09b 100644
--- a/src/components/ui/BasePopup.vue
+++ b/src/components/ui/BasePopup.vue
@@ -3,7 +3,6 @@
v-if="visible"
class="settings-popup"
:style="{ top: position.y + 'px', left: position.x + 'px' }"
- :data-color-type="colorType || undefined"
>
-
-
-
- Réglage des images par défaut
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -101,7 +100,6 @@ const props = defineProps({
popupWidth: { type: Number, default: 800 },
popupHeight: { type: Number, default: 600 },
showInheritance: { type: Boolean, default: true },
- colorType: { type: String, default: '' },
});
const emit = defineEmits(['close', 'css-input', 'toggle-inheritance']);
diff --git a/src/composables/useCarteDefaults.js b/src/composables/useCarteDefaults.js
deleted file mode 100644
index bc84f91..0000000
--- a/src/composables/useCarteDefaults.js
+++ /dev/null
@@ -1,13 +0,0 @@
-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/useElementSettings.js b/src/composables/useElementSettings.js
index a32e61c..162256a 100644
--- a/src/composables/useElementSettings.js
+++ b/src/composables/useElementSettings.js
@@ -236,30 +236,33 @@ export function useElementSettings({ margin, padding, basePopup }) {
}
};
- // --- 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;
+ // --- 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);
+ }
+ }
+ preToggleSnapshots.delete(key);
};
// --- Toggle actions ---
@@ -272,6 +275,7 @@ export function useElementSettings({ margin, padding, basePopup }) {
settingEnabled[group] = enabled;
isUpdatingFromStore = true;
if (enabled) {
+ savePreToggleSnapshot(group);
restoreFromCache(group);
applyAllEnabledGroups();
} else {
@@ -282,8 +286,7 @@ export function useElementSettings({ margin, padding, basePopup }) {
} else {
removeProps(settingGroups[group]);
}
- // Reset refs to defaults so displayedCss shows inherited values
- resetRefsToDefaults(group);
+ restorePreToggleSnapshot(group);
}
saveElementState();
nextTick(() => { isUpdatingFromStore = false; });
@@ -350,10 +353,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 (active CSS only, not commented)
+ // Check if the current selector has a CSS property in the store
const hasInCss = (cssProp) => {
if (!selector.value) return false;
- return !!stylesheetStore.extractValue(selector.value, cssProp, false);
+ return !!stylesheetStore.extractValue(selector.value, cssProp);
};
const displayedCss = computed(() => {
@@ -361,10 +364,9 @@ 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 && !groupEnabled) {
+ if (entry.special && isInlineElement.value && !settingEnabled[entry.group]) {
const tagDefaults = INLINE_DEFAULTS[currentTag.value];
const cssToDefaultKey = { 'color': 'color', 'font-family': 'fontFamily' };
const defaultKey = cssToDefaultKey[entry.css];
@@ -372,26 +374,18 @@ export function useElementSettings({ margin, padding, basePopup }) {
}
const val = entry.getValue();
if (val === null || val === undefined) continue;
-
- // 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 */';
- }
+ // 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];
}
+ const comment = isTextDefault ? ' /* valeur par défaut */' : '';
lines.push(` ${entry.css}: ${val};${comment}`);
}
for (const side of ['top', 'right', 'bottom', 'left']) {
@@ -408,7 +402,7 @@ export function useElementSettings({ margin, padding, basePopup }) {
});
const editableFullCss = computed(() => {
- return displayedCss.value.replace(/ \/\* (?:valeur par défaut|hérité de la page) \*\//g, '');
+ return displayedCss.value.replace(/ \/\* valeur par défaut \*\//g, '');
});
// --- CSS parsing & sync ---
diff --git a/src/composables/useIframeInteractions.js b/src/composables/useIframeInteractions.js
index 76ea3c7..630f08e 100644
--- a/src/composables/useIframeInteractions.js
+++ b/src/composables/useIframeInteractions.js
@@ -4,16 +4,12 @@ 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, cartePopup /*, pagePopup // DISABLED: page template styling feature */ }) {
+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);
- 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 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
// Text elements that can trigger ElementPopup (excluding containers, images, etc.)
@@ -123,35 +119,6 @@ export function useIframeInteractions({ elementPopup, imagePopup, cartePopup /*,
}
};
- // Create and position image label on hover
- const createImageLabel = (figure) => {
- const doc = figure.ownerDocument;
- const existing = doc.querySelector('.image-hover-label');
- if (existing) existing.remove();
-
- const uniqueClass = Array.from(figure.classList).find(cls => cls.startsWith('block-image--'));
- const labelText = uniqueClass ? `.${uniqueClass}` : figure.classList.contains('geoformat-cover-image') ? '.geoformat-cover-image' : null;
- if (!labelText) return;
-
- 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 = 'image-hover-label';
- label.textContent = labelText;
- label.style.top = `${rect.top + scrollTop - 32}px`;
- label.style.left = `${rect.left + scrollLeft}px`;
-
- doc.body.appendChild(label);
- };
-
- // Remove image label
- const removeImageLabel = (doc) => {
- const label = doc.querySelector('.image-hover-label');
- if (label) label.remove();
- };
-
/* DISABLED: page template styling feature
// Create and position page label on hover
const createPageLabel = (page) => {
@@ -186,55 +153,6 @@ export function useIframeInteractions({ elementPopup, imagePopup, cartePopup /*,
};
*/
- // Find closest image figure ancestor (block-image or geoformat-cover-image)
- const getImageFigure = (element) => {
- let current = element;
- while (current && current.tagName !== 'BODY') {
- if (current.tagName === 'FIGURE' &&
- (current.classList.contains('block-image') || current.classList.contains('geoformat-cover-image'))) {
- return current;
- }
- current = current.parentElement;
- }
- 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;
@@ -308,37 +226,9 @@ export function useIframeInteractions({ elementPopup, imagePopup, cartePopup /*,
}
*/
- // Check for block-image figure hover
- const imageFigure = getImageFigure(event.target);
- const doc = event.target.ownerDocument;
- if (imageFigure !== hoveredFigure.value) {
- if (hoveredFigure.value && hoveredFigure.value !== selectedFigure.value) {
- hoveredFigure.value.classList.remove('element-hovered');
- }
- removeImageLabel(doc);
- if (imageFigure && imageFigure !== selectedFigure.value) {
- imageFigure.classList.add('element-hovered');
- createImageLabel(imageFigure);
- }
- 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 || carteFigure) ? null : getContentElement(event.target);
+ const contentElement = getContentElement(event.target);
+ const doc = event.target.ownerDocument;
if (contentElement !== hoveredElement.value) {
// Remove highlight from previous element (only if not selected)
@@ -397,69 +287,15 @@ export function useIframeInteractions({ elementPopup, imagePopup, cartePopup /*,
const isInsidePage = element.closest('.pagedjs_page');
if (!isInsidePage) {
clearSelectedElement();
- if (elementPopup.value.visible) elementPopup.value.close();
- imagePopup.value?.close();
- cartePopup.value?.close();
+ elementPopup.value.close();
return;
}
- // Check if clicking a block-image figure
- const imageFigure = getImageFigure(element);
- if (imageFigure) {
- clearSelectedElement();
- if (elementPopup.value.visible) elementPopup.value.close();
- const doc = event.target.ownerDocument;
- removeElementLabel(doc);
- removeImageLabel(doc);
- if (imagePopup.value?.visible) {
- // Deselect current figure
- if (selectedFigure.value) {
- selectedFigure.value.classList.remove('element-selected');
- selectedFigure.value = null;
- }
- imagePopup.value.close();
- return;
- }
- // Select the figure
- imageFigure.classList.remove('element-hovered');
- imageFigure.classList.add('element-selected');
- hoveredFigure.value = null;
- selectedFigure.value = imageFigure;
- imagePopup.value?.handleImageClick(imageFigure, event);
- return;
- }
-
- // 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);
if (!contentElement) {
clearSelectedElement();
- if (elementPopup.value.visible) elementPopup.value.close();
+ elementPopup.value.close();
return;
}
@@ -506,20 +342,6 @@ export function useIframeInteractions({ elementPopup, imagePopup, cartePopup /*,
clearSelectedElement();
};
- const handleImagePopupClose = () => {
- if (selectedFigure.value) {
- selectedFigure.value.classList.remove('element-selected');
- selectedFigure.value = null;
- }
- };
-
- const handleCartePopupClose = () => {
- if (selectedCarte.value) {
- selectedCarte.value.classList.remove('element-selected');
- selectedCarte.value = null;
- }
- };
-
return {
// State
// hoveredPage, // DISABLED: page template styling feature
@@ -531,8 +353,6 @@ export function useIframeInteractions({ elementPopup, imagePopup, cartePopup /*,
handleIframeClick,
// handlePagePopupClose, // DISABLED: page template styling feature
handleElementPopupClose,
- handleImagePopupClose,
- handleCartePopupClose,
// Utilities
// clearSelectedPages, // DISABLED: page template styling feature
clearSelectedElement,
diff --git a/src/composables/useImageDefaults.js b/src/composables/useImageDefaults.js
deleted file mode 100644
index 6f0cf1f..0000000
--- a/src/composables/useImageDefaults.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { reactive } from 'vue';
-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,
-});
-
-export function useImageDefaults() {
- return defaults;
-}
diff --git a/src/composables/usePopupPosition.js b/src/composables/usePopupPosition.js
index e952521..c74e814 100644
--- a/src/composables/usePopupPosition.js
+++ b/src/composables/usePopupPosition.js
@@ -39,11 +39,11 @@ export function usePopupPosition(popupWidth, popupHeight) {
else {
x = cursorX - OFFSET - popupWidth;
y = cursorY - OFFSET - popupHeight;
- }
- // Final clamp — ensure popup is always fully visible
- x = Math.max(10, Math.min(viewportWidth - popupWidth - 10, x));
- y = Math.max(10, Math.min(viewportHeight - popupHeight - 10, y));
+ // Ensure it doesn't go off-screen
+ x = Math.max(10, x);
+ y = Math.max(10, y);
+ }
return { x, y };
};
diff --git a/src/stores/stylesheet.js b/src/stores/stylesheet.js
index 000436e..59082d1 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, CARTE_DEFAULTS, HEADING_DEFAULTS, INLINE_DEFAULTS, PARAGRAPH_CLASS_DEFAULTS } from '../utils/defaults';
+import { PAGE_DEFAULTS, TEXT_DEFAULTS, HEADING_DEFAULTS, INLINE_DEFAULTS, PARAGRAPH_CLASS_DEFAULTS } from '../utils/defaults';
export const useStylesheetStore = defineStore('stylesheet', () => {
// Base state
@@ -259,20 +259,6 @@ 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', 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');
-
// Inline element defaults (em, i, strong, b, a)
for (const [tag, props] of Object.entries(INLINE_DEFAULTS)) {
if (props.fontStyle) set(tag, 'font-style', props.fontStyle);
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index daa3a47..93ab952 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -126,16 +126,6 @@ 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 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' }),