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

add geoformat image
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 23s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-03-23 11:25:53 +01:00
parent 75e7f375b3
commit 2eaf9aab7e
6 changed files with 27 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

6
public/assets/css/pagedjs-interface.css
View file

@ -192,12 +192,14 @@
font-family: sans-serif; font-family: sans-serif;
} }
.block-image.element-hovered { .block-image.element-hovered,
.geoformat-cover-image.element-hovered {
outline: 2px solid #0d996050 !important; outline: 2px solid #0d996050 !important;
cursor: pointer !important; cursor: pointer !important;
} }
.block-image.element-selected { .block-image.element-selected,
.geoformat-cover-image.element-selected {
outline: 2px dashed #0d9960 !important; outline: 2px dashed #0d9960 !important;
} }

7
src/components/ImagePopup.vue
View file

@ -193,10 +193,13 @@ const saveState = () => {
const handleImageClick = (figure, event) => { const handleImageClick = (figure, event) => {
const uniqueClass = Array.from(figure.classList).find(cls => cls.startsWith('block-image--')); const uniqueClass = Array.from(figure.classList).find(cls => cls.startsWith('block-image--'));
if (!uniqueClass) return; const sel = uniqueClass
? `.${uniqueClass}`
: figure.classList.contains('geoformat-cover-image') ? '.geoformat-cover-image' : null;
if (!sel) return;
isUpdatingFromStore = true; isUpdatingFromStore = true;
selector.value = `.${uniqueClass}`; selector.value = sel;
const stored = elementStates.get(selector.value); const stored = elementStates.get(selector.value);
if (stored) { if (stored) {

12
src/components/PagedJsWrapper.vue
View file

@ -33,7 +33,9 @@
class="geoformat" class="geoformat"
:data-page-type="item.template" :data-page-type="item.template"
> >
<img v-if="item.cover" :src="item.cover" class="cover-image" alt="" /> <figure v-if="item.cover" class="geoformat-cover-image">
<img :src="item.cover" alt="" />
</figure>
<h2>{{ item.title }}</h2> <h2>{{ item.title }}</h2>
<p v-if="item.subtitle" class="subtitle">{{ item.subtitle }}</p> <p v-if="item.subtitle" class="subtitle">{{ item.subtitle }}</p>
<div v-if="item.tags && item.tags.length" class="tags"> <div v-if="item.tags && item.tags.length" class="tags">
@ -157,11 +159,17 @@ const getBlockComponent = (type) => {
} }
.narrative-cover .cover-image, .narrative-cover .cover-image,
.geoformat .cover-image { .geoformat .geoformat-cover-image {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
.geoformat .geoformat-cover-image img {
max-width: 100%;
height: auto;
display: block;
}
.narrative-cover h1 { .narrative-cover h1 {
margin-top: 1rem; margin-top: 1rem;
} }

1
src/components/editor/ImageSettings.vue
View file

@ -54,6 +54,7 @@ watch(width, (val) => {
imageDefaults.width = { value: val.value, unit: val.unit }; imageDefaults.width = { value: val.value, unit: val.unit };
debouncedUpdate(() => { debouncedUpdate(() => {
updateStyle('.block-image', 'width', `${val.value}${val.unit}`); updateStyle('.block-image', 'width', `${val.value}${val.unit}`);
updateStyle('.geoformat-cover-image', 'width', `${val.value}${val.unit}`);
}); });
}, { deep: true, immediate: true }); }, { deep: true, immediate: true });

10
src/composables/useIframeInteractions.js
View file

@ -128,7 +128,8 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup /
if (existing) existing.remove(); if (existing) existing.remove();
const uniqueClass = Array.from(figure.classList).find(cls => cls.startsWith('block-image--')); const uniqueClass = Array.from(figure.classList).find(cls => cls.startsWith('block-image--'));
if (!uniqueClass) return; const labelText = uniqueClass ? `.${uniqueClass}` : figure.classList.contains('geoformat-cover-image') ? '.geoformat-cover-image' : null;
if (!labelText) return;
const rect = figure.getBoundingClientRect(); const rect = figure.getBoundingClientRect();
const scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop; const scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
@ -136,7 +137,7 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup /
const label = doc.createElement('div'); const label = doc.createElement('div');
label.className = 'image-hover-label'; label.className = 'image-hover-label';
label.textContent = `.${uniqueClass}`; label.textContent = labelText;
label.style.top = `${rect.top + scrollTop - 32}px`; label.style.top = `${rect.top + scrollTop - 32}px`;
label.style.left = `${rect.left + scrollLeft}px`; label.style.left = `${rect.left + scrollLeft}px`;
@ -183,11 +184,12 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup /
}; };
*/ */
// Find closest block-image figure ancestor (including self) // Find closest image figure ancestor (block-image or geoformat-cover-image)
const getImageFigure = (element) => { const getImageFigure = (element) => {
let current = element; let current = element;
while (current && current.tagName !== 'BODY') { while (current && current.tagName !== 'BODY') {
if (current.tagName === 'FIGURE' && current.classList.contains('block-image')) { if (current.tagName === 'FIGURE' &&
(current.classList.contains('block-image') || current.classList.contains('geoformat-cover-image'))) {
return current; return current;
} }
current = current.parentElement; current = current.parentElement;

1
src/stores/stylesheet.js
View file

@ -261,6 +261,7 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
// Image defaults // Image defaults
set('.block-image', 'width', IMAGE_DEFAULTS.width.value, IMAGE_DEFAULTS.width.unit); set('.block-image', 'width', IMAGE_DEFAULTS.width.value, IMAGE_DEFAULTS.width.unit);
set('.geoformat-cover-image', 'width', IMAGE_DEFAULTS.width.value, IMAGE_DEFAULTS.width.unit);
// Inline element defaults (em, i, strong, b, a) // Inline element defaults (em, i, strong, b, a)
for (const [tag, props] of Object.entries(INLINE_DEFAULTS)) { for (const [tag, props] of Object.entries(INLINE_DEFAULTS)) {