enmi-conf.org: comparison wp/wp-includes/blocks/image/view.js

Mercurial Mercurial > enmi-conf.org / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

wp/wp-includes/blocks/image/view.js

changeset 22	8c2e4d02f4ef
parent 21	48c4eec2b7e6

equal deleted inserted replaced

-:48c4eec2b7e6
+:8c2e4d02f4ef
 /******/ })();
 /******/
 /************************************************************************/
 var __webpack_exports__ = {};
-;// CONCATENATED MODULE: external "@wordpress/interactivity"
+;// external "@wordpress/interactivity"
 var x = (y) => {
 	var x = {}; __webpack_require__.d(x, y); return x
 }
 var y = (x) => (() => (x))
-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) });
+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) });
-;// CONCATENATED MODULE: ./node_modules/@wordpress/block-library/build-module/image/view.js
+;// ./node_modules/@wordpress/block-library/build-module/image/view.js
 /**
 * WordPress dependencies
 */
 * for touch and mouse input.
 *
 * @type {number}
 */
 let lastTouchTime = 0;
-/**
-* Stores the image reference of the currently opened lightbox.
-*
-* @type {HTMLElement}
-*/
-let imageRef;
-/**
-* Stores the button reference of the currently opened lightbox.
-*
-* @type {HTMLElement}
-*/
-let buttonRef;
 const {
 state,
 actions,
 callbacks
 } = (0,interactivity_namespaceObject.store)('core/image', {
 state: {
-currentImage: {},
+currentImageId: null,
+get currentImage() {
+return state.metadata[state.currentImageId];
+},
 get overlayOpened() {
-return state.currentImage.currentSrc;
+return state.currentImageId !== null;
 },
 get roleAttribute() {
 return state.overlayOpened ? 'dialog' : null;
 },
 get ariaModal() {
 return state.overlayOpened ? 'true' : null;
 },
 get enlargedSrc() {
 return state.currentImage.uploadedSrc || 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
 },
+get figureStyles() {
+return state.overlayOpened && `${state.currentImage.figureStyles?.replace(/margin[^;]*;?/g, '')};`;
+},
 get imgStyles() {
 return state.overlayOpened && `${state.currentImage.imgStyles?.replace(/;$/, '')}; object-fit:cover;`;
+},
+get imageButtonRight() {
+const {
+imageId
+} = (0,interactivity_namespaceObject.getContext)();
+return state.metadata[imageId].imageButtonRight;
+},
+get imageButtonTop() {
+const {
+imageId
+} = (0,interactivity_namespaceObject.getContext)();
+return state.metadata[imageId].imageButtonTop;
+},
+get isContentHidden() {
+const ctx = (0,interactivity_namespaceObject.getContext)();
+return state.overlayEnabled && state.currentImageId === ctx.imageId;
+},
+get isContentVisible() {
+const ctx = (0,interactivity_namespaceObject.getContext)();
+return !state.overlayEnabled && state.currentImageId === ctx.imageId;
 }
 },
 actions: {
 showLightbox() {
-const ctx = (0,interactivity_namespaceObject.getContext)();
+const {
+imageId
+} = (0,interactivity_namespaceObject.getContext)();
 // Bails out if the image has not loaded yet.
-if (!ctx.imageRef?.complete) {
+if (!state.metadata[imageId].imageRef?.complete) {
 return;
 }
-// Stores the positons of the scroll to fix it until the overlay is
+// Stores the positions of the scroll to fix it until the overlay is
 // closed.
 state.scrollTopReset = document.documentElement.scrollTop;
 state.scrollLeftReset = document.documentElement.scrollLeft;
-// Moves the information of the expaned image to the state.
+// Sets the current expanded image in the state and enables the overlay.
-ctx.currentSrc = ctx.imageRef.currentSrc;
-imageRef = ctx.imageRef;
-buttonRef = ctx.buttonRef;
-state.currentImage = ctx;
 state.overlayEnabled = true;
+state.currentImageId = imageId;
 // Computes the styles of the overlay for the animation.
 callbacks.setOverlayStyles();
 },
 hideLightbox() {
 if (state.overlayEnabled) {
+// Starts the overlay closing animation. The showClosingAnimation
+// class is used to avoid showing it on page load.
+state.showClosingAnimation = true;
+state.overlayEnabled = false;
 // 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 () {
 // Delays before changing the focus. Otherwise the focus ring will
 // appear on Firefox before the image has finished animating, which
 // looks broken.
-buttonRef.focus({
+state.currentImage.buttonRef.focus({
 preventScroll: true
 });
-// Resets the current image to mark the overlay as closed.
+// Resets the current image id to mark the overlay as closed.
-state.currentImage = {};
+state.currentImageId = null;
-imageRef = null;
-buttonRef = null;
 }, 450);
+}
-// Starts the overlay closing animation. The showClosingAnimation
+},
-// class is used to avoid showing it on page load.
+handleKeydown: (0,interactivity_namespaceObject.withSyncEvent)(event => {
-state.showClosingAnimation = true;
-state.overlayEnabled = false;
-}
-},
-handleKeydown(event) {
 if (state.overlayEnabled) {
 // Focuses the close button when the user presses the tab key.
 if (event.key === 'Tab') {
 event.preventDefault();
 const {
 // Closes the lightbox when the user presses the escape key.
 if (event.key === 'Escape') {
 actions.hideLightbox();
 }
 }
-},
+}),
-handleTouchMove(event) {
+handleTouchMove: (0,interactivity_namespaceObject.withSyncEvent)(event => {
 // 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() {
 // Waits a few milliseconds before resetting to ensure that pinch to
 }
 }
 },
 callbacks: {
 setOverlayStyles() {
-if (!imageRef) {
+if (!state.overlayEnabled) {
 return;
 }
 let {
 naturalWidth,
 naturalHeight,
 offsetWidth: originalWidth,
 offsetHeight: originalHeight
-} = imageRef;
+} = state.currentImage.imageRef;
 let {
 x: screenPosX,
 y: screenPosY
-} = imageRef.getBoundingClientRect();
+} = state.currentImage.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;
 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
 // 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 = (0,interactivity_namespaceObject.getContext)();
+const {
+imageId
+} = (0,interactivity_namespaceObject.getContext)();
 const {
 ref
 } = (0,interactivity_namespaceObject.getElement)();
-ctx.imageRef = ref;
+state.metadata[imageId].imageRef = ref;
+state.metadata[imageId].currentSrc = ref.currentSrc;
 const {
 naturalWidth,
 naturalHeight,
 offsetWidth,
 offsetHeight
 figureHeight = figureHeight - caption.offsetHeight - parseFloat(captionComputedStyle.marginTop) - parseFloat(captionComputedStyle.marginBottom);
 }
 }
 const buttonOffsetTop = figureHeight - offsetHeight;
 const buttonOffsetRight = figureWidth - offsetWidth;
+let imageButtonTop = buttonOffsetTop + 16;
+let imageButtonRight = buttonOffsetRight + 16;
 // 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') {
+if (state.metadata[imageId].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, it keeps the width and compute the
 // height.
 const referenceHeight = offsetWidth / naturalRatio;
-ctx.imageButtonTop = (offsetHeight - referenceHeight) / 2 + buttonOffsetTop + 16;
+imageButtonTop = (offsetHeight - referenceHeight) / 2 + buttonOffsetTop + 16;
-ctx.imageButtonRight = buttonOffsetRight + 16;
+imageButtonRight = buttonOffsetRight + 16;
 } else {
 // If it reaches the height first, it keeps the height and compute
 // the width.
 const referenceWidth = offsetHeight * naturalRatio;
-ctx.imageButtonTop = buttonOffsetTop + 16;
+imageButtonTop = buttonOffsetTop + 16;
-ctx.imageButtonRight = (offsetWidth - referenceWidth) / 2 + buttonOffsetRight + 16;
+imageButtonRight = (offsetWidth - referenceWidth) / 2 + buttonOffsetRight + 16;
 }
-} else {
+}
-ctx.imageButtonTop = buttonOffsetTop + 16;
+state.metadata[imageId].imageButtonTop = imageButtonTop;
-ctx.imageButtonRight = buttonOffsetRight + 16;
+state.metadata[imageId].imageButtonRight = imageButtonRight;
-}
 },
 setOverlayFocus() {
 if (state.overlayEnabled) {
 // Moves the focus to the dialog when it opens.
 const {
 } = (0,interactivity_namespaceObject.getElement)();
 ref.focus();
 }
 },
 initTriggerButton() {
-const ctx = (0,interactivity_namespaceObject.getContext)();
+const {
+imageId
+} = (0,interactivity_namespaceObject.getContext)();
 const {
 ref
 } = (0,interactivity_namespaceObject.getElement)();
-ctx.buttonRef = ref;
+state.metadata[imageId].buttonRef = ref;
 }
 }
 }, {
 lock: true
 });

enmi-conf.org