diff --git a/src/__tests__/__snapshots__/medium-zoom.test.js.snap b/src/__tests__/__snapshots__/medium-zoom.test.js.snap index c815a4e..0c75744 100644 --- a/src/__tests__/__snapshots__/medium-zoom.test.js.snap +++ b/src/__tests__/__snapshots__/medium-zoom.test.js.snap @@ -306,6 +306,30 @@ exports[`open() open() twice does not zoom twice 1`] = ` `; +exports[`open() open() with \`\` renders correctly 1`] = ` + + + + + +
+ + +`; + exports[`open() open() with \`data-zoom-src\` renders correctly 1`] = ` { expect(root).toMatchSnapshot() }) + test('open() with `` renders correctly', async () => { + expect.assertions(6) + + // + const picture = document.createElement('picture') + // | + const source = document.createElement('source') + source.srcset = `image-300x200.jpg 300w` + picture.appendChild(source) + // | + const img = document.createElement('img') + jest + .spyOn(img, 'currentSrc', 'get') + .mockReturnValue('http://localhost/mock-src.png') + picture.appendChild(img) + // + root.appendChild(picture) + + const zoom = mediumZoom('img') + await zoom.open() + jest.runAllTimers() + + expect([...img.classList]).toEqual([ + 'medium-zoom-image', + 'medium-zoom-image--hidden', + ]) + expect(document.querySelector('.medium-zoom-image--opened')).toBeTruthy() + expect(document.querySelector('.medium-zoom-image--opened').src).toEqual( + img.currentSrc + ) + expect(document.querySelector('.medium-zoom-overlay')).toBeTruthy() + expect(document.querySelector('.medium-zoom--opened')).toBeTruthy() + expect(root).toMatchSnapshot() + }) + test('mediumZoom({ background }).open() renders correctly', async () => { expect.assertions(1) diff --git a/src/medium-zoom.js b/src/medium-zoom.js index 6a4afb5..531565f 100644 --- a/src/medium-zoom.js +++ b/src/medium-zoom.js @@ -244,8 +244,10 @@ const mediumZoom = (selector, options = {}) => { : zoomTarget.naturalHeight || viewportHeight const { top, left, width, height } = zoomTarget.getBoundingClientRect() - const scaleX = Math.min(Math.max(width, naturalWidth), viewportWidth) / width - const scaleY = Math.min(Math.max(height, naturalHeight), viewportHeight) / height + const scaleX = + Math.min(Math.max(width, naturalWidth), viewportWidth) / width + const scaleY = + Math.min(Math.max(height, naturalHeight), viewportHeight) / height const scale = Math.min(scaleX, scaleY) const translateX = (-left + @@ -328,6 +330,17 @@ const mediumZoom = (selector, options = {}) => { document.body.appendChild(active.template) } + // If the selected tag is inside a tag, set the + // currently-applied source as the cloned `src=` attribute. + // (as these might differ, or src= might be unset in some cases) + if ( + active.original.parentElement && + active.original.parentElement.tagName === 'PICTURE' && + active.original.currentSrc + ) { + active.zoomed.src = active.original.currentSrc + } + document.body.appendChild(active.zoomed) window.requestAnimationFrame(() => { diff --git a/stories/attributes.stories.js b/stories/attributes.stories.js index e5efa6a..28714b0 100644 --- a/stories/attributes.stories.js +++ b/stories/attributes.stories.js @@ -83,3 +83,41 @@ Zoom on an image having \`srcset\` attributes. `, } ) + .add( + ' tag', + () => ` + + + + + + + `, + { + notes: ` + Zoom on an image inside a <picture> tag. + The cloned image mirrors the picture structure and resizes the same as a usual image tag. + `, + } + ) + .add( + ' tag and data-zoom-src', + () => ` + + + + + + + `, + { + notes: ` + Zoom on an image inside a <picture> tag. + The cloned image mirrors the picture structure and resizes the same as a usual image tag, which then uses the data-zoom-src value once loaded. + `, + } + )