@wordpress/block-library 8.27.2 → 8.28.1

package/build-module/image/view.js

@@ -2,242 +2,315 @@
  * WordPress dependencies
  */
 import { store, getContext, getElement } from '@wordpress/interactivity';
-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} ctx Context object with the `core/image` namespace.
+ * @type {HTMLElement}
  */
-function handleScroll(ctx) {
-  // 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(ctx.scrollLeftReset, ctx.scrollTopReset);
-  }
-}
+let buttonRef;
 const {
   state,
   actions,
   callbacks
 } = store('core/image', {
   state: {
-    windowWidth: window.innerWidth,
-    windowHeight: window.innerHeight,
+    currentImage: {},
+    get overlayOpened() {
+      return state.currentImage.currentSrc;
+    },
     get roleAttribute() {
-      const ctx = getContext();
-      return ctx.lightboxEnabled ? 'dialog' : null;
+      return state.overlayOpened ? 'dialog' : null;
     },
     get ariaModal() {
-      const ctx = getContext();
-      return ctx.lightboxEnabled ? 'true' : null;
+      return state.overlayOpened ? 'true' : null;
     },
-    get dialogLabel() {
-      const ctx = getContext();
-      return ctx.lightboxEnabled ? ctx.dialogLabel : null;
+    get enlargedSrc() {
+      return state.currentImage.uploadedSrc || 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
     },
-    get lightboxObjectFit() {
-      const ctx = getContext();
-      if (ctx.initialized) {
-        return 'cover';
-      }
-    },
-    get enlargedImgSrc() {
-      const ctx = getContext();
-      return ctx.initialized ? ctx.imageUploadedSrc : 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
+    get imgStyles() {
+      return state.overlayOpened && `${state.currentImage.imgStyles?.replace(/;$/, '')}; object-fit:cover;`;
     }
   },
   actions: {
-    showLightbox(event) {
+    showLightbox() {
       const ctx = getContext();
-      // We can't initialize the lightbox until the reference
-      // image is loaded, otherwise the UX is broken.
-      if (!ctx.imageLoaded) {
+
+      // Bails out if the image has not loaded yet.
+      if (!ctx.imageRef?.complete) {
         return;
       }
-      ctx.initialized = true;
-      ctx.lastFocusedElement = window.document.activeElement;
-      ctx.scrollDelta = 0;
-      ctx.pointerType = event.pointerType;
-      ctx.lightboxEnabled = true;
-      setStyles(ctx, ctx.imageRef);
-      ctx.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.
-      ctx.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, ctx);
+      // 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);
+      // Computes the styles of the overlay for the animation.
+      callbacks.setOverlayStyles();
     },
     hideLightbox() {
-      const ctx = getContext();
-      ctx.hideAnimationEnabled = true;
-      if (ctx.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.
+      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 () {
-          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.
-          ctx.lightboxTriggerRef.focus({
+          // 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
           });
+
+          // Resets the current image to mark the overlay as closed.
+          state.currentImage = {};
+          imageRef = null;
+          buttonRef = null;
         }, 450);
-        ctx.lightboxEnabled = false;
+
+        // 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) {
-      const ctx = getContext();
-      if (ctx.lightboxEnabled) {
-        if (event.key === 'Tab' || event.keyCode === 9) {
-          // If shift + tab it change the direction
-          if (event.shiftKey && window.document.activeElement === ctx.firstFocusableElement) {
-            event.preventDefault();
-            ctx.lastFocusableElement.focus();
-          } else if (!event.shiftKey && window.document.activeElement === ctx.lastFocusableElement) {
-            event.preventDefault();
-            ctx.firstFocusableElement.focus();
-          }
+      if (state.overlayEnabled) {
+        // Focuses the close button when the user presses the tab key.
+        if (event.key === 'Tab') {
+          event.preventDefault();
+          const {
+            ref
+          } = getElement();
+          ref.querySelector('button').focus();
         }
-        if (event.key === 'Escape' || event.keyCode === 27) {
-          actions.hideLightbox(event);
+        // Closes the lightbox when the user presses the escape key.
+        if (event.key === 'Escape') {
+          actions.hideLightbox();
         }
       }
     },
-    // This is fired just by lazily loaded
-    // images on the page, not all images.
-    handleLoad() {
-      const ctx = getContext();
-      const {
-        ref
-      } = getElement();
-      ctx.imageLoaded = true;
-      ctx.imageCurrentSrc = ref.currentSrc;
-      callbacks.setButtonStyles();
-    },
-    handleTouchStart() {
-      isTouching = true;
-    },
     handleTouchMove(event) {
-      const ctx = getContext();
-      // 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 (ctx.lightboxEnabled) {
+      // 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() {
-      // 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.
+      // 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);
+        }
+      }
     }
   },
   callbacks: {
-    initOriginImage() {
-      const ctx = getContext();
-      const {
-        ref
-      } = getElement();
-      ctx.imageRef = ref;
-      if (ref.complete) {
-        ctx.imageLoaded = true;
-        ctx.imageCurrentSrc = ref.currentSrc;
+    setOverlayStyles() {
+      if (!imageRef) return;
+      let {
+        naturalWidth,
+        naturalHeight,
+        offsetWidth: originalWidth,
+        offsetHeight: originalHeight
+      } = imageRef;
+      let {
+        x: screenPosX,
+        y: screenPosY
+      } = imageRef.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, 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;
+        }
       }
-    },
-    initTriggerButton() {
-      const ctx = getContext();
-      const {
-        ref
-      } = getElement();
-      ctx.lightboxTriggerRef = ref;
-    },
-    initLightbox() {
-      const ctx = getContext();
-      const {
-        ref
-      } = getElement();
-      if (ctx.lightboxEnabled) {
-        const focusableElements = ref.querySelectorAll(focusableSelectors);
-        ctx.firstFocusableElement = focusableElements[0];
-        ctx.lastFocusableElement = focusableElements[focusableElements.length - 1];
+      originalRatio = originalWidth / originalHeight;
 
-        // Move focus to the dialog when opening it.
-        ref.focus();
+      // 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);
+
+      // 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 {
+            imgMaxHeight = imgMaxWidth / naturalRatio;
+          }
+        } 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;
+          }
+        }
+        containerWidth = imgMaxWidth;
+        containerHeight = imgMaxHeight;
+        imgRatio = imgMaxWidth / imgMaxHeight;
+
+        // Calculates 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, it keeps that size.
+      if (originalWidth > containerWidth || originalHeight > containerHeight) {
+        containerWidth = originalWidth;
+        containerHeight = originalHeight;
+      }
+
+      // 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;
+      }
+      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);
+
+      // 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 = getContext();
       const {
         ref
       } = getElement();
+      ctx.imageRef = ref;
       const {
         naturalWidth,
         naturalHeight,
@@ -245,18 +318,17 @@ const {
         offsetHeight
       } = ref;
 
-      // If the image isn't loaded yet, we can't
-      // calculate where the button should be.
+      // 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;
 
-      // 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
+      // 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');
@@ -268,25 +340,24 @@ const {
       }
       const buttonOffsetTop = figureHeight - offsetHeight;
       const buttonOffsetRight = figureWidth - offsetWidth;
-      const ctx = getContext();
 
-      // 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.
+      // 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, keep
-          // the width and compute the height.
+          // 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, keep
-          // the height and compute the width.
+          // 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;
@@ -296,197 +367,24 @@ const {
         ctx.imageButtonRight = buttonOffsetRight + 16;
       }
     },
-    setStylesOnResize() {
+    setOverlayFocus() {
+      if (state.overlayEnabled) {
+        // Moves the focus to the dialog when it opens.
+        const {
+          ref
+        } = getElement();
+        ref.focus();
+      }
+    },
+    initTriggerButton() {
       const ctx = getContext();
       const {
         ref
       } = getElement();
-      if (ctx.lightboxEnabled && (state.windowWidth || state.windowHeight)) {
-        setStyles(ctx, ref);
-      }
+      ctx.buttonRef = ref;
     }
   }
+}, {
+  lock: true
 });
-window.addEventListener('resize', debounce(() => {
-  state.windowWidth = window.innerWidth;
-  state.windowHeight = window.innerHeight;
-}));
-
-/**
- * Computes styles for the lightbox and adds them to the document.
- *
- * @function
- * @param {Object} ctx - Context for the `core/image` namespace.
- * @param {Object} ref - The element reference.
- */
-function setStyles(ctx, 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 (ctx.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(ctx.targetWidth !== 'none' ? ctx.targetWidth : naturalWidth);
-  let imgMaxHeight = parseFloat(ctx.targetHeight !== 'none' ? ctx.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};
-			--wp--lightbox-scrollbar-width: ${window.innerWidth - document.documentElement.clientWidth}px;
-		}
-	`;
-}
-
-/**
- * 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);
-  };
-}
 //# sourceMappingURL=view.js.map