diff --git a/ghost/admin/app/components/gh-unsplash-photo.js b/ghost/admin/app/components/gh-unsplash-photo.js index 122ccf4cdcb..ffd6b634f39 100644 --- a/ghost/admin/app/components/gh-unsplash-photo.js +++ b/ghost/admin/app/components/gh-unsplash-photo.js @@ -7,6 +7,13 @@ export default class GhUnsplashPhoto extends Component { @tracked height = 0; @tracked width = 1200; + // Overlay button selectors for touch device handling + static OVERLAY_BUTTON_SELECTORS = [ + '.gh-unsplash-button-likes', + '.gh-unsplash-button-download', + '.gh-unsplash-photo-author' + ]; + get style() { return htmlSafe(this.args.zoomed ? 'width: auto; margin: 0;' : ''); } @@ -51,6 +58,20 @@ export default class GhUnsplashPhoto extends Component { @action zoom(event) { const {target} = event; + const isOverlayButtonClick = GhUnsplashPhoto.OVERLAY_BUTTON_SELECTORS.some(selector => target.closest(selector)); + const isMobileViewport = window.matchMedia('(max-width: 540px)').matches; + const isTouchDevice = window.matchMedia('(pointer: coarse)').matches; + const shouldNotZoom = isMobileViewport || isTouchDevice; + + if (shouldNotZoom && isOverlayButtonClick) { + return; + } + + if (shouldNotZoom) { + event.stopPropagation(); + event.preventDefault(); + return; + } // only zoom when it wasn't one of the child links clicked if (!target.matches('a') && target.closest('a').classList.contains('gh-unsplash-photo')) { diff --git a/ghost/admin/app/styles/components/unsplash.css b/ghost/admin/app/styles/components/unsplash.css index 407844c1171..0bd36d70e26 100644 --- a/ghost/admin/app/styles/components/unsplash.css +++ b/ghost/admin/app/styles/components/unsplash.css @@ -131,6 +131,12 @@ cursor: zoom-in; } +@media (max-width: 540px) { + .gh-unsplash-photo { + cursor: default; + } +} + .gh-unsplash-photo-container > img { position: absolute; display: block;