Merged in feature/from-pantheon (pull request #16)

code from pantheon

* code from pantheon

wp/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));
+/******/ }
+]);