first commit
This commit is contained in:
137
wp-includes/blocks/image/block.json
Normal file
137
wp-includes/blocks/image/block.json
Normal file
@ -0,0 +1,137 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "core/image",
|
||||
"title": "Image",
|
||||
"category": "media",
|
||||
"usesContext": [ "allowResize", "imageCrop", "fixedHeight" ],
|
||||
"description": "Insert an image to make a visual statement.",
|
||||
"keywords": [ "img", "photo", "picture" ],
|
||||
"textdomain": "default",
|
||||
"attributes": {
|
||||
"url": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "img",
|
||||
"attribute": "src",
|
||||
"__experimentalRole": "content"
|
||||
},
|
||||
"alt": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "img",
|
||||
"attribute": "alt",
|
||||
"default": "",
|
||||
"__experimentalRole": "content"
|
||||
},
|
||||
"caption": {
|
||||
"type": "rich-text",
|
||||
"source": "rich-text",
|
||||
"selector": "figcaption",
|
||||
"__experimentalRole": "content"
|
||||
},
|
||||
"lightbox": {
|
||||
"type": "object",
|
||||
"enabled": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "img",
|
||||
"attribute": "title",
|
||||
"__experimentalRole": "content"
|
||||
},
|
||||
"href": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "figure > a",
|
||||
"attribute": "href",
|
||||
"__experimentalRole": "content"
|
||||
},
|
||||
"rel": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "figure > a",
|
||||
"attribute": "rel"
|
||||
},
|
||||
"linkClass": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "figure > a",
|
||||
"attribute": "class"
|
||||
},
|
||||
"id": {
|
||||
"type": "number",
|
||||
"__experimentalRole": "content"
|
||||
},
|
||||
"width": {
|
||||
"type": "string"
|
||||
},
|
||||
"height": {
|
||||
"type": "string"
|
||||
},
|
||||
"aspectRatio": {
|
||||
"type": "string"
|
||||
},
|
||||
"scale": {
|
||||
"type": "string"
|
||||
},
|
||||
"sizeSlug": {
|
||||
"type": "string"
|
||||
},
|
||||
"linkDestination": {
|
||||
"type": "string"
|
||||
},
|
||||
"linkTarget": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "figure > a",
|
||||
"attribute": "target"
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
"interactivity": true,
|
||||
"align": [ "left", "center", "right", "wide", "full" ],
|
||||
"anchor": true,
|
||||
"color": {
|
||||
"text": false,
|
||||
"background": false
|
||||
},
|
||||
"filter": {
|
||||
"duotone": true
|
||||
},
|
||||
"__experimentalBorder": {
|
||||
"color": true,
|
||||
"radius": true,
|
||||
"width": true,
|
||||
"__experimentalSkipSerialization": true,
|
||||
"__experimentalDefaultControls": {
|
||||
"color": true,
|
||||
"radius": true,
|
||||
"width": true
|
||||
}
|
||||
},
|
||||
"shadow": {
|
||||
"__experimentalSkipSerialization": true
|
||||
}
|
||||
},
|
||||
"selectors": {
|
||||
"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
|
||||
"shadow": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
|
||||
"filter": {
|
||||
"duotone": ".wp-block-image img, .wp-block-image .components-placeholder"
|
||||
}
|
||||
},
|
||||
"styles": [
|
||||
{
|
||||
"name": "default",
|
||||
"label": "Default",
|
||||
"isDefault": true
|
||||
},
|
||||
{ "name": "rounded", "label": "Rounded" }
|
||||
],
|
||||
"editorStyle": "wp-block-image-editor",
|
||||
"style": "wp-block-image"
|
||||
}
|
134
wp-includes/blocks/image/editor-rtl.css
Normal file
134
wp-includes/blocks/image/editor-rtl.css
Normal file
@ -0,0 +1,134 @@
|
||||
.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 .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__aspect-ratio{
|
||||
align-items:center;
|
||||
display:flex;
|
||||
height:46px;
|
||||
margin-bottom:-8px;
|
||||
}
|
||||
.wp-block-image__aspect-ratio .components-button{
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
width:36px;
|
||||
}
|
||||
|
||||
.wp-block-image__toolbar_content_textarea{
|
||||
width:250px;
|
||||
}
|
1
wp-includes/blocks/image/editor-rtl.min.css
vendored
Normal file
1
wp-includes/blocks/image/editor-rtl.min.css
vendored
Normal file
@ -0,0 +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 .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__aspect-ratio{align-items:center;display:flex;height:46px;margin-bottom:-8px}.wp-block-image__aspect-ratio .components-button{padding-left:0;padding-right:0;width:36px}.wp-block-image__toolbar_content_textarea{width:250px}
|
134
wp-includes/blocks/image/editor.css
Normal file
134
wp-includes/blocks/image/editor.css
Normal file
@ -0,0 +1,134 @@
|
||||
.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 .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__aspect-ratio{
|
||||
align-items:center;
|
||||
display:flex;
|
||||
height:46px;
|
||||
margin-bottom:-8px;
|
||||
}
|
||||
.wp-block-image__aspect-ratio .components-button{
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
width:36px;
|
||||
}
|
||||
|
||||
.wp-block-image__toolbar_content_textarea{
|
||||
width:250px;
|
||||
}
|
1
wp-includes/blocks/image/editor.min.css
vendored
Normal file
1
wp-includes/blocks/image/editor.min.css
vendored
Normal file
@ -0,0 +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 .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__aspect-ratio{align-items:center;display:flex;height:46px;margin-bottom:-8px}.wp-block-image__aspect-ratio .components-button{padding-left:0;padding-right:0;width:36px}.wp-block-image__toolbar_content_textarea{width:250px}
|
301
wp-includes/blocks/image/style-rtl.css
Normal file
301
wp-includes/blocks/image/style-rtl.css
Normal file
@ -0,0 +1,301 @@
|
||||
.wp-block-image img{
|
||||
box-sizing:border-box;
|
||||
height:auto;
|
||||
max-width:100%;
|
||||
vertical-align:bottom;
|
||||
}
|
||||
.wp-block-image[style*=border-radius] img,.wp-block-image[style*=border-radius]>a{
|
||||
border-radius:inherit;
|
||||
}
|
||||
.wp-block-image.has-custom-border img{
|
||||
box-sizing:border-box;
|
||||
}
|
||||
.wp-block-image.aligncenter{
|
||||
text-align:center;
|
||||
}
|
||||
.wp-block-image.alignfull img,.wp-block-image.alignwide img{
|
||||
height:auto;
|
||||
width:100%;
|
||||
}
|
||||
.wp-block-image .aligncenter,.wp-block-image .alignleft,.wp-block-image .alignright,.wp-block-image.aligncenter,.wp-block-image.alignleft,.wp-block-image.alignright{
|
||||
display:table;
|
||||
}
|
||||
.wp-block-image .aligncenter>figcaption,.wp-block-image .alignleft>figcaption,.wp-block-image .alignright>figcaption,.wp-block-image.aligncenter>figcaption,.wp-block-image.alignleft>figcaption,.wp-block-image.alignright>figcaption{
|
||||
caption-side:bottom;
|
||||
display:table-caption;
|
||||
}
|
||||
.wp-block-image .alignleft{
|
||||
float:left;
|
||||
margin:.5em 1em .5em 0;
|
||||
}
|
||||
.wp-block-image .alignright{
|
||||
float:right;
|
||||
margin:.5em 0 .5em 1em;
|
||||
}
|
||||
.wp-block-image .aligncenter{
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
.wp-block-image figcaption{
|
||||
margin-bottom:1em;
|
||||
margin-top:.5em;
|
||||
}
|
||||
.wp-block-image .is-style-rounded img,.wp-block-image.is-style-circle-mask img,.wp-block-image.is-style-rounded img{
|
||||
border-radius:9999px;
|
||||
}
|
||||
@supports ((-webkit-mask-image:none) or (mask-image:none)) or (-webkit-mask-image:none){
|
||||
.wp-block-image.is-style-circle-mask img{
|
||||
border-radius:0;
|
||||
-webkit-mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
|
||||
mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
|
||||
mask-mode:alpha;
|
||||
-webkit-mask-position:center;
|
||||
mask-position:center;
|
||||
-webkit-mask-repeat:no-repeat;
|
||||
mask-repeat:no-repeat;
|
||||
-webkit-mask-size:contain;
|
||||
mask-size:contain;
|
||||
}
|
||||
}
|
||||
.wp-block-image :where(.has-border-color){
|
||||
border-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-top-color]){
|
||||
border-top-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-right-color]){
|
||||
border-left-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-bottom-color]){
|
||||
border-bottom-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-left-color]){
|
||||
border-right-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-width]){
|
||||
border-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-top-width]){
|
||||
border-top-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-right-width]){
|
||||
border-left-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-bottom-width]){
|
||||
border-bottom-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-left-width]){
|
||||
border-right-style:solid;
|
||||
}
|
||||
|
||||
.wp-block-image figure{
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.wp-lightbox-container{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
position:relative;
|
||||
}
|
||||
.wp-lightbox-container img{
|
||||
cursor:zoom-in;
|
||||
}
|
||||
.wp-lightbox-container img:hover+button{
|
||||
opacity:1;
|
||||
}
|
||||
.wp-lightbox-container button{
|
||||
align-items:center;
|
||||
-webkit-backdrop-filter:blur(16px) saturate(180%);
|
||||
backdrop-filter:blur(16px) saturate(180%);
|
||||
background-color:#5a5a5a40;
|
||||
border:none;
|
||||
border-radius:4px;
|
||||
cursor:zoom-in;
|
||||
display:flex;
|
||||
height:20px;
|
||||
justify-content:center;
|
||||
left:16px;
|
||||
opacity:0;
|
||||
padding:0;
|
||||
position:absolute;
|
||||
text-align:center;
|
||||
top:16px;
|
||||
transition:opacity .2s ease;
|
||||
width:20px;
|
||||
z-index:100;
|
||||
}
|
||||
.wp-lightbox-container button:focus-visible{
|
||||
outline:3px auto #5a5a5a40;
|
||||
outline:3px auto -webkit-focus-ring-color;
|
||||
outline-offset:3px;
|
||||
}
|
||||
.wp-lightbox-container button:hover{
|
||||
cursor:pointer;
|
||||
opacity:1;
|
||||
}
|
||||
.wp-lightbox-container button:focus{
|
||||
opacity:1;
|
||||
}
|
||||
.wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){
|
||||
background-color:#5a5a5a40;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.wp-lightbox-overlay{
|
||||
box-sizing:border-box;
|
||||
cursor:zoom-out;
|
||||
height:100vh;
|
||||
overflow:hidden;
|
||||
position:fixed;
|
||||
right:0;
|
||||
top:0;
|
||||
visibility:hidden;
|
||||
width:100%;
|
||||
z-index:100000;
|
||||
}
|
||||
.wp-lightbox-overlay .close-button{
|
||||
align-items:center;
|
||||
cursor:pointer;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
left:calc(env(safe-area-inset-left) + 16px);
|
||||
min-height:40px;
|
||||
min-width:40px;
|
||||
padding:0;
|
||||
position:absolute;
|
||||
top:calc(env(safe-area-inset-top) + 16px);
|
||||
z-index:5000000;
|
||||
}
|
||||
.wp-lightbox-overlay .close-button:focus,.wp-lightbox-overlay .close-button:hover,.wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background){
|
||||
background:none;
|
||||
border:none;
|
||||
}
|
||||
.wp-lightbox-overlay .lightbox-image-container{
|
||||
height:var(--wp--lightbox-container-height);
|
||||
overflow:hidden;
|
||||
position:absolute;
|
||||
right:50%;
|
||||
top:50%;
|
||||
transform:translate(50%, -50%);
|
||||
transform-origin:top right;
|
||||
width:var(--wp--lightbox-container-width);
|
||||
z-index:9999999999;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image{
|
||||
align-items:center;
|
||||
box-sizing:border-box;
|
||||
display:flex;
|
||||
height:100%;
|
||||
justify-content:center;
|
||||
margin:0;
|
||||
position:relative;
|
||||
transform-origin:100% 0;
|
||||
width:100%;
|
||||
z-index:3000000;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image img{
|
||||
height:var(--wp--lightbox-image-height);
|
||||
min-height:var(--wp--lightbox-image-height);
|
||||
min-width:var(--wp--lightbox-image-width);
|
||||
width:var(--wp--lightbox-image-width);
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image figcaption{
|
||||
display:none;
|
||||
}
|
||||
.wp-lightbox-overlay button{
|
||||
background:none;
|
||||
border:none;
|
||||
}
|
||||
.wp-lightbox-overlay .scrim{
|
||||
background-color:#fff;
|
||||
height:100%;
|
||||
opacity:.9;
|
||||
position:absolute;
|
||||
width:100%;
|
||||
z-index:2000000;
|
||||
}
|
||||
.wp-lightbox-overlay.active{
|
||||
animation:turn-on-visibility .25s both;
|
||||
visibility:visible;
|
||||
}
|
||||
.wp-lightbox-overlay.active img{
|
||||
animation:turn-on-visibility .35s both;
|
||||
}
|
||||
.wp-lightbox-overlay.show-closing-animation:not(.active){
|
||||
animation:turn-off-visibility .35s both;
|
||||
}
|
||||
.wp-lightbox-overlay.show-closing-animation:not(.active) img{
|
||||
animation:turn-off-visibility .25s both;
|
||||
}
|
||||
@media (prefers-reduced-motion:no-preference){
|
||||
.wp-lightbox-overlay.zoom.active{
|
||||
animation:none;
|
||||
opacity:1;
|
||||
visibility:visible;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active .lightbox-image-container{
|
||||
animation:lightbox-zoom-in .4s;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active .lightbox-image-container img{
|
||||
animation:none;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active .scrim{
|
||||
animation:turn-on-visibility .4s forwards;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active){
|
||||
animation:none;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container{
|
||||
animation:lightbox-zoom-out .4s;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img{
|
||||
animation:none;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim{
|
||||
animation:turn-off-visibility .4s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes turn-on-visibility{
|
||||
0%{
|
||||
opacity:0;
|
||||
}
|
||||
to{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
@keyframes turn-off-visibility{
|
||||
0%{
|
||||
opacity:1;
|
||||
visibility:visible;
|
||||
}
|
||||
99%{
|
||||
opacity:0;
|
||||
visibility:visible;
|
||||
}
|
||||
to{
|
||||
opacity:0;
|
||||
visibility:hidden;
|
||||
}
|
||||
}
|
||||
@keyframes lightbox-zoom-in{
|
||||
0%{
|
||||
transform:translate(calc(((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position))*-1), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
|
||||
}
|
||||
to{
|
||||
transform:translate(50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes lightbox-zoom-out{
|
||||
0%{
|
||||
transform:translate(50%, -50%) scale(1);
|
||||
visibility:visible;
|
||||
}
|
||||
99%{
|
||||
visibility:visible;
|
||||
}
|
||||
to{
|
||||
transform:translate(calc(((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position))*-1), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
|
||||
visibility:hidden;
|
||||
}
|
||||
}
|
1
wp-includes/blocks/image/style-rtl.min.css
vendored
Normal file
1
wp-includes/blocks/image/style-rtl.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
301
wp-includes/blocks/image/style.css
Normal file
301
wp-includes/blocks/image/style.css
Normal file
@ -0,0 +1,301 @@
|
||||
.wp-block-image img{
|
||||
box-sizing:border-box;
|
||||
height:auto;
|
||||
max-width:100%;
|
||||
vertical-align:bottom;
|
||||
}
|
||||
.wp-block-image[style*=border-radius] img,.wp-block-image[style*=border-radius]>a{
|
||||
border-radius:inherit;
|
||||
}
|
||||
.wp-block-image.has-custom-border img{
|
||||
box-sizing:border-box;
|
||||
}
|
||||
.wp-block-image.aligncenter{
|
||||
text-align:center;
|
||||
}
|
||||
.wp-block-image.alignfull img,.wp-block-image.alignwide img{
|
||||
height:auto;
|
||||
width:100%;
|
||||
}
|
||||
.wp-block-image .aligncenter,.wp-block-image .alignleft,.wp-block-image .alignright,.wp-block-image.aligncenter,.wp-block-image.alignleft,.wp-block-image.alignright{
|
||||
display:table;
|
||||
}
|
||||
.wp-block-image .aligncenter>figcaption,.wp-block-image .alignleft>figcaption,.wp-block-image .alignright>figcaption,.wp-block-image.aligncenter>figcaption,.wp-block-image.alignleft>figcaption,.wp-block-image.alignright>figcaption{
|
||||
caption-side:bottom;
|
||||
display:table-caption;
|
||||
}
|
||||
.wp-block-image .alignleft{
|
||||
float:left;
|
||||
margin:.5em 1em .5em 0;
|
||||
}
|
||||
.wp-block-image .alignright{
|
||||
float:right;
|
||||
margin:.5em 0 .5em 1em;
|
||||
}
|
||||
.wp-block-image .aligncenter{
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
.wp-block-image figcaption{
|
||||
margin-bottom:1em;
|
||||
margin-top:.5em;
|
||||
}
|
||||
.wp-block-image .is-style-rounded img,.wp-block-image.is-style-circle-mask img,.wp-block-image.is-style-rounded img{
|
||||
border-radius:9999px;
|
||||
}
|
||||
@supports ((-webkit-mask-image:none) or (mask-image:none)) or (-webkit-mask-image:none){
|
||||
.wp-block-image.is-style-circle-mask img{
|
||||
border-radius:0;
|
||||
-webkit-mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
|
||||
mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
|
||||
mask-mode:alpha;
|
||||
-webkit-mask-position:center;
|
||||
mask-position:center;
|
||||
-webkit-mask-repeat:no-repeat;
|
||||
mask-repeat:no-repeat;
|
||||
-webkit-mask-size:contain;
|
||||
mask-size:contain;
|
||||
}
|
||||
}
|
||||
.wp-block-image :where(.has-border-color){
|
||||
border-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-top-color]){
|
||||
border-top-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-right-color]){
|
||||
border-right-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-bottom-color]){
|
||||
border-bottom-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-left-color]){
|
||||
border-left-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-width]){
|
||||
border-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-top-width]){
|
||||
border-top-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-right-width]){
|
||||
border-right-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-bottom-width]){
|
||||
border-bottom-style:solid;
|
||||
}
|
||||
.wp-block-image :where([style*=border-left-width]){
|
||||
border-left-style:solid;
|
||||
}
|
||||
|
||||
.wp-block-image figure{
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.wp-lightbox-container{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
position:relative;
|
||||
}
|
||||
.wp-lightbox-container img{
|
||||
cursor:zoom-in;
|
||||
}
|
||||
.wp-lightbox-container img:hover+button{
|
||||
opacity:1;
|
||||
}
|
||||
.wp-lightbox-container button{
|
||||
align-items:center;
|
||||
-webkit-backdrop-filter:blur(16px) saturate(180%);
|
||||
backdrop-filter:blur(16px) saturate(180%);
|
||||
background-color:#5a5a5a40;
|
||||
border:none;
|
||||
border-radius:4px;
|
||||
cursor:zoom-in;
|
||||
display:flex;
|
||||
height:20px;
|
||||
justify-content:center;
|
||||
opacity:0;
|
||||
padding:0;
|
||||
position:absolute;
|
||||
right:16px;
|
||||
text-align:center;
|
||||
top:16px;
|
||||
transition:opacity .2s ease;
|
||||
width:20px;
|
||||
z-index:100;
|
||||
}
|
||||
.wp-lightbox-container button:focus-visible{
|
||||
outline:3px auto #5a5a5a40;
|
||||
outline:3px auto -webkit-focus-ring-color;
|
||||
outline-offset:3px;
|
||||
}
|
||||
.wp-lightbox-container button:hover{
|
||||
cursor:pointer;
|
||||
opacity:1;
|
||||
}
|
||||
.wp-lightbox-container button:focus{
|
||||
opacity:1;
|
||||
}
|
||||
.wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){
|
||||
background-color:#5a5a5a40;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.wp-lightbox-overlay{
|
||||
box-sizing:border-box;
|
||||
cursor:zoom-out;
|
||||
height:100vh;
|
||||
left:0;
|
||||
overflow:hidden;
|
||||
position:fixed;
|
||||
top:0;
|
||||
visibility:hidden;
|
||||
width:100%;
|
||||
z-index:100000;
|
||||
}
|
||||
.wp-lightbox-overlay .close-button{
|
||||
align-items:center;
|
||||
cursor:pointer;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
min-height:40px;
|
||||
min-width:40px;
|
||||
padding:0;
|
||||
position:absolute;
|
||||
right:calc(env(safe-area-inset-right) + 16px);
|
||||
top:calc(env(safe-area-inset-top) + 16px);
|
||||
z-index:5000000;
|
||||
}
|
||||
.wp-lightbox-overlay .close-button:focus,.wp-lightbox-overlay .close-button:hover,.wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background){
|
||||
background:none;
|
||||
border:none;
|
||||
}
|
||||
.wp-lightbox-overlay .lightbox-image-container{
|
||||
height:var(--wp--lightbox-container-height);
|
||||
left:50%;
|
||||
overflow:hidden;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
transform:translate(-50%, -50%);
|
||||
transform-origin:top left;
|
||||
width:var(--wp--lightbox-container-width);
|
||||
z-index:9999999999;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image{
|
||||
align-items:center;
|
||||
box-sizing:border-box;
|
||||
display:flex;
|
||||
height:100%;
|
||||
justify-content:center;
|
||||
margin:0;
|
||||
position:relative;
|
||||
transform-origin:0 0;
|
||||
width:100%;
|
||||
z-index:3000000;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image img{
|
||||
height:var(--wp--lightbox-image-height);
|
||||
min-height:var(--wp--lightbox-image-height);
|
||||
min-width:var(--wp--lightbox-image-width);
|
||||
width:var(--wp--lightbox-image-width);
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image figcaption{
|
||||
display:none;
|
||||
}
|
||||
.wp-lightbox-overlay button{
|
||||
background:none;
|
||||
border:none;
|
||||
}
|
||||
.wp-lightbox-overlay .scrim{
|
||||
background-color:#fff;
|
||||
height:100%;
|
||||
opacity:.9;
|
||||
position:absolute;
|
||||
width:100%;
|
||||
z-index:2000000;
|
||||
}
|
||||
.wp-lightbox-overlay.active{
|
||||
animation:turn-on-visibility .25s both;
|
||||
visibility:visible;
|
||||
}
|
||||
.wp-lightbox-overlay.active img{
|
||||
animation:turn-on-visibility .35s both;
|
||||
}
|
||||
.wp-lightbox-overlay.show-closing-animation:not(.active){
|
||||
animation:turn-off-visibility .35s both;
|
||||
}
|
||||
.wp-lightbox-overlay.show-closing-animation:not(.active) img{
|
||||
animation:turn-off-visibility .25s both;
|
||||
}
|
||||
@media (prefers-reduced-motion:no-preference){
|
||||
.wp-lightbox-overlay.zoom.active{
|
||||
animation:none;
|
||||
opacity:1;
|
||||
visibility:visible;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active .lightbox-image-container{
|
||||
animation:lightbox-zoom-in .4s;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active .lightbox-image-container img{
|
||||
animation:none;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active .scrim{
|
||||
animation:turn-on-visibility .4s forwards;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active){
|
||||
animation:none;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container{
|
||||
animation:lightbox-zoom-out .4s;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img{
|
||||
animation:none;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim{
|
||||
animation:turn-off-visibility .4s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes turn-on-visibility{
|
||||
0%{
|
||||
opacity:0;
|
||||
}
|
||||
to{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
@keyframes turn-off-visibility{
|
||||
0%{
|
||||
opacity:1;
|
||||
visibility:visible;
|
||||
}
|
||||
99%{
|
||||
opacity:0;
|
||||
visibility:visible;
|
||||
}
|
||||
to{
|
||||
opacity:0;
|
||||
visibility:hidden;
|
||||
}
|
||||
}
|
||||
@keyframes lightbox-zoom-in{
|
||||
0%{
|
||||
transform:translate(calc((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
|
||||
}
|
||||
to{
|
||||
transform:translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes lightbox-zoom-out{
|
||||
0%{
|
||||
transform:translate(-50%, -50%) scale(1);
|
||||
visibility:visible;
|
||||
}
|
||||
99%{
|
||||
visibility:visible;
|
||||
}
|
||||
to{
|
||||
transform:translate(calc((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
|
||||
visibility:hidden;
|
||||
}
|
||||
}
|
1
wp-includes/blocks/image/style.min.css
vendored
Normal file
1
wp-includes/blocks/image/style.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
12
wp-includes/blocks/image/theme-rtl.css
Normal file
12
wp-includes/blocks/image/theme-rtl.css
Normal file
@ -0,0 +1,12 @@
|
||||
.wp-block-image figcaption{
|
||||
color:#555;
|
||||
font-size:13px;
|
||||
text-align:center;
|
||||
}
|
||||
.is-dark-theme .wp-block-image figcaption{
|
||||
color:#ffffffa6;
|
||||
}
|
||||
|
||||
.wp-block-image{
|
||||
margin:0 0 1em;
|
||||
}
|
1
wp-includes/blocks/image/theme-rtl.min.css
vendored
Normal file
1
wp-includes/blocks/image/theme-rtl.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.wp-block-image figcaption{color:#555;font-size:13px;text-align:center}.is-dark-theme .wp-block-image figcaption{color:#ffffffa6}.wp-block-image{margin:0 0 1em}
|
12
wp-includes/blocks/image/theme.css
Normal file
12
wp-includes/blocks/image/theme.css
Normal file
@ -0,0 +1,12 @@
|
||||
.wp-block-image figcaption{
|
||||
color:#555;
|
||||
font-size:13px;
|
||||
text-align:center;
|
||||
}
|
||||
.is-dark-theme .wp-block-image figcaption{
|
||||
color:#ffffffa6;
|
||||
}
|
||||
|
||||
.wp-block-image{
|
||||
margin:0 0 1em;
|
||||
}
|
1
wp-includes/blocks/image/theme.min.css
vendored
Normal file
1
wp-includes/blocks/image/theme.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.wp-block-image figcaption{color:#555;font-size:13px;text-align:center}.is-dark-theme .wp-block-image figcaption{color:#ffffffa6}.wp-block-image{margin:0 0 1em}
|
1
wp-includes/blocks/image/view.asset.php
Normal file
1
wp-includes/blocks/image/view.asset.php
Normal file
@ -0,0 +1 @@
|
||||
<?php return array('dependencies' => array(), 'version' => '7500eb032759d407a71d');
|
422
wp-includes/blocks/image/view.js
Normal file
422
wp-includes/blocks/image/view.js
Normal file
@ -0,0 +1,422 @@
|
||||
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__ = {};
|
||||
|
||||
;// CONCATENATED MODULE: 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) });
|
||||
;// CONCATENATED MODULE: ./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;
|
||||
|
||||
/**
|
||||
* 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: {},
|
||||
get overlayOpened() {
|
||||
return state.currentImage.currentSrc;
|
||||
},
|
||||
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 imgStyles() {
|
||||
return state.overlayOpened && `${state.currentImage.imgStyles?.replace(/;$/, '')}; object-fit:cover;`;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
showLightbox() {
|
||||
const ctx = (0,interactivity_namespaceObject.getContext)();
|
||||
|
||||
// Bails out if the image has not loaded yet.
|
||||
if (!ctx.imageRef?.complete) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Stores the positons 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;
|
||||
state.overlayEnabled = true;
|
||||
|
||||
// Computes the styles of the overlay for the animation.
|
||||
callbacks.setOverlayStyles();
|
||||
},
|
||||
hideLightbox() {
|
||||
if (state.overlayEnabled) {
|
||||
// Waits until the close animation has completed before allowing a
|
||||
// user to scroll again. The duration of this animation is defined in
|
||||
// the `styles.scss` file, but in any case we should wait a few
|
||||
// milliseconds longer than the duration, otherwise a user may scroll
|
||||
// too soon and cause the animation to look sloppy.
|
||||
setTimeout(function () {
|
||||
// Delays before changing the focus. Otherwise the focus ring will
|
||||
// appear on Firefox before the image has finished animating, which
|
||||
// looks broken.
|
||||
buttonRef.focus({
|
||||
preventScroll: true
|
||||
});
|
||||
|
||||
// Resets the current image to mark the overlay as closed.
|
||||
state.currentImage = {};
|
||||
imageRef = null;
|
||||
buttonRef = 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) {
|
||||
if (state.overlayEnabled) {
|
||||
// Focuses the close button when the user presses the tab key.
|
||||
if (event.key === 'Tab') {
|
||||
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(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 (!imageRef) return;
|
||||
let {
|
||||
naturalWidth,
|
||||
naturalHeight,
|
||||
offsetWidth: originalWidth,
|
||||
offsetHeight: originalHeight
|
||||
} = imageRef;
|
||||
let {
|
||||
x: screenPosX,
|
||||
y: screenPosY
|
||||
} = 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;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// 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 = `
|
||||
:root {
|
||||
--wp--lightbox-initial-top-position: ${screenPosY}px;
|
||||
--wp--lightbox-initial-left-position: ${screenPosX}px;
|
||||
--wp--lightbox-container-width: ${containerWidth + 1}px;
|
||||
--wp--lightbox-container-height: ${containerHeight + 1}px;
|
||||
--wp--lightbox-image-width: ${lightboxImgWidth}px;
|
||||
--wp--lightbox-image-height: ${lightboxImgHeight}px;
|
||||
--wp--lightbox-scale: ${containerScale};
|
||||
--wp--lightbox-scrollbar-width: ${window.innerWidth - document.documentElement.clientWidth}px;
|
||||
}
|
||||
`;
|
||||
},
|
||||
setButtonStyles() {
|
||||
const ctx = (0,interactivity_namespaceObject.getContext)();
|
||||
const {
|
||||
ref
|
||||
} = (0,interactivity_namespaceObject.getElement)();
|
||||
ctx.imageRef = ref;
|
||||
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);
|
||||
}
|
||||
}
|
||||
const buttonOffsetTop = figureHeight - offsetHeight;
|
||||
const buttonOffsetRight = figureWidth - offsetWidth;
|
||||
|
||||
// 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') {
|
||||
// Natural ratio of the image.
|
||||
const naturalRatio = naturalWidth / naturalHeight;
|
||||
// Offset ratio of the image.
|
||||
const offsetRatio = offsetWidth / offsetHeight;
|
||||
if (naturalRatio >= offsetRatio) {
|
||||
// If it reaches the width first, it keeps the width and compute the
|
||||
// height.
|
||||
const referenceHeight = offsetWidth / naturalRatio;
|
||||
ctx.imageButtonTop = (offsetHeight - referenceHeight) / 2 + buttonOffsetTop + 16;
|
||||
ctx.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;
|
||||
}
|
||||
} else {
|
||||
ctx.imageButtonTop = buttonOffsetTop + 16;
|
||||
ctx.imageButtonRight = buttonOffsetRight + 16;
|
||||
}
|
||||
},
|
||||
setOverlayFocus() {
|
||||
if (state.overlayEnabled) {
|
||||
// Moves the focus to the dialog when it opens.
|
||||
const {
|
||||
ref
|
||||
} = (0,interactivity_namespaceObject.getElement)();
|
||||
ref.focus();
|
||||
}
|
||||
},
|
||||
initTriggerButton() {
|
||||
const ctx = (0,interactivity_namespaceObject.getContext)();
|
||||
const {
|
||||
ref
|
||||
} = (0,interactivity_namespaceObject.getElement)();
|
||||
ctx.buttonRef = ref;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
lock: true
|
||||
});
|
||||
|
1
wp-includes/blocks/image/view.min.asset.php
Normal file
1
wp-includes/blocks/image/view.min.asset.php
Normal file
@ -0,0 +1 @@
|
||||
<?php return array('dependencies' => array(), 'version' => 'ff354d5368d64857fef0');
|
1
wp-includes/blocks/image/view.min.js
vendored
Normal file
1
wp-includes/blocks/image/view.min.js
vendored
Normal file
@ -0,0 +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});
|
Reference in New Issue
Block a user