diff options
Diffstat (limited to 'wp-includes/blocks/image/view.js')
| -rw-r--r-- | wp-includes/blocks/image/view.js | 533 |
1 files changed, 533 insertions, 0 deletions
diff --git a/wp-includes/blocks/image/view.js b/wp-includes/blocks/image/view.js new file mode 100644 index 0000000..4d022ef --- /dev/null +++ b/wp-includes/blocks/image/view.js @@ -0,0 +1,533 @@ +"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 <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; + } + } 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)); +/******/ } +]);
\ No newline at end of file |