Skip to content

fix: ue image update handling #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mhaack merged 5 commits into from
Mar 2, 2026
Merged

fix: ue image update handling #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ca6b21b
fix: image is broken
mhaack Feb 27, 2026
f0b3bd4
fix: next try
mhaack Feb 27, 2026
15557ac
fix: picture srcset handling
mhaack Mar 2, 2026
d9d4880
fix: add eventlistener to body tag
mhaack Mar 2, 2026
ba8b787
fix: rework
mhaack Mar 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions component-definition.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@
"name": "image",
"type": "image",
"fields": [
{
"name": "image",
"selector": "img[src]"
},
{
"name": "imageAlt",
"selector": "img[alt]"
Expand Down
4 changes: 4 additions & 0 deletions ue/models/image.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
"name": "image",
"type": "image",
"fields": [
{
"name": "image",
"selector": "img[src]"
},
{
"name": "imageAlt",
"selector": "img[alt]"
Expand Down
23 changes: 11 additions & 12 deletions ue/scripts/ue.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,21 +86,20 @@ const setupObservers = () => {
};

const setupUEEventHandlers = () => {
// For each img source change, update the srcsets of the parent picture sources
document.addEventListener('aue:content-patch', (event) => {
if (event.detail.patch.name.match(/img.*\[src\]/)) {
const newImgSrc = event.detail.patch.value;
const picture = event.srcElement.querySelector('picture');
// For each picture or img element change, update the srcsets of the picture element sources
document.body.addEventListener('aue:content-patch', ({ detail: { patch, request } }) => {
if (!/image/.test(patch.name)) return;

@maximilianvoss maximilianvoss Mar 2, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

didn't we say that we move this to check of the data-aue-type as it is done in the cors.js?
What if someone is silly naming any text input field image?

@mhaack mhaack Mar 2, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, wanted to keep it simpler :-)

Actually we can remove that line and it should still work. A we check for media type 3 lines below.


if (picture) {
picture.querySelectorAll('source').forEach((source) => {
source.setAttribute('srcset', newImgSrc);
});
}
}
let element = document.querySelector(`[data-aue-resource="${request.target.resource}"]`);
if (element && element.getAttribute('data-aue-prop') !== patch.name) element = element.querySelector(`[data-aue-prop='${patch.name}']`);
if (element?.getAttribute('data-aue-type') !== 'media') return;

(element.tagName === 'IMG' ? element.closest('picture') : element)
?.querySelectorAll('source')

@maximilianvoss maximilianvoss Mar 2, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we just search for all elements having srcset attribute set (so it would also include img tags) and remove them?

@mhaack mhaack Mar 2, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But source tags we would have to remove, while img srcset would would only need to remove the attribute. Will create a new PR for that.

.forEach((source) => source.setAttribute('srcset', patch.value));
});

document.addEventListener('aue:ui-select', (event) => {
document.body.addEventListener('aue:ui-select', (event) => {
const { detail } = event;
const resource = detail?.resource;

Expand Down
Loading