wip
This commit is contained in:
Hanson.xyz Dev
@@ -34,15 +34,6 @@ figure.wp-block-image:not(.wp-block){
|
||||
opacity:.1;
|
||||
}
|
||||
|
||||
.wp-block-image .components-resizable-box__container{
|
||||
display:table;
|
||||
}
|
||||
.wp-block-image .components-resizable-box__container img{
|
||||
display:block;
|
||||
height:inherit;
|
||||
width:inherit;
|
||||
}
|
||||
|
||||
.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{
|
||||
left:0;
|
||||
margin:-1px 0;
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
.wp-block-image.wp-block-image .block-editor-media-placeholder.is-small{min-height:60px}figure.wp-block-image:not(.wp-block){margin:0}.wp-block-image{position:relative}.wp-block-image .is-applying img,.wp-block-image.is-transient img{opacity:.3}.wp-block-image figcaption img{display:inline}.wp-block-image .components-spinner{margin:0;position:absolute;right:50%;top:50%;transform:translate(50%,-50%)}.wp-block-image__placeholder{aspect-ratio:4/3}.wp-block-image__placeholder.has-illustration:before{background:#fff;opacity:.8}.wp-block-image__placeholder .components-placeholder__illustration{opacity:.1}.wp-block-image .components-resizable-box__container{display:table}.wp-block-image .components-resizable-box__container img{display:block;height:inherit;width:inherit}.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{left:0;margin:-1px 0;position:absolute;right:0}@media (min-width:600px){.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{margin:-1px}}[data-align=full]>.wp-block-image img,[data-align=wide]>.wp-block-image img{height:auto;width:100%}.wp-block[data-align=center]>.wp-block-image,.wp-block[data-align=left]>.wp-block-image,.wp-block[data-align=right]>.wp-block-image{display:table}.wp-block[data-align=center]>.wp-block-image>figcaption,.wp-block[data-align=left]>.wp-block-image>figcaption,.wp-block[data-align=right]>.wp-block-image>figcaption{caption-side:bottom;display:table-caption}.wp-block[data-align=left]>.wp-block-image{margin:.5em 0 .5em 1em}.wp-block[data-align=right]>.wp-block-image{margin:.5em 1em .5em 0}.wp-block[data-align=center]>.wp-block-image{margin-left:auto;margin-right:auto;text-align:center}.wp-block[data-align]:has(>.wp-block-image){position:relative}.wp-block-image__crop-area{max-width:100%;overflow:hidden;position:relative;width:100%}.wp-block-image__crop-area .reactEasyCrop_Container{pointer-events:auto}.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image{border:none;border-radius:0}.wp-block-image__crop-icon{align-items:center;display:flex;justify-content:center;min-width:48px;padding:0 8px}.wp-block-image__crop-icon svg{fill:currentColor}.wp-block-image__zoom .components-popover__content{min-width:260px;overflow:visible!important}.wp-block-image__toolbar_content_textarea__container{padding:8px}.wp-block-image__toolbar_content_textarea{width:250px}
|
||||
.wp-block-image.wp-block-image .block-editor-media-placeholder.is-small{min-height:60px}figure.wp-block-image:not(.wp-block){margin:0}.wp-block-image{position:relative}.wp-block-image .is-applying img,.wp-block-image.is-transient img{opacity:.3}.wp-block-image figcaption img{display:inline}.wp-block-image .components-spinner{margin:0;position:absolute;right:50%;top:50%;transform:translate(50%,-50%)}.wp-block-image__placeholder{aspect-ratio:4/3}.wp-block-image__placeholder.has-illustration:before{background:#fff;opacity:.8}.wp-block-image__placeholder .components-placeholder__illustration{opacity:.1}.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{left:0;margin:-1px 0;position:absolute;right:0}@media (min-width:600px){.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{margin:-1px}}[data-align=full]>.wp-block-image img,[data-align=wide]>.wp-block-image img{height:auto;width:100%}.wp-block[data-align=center]>.wp-block-image,.wp-block[data-align=left]>.wp-block-image,.wp-block[data-align=right]>.wp-block-image{display:table}.wp-block[data-align=center]>.wp-block-image>figcaption,.wp-block[data-align=left]>.wp-block-image>figcaption,.wp-block[data-align=right]>.wp-block-image>figcaption{caption-side:bottom;display:table-caption}.wp-block[data-align=left]>.wp-block-image{margin:.5em 0 .5em 1em}.wp-block[data-align=right]>.wp-block-image{margin:.5em 1em .5em 0}.wp-block[data-align=center]>.wp-block-image{margin-left:auto;margin-right:auto;text-align:center}.wp-block[data-align]:has(>.wp-block-image){position:relative}.wp-block-image__crop-area{max-width:100%;overflow:hidden;position:relative;width:100%}.wp-block-image__crop-area .reactEasyCrop_Container{pointer-events:auto}.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image{border:none;border-radius:0}.wp-block-image__crop-icon{align-items:center;display:flex;justify-content:center;min-width:48px;padding:0 8px}.wp-block-image__crop-icon svg{fill:currentColor}.wp-block-image__zoom .components-popover__content{min-width:260px;overflow:visible!important}.wp-block-image__toolbar_content_textarea__container{padding:8px}.wp-block-image__toolbar_content_textarea{width:250px}
|
||||
@@ -34,15 +34,6 @@ figure.wp-block-image:not(.wp-block){
|
||||
opacity:.1;
|
||||
}
|
||||
|
||||
.wp-block-image .components-resizable-box__container{
|
||||
display:table;
|
||||
}
|
||||
.wp-block-image .components-resizable-box__container img{
|
||||
display:block;
|
||||
height:inherit;
|
||||
width:inherit;
|
||||
}
|
||||
|
||||
.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{
|
||||
left:0;
|
||||
margin:-1px 0;
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
.wp-block-image.wp-block-image .block-editor-media-placeholder.is-small{min-height:60px}figure.wp-block-image:not(.wp-block){margin:0}.wp-block-image{position:relative}.wp-block-image .is-applying img,.wp-block-image.is-transient img{opacity:.3}.wp-block-image figcaption img{display:inline}.wp-block-image .components-spinner{left:50%;margin:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.wp-block-image__placeholder{aspect-ratio:4/3}.wp-block-image__placeholder.has-illustration:before{background:#fff;opacity:.8}.wp-block-image__placeholder .components-placeholder__illustration{opacity:.1}.wp-block-image .components-resizable-box__container{display:table}.wp-block-image .components-resizable-box__container img{display:block;height:inherit;width:inherit}.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{left:0;margin:-1px 0;position:absolute;right:0}@media (min-width:600px){.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{margin:-1px}}[data-align=full]>.wp-block-image img,[data-align=wide]>.wp-block-image img{height:auto;width:100%}.wp-block[data-align=center]>.wp-block-image,.wp-block[data-align=left]>.wp-block-image,.wp-block[data-align=right]>.wp-block-image{display:table}.wp-block[data-align=center]>.wp-block-image>figcaption,.wp-block[data-align=left]>.wp-block-image>figcaption,.wp-block[data-align=right]>.wp-block-image>figcaption{caption-side:bottom;display:table-caption}.wp-block[data-align=left]>.wp-block-image{margin:.5em 1em .5em 0}.wp-block[data-align=right]>.wp-block-image{margin:.5em 0 .5em 1em}.wp-block[data-align=center]>.wp-block-image{margin-left:auto;margin-right:auto;text-align:center}.wp-block[data-align]:has(>.wp-block-image){position:relative}.wp-block-image__crop-area{max-width:100%;overflow:hidden;position:relative;width:100%}.wp-block-image__crop-area .reactEasyCrop_Container{pointer-events:auto}.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image{border:none;border-radius:0}.wp-block-image__crop-icon{align-items:center;display:flex;justify-content:center;min-width:48px;padding:0 8px}.wp-block-image__crop-icon svg{fill:currentColor}.wp-block-image__zoom .components-popover__content{min-width:260px;overflow:visible!important}.wp-block-image__toolbar_content_textarea__container{padding:8px}.wp-block-image__toolbar_content_textarea{width:250px}
|
||||
.wp-block-image.wp-block-image .block-editor-media-placeholder.is-small{min-height:60px}figure.wp-block-image:not(.wp-block){margin:0}.wp-block-image{position:relative}.wp-block-image .is-applying img,.wp-block-image.is-transient img{opacity:.3}.wp-block-image figcaption img{display:inline}.wp-block-image .components-spinner{left:50%;margin:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.wp-block-image__placeholder{aspect-ratio:4/3}.wp-block-image__placeholder.has-illustration:before{background:#fff;opacity:.8}.wp-block-image__placeholder .components-placeholder__illustration{opacity:.1}.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{left:0;margin:-1px 0;position:absolute;right:0}@media (min-width:600px){.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{margin:-1px}}[data-align=full]>.wp-block-image img,[data-align=wide]>.wp-block-image img{height:auto;width:100%}.wp-block[data-align=center]>.wp-block-image,.wp-block[data-align=left]>.wp-block-image,.wp-block[data-align=right]>.wp-block-image{display:table}.wp-block[data-align=center]>.wp-block-image>figcaption,.wp-block[data-align=left]>.wp-block-image>figcaption,.wp-block[data-align=right]>.wp-block-image>figcaption{caption-side:bottom;display:table-caption}.wp-block[data-align=left]>.wp-block-image{margin:.5em 1em .5em 0}.wp-block[data-align=right]>.wp-block-image{margin:.5em 0 .5em 1em}.wp-block[data-align=center]>.wp-block-image{margin-left:auto;margin-right:auto;text-align:center}.wp-block[data-align]:has(>.wp-block-image){position:relative}.wp-block-image__crop-area{max-width:100%;overflow:hidden;position:relative;width:100%}.wp-block-image__crop-area .reactEasyCrop_Container{pointer-events:auto}.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image{border:none;border-radius:0}.wp-block-image__crop-icon{align-items:center;display:flex;justify-content:center;min-width:48px;padding:0 8px}.wp-block-image__crop-icon svg{fill:currentColor}.wp-block-image__zoom .components-popover__content{min-width:260px;overflow:visible!important}.wp-block-image__toolbar_content_textarea__container{padding:8px}.wp-block-image__toolbar_content_textarea{width:250px}
|
||||
@@ -93,8 +93,7 @@
|
||||
}
|
||||
.wp-lightbox-container button{
|
||||
align-items:center;
|
||||
-webkit-backdrop-filter:blur(16px) saturate(180%);
|
||||
backdrop-filter:blur(16px) saturate(180%);
|
||||
backdrop-filter:blur(16px) saturate(180%);
|
||||
background-color:#5a5a5a40;
|
||||
border:none;
|
||||
border-radius:4px;
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
@@ -93,8 +93,7 @@
|
||||
}
|
||||
.wp-lightbox-container button{
|
||||
align-items:center;
|
||||
-webkit-backdrop-filter:blur(16px) saturate(180%);
|
||||
backdrop-filter:blur(16px) saturate(180%);
|
||||
backdrop-filter:blur(16px) saturate(180%);
|
||||
background-color:#5a5a5a40;
|
||||
border:none;
|
||||
border-radius:4px;
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
+258
-382
@@ -30,313 +30,213 @@ var x = (y) => {
|
||||
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), ["withSyncEvent"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.withSyncEvent) });
|
||||
;// ./node_modules/@wordpress/block-library/build-module/image/view.js
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 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;
|
||||
const {
|
||||
state,
|
||||
actions,
|
||||
callbacks
|
||||
} = (0,interactivity_namespaceObject.store)('core/image', {
|
||||
state: {
|
||||
currentImageId: null,
|
||||
get currentImage() {
|
||||
return state.metadata[state.currentImageId];
|
||||
},
|
||||
get overlayOpened() {
|
||||
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 {
|
||||
imageId
|
||||
} = (0,interactivity_namespaceObject.getContext)();
|
||||
|
||||
// Bails out if the image has not loaded yet.
|
||||
if (!state.metadata[imageId].imageRef?.complete) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Stores the positions of the scroll to fix it until the overlay is
|
||||
// closed.
|
||||
state.scrollTopReset = document.documentElement.scrollTop;
|
||||
state.scrollLeftReset = document.documentElement.scrollLeft;
|
||||
|
||||
// Sets the current expanded image in the state and enables the overlay.
|
||||
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.
|
||||
state.currentImage.buttonRef.focus({
|
||||
preventScroll: true
|
||||
});
|
||||
|
||||
// Resets the current image id to mark the overlay as closed.
|
||||
state.currentImageId = null;
|
||||
}, 450);
|
||||
const { state, actions, callbacks } = (0,interactivity_namespaceObject.store)(
|
||||
"core/image",
|
||||
{
|
||||
state: {
|
||||
currentImageId: null,
|
||||
get currentImage() {
|
||||
return state.metadata[state.currentImageId];
|
||||
},
|
||||
get overlayOpened() {
|
||||
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;
|
||||
}
|
||||
},
|
||||
handleKeydown: (0,interactivity_namespaceObject.withSyncEvent)(event => {
|
||||
if (state.overlayEnabled) {
|
||||
// Focuses the close button when the user presses the tab key.
|
||||
if (event.key === 'Tab') {
|
||||
actions: {
|
||||
showLightbox() {
|
||||
const { imageId } = (0,interactivity_namespaceObject.getContext)();
|
||||
if (!state.metadata[imageId].imageRef?.complete) {
|
||||
return;
|
||||
}
|
||||
state.scrollTopReset = document.documentElement.scrollTop;
|
||||
state.scrollLeftReset = document.documentElement.scrollLeft;
|
||||
state.overlayEnabled = true;
|
||||
state.currentImageId = imageId;
|
||||
callbacks.setOverlayStyles();
|
||||
},
|
||||
hideLightbox() {
|
||||
if (state.overlayEnabled) {
|
||||
state.overlayEnabled = false;
|
||||
setTimeout(function() {
|
||||
state.currentImage.buttonRef.focus({
|
||||
preventScroll: true
|
||||
});
|
||||
state.currentImageId = null;
|
||||
}, 450);
|
||||
}
|
||||
},
|
||||
handleKeydown: (0,interactivity_namespaceObject.withSyncEvent)((event) => {
|
||||
if (state.overlayEnabled) {
|
||||
if (event.key === "Tab") {
|
||||
event.preventDefault();
|
||||
const { ref } = (0,interactivity_namespaceObject.getElement)();
|
||||
ref.querySelector("button").focus();
|
||||
}
|
||||
if (event.key === "Escape") {
|
||||
actions.hideLightbox();
|
||||
}
|
||||
}
|
||||
}),
|
||||
handleTouchMove: (0,interactivity_namespaceObject.withSyncEvent)((event) => {
|
||||
if (state.overlayEnabled) {
|
||||
event.preventDefault();
|
||||
const {
|
||||
ref
|
||||
} = (0,interactivity_namespaceObject.getElement)();
|
||||
ref.querySelector('button').focus();
|
||||
}
|
||||
// Closes the lightbox when the user presses the escape key.
|
||||
if (event.key === 'Escape') {
|
||||
actions.hideLightbox();
|
||||
}
|
||||
}
|
||||
}),
|
||||
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
|
||||
// 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: {
|
||||
setOverlayStyles() {
|
||||
if (!state.overlayEnabled) {
|
||||
return;
|
||||
}
|
||||
let {
|
||||
naturalWidth,
|
||||
naturalHeight,
|
||||
offsetWidth: originalWidth,
|
||||
offsetHeight: originalHeight
|
||||
} = state.currentImage.imageRef;
|
||||
let {
|
||||
x: screenPosX,
|
||||
y: screenPosY
|
||||
} = 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;
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
originalRatio = originalWidth / originalHeight;
|
||||
|
||||
// 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;
|
||||
}),
|
||||
handleTouchStart() {
|
||||
isTouching = true;
|
||||
},
|
||||
handleTouchEnd() {
|
||||
lastTouchTime = Date.now();
|
||||
isTouching = false;
|
||||
},
|
||||
handleScroll() {
|
||||
if (state.overlayOpened) {
|
||||
if (!isTouching && Date.now() - lastTouchTime > 450) {
|
||||
window.scrollTo(
|
||||
state.scrollLeftReset,
|
||||
state.scrollTopReset
|
||||
);
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
},
|
||||
callbacks: {
|
||||
setOverlayStyles() {
|
||||
if (!state.overlayEnabled) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 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 = `
|
||||
let {
|
||||
naturalWidth,
|
||||
naturalHeight,
|
||||
offsetWidth: originalWidth,
|
||||
offsetHeight: originalHeight
|
||||
} = state.currentImage.imageRef;
|
||||
let { x: screenPosX, y: screenPosY } = state.currentImage.imageRef.getBoundingClientRect();
|
||||
const naturalRatio = naturalWidth / naturalHeight;
|
||||
let originalRatio = originalWidth / originalHeight;
|
||||
if (state.currentImage.scaleAttr === "contain") {
|
||||
if (naturalRatio > originalRatio) {
|
||||
const heightWithoutSpace = originalWidth / naturalRatio;
|
||||
screenPosY += (originalHeight - heightWithoutSpace) / 2;
|
||||
originalHeight = heightWithoutSpace;
|
||||
} else {
|
||||
const widthWithoutSpace = originalHeight * naturalRatio;
|
||||
screenPosX += (originalWidth - widthWithoutSpace) / 2;
|
||||
originalWidth = widthWithoutSpace;
|
||||
}
|
||||
}
|
||||
originalRatio = originalWidth / originalHeight;
|
||||
let imgMaxWidth = parseFloat(
|
||||
state.currentImage.targetWidth !== "none" ? state.currentImage.targetWidth : naturalWidth
|
||||
);
|
||||
let imgMaxHeight = parseFloat(
|
||||
state.currentImage.targetHeight !== "none" ? state.currentImage.targetHeight : naturalHeight
|
||||
);
|
||||
let imgRatio = imgMaxWidth / imgMaxHeight;
|
||||
let containerMaxWidth = imgMaxWidth;
|
||||
let containerMaxHeight = imgMaxHeight;
|
||||
let containerWidth = imgMaxWidth;
|
||||
let containerHeight = imgMaxHeight;
|
||||
if (naturalRatio.toFixed(2) !== imgRatio.toFixed(2)) {
|
||||
if (naturalRatio > imgRatio) {
|
||||
const reducedHeight = imgMaxWidth / naturalRatio;
|
||||
if (imgMaxHeight - reducedHeight > imgMaxWidth) {
|
||||
imgMaxHeight = reducedHeight;
|
||||
imgMaxWidth = reducedHeight * naturalRatio;
|
||||
} else {
|
||||
imgMaxHeight = imgMaxWidth / naturalRatio;
|
||||
}
|
||||
} else {
|
||||
const reducedWidth = imgMaxHeight * naturalRatio;
|
||||
if (imgMaxWidth - reducedWidth > imgMaxHeight) {
|
||||
imgMaxWidth = reducedWidth;
|
||||
imgMaxHeight = reducedWidth / naturalRatio;
|
||||
} else {
|
||||
imgMaxWidth = imgMaxHeight * naturalRatio;
|
||||
}
|
||||
}
|
||||
containerWidth = imgMaxWidth;
|
||||
containerHeight = imgMaxHeight;
|
||||
imgRatio = imgMaxWidth / imgMaxHeight;
|
||||
if (originalRatio > imgRatio) {
|
||||
containerMaxWidth = imgMaxWidth;
|
||||
containerMaxHeight = containerMaxWidth / originalRatio;
|
||||
} else {
|
||||
containerMaxHeight = imgMaxHeight;
|
||||
containerMaxWidth = containerMaxHeight * originalRatio;
|
||||
}
|
||||
}
|
||||
if (originalWidth > containerWidth || originalHeight > containerHeight) {
|
||||
containerWidth = originalWidth;
|
||||
containerHeight = originalHeight;
|
||||
}
|
||||
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) {
|
||||
containerWidth = targetMaxWidth;
|
||||
containerHeight = containerWidth / originalRatio;
|
||||
} else {
|
||||
containerHeight = targetMaxHeight;
|
||||
containerWidth = containerHeight * originalRatio;
|
||||
}
|
||||
const containerScale = originalWidth / containerWidth;
|
||||
const lightboxImgWidth = imgMaxWidth * (containerWidth / containerMaxWidth);
|
||||
const lightboxImgHeight = imgMaxHeight * (containerHeight / containerMaxHeight);
|
||||
state.overlayStyles = `
|
||||
--wp--lightbox-initial-top-position: ${screenPosY}px;
|
||||
--wp--lightbox-initial-left-position: ${screenPosX}px;
|
||||
--wp--lightbox-container-width: ${containerWidth + 1}px;
|
||||
@@ -346,93 +246,69 @@ const {
|
||||
--wp--lightbox-scale: ${containerScale};
|
||||
--wp--lightbox-scrollbar-width: ${window.innerWidth - document.documentElement.clientWidth}px;
|
||||
`;
|
||||
},
|
||||
setButtonStyles() {
|
||||
const {
|
||||
imageId
|
||||
} = (0,interactivity_namespaceObject.getContext)();
|
||||
const {
|
||||
ref
|
||||
} = (0,interactivity_namespaceObject.getElement)();
|
||||
state.metadata[imageId].imageRef = ref;
|
||||
state.metadata[imageId].currentSrc = ref.currentSrc;
|
||||
const {
|
||||
naturalWidth,
|
||||
naturalHeight,
|
||||
offsetWidth,
|
||||
offsetHeight
|
||||
} = ref;
|
||||
|
||||
// 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;
|
||||
|
||||
// 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');
|
||||
if (caption) {
|
||||
const captionComputedStyle = window.getComputedStyle(caption);
|
||||
if (!['absolute', 'fixed'].includes(captionComputedStyle.position)) {
|
||||
figureHeight = figureHeight - caption.offsetHeight - parseFloat(captionComputedStyle.marginTop) - parseFloat(captionComputedStyle.marginBottom);
|
||||
},
|
||||
setButtonStyles() {
|
||||
const { ref } = (0,interactivity_namespaceObject.getElement)();
|
||||
if (!ref) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
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 (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;
|
||||
imageButtonTop = (offsetHeight - referenceHeight) / 2 + buttonOffsetTop + 16;
|
||||
imageButtonRight = buttonOffsetRight + 16;
|
||||
} else {
|
||||
// If it reaches the height first, it keeps the height and compute
|
||||
// the width.
|
||||
const referenceWidth = offsetHeight * naturalRatio;
|
||||
imageButtonTop = buttonOffsetTop + 16;
|
||||
imageButtonRight = (offsetWidth - referenceWidth) / 2 + buttonOffsetRight + 16;
|
||||
}
|
||||
}
|
||||
state.metadata[imageId].imageButtonTop = imageButtonTop;
|
||||
state.metadata[imageId].imageButtonRight = imageButtonRight;
|
||||
},
|
||||
setOverlayFocus() {
|
||||
if (state.overlayEnabled) {
|
||||
// Moves the focus to the dialog when it opens.
|
||||
const { imageId } = (0,interactivity_namespaceObject.getContext)();
|
||||
state.metadata[imageId].imageRef = ref;
|
||||
state.metadata[imageId].currentSrc = ref.currentSrc;
|
||||
const {
|
||||
ref
|
||||
} = (0,interactivity_namespaceObject.getElement)();
|
||||
ref.focus();
|
||||
naturalWidth,
|
||||
naturalHeight,
|
||||
offsetWidth,
|
||||
offsetHeight
|
||||
} = ref;
|
||||
if (naturalWidth === 0 || naturalHeight === 0) {
|
||||
return;
|
||||
}
|
||||
const figure = ref.parentElement;
|
||||
const figureWidth = ref.parentElement.clientWidth;
|
||||
let figureHeight = ref.parentElement.clientHeight;
|
||||
const caption = figure.querySelector("figcaption");
|
||||
if (caption) {
|
||||
const captionComputedStyle = window.getComputedStyle(caption);
|
||||
if (!["absolute", "fixed"].includes(
|
||||
captionComputedStyle.position
|
||||
)) {
|
||||
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;
|
||||
if (state.metadata[imageId].scaleAttr === "contain") {
|
||||
const naturalRatio = naturalWidth / naturalHeight;
|
||||
const offsetRatio = offsetWidth / offsetHeight;
|
||||
if (naturalRatio >= offsetRatio) {
|
||||
const referenceHeight = offsetWidth / naturalRatio;
|
||||
imageButtonTop = (offsetHeight - referenceHeight) / 2 + buttonOffsetTop + 16;
|
||||
imageButtonRight = buttonOffsetRight + 16;
|
||||
} else {
|
||||
const referenceWidth = offsetHeight * naturalRatio;
|
||||
imageButtonTop = buttonOffsetTop + 16;
|
||||
imageButtonRight = (offsetWidth - referenceWidth) / 2 + buttonOffsetRight + 16;
|
||||
}
|
||||
}
|
||||
state.metadata[imageId].imageButtonTop = imageButtonTop;
|
||||
state.metadata[imageId].imageButtonRight = imageButtonRight;
|
||||
},
|
||||
setOverlayFocus() {
|
||||
if (state.overlayEnabled) {
|
||||
const { ref } = (0,interactivity_namespaceObject.getElement)();
|
||||
ref.focus();
|
||||
}
|
||||
},
|
||||
initTriggerButton() {
|
||||
const { imageId } = (0,interactivity_namespaceObject.getContext)();
|
||||
const { ref } = (0,interactivity_namespaceObject.getElement)();
|
||||
state.metadata[imageId].buttonRef = ref;
|
||||
}
|
||||
},
|
||||
initTriggerButton() {
|
||||
const {
|
||||
imageId
|
||||
} = (0,interactivity_namespaceObject.getContext)();
|
||||
const {
|
||||
ref
|
||||
} = (0,interactivity_namespaceObject.getElement)();
|
||||
state.metadata[imageId].buttonRef = ref;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
lock: true
|
||||
});
|
||||
},
|
||||
{ lock: true }
|
||||
);
|
||||
|
||||
|
||||
Vendored
+1
-1
@@ -1 +1 @@
|
||||
import*as t from"@wordpress/interactivity";var e={d:(t,n)=>{for(var a in n)e.o(n,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:n[a]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)};const n=(t=>{var n={};return e.d(n,t),n})({getContext:()=>t.getContext,getElement:()=>t.getElement,store:()=>t.store,withSyncEvent:()=>t.withSyncEvent});let a=!1,o=0;const{state:r,actions:i,callbacks:l}=(0,n.store)("core/image",{state:{currentImageId:null,get currentImage(){return r.metadata[r.currentImageId]},get overlayOpened(){return null!==r.currentImageId},get roleAttribute(){return r.overlayOpened?"dialog":null},get ariaModal(){return r.overlayOpened?"true":null},get enlargedSrc(){return r.currentImage.uploadedSrc||"data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="},get figureStyles(){return r.overlayOpened&&`${r.currentImage.figureStyles?.replace(/margin[^;]*;?/g,"")};`},get imgStyles(){return r.overlayOpened&&`${r.currentImage.imgStyles?.replace(/;$/,"")}; object-fit:cover;`},get imageButtonRight(){const{imageId:t}=(0,n.getContext)();return r.metadata[t].imageButtonRight},get imageButtonTop(){const{imageId:t}=(0,n.getContext)();return r.metadata[t].imageButtonTop},get isContentHidden(){const t=(0,n.getContext)();return r.overlayEnabled&&r.currentImageId===t.imageId},get isContentVisible(){const t=(0,n.getContext)();return!r.overlayEnabled&&r.currentImageId===t.imageId}},actions:{showLightbox(){const{imageId:t}=(0,n.getContext)();r.metadata[t].imageRef?.complete&&(r.scrollTopReset=document.documentElement.scrollTop,r.scrollLeftReset=document.documentElement.scrollLeft,r.overlayEnabled=!0,r.currentImageId=t,l.setOverlayStyles())},hideLightbox(){r.overlayEnabled&&(r.showClosingAnimation=!0,r.overlayEnabled=!1,setTimeout((function(){r.currentImage.buttonRef.focus({preventScroll:!0}),r.currentImageId=null}),450))},handleKeydown:(0,n.withSyncEvent)((t=>{if(r.overlayEnabled){if("Tab"===t.key){t.preventDefault();const{ref:e}=(0,n.getElement)();e.querySelector("button").focus()}"Escape"===t.key&&i.hideLightbox()}})),handleTouchMove:(0,n.withSyncEvent)((t=>{r.overlayEnabled&&t.preventDefault()})),handleTouchStart(){a=!0},handleTouchEnd(){o=Date.now(),a=!1},handleScroll(){r.overlayOpened&&!a&&Date.now()-o>450&&window.scrollTo(r.scrollLeftReset,r.scrollTopReset)}},callbacks:{setOverlayStyles(){if(!r.overlayEnabled)return;let{naturalWidth:t,naturalHeight:e,offsetWidth:n,offsetHeight:a}=r.currentImage.imageRef,{x:o,y:i}=r.currentImage.imageRef.getBoundingClientRect();const l=t/e;let g=n/a;if("contain"===r.currentImage.scaleAttr)if(l>g){const t=n/l;i+=(a-t)/2,a=t}else{const t=a*l;o+=(n-t)/2,n=t}g=n/a;let c=parseFloat("none"!==r.currentImage.targetWidth?r.currentImage.targetWidth:t),s=parseFloat("none"!==r.currentImage.targetHeight?r.currentImage.targetHeight:e),d=c/s,u=c,m=s,h=c,p=s;if(l.toFixed(2)!==d.toFixed(2)){if(l>d){const t=c/l;s-t>c?(s=t,c=t*l):s=c/l}else{const t=s*l;c-t>s?(c=t,s=t/l):c=s*l}h=c,p=s,d=c/s,g>d?(u=c,m=u/g):(m=s,u=m*g)}(n>h||a>p)&&(h=n,p=a);let f=0;window.innerWidth>480?f=80:window.innerWidth>1920&&(f=160);const y=Math.min(window.innerWidth-f,h),w=Math.min(window.innerHeight-80,p);g>y/w?(h=y,p=h/g):(p=w,h=p*g);const b=n/h,I=c*(h/u),v=s*(p/m);r.overlayStyles=`\n\t\t\t\t\t--wp--lightbox-initial-top-position: ${i}px;\n\t\t\t\t\t--wp--lightbox-initial-left-position: ${o}px;\n\t\t\t\t\t--wp--lightbox-container-width: ${h+1}px;\n\t\t\t\t\t--wp--lightbox-container-height: ${p+1}px;\n\t\t\t\t\t--wp--lightbox-image-width: ${I}px;\n\t\t\t\t\t--wp--lightbox-image-height: ${v}px;\n\t\t\t\t\t--wp--lightbox-scale: ${b};\n\t\t\t\t\t--wp--lightbox-scrollbar-width: ${window.innerWidth-document.documentElement.clientWidth}px;\n\t\t\t\t`},setButtonStyles(){const{imageId:t}=(0,n.getContext)(),{ref:e}=(0,n.getElement)();r.metadata[t].imageRef=e,r.metadata[t].currentSrc=e.currentSrc;const{naturalWidth:a,naturalHeight:o,offsetWidth:i,offsetHeight:l}=e;if(0===a||0===o)return;const g=e.parentElement,c=e.parentElement.clientWidth;let s=e.parentElement.clientHeight;const d=g.querySelector("figcaption");if(d){const t=window.getComputedStyle(d);["absolute","fixed"].includes(t.position)||(s=s-d.offsetHeight-parseFloat(t.marginTop)-parseFloat(t.marginBottom))}const u=s-l,m=c-i;let h=u+16,p=m+16;if("contain"===r.metadata[t].scaleAttr){const t=a/o;if(t>=i/l){h=(l-i/t)/2+u+16,p=m+16}else{h=u+16,p=(i-l*t)/2+m+16}}r.metadata[t].imageButtonTop=h,r.metadata[t].imageButtonRight=p},setOverlayFocus(){if(r.overlayEnabled){const{ref:t}=(0,n.getElement)();t.focus()}},initTriggerButton(){const{imageId:t}=(0,n.getContext)(),{ref:e}=(0,n.getElement)();r.metadata[t].buttonRef=e}}},{lock:!0});
|
||||
import*as t from"@wordpress/interactivity";var e={d:(t,n)=>{for(var a in n)e.o(n,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:n[a]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)};const n=(t=>{var n={};return e.d(n,t),n})({getContext:()=>t.getContext,getElement:()=>t.getElement,store:()=>t.store,withSyncEvent:()=>t.withSyncEvent});let a=!1,o=0;const{state:r,actions:i,callbacks:l}=(0,n.store)("core/image",{state:{currentImageId:null,get currentImage(){return r.metadata[r.currentImageId]},get overlayOpened(){return null!==r.currentImageId},get roleAttribute(){return r.overlayOpened?"dialog":null},get ariaModal(){return r.overlayOpened?"true":null},get enlargedSrc(){return r.currentImage.uploadedSrc||"data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="},get figureStyles(){return r.overlayOpened&&`${r.currentImage.figureStyles?.replace(/margin[^;]*;?/g,"")};`},get imgStyles(){return r.overlayOpened&&`${r.currentImage.imgStyles?.replace(/;$/,"")}; object-fit:cover;`},get imageButtonRight(){const{imageId:t}=(0,n.getContext)();return r.metadata[t].imageButtonRight},get imageButtonTop(){const{imageId:t}=(0,n.getContext)();return r.metadata[t].imageButtonTop},get isContentHidden(){const t=(0,n.getContext)();return r.overlayEnabled&&r.currentImageId===t.imageId},get isContentVisible(){const t=(0,n.getContext)();return!r.overlayEnabled&&r.currentImageId===t.imageId}},actions:{showLightbox(){const{imageId:t}=(0,n.getContext)();r.metadata[t].imageRef?.complete&&(r.scrollTopReset=document.documentElement.scrollTop,r.scrollLeftReset=document.documentElement.scrollLeft,r.overlayEnabled=!0,r.currentImageId=t,l.setOverlayStyles())},hideLightbox(){r.overlayEnabled&&(r.overlayEnabled=!1,setTimeout((function(){r.currentImage.buttonRef.focus({preventScroll:!0}),r.currentImageId=null}),450))},handleKeydown:(0,n.withSyncEvent)((t=>{if(r.overlayEnabled){if("Tab"===t.key){t.preventDefault();const{ref:e}=(0,n.getElement)();e.querySelector("button").focus()}"Escape"===t.key&&i.hideLightbox()}})),handleTouchMove:(0,n.withSyncEvent)((t=>{r.overlayEnabled&&t.preventDefault()})),handleTouchStart(){a=!0},handleTouchEnd(){o=Date.now(),a=!1},handleScroll(){r.overlayOpened&&!a&&Date.now()-o>450&&window.scrollTo(r.scrollLeftReset,r.scrollTopReset)}},callbacks:{setOverlayStyles(){if(!r.overlayEnabled)return;let{naturalWidth:t,naturalHeight:e,offsetWidth:n,offsetHeight:a}=r.currentImage.imageRef,{x:o,y:i}=r.currentImage.imageRef.getBoundingClientRect();const l=t/e;let g=n/a;if("contain"===r.currentImage.scaleAttr)if(l>g){const t=n/l;i+=(a-t)/2,a=t}else{const t=a*l;o+=(n-t)/2,n=t}g=n/a;let c=parseFloat("none"!==r.currentImage.targetWidth?r.currentImage.targetWidth:t),d=parseFloat("none"!==r.currentImage.targetHeight?r.currentImage.targetHeight:e),s=c/d,u=c,m=d,h=c,p=d;if(l.toFixed(2)!==s.toFixed(2)){if(l>s){const t=c/l;d-t>c?(d=t,c=t*l):d=c/l}else{const t=d*l;c-t>d?(c=t,d=t/l):c=d*l}h=c,p=d,s=c/d,g>s?(u=c,m=u/g):(m=d,u=m*g)}(n>h||a>p)&&(h=n,p=a);let f=0;window.innerWidth>480?f=80:window.innerWidth>1920&&(f=160);const y=Math.min(window.innerWidth-f,h),w=Math.min(window.innerHeight-80,p);g>y/w?(h=y,p=h/g):(p=w,h=p*g);const b=n/h,I=c*(h/u),v=d*(p/m);r.overlayStyles=`\n\t\t\t\t\t--wp--lightbox-initial-top-position: ${i}px;\n\t\t\t\t\t--wp--lightbox-initial-left-position: ${o}px;\n\t\t\t\t\t--wp--lightbox-container-width: ${h+1}px;\n\t\t\t\t\t--wp--lightbox-container-height: ${p+1}px;\n\t\t\t\t\t--wp--lightbox-image-width: ${I}px;\n\t\t\t\t\t--wp--lightbox-image-height: ${v}px;\n\t\t\t\t\t--wp--lightbox-scale: ${b};\n\t\t\t\t\t--wp--lightbox-scrollbar-width: ${window.innerWidth-document.documentElement.clientWidth}px;\n\t\t\t\t`},setButtonStyles(){const{ref:t}=(0,n.getElement)();if(!t)return;const{imageId:e}=(0,n.getContext)();r.metadata[e].imageRef=t,r.metadata[e].currentSrc=t.currentSrc;const{naturalWidth:a,naturalHeight:o,offsetWidth:i,offsetHeight:l}=t;if(0===a||0===o)return;const g=t.parentElement,c=t.parentElement.clientWidth;let d=t.parentElement.clientHeight;const s=g.querySelector("figcaption");if(s){const t=window.getComputedStyle(s);["absolute","fixed"].includes(t.position)||(d=d-s.offsetHeight-parseFloat(t.marginTop)-parseFloat(t.marginBottom))}const u=d-l,m=c-i;let h=u+16,p=m+16;if("contain"===r.metadata[e].scaleAttr){const t=a/o;if(t>=i/l){h=(l-i/t)/2+u+16,p=m+16}else{h=u+16,p=(i-l*t)/2+m+16}}r.metadata[e].imageButtonTop=h,r.metadata[e].imageButtonRight=p},setOverlayFocus(){if(r.overlayEnabled){const{ref:t}=(0,n.getElement)();t.focus()}},initTriggerButton(){const{imageId:t}=(0,n.getContext)(),{ref:e}=(0,n.getElement)();r.metadata[t].buttonRef=e}}},{lock:!0});
|
||||
Reference in New Issue
Block a user