ofco/medicalalert-web-reloaded
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

plugin updates

Browse Source
This commit is contained in:
Tony Volpe
2024-11-15 13:53:04 -05:00
parent 1293d604ca
commit 0238f0c4ca
2009 changed files with 163492 additions and 89543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
wp/wp-includes/blocks/image/block.json
View File

@@ -9,12 +9,16 @@
"keywords": [ "img", "photo", "picture" ],
"textdomain": "default",
"attributes": {
"blob": {
"type": "string",
"role": "local"
},
"url": {
"type": "string",
"source": "attribute",
"selector": "img",
"attribute": "src",
"__experimentalRole": "content"
"role": "content"
},
"alt": {
"type": "string",
@@ -22,13 +26,13 @@
"selector": "img",
"attribute": "alt",
"default": "",
"__experimentalRole": "content"
"role": "content"
},
"caption": {
"type": "rich-text",
"source": "rich-text",
"selector": "figcaption",
"__experimentalRole": "content"
"role": "content"
},
"lightbox": {
"type": "object",
@@ -41,14 +45,14 @@
"source": "attribute",
"selector": "img",
"attribute": "title",
"__experimentalRole": "content"
"role": "content"
},
"href": {
"type": "string",
"source": "attribute",
"selector": "figure > a",
"attribute": "href",
"__experimentalRole": "content"
"role": "content"
},
"rel": {
"type": "string",
@@ -64,7 +68,7 @@
},
"id": {
"type": "number",
"__experimentalRole": "content"
"role": "content"
},
"width": {
"type": "string"
@@ -102,6 +106,9 @@
"filter": {
"duotone": true
},
"spacing": {
"margin": true
},
"__experimentalBorder": {
"color": true,
"radius": true,

40
wp/wp-includes/blocks/image/editor-rtl.css
View File

@@ -1,25 +1,5 @@
.wp-block-image.wp-block-image.is-selected .components-placeholder{
background-color:#fff;
border:none;
border-radius:2px;
box-shadow:inset 0 0 0 1px #1e1e1e;
color:#1e1e1e;
filter:none !important;
}
.wp-block-image.wp-block-image.is-selected .components-placeholder>svg{
opacity:0;
}
.wp-block-image.wp-block-image.is-selected .components-placeholder .components-placeholder__illustration{
display:none;
}
.wp-block-image.wp-block-image .block-bindings-media-placeholder-message,.wp-block-image.wp-block-image.is-selected .components-placeholder:before{
opacity:0;
}
.wp-block-image.wp-block-image.is-selected .block-bindings-media-placeholder-message{
opacity:1;
}
.wp-block-image.wp-block-image .components-button,.wp-block-image.wp-block-image .components-placeholder__instructions,.wp-block-image.wp-block-image .components-placeholder__label{
transition:none;
.wp-block-image.wp-block-image .block-editor-media-placeholder.is-small{
min-height:60px;
}
figure.wp-block-image:not(.wp-block){
@@ -36,12 +16,24 @@ figure.wp-block-image:not(.wp-block){
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;
}
@@ -90,6 +82,10 @@ figure.wp-block-image:not(.wp-block){
text-align:center;
}
.wp-block[data-align]:has(>.wp-block-image){
position:relative;
}
.wp-block-image__crop-area{
max-width:100%;
overflow:hidden;

2
wp/wp-includes/blocks/image/editor-rtl.min.css vendored
View File

@@ -1 +1 @@
.wp-block-image.wp-block-image.is-selected .components-placeholder{background-color:#fff;border:none;border-radius:2px;box-shadow:inset 0 0 0 1px #1e1e1e;color:#1e1e1e;filter:none!important}.wp-block-image.wp-block-image.is-selected .components-placeholder>svg{opacity:0}.wp-block-image.wp-block-image.is-selected .components-placeholder .components-placeholder__illustration{display:none}.wp-block-image.wp-block-image .block-bindings-media-placeholder-message,.wp-block-image.wp-block-image.is-selected .components-placeholder:before{opacity:0}.wp-block-image.wp-block-image.is-selected .block-bindings-media-placeholder-message{opacity:1}.wp-block-image.wp-block-image .components-button,.wp-block-image.wp-block-image .components-placeholder__instructions,.wp-block-image.wp-block-image .components-placeholder__label{transition:none}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{position:absolute;right:50%;top:50%;transform:translate(50%,-50%)}.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-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{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}.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{width:250px}

40
wp/wp-includes/blocks/image/editor.css
View File

@@ -1,25 +1,5 @@
.wp-block-image.wp-block-image.is-selected .components-placeholder{
background-color:#fff;
border:none;
border-radius:2px;
box-shadow:inset 0 0 0 1px #1e1e1e;
color:#1e1e1e;
filter:none !important;
}
.wp-block-image.wp-block-image.is-selected .components-placeholder>svg{
opacity:0;
}
.wp-block-image.wp-block-image.is-selected .components-placeholder .components-placeholder__illustration{
display:none;
}
.wp-block-image.wp-block-image .block-bindings-media-placeholder-message,.wp-block-image.wp-block-image.is-selected .components-placeholder:before{
opacity:0;
}
.wp-block-image.wp-block-image.is-selected .block-bindings-media-placeholder-message{
opacity:1;
}
.wp-block-image.wp-block-image .components-button,.wp-block-image.wp-block-image .components-placeholder__instructions,.wp-block-image.wp-block-image .components-placeholder__label{
transition:none;
.wp-block-image.wp-block-image .block-editor-media-placeholder.is-small{
min-height:60px;
}
figure.wp-block-image:not(.wp-block){
@@ -37,11 +17,23 @@ figure.wp-block-image:not(.wp-block){
}
.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;
}
@@ -90,6 +82,10 @@ figure.wp-block-image:not(.wp-block){
text-align:center;
}
.wp-block[data-align]:has(>.wp-block-image){
position:relative;
}
.wp-block-image__crop-area{
max-width:100%;
overflow:hidden;

2
wp/wp-includes/blocks/image/editor.min.css vendored
View File

@@ -1 +1 @@
.wp-block-image.wp-block-image.is-selected .components-placeholder{background-color:#fff;border:none;border-radius:2px;box-shadow:inset 0 0 0 1px #1e1e1e;color:#1e1e1e;filter:none!important}.wp-block-image.wp-block-image.is-selected .components-placeholder>svg{opacity:0}.wp-block-image.wp-block-image.is-selected .components-placeholder .components-placeholder__illustration{display:none}.wp-block-image.wp-block-image .block-bindings-media-placeholder-message,.wp-block-image.wp-block-image.is-selected .components-placeholder:before{opacity:0}.wp-block-image.wp-block-image.is-selected .block-bindings-media-placeholder-message{opacity:1}.wp-block-image.wp-block-image .components-button,.wp-block-image.wp-block-image .components-placeholder__instructions,.wp-block-image.wp-block-image .components-placeholder__label{transition:none}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%;position:absolute;top:50%;transform:translate(-50%,-50%)}.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-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{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}.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{width:250px}

25
wp/wp-includes/blocks/image/style-rtl.css
View File

@@ -1,9 +1,20 @@
.wp-block-image a{
display:inline-block;
}
.wp-block-image img{
box-sizing:border-box;
height:auto;
max-width:100%;
vertical-align:bottom;
}
@media (prefers-reduced-motion:no-preference){
.wp-block-image img.hide{
visibility:hidden;
}
.wp-block-image img.show{
animation:show-content-image .4s;
}
}
.wp-block-image[style*=border-radius] img,.wp-block-image[style*=border-radius]>a{
border-radius:inherit;
}
@@ -13,6 +24,9 @@
.wp-block-image.aligncenter{
text-align:center;
}
.wp-block-image.alignfull a,.wp-block-image.alignwide a{
width:100%;
}
.wp-block-image.alignfull img,.wp-block-image.alignwide img{
height:auto;
width:100%;
@@ -230,6 +244,17 @@
}
}
@keyframes show-content-image{
0%{
visibility:hidden;
}
99%{
visibility:hidden;
}
to{
visibility:visible;
}
}
@keyframes turn-on-visibility{
0%{
opacity:0;

2
wp/wp-includes/blocks/image/style-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

25
wp/wp-includes/blocks/image/style.css
View File

@@ -1,9 +1,20 @@
.wp-block-image a{
display:inline-block;
}
.wp-block-image img{
box-sizing:border-box;
height:auto;
max-width:100%;
vertical-align:bottom;
}
@media (prefers-reduced-motion:no-preference){
.wp-block-image img.hide{
visibility:hidden;
}
.wp-block-image img.show{
animation:show-content-image .4s;
}
}
.wp-block-image[style*=border-radius] img,.wp-block-image[style*=border-radius]>a{
border-radius:inherit;
}
@@ -13,6 +24,9 @@
.wp-block-image.aligncenter{
text-align:center;
}
.wp-block-image.alignfull a,.wp-block-image.alignwide a{
width:100%;
}
.wp-block-image.alignfull img,.wp-block-image.alignwide img{
height:auto;
width:100%;
@@ -230,6 +244,17 @@
}
}
@keyframes show-content-image{
0%{
visibility:hidden;
}
99%{
visibility:hidden;
}
to{
visibility:visible;
}
}
@keyframes turn-on-visibility{
0%{
opacity:0;

2
wp/wp-includes/blocks/image/style.min.css vendored
View File

File diff suppressed because one or more lines are too long

114
wp/wp-includes/blocks/image/view.js
View File

@@ -50,29 +50,18 @@ let isTouching = false;
* @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;
@@ -83,36 +72,63 @@ const {
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.
ctx.currentSrc = ctx.imageRef.currentSrc;
imageRef = ctx.imageRef;
buttonRef = ctx.buttonRef;
state.currentImage = ctx;
// 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
@@ -122,20 +138,13 @@ const {
// 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.
state.currentImage = {};
imageRef = null;
buttonRef = null;
// Resets the current image id to mark the overlay as closed.
state.currentImageId = null;
}, 450);
// 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) {
@@ -197,7 +206,7 @@ const {
},
callbacks: {
setOverlayStyles() {
if (!imageRef) {
if (!state.overlayEnabled) {
return;
}
let {
@@ -205,11 +214,11 @@ const {
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;
@@ -246,6 +255,7 @@ const {
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)) {
@@ -340,11 +350,14 @@ const {
`;
},
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,
@@ -374,11 +387,13 @@ const {
}
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.
@@ -387,19 +402,18 @@ const {
// 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;
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;
ctx.imageButtonTop = buttonOffsetTop + 16;
ctx.imageButtonRight = (offsetWidth - referenceWidth) / 2 + buttonOffsetRight + 16;
imageButtonTop = buttonOffsetTop + 16;
imageButtonRight = (offsetWidth - referenceWidth) / 2 + buttonOffsetRight + 16;
}
} else {
ctx.imageButtonTop = buttonOffsetTop + 16;
ctx.imageButtonRight = buttonOffsetRight + 16;
}
state.metadata[imageId].imageButtonTop = imageButtonTop;
state.metadata[imageId].imageButtonRight = imageButtonRight;
},
setOverlayFocus() {
if (state.overlayEnabled) {
@@ -411,11 +425,13 @@ const {
}
},
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;
}
}
}, {

2
wp/wp-includes/blocks/image/view.min.js vendored
View File

@@ -1 +1 @@
import*as t from"@wordpress/interactivity";var e={d:(t,n)=>{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},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});let o,r,i=!1,l=0;const{state:a,actions:c,callbacks:s}=(0,n.store)("core/image",{state:{currentImage:{},get overlayOpened(){return a.currentImage.currentSrc},get roleAttribute(){return a.overlayOpened?"dialog":null},get ariaModal(){return a.overlayOpened?"true":null},get enlargedSrc(){return a.currentImage.uploadedSrc||"data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="},get imgStyles(){return a.overlayOpened&&`${a.currentImage.imgStyles?.replace(/;$/,"")}; object-fit:cover;`}},actions:{showLightbox(){const t=(0,n.getContext)();t.imageRef?.complete&&(a.scrollTopReset=document.documentElement.scrollTop,a.scrollLeftReset=document.documentElement.scrollLeft,t.currentSrc=t.imageRef.currentSrc,o=t.imageRef,r=t.buttonRef,a.currentImage=t,a.overlayEnabled=!0,s.setOverlayStyles())},hideLightbox(){a.overlayEnabled&&(setTimeout((function(){r.focus({preventScroll:!0}),a.currentImage={},o=null,r=null}),450),a.showClosingAnimation=!0,a.overlayEnabled=!1)},handleKeydown(t){if(a.overlayEnabled){if("Tab"===t.key){t.preventDefault();const{ref:e}=(0,n.getElement)();e.querySelector("button").focus()}"Escape"===t.key&&c.hideLightbox()}},handleTouchMove(t){a.overlayEnabled&&t.preventDefault()},handleTouchStart(){i=!0},handleTouchEnd(){l=Date.now(),i=!1},handleScroll(){a.overlayOpened&&!i&&Date.now()-l>450&&window.scrollTo(a.scrollLeftReset,a.scrollTopReset)}},callbacks:{setOverlayStyles(){if(!o)return;let{naturalWidth:t,naturalHeight:e,offsetWidth:n,offsetHeight:r}=o,{x:i,y:l}=o.getBoundingClientRect();const c=t/e;let s=n/r;if("contain"===a.currentImage.scaleAttr)if(c>s){const t=n/c;l+=(r-t)/2,r=t}else{const t=r*c;i+=(n-t)/2,n=t}s=n/r;let g=parseFloat("none"!==a.currentImage.targetWidth?a.currentImage.targetWidth:t),u=parseFloat("none"!==a.currentImage.targetHeight?a.currentImage.targetHeight:e),d=g/u,h=g,m=u,p=g,f=u;if(c.toFixed(2)!==d.toFixed(2)){if(c>d){const t=g/c;u-t>g?(u=t,g=t*c):u=g/c}else{const t=u*c;g-t>u?(g=t,u=t/c):g=u*c}p=g,f=u,d=g/u,s>d?(h=g,m=h/s):(m=u,h=m*s)}(n>p||r>f)&&(p=n,f=r);let w=0;window.innerWidth>480?w=80:window.innerWidth>1920&&(w=160);const y=Math.min(window.innerWidth-w,p),b=Math.min(window.innerHeight-80,f);s>y/b?(p=y,f=p/s):(f=b,p=f*s);const x=n/p,v=g*(p/h),A=u*(f/m);a.overlayStyles=`\n\t\t\t\t:root {\n\t\t\t\t\t--wp--lightbox-initial-top-position: ${l}px;\n\t\t\t\t\t--wp--lightbox-initial-left-position: ${i}px;\n\t\t\t\t\t--wp--lightbox-container-width: ${p+1}px;\n\t\t\t\t\t--wp--lightbox-container-height: ${f+1}px;\n\t\t\t\t\t--wp--lightbox-image-width: ${v}px;\n\t\t\t\t\t--wp--lightbox-image-height: ${A}px;\n\t\t\t\t\t--wp--lightbox-scale: ${x};\n\t\t\t\t\t--wp--lightbox-scrollbar-width: ${window.innerWidth-document.documentElement.clientWidth}px;\n\t\t\t\t}\n\t\t\t`},setButtonStyles(){const t=(0,n.getContext)(),{ref:e}=(0,n.getElement)();t.imageRef=e;const{naturalWidth:o,naturalHeight:r,offsetWidth:i,offsetHeight:l}=e;if(0===o||0===r)return;const a=e.parentElement,c=e.parentElement.clientWidth;let s=e.parentElement.clientHeight;const g=a.querySelector("figcaption");if(g){const t=window.getComputedStyle(g);["absolute","fixed"].includes(t.position)||(s=s-g.offsetHeight-parseFloat(t.marginTop)-parseFloat(t.marginBottom))}const u=s-l,d=c-i;if("contain"===t.scaleAttr){const e=o/r;if(e>=i/l){const n=i/e;t.imageButtonTop=(l-n)/2+u+16,t.imageButtonRight=d+16}else{const n=l*e;t.imageButtonTop=u+16,t.imageButtonRight=(i-n)/2+d+16}}else t.imageButtonTop=u+16,t.imageButtonRight=d+16},setOverlayFocus(){if(a.overlayEnabled){const{ref:t}=(0,n.getElement)();t.focus()}},initTriggerButton(){const t=(0,n.getContext)(),{ref:e}=(0,n.getElement)();t.buttonRef=e}}},{lock:!0});
import*as t from"@wordpress/interactivity";var e={d:(t,n)=>{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},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});let o=!1,a=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(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(t){r.overlayEnabled&&t.preventDefault()},handleTouchStart(){o=!0},handleTouchEnd(){a=Date.now(),o=!1},handleScroll(){r.overlayOpened&&!o&&Date.now()-a>450&&window.scrollTo(r.scrollLeftReset,r.scrollTopReset)}},callbacks:{setOverlayStyles(){if(!r.overlayEnabled)return;let{naturalWidth:t,naturalHeight:e,offsetWidth:n,offsetHeight:o}=r.currentImage.imageRef,{x:a,y:i}=r.currentImage.imageRef.getBoundingClientRect();const l=t/e;let g=n/o;if("contain"===r.currentImage.scaleAttr)if(l>g){const t=n/l;i+=(o-t)/2,o=t}else{const t=o*l;a+=(n-t)/2,n=t}g=n/o;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||o>p)&&(h=n,p=o);let f=0;window.innerWidth>480?f=80:window.innerWidth>1920&&(f=160);const y=Math.min(window.innerWidth-f,h),b=Math.min(window.innerHeight-80,p);g>y/b?(h=y,p=h/g):(p=b,h=p*g);const w=n/h,I=c*(h/u),x=s*(p/m);r.overlayStyles=`\n\t\t\t\t:root {\n\t\t\t\t\t--wp--lightbox-initial-top-position: ${i}px;\n\t\t\t\t\t--wp--lightbox-initial-left-position: ${a}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: ${x}px;\n\t\t\t\t\t--wp--lightbox-scale: ${w};\n\t\t\t\t\t--wp--lightbox-scrollbar-width: ${window.innerWidth-document.documentElement.clientWidth}px;\n\t\t\t\t}\n\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:o,naturalHeight:a,offsetWidth:i,offsetHeight:l}=e;if(0===o||0===a)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=o/a;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});