@@ -70,6 +71,7 @@
import { inject } from 'vue';
import PageSettings from './PageSettings.vue';
import TextSettings from './TextSettings.vue';
+import ImageSettings from './ImageSettings.vue';
import StylesheetViewer from '../StylesheetViewer.vue';
const activeTab = inject('activeTab');
diff --git a/src/components/editor/ImageSettings.vue b/src/components/editor/ImageSettings.vue
new file mode 100644
index 0000000..3db7b16
--- /dev/null
+++ b/src/components/editor/ImageSettings.vue
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+
diff --git a/src/components/ui/BasePopup.vue b/src/components/ui/BasePopup.vue
index da3c09b..6e2710c 100644
--- a/src/components/ui/BasePopup.vue
+++ b/src/components/ui/BasePopup.vue
@@ -3,6 +3,7 @@
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
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -100,6 +101,7 @@ 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/useIframeInteractions.js b/src/composables/useIframeInteractions.js
index 630f08e..d216309 100644
--- a/src/composables/useIframeInteractions.js
+++ b/src/composables/useIframeInteractions.js
@@ -4,12 +4,14 @@ 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 */ }) {
+export function useIframeInteractions({ elementPopup, imagePopup /*, 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 EDGE_THRESHOLD = 30; // px from edge to trigger hover // DISABLED: page template styling feature
// Text elements that can trigger ElementPopup (excluding containers, images, etc.)
@@ -119,6 +121,34 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
}
};
+ // 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--'));
+ if (!uniqueClass) 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 = `.${uniqueClass}`;
+ 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) => {
@@ -153,6 +183,18 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
};
*/
+ // Find closest block-image figure ancestor (including self)
+ const getImageFigure = (element) => {
+ let current = element;
+ while (current && current.tagName !== 'BODY') {
+ if (current.tagName === 'FIGURE' && current.classList.contains('block-image')) {
+ return current;
+ }
+ current = current.parentElement;
+ }
+ return null;
+ };
+
// Check if element is a content element (or find closest content parent)
const getContentElement = (element) => {
let current = element;
@@ -226,9 +268,23 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
}
*/
- // Check for content element hover
- const contentElement = getContentElement(event.target);
+ // 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 content element hover
+ const contentElement = imageFigure ? null : getContentElement(event.target);
if (contentElement !== hoveredElement.value) {
// Remove highlight from previous element (only if not selected)
@@ -287,15 +343,45 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
const isInsidePage = element.closest('.pagedjs_page');
if (!isInsidePage) {
clearSelectedElement();
- elementPopup.value.close();
+ if (elementPopup.value.visible) elementPopup.value.close();
+ imagePopup.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;
+ }
+
+ // Close image popup if open when clicking a text element
+ imagePopup.value?.close();
+
// Only show ElementPopup for content elements, not divs
const contentElement = getContentElement(element);
if (!contentElement) {
clearSelectedElement();
- elementPopup.value.close();
+ if (elementPopup.value.visible) elementPopup.value.close();
return;
}
@@ -342,6 +428,13 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
clearSelectedElement();
};
+ const handleImagePopupClose = () => {
+ if (selectedFigure.value) {
+ selectedFigure.value.classList.remove('element-selected');
+ selectedFigure.value = null;
+ }
+ };
+
return {
// State
// hoveredPage, // DISABLED: page template styling feature
@@ -353,6 +446,7 @@ export function useIframeInteractions({ elementPopup /*, pagePopup // DISABLED:
handleIframeClick,
// handlePagePopupClose, // DISABLED: page template styling feature
handleElementPopupClose,
+ handleImagePopupClose,
// Utilities
// clearSelectedPages, // DISABLED: page template styling feature
clearSelectedElement,
diff --git a/src/composables/useImageDefaults.js b/src/composables/useImageDefaults.js
new file mode 100644
index 0000000..175d90c
--- /dev/null
+++ b/src/composables/useImageDefaults.js
@@ -0,0 +1,12 @@
+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 },
+ _initialized: false,
+});
+
+export function useImageDefaults() {
+ return defaults;
+}
diff --git a/src/composables/usePopupPosition.js b/src/composables/usePopupPosition.js
index c74e814..e952521 100644
--- a/src/composables/usePopupPosition.js
+++ b/src/composables/usePopupPosition.js
@@ -39,12 +39,12 @@ export function usePopupPosition(popupWidth, popupHeight) {
else {
x = cursorX - OFFSET - popupWidth;
y = cursorY - OFFSET - popupHeight;
-
- // Ensure it doesn't go off-screen
- x = Math.max(10, x);
- y = Math.max(10, y);
}
+ // 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));
+
return { x, y };
};
diff --git a/src/stores/stylesheet.js b/src/stores/stylesheet.js
index 59082d1..9425073 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, HEADING_DEFAULTS, INLINE_DEFAULTS, PARAGRAPH_CLASS_DEFAULTS } from '../utils/defaults';
+import { PAGE_DEFAULTS, TEXT_DEFAULTS, IMAGE_DEFAULTS, HEADING_DEFAULTS, INLINE_DEFAULTS, PARAGRAPH_CLASS_DEFAULTS } from '../utils/defaults';
export const useStylesheetStore = defineStore('stylesheet', () => {
// Base state
@@ -259,6 +259,9 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
}
}
+ // Image defaults
+ set('.block-image', 'width', IMAGE_DEFAULTS.width.value, IMAGE_DEFAULTS.width.unit);
+
// 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 93ab952..07f6c2b 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -126,6 +126,10 @@ export const PARAGRAPH_CLASS_DEFAULTS = Object.freeze({
}),
});
+export const IMAGE_DEFAULTS = Object.freeze({
+ width: Object.freeze({ value: 100, unit: '%' }),
+});
+
export const INLINE_DEFAULTS = Object.freeze({
em: Object.freeze({ fontStyle: 'italic' }),
i: Object.freeze({ fontStyle: 'italic' }),