first commit
This commit is contained in:
314
wp-includes/js/dist/script-modules/block-library/image/view.js
vendored
Normal file
314
wp-includes/js/dist/script-modules/block-library/image/view.js
vendored
Normal file
@@ -0,0 +1,314 @@
|
||||
import * as __WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__ from "@wordpress/interactivity";
|
||||
/******/ // The require scope
|
||||
/******/ var __webpack_require__ = {};
|
||||
/******/
|
||||
/************************************************************************/
|
||||
/******/ /* webpack/runtime/define property getters */
|
||||
/******/ (() => {
|
||||
/******/ // define getter functions for harmony exports
|
||||
/******/ __webpack_require__.d = (exports, definition) => {
|
||||
/******/ for(var key in definition) {
|
||||
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
||||
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/ })();
|
||||
/******/
|
||||
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
||||
/******/ (() => {
|
||||
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
||||
/******/ })();
|
||||
/******/
|
||||
/************************************************************************/
|
||||
var __webpack_exports__ = {};
|
||||
|
||||
;// 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), ["withSyncEvent"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.withSyncEvent) });
|
||||
;// ./node_modules/@wordpress/block-library/build-module/image/view.js
|
||||
|
||||
let isTouching = false;
|
||||
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)();
|
||||
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();
|
||||
}
|
||||
}),
|
||||
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
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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();
|
||||
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;
|
||||
--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 { ref } = (0,interactivity_namespaceObject.getElement)();
|
||||
if (!ref) {
|
||||
return;
|
||||
}
|
||||
const { imageId } = (0,interactivity_namespaceObject.getContext)();
|
||||
state.metadata[imageId].imageRef = ref;
|
||||
state.metadata[imageId].currentSrc = ref.currentSrc;
|
||||
const {
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
{ lock: true }
|
||||
);
|
||||
|
||||
1
wp-includes/js/dist/script-modules/block-library/image/view.min.js
vendored
Normal file
1
wp-includes/js/dist/script-modules/block-library/image/view.min.js
vendored
Normal file
@@ -0,0 +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.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