diff --git a/component-definition.json b/component-definition.json index c3edc9f4..62bdbcae 100644 --- a/component-definition.json +++ b/component-definition.json @@ -24,6 +24,10 @@ "name": "image", "type": "image", "fields": [ + { + "name": "image", + "selector": "img[src]" + }, { "name": "imageAlt", "selector": "img[alt]" diff --git a/ue/models/image.json b/ue/models/image.json index 3fd046f9..47dfa935 100644 --- a/ue/models/image.json +++ b/ue/models/image.json @@ -9,6 +9,10 @@ "name": "image", "type": "image", "fields": [ + { + "name": "image", + "selector": "img[src]" + }, { "name": "imageAlt", "selector": "img[alt]" diff --git a/ue/scripts/ue.js b/ue/scripts/ue.js index 8df75247..7a55523c 100644 --- a/ue/scripts/ue.js +++ b/ue/scripts/ue.js @@ -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; - 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') + .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;