diff options
Diffstat (limited to 'wp-includes/blocks/image/view.js')
| -rw-r--r-- | wp-includes/blocks/image/view.js | 849 |
1 files changed, 369 insertions, 480 deletions
diff --git a/wp-includes/blocks/image/view.js b/wp-includes/blocks/image/view.js index 4d022ef..88b4815 100644 --- a/wp-includes/blocks/image/view.js +++ b/wp-includes/blocks/image/view.js @@ -1,533 +1,422 @@ -"use strict"; -(self["__WordPressPrivateInteractivityAPI__"] = self["__WordPressPrivateInteractivityAPI__"] || []).push([[354],{ +import * as __WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__ from "@wordpress/interactivity"; +/******/ // The require scope +/******/ var __webpack_require__ = {}; +/******/ +/************************************************************************/ +/******/ /* webpack/runtime/define property getters */ +/******/ (() => { +/******/ // define getter functions for harmony exports +/******/ __webpack_require__.d = (exports, definition) => { +/******/ for(var key in definition) { +/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { +/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); +/******/ } +/******/ } +/******/ }; +/******/ })(); +/******/ +/******/ /* webpack/runtime/hasOwnProperty shorthand */ +/******/ (() => { +/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) +/******/ })(); +/******/ +/************************************************************************/ +var __webpack_exports__ = {}; -/***/ 699: -/***/ (function(__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) { - -/* harmony import */ var _wordpress_interactivity__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(754); +;// CONCATENATED MODULE: external "@wordpress/interactivity" +var x = (y) => { + var x = {}; __webpack_require__.d(x, y); return x +} +var y = (x) => (() => (x)) +const interactivity_namespaceObject = x({ ["getContext"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.getContext), ["getElement"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.getElement), ["store"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.store) }); +;// CONCATENATED MODULE: ./node_modules/@wordpress/block-library/build-module/image/view.js /** * WordPress dependencies */ -const focusableSelectors = ['a[href]', 'area[href]', 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])', 'select:not([disabled]):not([aria-hidden])', 'textarea:not([disabled]):not([aria-hidden])', 'button:not([disabled]):not([aria-hidden])', 'iframe', 'object', 'embed', '[contenteditable]', '[tabindex]:not([tabindex^="-"])']; - -/* - * Stores a context-bound scroll handler. - * - * This callback could be defined inline inside of the store - * object but it's created externally to avoid confusion about - * how its logic is called. This logic is not referenced directly - * by the directives in the markup because the scroll event we - * need to listen to is triggered on the window; so by defining it - * outside of the store, we signal that the behavior here is different. - * If we find a compelling reason to move it to the store, feel free. - * - * @type {Function} - */ -let scrollCallback; -/* - * Tracks whether user is touching screen; used to - * differentiate behavior for touch and mouse input. +/** + * Tracks whether user is touching screen; used to differentiate behavior for + * touch and mouse input. * * @type {boolean} */ let isTouching = false; -/* - * Tracks the last time the screen was touched; used to - * differentiate behavior for touch and mouse input. +/** + * Tracks the last time the screen was touched; used to differentiate behavior + * for touch and mouse input. * * @type {number} */ let lastTouchTime = 0; -/* - * Lightbox page-scroll handler: prevents scrolling. - * - * This handler is added to prevent scrolling behaviors that - * trigger content shift while the lightbox is open. +/** + * Stores the image reference of the currently opened lightbox. * - * It would be better to accomplish this through CSS alone, but - * using overflow: hidden is currently the only way to do so, and - * that causes the layout to shift and prevents the zoom animation - * from working in some cases because we're unable to account for - * the layout shift when doing the animation calculations. Instead, - * here we use JavaScript to prevent and reset the scrolling - * behavior. In the future, we may be able to use CSS or overflow: hidden - * instead to not rely on JavaScript, but this seems to be the best approach - * for now that provides the best visual experience. + * @type {HTMLElement} + */ +let imageRef; + +/** + * Stores the button reference of the currently opened lightbox. * - * @param {Object} context Interactivity page context? + * @type {HTMLElement} */ -function handleScroll(context) { - // We can't override the scroll behavior on mobile devices - // because doing so breaks the pinch to zoom functionality, and we - // want to allow users to zoom in further on the high-res image. - if (!isTouching && Date.now() - lastTouchTime > 450) { - // We are unable to use event.preventDefault() to prevent scrolling - // because the scroll event can't be canceled, so we reset the position instead. - window.scrollTo(context.core.image.scrollLeftReset, context.core.image.scrollTopReset); - } -} -(0,_wordpress_interactivity__WEBPACK_IMPORTED_MODULE_0__/* .store */ .h)({ +let buttonRef; +const { + state, + actions, + callbacks +} = (0,interactivity_namespaceObject.store)('core/image', { state: { - core: { - image: { - windowWidth: window.innerWidth, - windowHeight: window.innerHeight - } + currentImage: {}, + get overlayOpened() { + return state.currentImage.currentSrc; + }, + get roleAttribute() { + return state.overlayOpened ? 'dialog' : null; + }, + get ariaModal() { + return state.overlayOpened ? 'true' : null; + }, + get enlargedSrc() { + return state.currentImage.uploadedSrc || 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='; + }, + get imgStyles() { + return state.overlayOpened && `${state.currentImage.imgStyles?.replace(/;$/, '')}; object-fit:cover;`; } }, actions: { - core: { - image: { - showLightbox: ({ - context, - event - }) => { - // We can't initialize the lightbox until the reference - // image is loaded, otherwise the UX is broken. - if (!context.core.image.imageLoaded) { - return; - } - context.core.image.initialized = true; - context.core.image.lastFocusedElement = window.document.activeElement; - context.core.image.scrollDelta = 0; - context.core.image.pointerType = event.pointerType; - context.core.image.lightboxEnabled = true; - setStyles(context, context.core.image.imageRef); - context.core.image.scrollTopReset = window.pageYOffset || document.documentElement.scrollTop; + showLightbox() { + const ctx = (0,interactivity_namespaceObject.getContext)(); + + // Bails out if the image has not loaded yet. + if (!ctx.imageRef?.complete) { + return; + } - // In most cases, this value will be 0, but this is included - // in case a user has created a page with horizontal scrolling. - context.core.image.scrollLeftReset = window.pageXOffset || document.documentElement.scrollLeft; + // Stores the positons of the scroll to fix it until the overlay is + // closed. + state.scrollTopReset = document.documentElement.scrollTop; + state.scrollLeftReset = document.documentElement.scrollLeft; - // We define and bind the scroll callback here so - // that we can pass the context and as an argument. - // We may be able to change this in the future if we - // define the scroll callback in the store instead, but - // this approach seems to tbe clearest for now. - scrollCallback = handleScroll.bind(null, context); + // Moves the information of the expaned image to the state. + ctx.currentSrc = ctx.imageRef.currentSrc; + imageRef = ctx.imageRef; + buttonRef = ctx.buttonRef; + state.currentImage = ctx; + state.overlayEnabled = true; - // We need to add a scroll event listener to the window - // here because we are unable to otherwise access it via - // the Interactivity API directives. If we add a native way - // to access the window, we can remove this. - window.addEventListener('scroll', scrollCallback, false); - }, - hideLightbox: async ({ - context - }) => { - context.core.image.hideAnimationEnabled = true; - if (context.core.image.lightboxEnabled) { - // We want to wait until the close animation is completed - // before allowing a user to scroll again. The duration of this - // animation is defined in the styles.scss and depends on if the - // animation is 'zoom' or 'fade', but in any case we should wait - // a few milliseconds longer than the duration, otherwise a user - // may scroll too soon and cause the animation to look sloppy. - setTimeout(function () { - window.removeEventListener('scroll', scrollCallback); - // If we don't delay before changing the focus, - // the focus ring will appear on Firefox before - // the image has finished animating, which looks broken. - context.core.image.lightboxTriggerRef.focus({ - preventScroll: true - }); - }, 450); - context.core.image.lightboxEnabled = false; - } - }, - handleKeydown: ({ - context, - actions, - event - }) => { - if (context.core.image.lightboxEnabled) { - if (event.key === 'Tab' || event.keyCode === 9) { - // If shift + tab it change the direction - if (event.shiftKey && window.document.activeElement === context.core.image.firstFocusableElement) { - event.preventDefault(); - context.core.image.lastFocusableElement.focus(); - } else if (!event.shiftKey && window.document.activeElement === context.core.image.lastFocusableElement) { - event.preventDefault(); - context.core.image.firstFocusableElement.focus(); - } - } - if (event.key === 'Escape' || event.keyCode === 27) { - actions.core.image.hideLightbox({ - context, - event - }); - } - } - }, - // This is fired just by lazily loaded - // images on the page, not all images. - handleLoad: ({ - context, - effects, - ref - }) => { - context.core.image.imageLoaded = true; - context.core.image.imageCurrentSrc = ref.currentSrc; - effects.core.image.setButtonStyles({ - context, - ref + // Computes the styles of the overlay for the animation. + callbacks.setOverlayStyles(); + }, + hideLightbox() { + if (state.overlayEnabled) { + // Waits until the close animation has completed before allowing a + // user to scroll again. The duration of this animation is defined in + // the `styles.scss` file, but in any case we should wait a few + // milliseconds longer than the duration, otherwise a user may scroll + // too soon and cause the animation to look sloppy. + setTimeout(function () { + // Delays before changing the focus. Otherwise the focus ring will + // appear on Firefox before the image has finished animating, which + // looks broken. + buttonRef.focus({ + preventScroll: true }); - }, - handleTouchStart: () => { - isTouching = true; - }, - handleTouchMove: ({ - context, - event - }) => { - // On mobile devices, we want to prevent triggering the - // scroll event because otherwise the page jumps around as - // we reset the scroll position. This also means that closing - // the lightbox requires that a user perform a simple tap. This - // may be changed in the future if we find a better alternative - // to override or reset the scroll position during swipe actions. - if (context.core.image.lightboxEnabled) { - event.preventDefault(); - } - }, - handleTouchEnd: () => { - // We need to wait a few milliseconds before resetting - // to ensure that pinch to zoom works consistently - // on mobile devices when the lightbox is open. - lastTouchTime = Date.now(); - isTouching = false; + + // Resets the current image to mark the overlay as closed. + state.currentImage = {}; + imageRef = null; + buttonRef = null; + }, 450); + + // Starts the overlay closing animation. The showClosingAnimation + // class is used to avoid showing it on page load. + state.showClosingAnimation = true; + state.overlayEnabled = false; + } + }, + handleKeydown(event) { + if (state.overlayEnabled) { + // Focuses the close button when the user presses the tab key. + if (event.key === 'Tab') { + event.preventDefault(); + const { + ref + } = (0,interactivity_namespaceObject.getElement)(); + ref.querySelector('button').focus(); + } + // Closes the lightbox when the user presses the escape key. + if (event.key === 'Escape') { + actions.hideLightbox(); } } - } - }, - selectors: { - core: { - image: { - roleAttribute: ({ - context - }) => { - return context.core.image.lightboxEnabled ? 'dialog' : null; - }, - ariaModal: ({ - context - }) => { - return context.core.image.lightboxEnabled ? 'true' : null; - }, - dialogLabel: ({ - context - }) => { - return context.core.image.lightboxEnabled ? context.core.image.dialogLabel : null; - }, - lightboxObjectFit: ({ - context - }) => { - if (context.core.image.initialized) { - return 'cover'; - } - }, - enlargedImgSrc: ({ - context - }) => { - return context.core.image.initialized ? context.core.image.imageUploadedSrc : 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='; + }, + handleTouchMove(event) { + // On mobile devices, prevents triggering the scroll event because + // otherwise the page jumps around when it resets the scroll position. + // This also means that closing the lightbox requires that a user + // perform a simple tap. This may be changed in the future if there is a + // better alternative to override or reset the scroll position during + // swipe actions. + if (state.overlayEnabled) { + event.preventDefault(); + } + }, + handleTouchStart() { + isTouching = true; + }, + handleTouchEnd() { + // Waits a few milliseconds before resetting to ensure that pinch to + // zoom works consistently on mobile devices when the lightbox is open. + lastTouchTime = Date.now(); + isTouching = false; + }, + handleScroll() { + // Prevents scrolling behaviors that trigger content shift while the + // lightbox is open. It would be better to accomplish through CSS alone, + // but using overflow: hidden is currently the only way to do so and + // that causes a layout to shift and prevents the zoom animation from + // working in some cases because it's not possible to account for the + // layout shift when doing the animation calculations. Instead, it uses + // JavaScript to prevent and reset the scrolling behavior. + if (state.overlayOpened) { + // Avoids overriding the scroll behavior on mobile devices because + // doing so breaks the pinch to zoom functionality, and users should + // be able to zoom in further on the high-res image. + if (!isTouching && Date.now() - lastTouchTime > 450) { + // It doesn't rely on `event.preventDefault()` to prevent scrolling + // because the scroll event can't be canceled, so it resets the + // position instead. + window.scrollTo(state.scrollLeftReset, state.scrollTopReset); } } } }, - effects: { - core: { - image: { - initOriginImage: ({ - context, - ref - }) => { - context.core.image.imageRef = ref; - context.core.image.lightboxTriggerRef = ref.parentElement.querySelector('.lightbox-trigger'); - if (ref.complete) { - context.core.image.imageLoaded = true; - context.core.image.imageCurrentSrc = ref.currentSrc; - } - }, - initLightbox: async ({ - context, - ref - }) => { - if (context.core.image.lightboxEnabled) { - const focusableElements = ref.querySelectorAll(focusableSelectors); - context.core.image.firstFocusableElement = focusableElements[0]; - context.core.image.lastFocusableElement = focusableElements[focusableElements.length - 1]; + callbacks: { + setOverlayStyles() { + if (!imageRef) return; + let { + naturalWidth, + naturalHeight, + offsetWidth: originalWidth, + offsetHeight: originalHeight + } = imageRef; + let { + x: screenPosX, + y: screenPosY + } = imageRef.getBoundingClientRect(); - // Move focus to the dialog when opening it. - ref.focus(); - } - }, - setButtonStyles: ({ - context, - ref - }) => { - const { - naturalWidth, - naturalHeight, - offsetWidth, - offsetHeight - } = ref; + // Natural ratio of the image clicked to open the lightbox. + const naturalRatio = naturalWidth / naturalHeight; + // Original ratio of the image clicked to open the lightbox. + let originalRatio = originalWidth / originalHeight; - // If the image isn't loaded yet, we can't - // calculate where the button should be. - if (naturalWidth === 0 || naturalHeight === 0) { - return; - } - const figure = ref.parentElement; - const figureWidth = ref.parentElement.clientWidth; + // If it has object-fit: contain, recalculates the original sizes + // and the screen position without the blank spaces. + if (state.currentImage.scaleAttr === 'contain') { + if (naturalRatio > originalRatio) { + const heightWithoutSpace = originalWidth / naturalRatio; + // Recalculates screen position without the top space. + screenPosY += (originalHeight - heightWithoutSpace) / 2; + originalHeight = heightWithoutSpace; + } else { + const widthWithoutSpace = originalHeight * naturalRatio; + // Recalculates screen position without the left space. + screenPosX += (originalWidth - widthWithoutSpace) / 2; + originalWidth = widthWithoutSpace; + } + } + originalRatio = originalWidth / originalHeight; - // We need special handling for the height because - // a caption will cause the figure to be taller than - // the image, which means we need to account for that - // when calculating the placement of the button in the - // top right corner of the image. - let figureHeight = ref.parentElement.clientHeight; - const caption = figure.querySelector('figcaption'); - if (caption) { - const captionComputedStyle = window.getComputedStyle(caption); - figureHeight = figureHeight - caption.offsetHeight - parseFloat(captionComputedStyle.marginTop) - parseFloat(captionComputedStyle.marginBottom); - } - const buttonOffsetTop = figureHeight - offsetHeight; - const buttonOffsetRight = figureWidth - offsetWidth; + // Typically, it uses the image's full-sized dimensions. If those + // dimensions have not been set (i.e. an external image with only one + // size), the image's dimensions in the lightbox are the same + // as those of the image in the content. + let imgMaxWidth = parseFloat(state.currentImage.targetWidth !== 'none' ? state.currentImage.targetWidth : naturalWidth); + let imgMaxHeight = parseFloat(state.currentImage.targetHeight !== 'none' ? state.currentImage.targetHeight : naturalHeight); - // In the case of an image with object-fit: contain, the - // size of the <img> element can be larger than the image itself, - // so we need to calculate where to place the button. - if (context.core.image.scaleAttr === 'contain') { - // Natural ratio of the image. - const naturalRatio = naturalWidth / naturalHeight; - // Offset ratio of the image. - const offsetRatio = offsetWidth / offsetHeight; - if (naturalRatio >= offsetRatio) { - // If it reaches the width first, keep - // the width and compute the height. - const referenceHeight = offsetWidth / naturalRatio; - context.core.image.imageButtonTop = (offsetHeight - referenceHeight) / 2 + buttonOffsetTop + 16; - context.core.image.imageButtonRight = buttonOffsetRight + 16; - } else { - // If it reaches the height first, keep - // the height and compute the width. - const referenceWidth = offsetHeight * naturalRatio; - context.core.image.imageButtonTop = buttonOffsetTop + 16; - context.core.image.imageButtonRight = (offsetWidth - referenceWidth) / 2 + buttonOffsetRight + 16; - } + // Ratio of the biggest image stored in the database. + let imgRatio = imgMaxWidth / imgMaxHeight; + let containerMaxWidth = imgMaxWidth; + let containerMaxHeight = imgMaxHeight; + let containerWidth = imgMaxWidth; + let containerHeight = imgMaxHeight; + // Checks if the target image has a different ratio than the original + // one (thumbnail). Recalculates the width and height. + if (naturalRatio.toFixed(2) !== imgRatio.toFixed(2)) { + if (naturalRatio > imgRatio) { + // If the width is reached before the height, it keeps the maxWidth + // and recalculates the height unless the difference between the + // maxHeight and the reducedHeight is higher than the maxWidth, + // where it keeps the reducedHeight and recalculate the width. + const reducedHeight = imgMaxWidth / naturalRatio; + if (imgMaxHeight - reducedHeight > imgMaxWidth) { + imgMaxHeight = reducedHeight; + imgMaxWidth = reducedHeight * naturalRatio; } else { - context.core.image.imageButtonTop = buttonOffsetTop + 16; - context.core.image.imageButtonRight = buttonOffsetRight + 16; + imgMaxHeight = imgMaxWidth / naturalRatio; } - }, - setStylesOnResize: ({ - state, - context, - ref - }) => { - if (context.core.image.lightboxEnabled && (state.core.image.windowWidth || state.core.image.windowHeight)) { - setStyles(context, ref); + } else { + // If the height is reached before the width, it keeps the maxHeight + // and recalculate the width unlesss the difference between the + // maxWidth and the reducedWidth is higher than the maxHeight, where + // it keeps the reducedWidth and recalculate the height. + const reducedWidth = imgMaxHeight * naturalRatio; + if (imgMaxWidth - reducedWidth > imgMaxHeight) { + imgMaxWidth = reducedWidth; + imgMaxHeight = reducedWidth / naturalRatio; + } else { + imgMaxWidth = imgMaxHeight * naturalRatio; } } - } - } - } -}, { - afterLoad: ({ - state - }) => { - window.addEventListener('resize', debounce(() => { - state.core.image.windowWidth = window.innerWidth; - state.core.image.windowHeight = window.innerHeight; - })); - } -}); + containerWidth = imgMaxWidth; + containerHeight = imgMaxHeight; + imgRatio = imgMaxWidth / imgMaxHeight; -/* - * Computes styles for the lightbox and adds them to the document. - * - * @function - * @param {Object} context - An Interactivity API context - * @param {Object} event - A triggering event - */ -function setStyles(context, ref) { - // The reference img element lies adjacent - // to the event target button in the DOM. - let { - naturalWidth, - naturalHeight, - offsetWidth: originalWidth, - offsetHeight: originalHeight - } = ref; - let { - x: screenPosX, - y: screenPosY - } = ref.getBoundingClientRect(); - - // Natural ratio of the image clicked to open the lightbox. - const naturalRatio = naturalWidth / naturalHeight; - // Original ratio of the image clicked to open the lightbox. - let originalRatio = originalWidth / originalHeight; - - // If it has object-fit: contain, recalculate the original sizes - // and the screen position without the blank spaces. - if (context.core.image.scaleAttr === 'contain') { - if (naturalRatio > originalRatio) { - const heightWithoutSpace = originalWidth / naturalRatio; - // Recalculate screen position without the top space. - screenPosY += (originalHeight - heightWithoutSpace) / 2; - originalHeight = heightWithoutSpace; - } else { - const widthWithoutSpace = originalHeight * naturalRatio; - // Recalculate screen position without the left space. - screenPosX += (originalWidth - widthWithoutSpace) / 2; - originalWidth = widthWithoutSpace; - } - } - originalRatio = originalWidth / originalHeight; + // Calculates the max size of the container. + if (originalRatio > imgRatio) { + containerMaxWidth = imgMaxWidth; + containerMaxHeight = containerMaxWidth / originalRatio; + } else { + containerMaxHeight = imgMaxHeight; + containerMaxWidth = containerMaxHeight * originalRatio; + } + } - // Typically, we use the image's full-sized dimensions. If those - // dimensions have not been set (i.e. an external image with only one size), - // the image's dimensions in the lightbox are the same - // as those of the image in the content. - let imgMaxWidth = parseFloat(context.core.image.targetWidth !== 'none' ? context.core.image.targetWidth : naturalWidth); - let imgMaxHeight = parseFloat(context.core.image.targetHeight !== 'none' ? context.core.image.targetHeight : naturalHeight); + // If the image has been pixelated on purpose, it keeps that size. + if (originalWidth > containerWidth || originalHeight > containerHeight) { + containerWidth = originalWidth; + containerHeight = originalHeight; + } - // Ratio of the biggest image stored in the database. - let imgRatio = imgMaxWidth / imgMaxHeight; - let containerMaxWidth = imgMaxWidth; - let containerMaxHeight = imgMaxHeight; - let containerWidth = imgMaxWidth; - let containerHeight = imgMaxHeight; - // Check if the target image has a different ratio than the original one (thumbnail). - // Recalculate the width and height. - if (naturalRatio.toFixed(2) !== imgRatio.toFixed(2)) { - if (naturalRatio > imgRatio) { - // If the width is reached before the height, we keep the maxWidth - // and recalculate the height. - // Unless the difference between the maxHeight and the reducedHeight - // is higher than the maxWidth, where we keep the reducedHeight and - // recalculate the width. - const reducedHeight = imgMaxWidth / naturalRatio; - if (imgMaxHeight - reducedHeight > imgMaxWidth) { - imgMaxHeight = reducedHeight; - imgMaxWidth = reducedHeight * naturalRatio; - } else { - imgMaxHeight = imgMaxWidth / naturalRatio; + // Calculates the final lightbox image size and the scale factor. + // MaxWidth is either the window container (accounting for padding) or + // the image resolution. + let horizontalPadding = 0; + if (window.innerWidth > 480) { + horizontalPadding = 80; + } else if (window.innerWidth > 1920) { + horizontalPadding = 160; } - } else { - // If the height is reached before the width, we keep the maxHeight - // and recalculate the width. - // Unless the difference between the maxWidth and the reducedWidth - // is higher than the maxHeight, where we keep the reducedWidth and - // recalculate the height. - const reducedWidth = imgMaxHeight * naturalRatio; - if (imgMaxWidth - reducedWidth > imgMaxHeight) { - imgMaxWidth = reducedWidth; - imgMaxHeight = reducedWidth / naturalRatio; + const verticalPadding = 80; + const targetMaxWidth = Math.min(window.innerWidth - horizontalPadding, containerWidth); + const targetMaxHeight = Math.min(window.innerHeight - verticalPadding, containerHeight); + const targetContainerRatio = targetMaxWidth / targetMaxHeight; + if (originalRatio > targetContainerRatio) { + // If targetMaxWidth is reached before targetMaxHeight. + containerWidth = targetMaxWidth; + containerHeight = containerWidth / originalRatio; } else { - imgMaxWidth = imgMaxHeight * naturalRatio; + // If targetMaxHeight is reached before targetMaxWidth. + containerHeight = targetMaxHeight; + containerWidth = containerHeight * originalRatio; } - } - containerWidth = imgMaxWidth; - containerHeight = imgMaxHeight; - imgRatio = imgMaxWidth / imgMaxHeight; + const containerScale = originalWidth / containerWidth; + const lightboxImgWidth = imgMaxWidth * (containerWidth / containerMaxWidth); + const lightboxImgHeight = imgMaxHeight * (containerHeight / containerMaxHeight); - // Calculate the max size of the container. - if (originalRatio > imgRatio) { - containerMaxWidth = imgMaxWidth; - containerMaxHeight = containerMaxWidth / originalRatio; - } else { - containerMaxHeight = imgMaxHeight; - containerMaxWidth = containerMaxHeight * originalRatio; - } - } + // As of this writing, using the calculations above will render the + // lightbox with a small, erroneous whitespace on the left side of the + // image in iOS Safari, perhaps due to an inconsistency in how browsers + // handle absolute positioning and CSS transformation. In any case, + // adding 1 pixel to the container width and height solves the problem, + // though this can be removed if the issue is fixed in the future. + state.overlayStyles = ` + :root { + --wp--lightbox-initial-top-position: ${screenPosY}px; + --wp--lightbox-initial-left-position: ${screenPosX}px; + --wp--lightbox-container-width: ${containerWidth + 1}px; + --wp--lightbox-container-height: ${containerHeight + 1}px; + --wp--lightbox-image-width: ${lightboxImgWidth}px; + --wp--lightbox-image-height: ${lightboxImgHeight}px; + --wp--lightbox-scale: ${containerScale}; + --wp--lightbox-scrollbar-width: ${window.innerWidth - document.documentElement.clientWidth}px; + } + `; + }, + setButtonStyles() { + const ctx = (0,interactivity_namespaceObject.getContext)(); + const { + ref + } = (0,interactivity_namespaceObject.getElement)(); + ctx.imageRef = ref; + const { + naturalWidth, + naturalHeight, + offsetWidth, + offsetHeight + } = ref; - // If the image has been pixelated on purpose, keep that size. - if (originalWidth > containerWidth || originalHeight > containerHeight) { - containerWidth = originalWidth; - containerHeight = originalHeight; - } + // If the image isn't loaded yet, it can't calculate where the button + // should be. + if (naturalWidth === 0 || naturalHeight === 0) { + return; + } + const figure = ref.parentElement; + const figureWidth = ref.parentElement.clientWidth; - // Calculate the final lightbox image size and the - // scale factor. MaxWidth is either the window container - // (accounting for padding) or the image resolution. - let horizontalPadding = 0; - if (window.innerWidth > 480) { - horizontalPadding = 80; - } else if (window.innerWidth > 1920) { - horizontalPadding = 160; - } - const verticalPadding = 80; - const targetMaxWidth = Math.min(window.innerWidth - horizontalPadding, containerWidth); - const targetMaxHeight = Math.min(window.innerHeight - verticalPadding, containerHeight); - const targetContainerRatio = targetMaxWidth / targetMaxHeight; - if (originalRatio > targetContainerRatio) { - // If targetMaxWidth is reached before targetMaxHeight - containerWidth = targetMaxWidth; - containerHeight = containerWidth / originalRatio; - } else { - // If targetMaxHeight is reached before targetMaxWidth - containerHeight = targetMaxHeight; - containerWidth = containerHeight * originalRatio; - } - const containerScale = originalWidth / containerWidth; - const lightboxImgWidth = imgMaxWidth * (containerWidth / containerMaxWidth); - const lightboxImgHeight = imgMaxHeight * (containerHeight / containerMaxHeight); + // It needs special handling for the height because a caption will cause + // the figure to be taller than the image, which means it needs to + // account for that when calculating the placement of the button in the + // top right corner of the image. + let figureHeight = ref.parentElement.clientHeight; + const caption = figure.querySelector('figcaption'); + if (caption) { + const captionComputedStyle = window.getComputedStyle(caption); + if (!['absolute', 'fixed'].includes(captionComputedStyle.position)) { + figureHeight = figureHeight - caption.offsetHeight - parseFloat(captionComputedStyle.marginTop) - parseFloat(captionComputedStyle.marginBottom); + } + } + const buttonOffsetTop = figureHeight - offsetHeight; + const buttonOffsetRight = figureWidth - offsetWidth; - // Add the CSS variables needed. - let styleTag = document.getElementById('wp-lightbox-styles'); - if (!styleTag) { - styleTag = document.createElement('style'); - styleTag.id = 'wp-lightbox-styles'; - document.head.appendChild(styleTag); + // In the case of an image with object-fit: contain, the size of the + // <img> element can be larger than the image itself, so it needs to + // calculate where to place the button. + if (ctx.scaleAttr === 'contain') { + // Natural ratio of the image. + const naturalRatio = naturalWidth / naturalHeight; + // Offset ratio of the image. + const offsetRatio = offsetWidth / offsetHeight; + if (naturalRatio >= offsetRatio) { + // If it reaches the width first, it keeps the width and compute the + // height. + const referenceHeight = offsetWidth / naturalRatio; + ctx.imageButtonTop = (offsetHeight - referenceHeight) / 2 + buttonOffsetTop + 16; + ctx.imageButtonRight = buttonOffsetRight + 16; + } else { + // If it reaches the height first, it keeps the height and compute + // the width. + const referenceWidth = offsetHeight * naturalRatio; + ctx.imageButtonTop = buttonOffsetTop + 16; + ctx.imageButtonRight = (offsetWidth - referenceWidth) / 2 + buttonOffsetRight + 16; + } + } else { + ctx.imageButtonTop = buttonOffsetTop + 16; + ctx.imageButtonRight = buttonOffsetRight + 16; + } + }, + setOverlayFocus() { + if (state.overlayEnabled) { + // Moves the focus to the dialog when it opens. + const { + ref + } = (0,interactivity_namespaceObject.getElement)(); + ref.focus(); + } + }, + initTriggerButton() { + const ctx = (0,interactivity_namespaceObject.getContext)(); + const { + ref + } = (0,interactivity_namespaceObject.getElement)(); + ctx.buttonRef = ref; + } } +}, { + lock: true +}); - // As of this writing, using the calculations above will render the lightbox - // with a small, erroneous whitespace on the left side of the image in iOS Safari, - // perhaps due to an inconsistency in how browsers handle absolute positioning and CSS - // transformation. In any case, adding 1 pixel to the container width and height solves - // the problem, though this can be removed if the issue is fixed in the future. - styleTag.innerHTML = ` - :root { - --wp--lightbox-initial-top-position: ${screenPosY}px; - --wp--lightbox-initial-left-position: ${screenPosX}px; - --wp--lightbox-container-width: ${containerWidth + 1}px; - --wp--lightbox-container-height: ${containerHeight + 1}px; - --wp--lightbox-image-width: ${lightboxImgWidth}px; - --wp--lightbox-image-height: ${lightboxImgHeight}px; - --wp--lightbox-scale: ${containerScale}; - } - `; -} - -/* - * Debounces a function call. - * - * @function - * @param {Function} func - A function to be called - * @param {number} wait - The time to wait before calling the function - */ -function debounce(func, wait = 50) { - let timeout; - return () => { - const later = () => { - timeout = null; - func(); - }; - clearTimeout(timeout); - timeout = setTimeout(later, wait); - }; -} - -/***/ }) - -}, -/******/ function(__webpack_require__) { // webpackRuntimeModules -/******/ var __webpack_exec__ = function(moduleId) { return __webpack_require__(__webpack_require__.s = moduleId); } -/******/ var __webpack_exports__ = (__webpack_exec__(699)); -/******/ } -]);
\ No newline at end of file |