"use strict"; (self["__WordPressPrivateInteractivityAPI__"] = self["__WordPressPrivateInteractivityAPI__"] || []).push([[354],{ /***/ 699: /***/ (function(__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) { /* harmony import */ var _wordpress_interactivity__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(754); /** * 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. * * @type {boolean} */ let isTouching = false; /* * 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. * * 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. * * @param {Object} context Interactivity page context? */ 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)({ state: { core: { image: { windowWidth: window.innerWidth, windowHeight: window.innerHeight } } }, 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; // 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; // 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); // 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 }); }, 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; } } } }, 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='; } } } }, 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]; // Move focus to the dialog when opening it. ref.focus(); } }, setButtonStyles: ({ context, ref }) => { const { naturalWidth, naturalHeight, offsetWidth, offsetHeight } = ref; // 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; // 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; // In the case of an image with object-fit: contain, the // size of the 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; } } else { context.core.image.imageButtonTop = buttonOffsetTop + 16; context.core.image.imageButtonRight = buttonOffsetRight + 16; } }, setStylesOnResize: ({ state, context, ref }) => { if (context.core.image.lightboxEnabled && (state.core.image.windowWidth || state.core.image.windowHeight)) { setStyles(context, ref); } } } } } }, { afterLoad: ({ state }) => { window.addEventListener('resize', debounce(() => { state.core.image.windowWidth = window.innerWidth; state.core.image.windowHeight = window.innerHeight; })); } }); /* * 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; // 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); // 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; } } 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; } else { imgMaxWidth = imgMaxHeight * naturalRatio; } } containerWidth = imgMaxWidth; containerHeight = imgMaxHeight; imgRatio = imgMaxWidth / imgMaxHeight; // Calculate the max size of the container. if (originalRatio > imgRatio) { containerMaxWidth = imgMaxWidth; containerMaxHeight = containerMaxWidth / originalRatio; } else { containerMaxHeight = imgMaxHeight; containerMaxWidth = containerMaxHeight * originalRatio; } } // If the image has been pixelated on purpose, keep that size. if (originalWidth > containerWidth || originalHeight > containerHeight) { containerWidth = originalWidth; containerHeight = originalHeight; } // 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); // 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); } // 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)); /******/ } ]);