[Summary view] [Print] [Text view]

   1  import * as __WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__ from "@wordpress/interactivity";
   2  /******/ // The require scope
   3  /******/ var __webpack_require__ = {};
   4  /******/ 
   5  /************************************************************************/
   6  /******/ /* webpack/runtime/define property getters */
   7  /******/ (() => {
   8  /******/     // define getter functions for harmony exports
   9  /******/     __webpack_require__.d = (exports, definition) => {
  10  /******/         for(var key in definition) {
  11  /******/             if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
  12  /******/                 Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
  13  /******/             }
  14  /******/         }
  15  /******/     };
  16  /******/ })();
  17  /******/ 
  18  /******/ /* webpack/runtime/hasOwnProperty shorthand */
  19  /******/ (() => {
  20  /******/     __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
  21  /******/ })();
  22  /******/ 
  23  /************************************************************************/
  24  var __webpack_exports__ = {};
  25  
  26  ;// external "@wordpress/interactivity"
  27  var x = (y) => {
  28      var x = {}; __webpack_require__.d(x, y); return x
  29  } 
  30  var y = (x) => (() => (x))
  31  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), ["withSyncEvent"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.withSyncEvent) });
  32  ;// ./node_modules/@wordpress/block-library/build-module/image/view.js
  33  
  34  let isTouching = false;
  35  let lastTouchTime = 0;
  36  const { state, actions, callbacks } = (0,interactivity_namespaceObject.store)(
  37    "core/image",
  38    {
  39      state: {
  40        currentImageId: null,
  41        get currentImage() {
  42          return state.metadata[state.currentImageId];
  43        },
  44        get overlayOpened() {
  45          return state.currentImageId !== null;
  46        },
  47        get roleAttribute() {
  48          return state.overlayOpened ? "dialog" : null;
  49        },
  50        get ariaModal() {
  51          return state.overlayOpened ? "true" : null;
  52        },
  53        get enlargedSrc() {
  54          return state.currentImage.uploadedSrc || "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
  55        },
  56        get figureStyles() {
  57          return state.overlayOpened && `$state.currentImage.figureStyles?.replace(
  58            /margin[^;]*;?/g,
  59            ""
  60          )};`;
  61        },
  62        get imgStyles() {
  63          return state.overlayOpened && `$state.currentImage.imgStyles?.replace(
  64            /;$/,
  65            ""
  66          )}; object-fit:cover;`;
  67        },
  68        get imageButtonRight() {
  69          const { imageId } = (0,interactivity_namespaceObject.getContext)();
  70          return state.metadata[imageId].imageButtonRight;
  71        },
  72        get imageButtonTop() {
  73          const { imageId } = (0,interactivity_namespaceObject.getContext)();
  74          return state.metadata[imageId].imageButtonTop;
  75        },
  76        get isContentHidden() {
  77          const ctx = (0,interactivity_namespaceObject.getContext)();
  78          return state.overlayEnabled && state.currentImageId === ctx.imageId;
  79        },
  80        get isContentVisible() {
  81          const ctx = (0,interactivity_namespaceObject.getContext)();
  82          return !state.overlayEnabled && state.currentImageId === ctx.imageId;
  83        }
  84      },
  85      actions: {
  86        showLightbox() {
  87          const { imageId } = (0,interactivity_namespaceObject.getContext)();
  88          if (!state.metadata[imageId].imageRef?.complete) {
  89            return;
  90          }
  91          state.scrollTopReset = document.documentElement.scrollTop;
  92          state.scrollLeftReset = document.documentElement.scrollLeft;
  93          state.overlayEnabled = true;
  94          state.currentImageId = imageId;
  95          callbacks.setOverlayStyles();
  96        },
  97        hideLightbox() {
  98          if (state.overlayEnabled) {
  99            state.overlayEnabled = false;
 100            setTimeout(function() {
 101              state.currentImage.buttonRef.focus({
 102                preventScroll: true
 103              });
 104              state.currentImageId = null;
 105            }, 450);
 106          }
 107        },
 108        handleKeydown: (0,interactivity_namespaceObject.withSyncEvent)((event) => {
 109          if (state.overlayEnabled) {
 110            if (event.key === "Tab") {
 111              event.preventDefault();
 112              const { ref } = (0,interactivity_namespaceObject.getElement)();
 113              ref.querySelector("button").focus();
 114            }
 115            if (event.key === "Escape") {
 116              actions.hideLightbox();
 117            }
 118          }
 119        }),
 120        handleTouchMove: (0,interactivity_namespaceObject.withSyncEvent)((event) => {
 121          if (state.overlayEnabled) {
 122            event.preventDefault();
 123          }
 124        }),
 125        handleTouchStart() {
 126          isTouching = true;
 127        },
 128        handleTouchEnd() {
 129          lastTouchTime = Date.now();
 130          isTouching = false;
 131        },
 132        handleScroll() {
 133          if (state.overlayOpened) {
 134            if (!isTouching && Date.now() - lastTouchTime > 450) {
 135              window.scrollTo(
 136                state.scrollLeftReset,
 137                state.scrollTopReset
 138              );
 139            }
 140          }
 141        }
 142      },
 143      callbacks: {
 144        setOverlayStyles() {
 145          if (!state.overlayEnabled) {
 146            return;
 147          }
 148          let {
 149            naturalWidth,
 150            naturalHeight,
 151            offsetWidth: originalWidth,
 152            offsetHeight: originalHeight
 153          } = state.currentImage.imageRef;
 154          let { x: screenPosX, y: screenPosY } = state.currentImage.imageRef.getBoundingClientRect();
 155          const naturalRatio = naturalWidth / naturalHeight;
 156          let originalRatio = originalWidth / originalHeight;
 157          if (state.currentImage.scaleAttr === "contain") {
 158            if (naturalRatio > originalRatio) {
 159              const heightWithoutSpace = originalWidth / naturalRatio;
 160              screenPosY += (originalHeight - heightWithoutSpace) / 2;
 161              originalHeight = heightWithoutSpace;
 162            } else {
 163              const widthWithoutSpace = originalHeight * naturalRatio;
 164              screenPosX += (originalWidth - widthWithoutSpace) / 2;
 165              originalWidth = widthWithoutSpace;
 166            }
 167          }
 168          originalRatio = originalWidth / originalHeight;
 169          let imgMaxWidth = parseFloat(
 170            state.currentImage.targetWidth !== "none" ? state.currentImage.targetWidth : naturalWidth
 171          );
 172          let imgMaxHeight = parseFloat(
 173            state.currentImage.targetHeight !== "none" ? state.currentImage.targetHeight : naturalHeight
 174          );
 175          let imgRatio = imgMaxWidth / imgMaxHeight;
 176          let containerMaxWidth = imgMaxWidth;
 177          let containerMaxHeight = imgMaxHeight;
 178          let containerWidth = imgMaxWidth;
 179          let containerHeight = imgMaxHeight;
 180          if (naturalRatio.toFixed(2) !== imgRatio.toFixed(2)) {
 181            if (naturalRatio > imgRatio) {
 182              const reducedHeight = imgMaxWidth / naturalRatio;
 183              if (imgMaxHeight - reducedHeight > imgMaxWidth) {
 184                imgMaxHeight = reducedHeight;
 185                imgMaxWidth = reducedHeight * naturalRatio;
 186              } else {
 187                imgMaxHeight = imgMaxWidth / naturalRatio;
 188              }
 189            } else {
 190              const reducedWidth = imgMaxHeight * naturalRatio;
 191              if (imgMaxWidth - reducedWidth > imgMaxHeight) {
 192                imgMaxWidth = reducedWidth;
 193                imgMaxHeight = reducedWidth / naturalRatio;
 194              } else {
 195                imgMaxWidth = imgMaxHeight * naturalRatio;
 196              }
 197            }
 198            containerWidth = imgMaxWidth;
 199            containerHeight = imgMaxHeight;
 200            imgRatio = imgMaxWidth / imgMaxHeight;
 201            if (originalRatio > imgRatio) {
 202              containerMaxWidth = imgMaxWidth;
 203              containerMaxHeight = containerMaxWidth / originalRatio;
 204            } else {
 205              containerMaxHeight = imgMaxHeight;
 206              containerMaxWidth = containerMaxHeight * originalRatio;
 207            }
 208          }
 209          if (originalWidth > containerWidth || originalHeight > containerHeight) {
 210            containerWidth = originalWidth;
 211            containerHeight = originalHeight;
 212          }
 213          let horizontalPadding = 0;
 214          if (window.innerWidth > 480) {
 215            horizontalPadding = 80;
 216          } else if (window.innerWidth > 1920) {
 217            horizontalPadding = 160;
 218          }
 219          const verticalPadding = 80;
 220          const targetMaxWidth = Math.min(
 221            window.innerWidth - horizontalPadding,
 222            containerWidth
 223          );
 224          const targetMaxHeight = Math.min(
 225            window.innerHeight - verticalPadding,
 226            containerHeight
 227          );
 228          const targetContainerRatio = targetMaxWidth / targetMaxHeight;
 229          if (originalRatio > targetContainerRatio) {
 230            containerWidth = targetMaxWidth;
 231            containerHeight = containerWidth / originalRatio;
 232          } else {
 233            containerHeight = targetMaxHeight;
 234            containerWidth = containerHeight * originalRatio;
 235          }
 236          const containerScale = originalWidth / containerWidth;
 237          const lightboxImgWidth = imgMaxWidth * (containerWidth / containerMaxWidth);
 238          const lightboxImgHeight = imgMaxHeight * (containerHeight / containerMaxHeight);
 239          state.overlayStyles = `
 240                      --wp--lightbox-initial-top-position: $screenPosY}px;
 241                      --wp--lightbox-initial-left-position: $screenPosX}px;
 242                      --wp--lightbox-container-width: $containerWidth + 1}px;
 243                      --wp--lightbox-container-height: $containerHeight + 1}px;
 244                      --wp--lightbox-image-width: $lightboxImgWidth}px;
 245                      --wp--lightbox-image-height: $lightboxImgHeight}px;
 246                      --wp--lightbox-scale: $containerScale};
 247                      --wp--lightbox-scrollbar-width: $window.innerWidth - document.documentElement.clientWidth}px;
 248                  `;
 249        },
 250        setButtonStyles() {
 251          const { ref } = (0,interactivity_namespaceObject.getElement)();
 252          if (!ref) {
 253            return;
 254          }
 255          const { imageId } = (0,interactivity_namespaceObject.getContext)();
 256          state.metadata[imageId].imageRef = ref;
 257          state.metadata[imageId].currentSrc = ref.currentSrc;
 258          const {
 259            naturalWidth,
 260            naturalHeight,
 261            offsetWidth,
 262            offsetHeight
 263          } = ref;
 264          if (naturalWidth === 0 || naturalHeight === 0) {
 265            return;
 266          }
 267          const figure = ref.parentElement;
 268          const figureWidth = ref.parentElement.clientWidth;
 269          let figureHeight = ref.parentElement.clientHeight;
 270          const caption = figure.querySelector("figcaption");
 271          if (caption) {
 272            const captionComputedStyle = window.getComputedStyle(caption);
 273            if (!["absolute", "fixed"].includes(
 274              captionComputedStyle.position
 275            )) {
 276              figureHeight = figureHeight - caption.offsetHeight - parseFloat(captionComputedStyle.marginTop) - parseFloat(captionComputedStyle.marginBottom);
 277            }
 278          }
 279          const buttonOffsetTop = figureHeight - offsetHeight;
 280          const buttonOffsetRight = figureWidth - offsetWidth;
 281          let imageButtonTop = buttonOffsetTop + 16;
 282          let imageButtonRight = buttonOffsetRight + 16;
 283          if (state.metadata[imageId].scaleAttr === "contain") {
 284            const naturalRatio = naturalWidth / naturalHeight;
 285            const offsetRatio = offsetWidth / offsetHeight;
 286            if (naturalRatio >= offsetRatio) {
 287              const referenceHeight = offsetWidth / naturalRatio;
 288              imageButtonTop = (offsetHeight - referenceHeight) / 2 + buttonOffsetTop + 16;
 289              imageButtonRight = buttonOffsetRight + 16;
 290            } else {
 291              const referenceWidth = offsetHeight * naturalRatio;
 292              imageButtonTop = buttonOffsetTop + 16;
 293              imageButtonRight = (offsetWidth - referenceWidth) / 2 + buttonOffsetRight + 16;
 294            }
 295          }
 296          state.metadata[imageId].imageButtonTop = imageButtonTop;
 297          state.metadata[imageId].imageButtonRight = imageButtonRight;
 298        },
 299        setOverlayFocus() {
 300          if (state.overlayEnabled) {
 301            const { ref } = (0,interactivity_namespaceObject.getElement)();
 302            ref.focus();
 303          }
 304        },
 305        initTriggerButton() {
 306          const { imageId } = (0,interactivity_namespaceObject.getContext)();
 307          const { ref } = (0,interactivity_namespaceObject.getElement)();
 308          state.metadata[imageId].buttonRef = ref;
 309        }
 310      }
 311    },
 312    { lock: true }
 313  );
 314