523 lines
20 KiB
JavaScript
523 lines
20 KiB
JavaScript
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
|
|
*/
|
|
|
|
const focusableSelectors = ['a[href]', 'area[href]', 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])', 'select:not([disabled]):not([aria-hidden])', 'textarea:not([disabled]):not([aria-hidden])', 'button:not([disabled]):not([aria-hidden])', 'iframe', 'object', 'embed', '[contenteditable]', '[tabindex]:not([tabindex^="-"])'];
|
|
|
|
/**
|
|
* Stores a context-bound scroll handler.
|
|
*
|
|
* This callback could be defined inline inside of the store
|
|
* object but it's created externally to avoid confusion about
|
|
* how its logic is called. This logic is not referenced directly
|
|
* by the directives in the markup because the scroll event we
|
|
* need to listen to is triggered on the window; so by defining it
|
|
* outside of the store, we signal that the behavior here is different.
|
|
* If we find a compelling reason to move it to the store, feel free.
|
|
*
|
|
* @type {Function}
|
|
*/
|
|
let scrollCallback;
|
|
|
|
/**
|
|
* 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;
|
|
|
|
/**
|
|
* Lightbox page-scroll handler: prevents scrolling.
|
|
*
|
|
* This handler is added to prevent scrolling behaviors that
|
|
* trigger content shift while the lightbox is open.
|
|
*
|
|
* It would be better to accomplish this through CSS alone, but
|
|
* using overflow: hidden is currently the only way to do so, and
|
|
* that causes the layout to shift and prevents the zoom animation
|
|
* from working in some cases because we're unable to account for
|
|
* the layout shift when doing the animation calculations. Instead,
|
|
* here we use JavaScript to prevent and reset the scrolling
|
|
* behavior. In the future, we may be able to use CSS or overflow: hidden
|
|
* instead to not rely on JavaScript, but this seems to be the best approach
|
|
* for now that provides the best visual experience.
|
|
*
|
|
* @param {Object} ctx Context object with the `core/image` namespace.
|
|
*/
|
|
function handleScroll(ctx) {
|
|
// We can't override the scroll behavior on mobile devices
|
|
// because doing so breaks the pinch to zoom functionality, and we
|
|
// want to allow users to zoom in further on the high-res image.
|
|
if (!isTouching && Date.now() - lastTouchTime > 450) {
|
|
// We are unable to use event.preventDefault() to prevent scrolling
|
|
// because the scroll event can't be canceled, so we reset the position instead.
|
|
window.scrollTo(ctx.scrollLeftReset, ctx.scrollTopReset);
|
|
}
|
|
}
|
|
const {
|
|
state,
|
|
actions,
|
|
callbacks
|
|
} = (0,interactivity_namespaceObject.store)('core/image', {
|
|
state: {
|
|
windowWidth: window.innerWidth,
|
|
windowHeight: window.innerHeight,
|
|
get roleAttribute() {
|
|
const ctx = (0,interactivity_namespaceObject.getContext)();
|
|
return ctx.lightboxEnabled ? 'dialog' : null;
|
|
},
|
|
get ariaModal() {
|
|
const ctx = (0,interactivity_namespaceObject.getContext)();
|
|
return ctx.lightboxEnabled ? 'true' : null;
|
|
},
|
|
get dialogLabel() {
|
|
const ctx = (0,interactivity_namespaceObject.getContext)();
|
|
return ctx.lightboxEnabled ? ctx.dialogLabel : null;
|
|
},
|
|
get lightboxObjectFit() {
|
|
const ctx = (0,interactivity_namespaceObject.getContext)();
|
|
if (ctx.initialized) {
|
|
return 'cover';
|
|
}
|
|
},
|
|
get enlargedImgSrc() {
|
|
const ctx = (0,interactivity_namespaceObject.getContext)();
|
|
return ctx.initialized ? ctx.imageUploadedSrc : 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
|
|
}
|
|
},
|
|
actions: {
|
|
showLightbox(event) {
|
|
const ctx = (0,interactivity_namespaceObject.getContext)();
|
|
// We can't initialize the lightbox until the reference
|
|
// image is loaded, otherwise the UX is broken.
|
|
if (!ctx.imageLoaded) {
|
|
return;
|
|
}
|
|
ctx.initialized = true;
|
|
ctx.lastFocusedElement = window.document.activeElement;
|
|
ctx.scrollDelta = 0;
|
|
ctx.pointerType = event.pointerType;
|
|
ctx.lightboxEnabled = true;
|
|
setStyles(ctx, ctx.imageRef);
|
|
ctx.scrollTopReset = window.pageYOffset || document.documentElement.scrollTop;
|
|
|
|
// In most cases, this value will be 0, but this is included
|
|
// in case a user has created a page with horizontal scrolling.
|
|
ctx.scrollLeftReset = window.pageXOffset || document.documentElement.scrollLeft;
|
|
|
|
// We define and bind the scroll callback here so
|
|
// that we can pass the context and as an argument.
|
|
// We may be able to change this in the future if we
|
|
// define the scroll callback in the store instead, but
|
|
// this approach seems to tbe clearest for now.
|
|
scrollCallback = handleScroll.bind(null, ctx);
|
|
|
|
// We need to add a scroll event listener to the window
|
|
// here because we are unable to otherwise access it via
|
|
// the Interactivity API directives. If we add a native way
|
|
// to access the window, we can remove this.
|
|
window.addEventListener('scroll', scrollCallback, false);
|
|
},
|
|
hideLightbox() {
|
|
const ctx = (0,interactivity_namespaceObject.getContext)();
|
|
ctx.hideAnimationEnabled = true;
|
|
if (ctx.lightboxEnabled) {
|
|
// We want to wait until the close animation is completed
|
|
// before allowing a user to scroll again. The duration of this
|
|
// animation is defined in the styles.scss and depends on if the
|
|
// animation is 'zoom' or 'fade', 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 () {
|
|
window.removeEventListener('scroll', scrollCallback);
|
|
// If we don't delay before changing the focus,
|
|
// the focus ring will appear on Firefox before
|
|
// the image has finished animating, which looks broken.
|
|
ctx.lightboxTriggerRef.focus({
|
|
preventScroll: true
|
|
});
|
|
}, 450);
|
|
ctx.lightboxEnabled = false;
|
|
}
|
|
},
|
|
handleKeydown(event) {
|
|
const ctx = (0,interactivity_namespaceObject.getContext)();
|
|
if (ctx.lightboxEnabled) {
|
|
if (event.key === 'Tab' || event.keyCode === 9) {
|
|
// If shift + tab it change the direction
|
|
if (event.shiftKey && window.document.activeElement === ctx.firstFocusableElement) {
|
|
event.preventDefault();
|
|
ctx.lastFocusableElement.focus();
|
|
} else if (!event.shiftKey && window.document.activeElement === ctx.lastFocusableElement) {
|
|
event.preventDefault();
|
|
ctx.firstFocusableElement.focus();
|
|
}
|
|
}
|
|
if (event.key === 'Escape' || event.keyCode === 27) {
|
|
actions.hideLightbox(event);
|
|
}
|
|
}
|
|
},
|
|
// This is fired just by lazily loaded
|
|
// images on the page, not all images.
|
|
handleLoad() {
|
|
const ctx = (0,interactivity_namespaceObject.getContext)();
|
|
const {
|
|
ref
|
|
} = (0,interactivity_namespaceObject.getElement)();
|
|
ctx.imageLoaded = true;
|
|
ctx.imageCurrentSrc = ref.currentSrc;
|
|
callbacks.setButtonStyles();
|
|
},
|
|
handleTouchStart() {
|
|
isTouching = true;
|
|
},
|
|
handleTouchMove(event) {
|
|
const ctx = (0,interactivity_namespaceObject.getContext)();
|
|
// On mobile devices, we want to prevent triggering the
|
|
// scroll event because otherwise the page jumps around as
|
|
// we reset 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 we find a better alternative
|
|
// to override or reset the scroll position during swipe actions.
|
|
if (ctx.lightboxEnabled) {
|
|
event.preventDefault();
|
|
}
|
|
},
|
|
handleTouchEnd() {
|
|
// We need to wait 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;
|
|
}
|
|
},
|
|
callbacks: {
|
|
initOriginImage() {
|
|
const ctx = (0,interactivity_namespaceObject.getContext)();
|
|
const {
|
|
ref
|
|
} = (0,interactivity_namespaceObject.getElement)();
|
|
ctx.imageRef = ref;
|
|
if (ref.complete) {
|
|
ctx.imageLoaded = true;
|
|
ctx.imageCurrentSrc = ref.currentSrc;
|
|
}
|
|
},
|
|
initTriggerButton() {
|
|
const ctx = (0,interactivity_namespaceObject.getContext)();
|
|
const {
|
|
ref
|
|
} = (0,interactivity_namespaceObject.getElement)();
|
|
ctx.lightboxTriggerRef = ref;
|
|
},
|
|
initLightbox() {
|
|
const ctx = (0,interactivity_namespaceObject.getContext)();
|
|
const {
|
|
ref
|
|
} = (0,interactivity_namespaceObject.getElement)();
|
|
if (ctx.lightboxEnabled) {
|
|
const focusableElements = ref.querySelectorAll(focusableSelectors);
|
|
ctx.firstFocusableElement = focusableElements[0];
|
|
ctx.lastFocusableElement = focusableElements[focusableElements.length - 1];
|
|
|
|
// Move focus to the dialog when opening it.
|
|
ref.focus();
|
|
}
|
|
},
|
|
setButtonStyles() {
|
|
const {
|
|
ref
|
|
} = (0,interactivity_namespaceObject.getElement)();
|
|
const {
|
|
naturalWidth,
|
|
naturalHeight,
|
|
offsetWidth,
|
|
offsetHeight
|
|
} = ref;
|
|
|
|
// If the image isn't loaded yet, we can't
|
|
// calculate where the button should be.
|
|
if (naturalWidth === 0 || naturalHeight === 0) {
|
|
return;
|
|
}
|
|
const figure = ref.parentElement;
|
|
const figureWidth = ref.parentElement.clientWidth;
|
|
|
|
// We need special handling for the height because
|
|
// a caption will cause the figure to be taller than
|
|
// the image, which means we need 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;
|
|
const ctx = (0,interactivity_namespaceObject.getContext)();
|
|
|
|
// In the case of an image with object-fit: contain, the
|
|
// size of the <img> element can be larger than the image itself,
|
|
// so we need 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, keep
|
|
// 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, keep
|
|
// 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;
|
|
}
|
|
},
|
|
setStylesOnResize() {
|
|
const ctx = (0,interactivity_namespaceObject.getContext)();
|
|
const {
|
|
ref
|
|
} = (0,interactivity_namespaceObject.getElement)();
|
|
if (ctx.lightboxEnabled && (state.windowWidth || state.windowHeight)) {
|
|
setStyles(ctx, ref);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
window.addEventListener('resize', debounce(() => {
|
|
state.windowWidth = window.innerWidth;
|
|
state.windowHeight = window.innerHeight;
|
|
}));
|
|
|
|
/**
|
|
* Computes styles for the lightbox and adds them to the document.
|
|
*
|
|
* @function
|
|
* @param {Object} ctx - Context for the `core/image` namespace.
|
|
* @param {Object} ref - The element reference.
|
|
*/
|
|
function setStyles(ctx, ref) {
|
|
// The reference img element lies adjacent
|
|
// to the event target button in the DOM.
|
|
let {
|
|
naturalWidth,
|
|
naturalHeight,
|
|
offsetWidth: originalWidth,
|
|
offsetHeight: originalHeight
|
|
} = ref;
|
|
let {
|
|
x: screenPosX,
|
|
y: screenPosY
|
|
} = ref.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, recalculate the original sizes
|
|
// and the screen position without the blank spaces.
|
|
if (ctx.scaleAttr === 'contain') {
|
|
if (naturalRatio > originalRatio) {
|
|
const heightWithoutSpace = originalWidth / naturalRatio;
|
|
// Recalculate screen position without the top space.
|
|
screenPosY += (originalHeight - heightWithoutSpace) / 2;
|
|
originalHeight = heightWithoutSpace;
|
|
} else {
|
|
const widthWithoutSpace = originalHeight * naturalRatio;
|
|
// Recalculate screen position without the left space.
|
|
screenPosX += (originalWidth - widthWithoutSpace) / 2;
|
|
originalWidth = widthWithoutSpace;
|
|
}
|
|
}
|
|
originalRatio = originalWidth / originalHeight;
|
|
|
|
// Typically, we use 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(ctx.targetWidth !== 'none' ? ctx.targetWidth : naturalWidth);
|
|
let imgMaxHeight = parseFloat(ctx.targetHeight !== 'none' ? ctx.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;
|
|
// Check if the target image has a different ratio than the original one (thumbnail).
|
|
// Recalculate the width and height.
|
|
if (naturalRatio.toFixed(2) !== imgRatio.toFixed(2)) {
|
|
if (naturalRatio > imgRatio) {
|
|
// If the width is reached before the height, we keep the maxWidth
|
|
// and recalculate the height.
|
|
// Unless the difference between the maxHeight and the reducedHeight
|
|
// is higher than the maxWidth, where we keep 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, we keep the maxHeight
|
|
// and recalculate the width.
|
|
// Unless the difference between the maxWidth and the reducedWidth
|
|
// is higher than the maxHeight, where we keep 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;
|
|
|
|
// Calculate 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, keep that size.
|
|
if (originalWidth > containerWidth || originalHeight > containerHeight) {
|
|
containerWidth = originalWidth;
|
|
containerHeight = originalHeight;
|
|
}
|
|
|
|
// Calculate 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);
|
|
|
|
// Add the CSS variables needed.
|
|
let styleTag = document.getElementById('wp-lightbox-styles');
|
|
if (!styleTag) {
|
|
styleTag = document.createElement('style');
|
|
styleTag.id = 'wp-lightbox-styles';
|
|
document.head.appendChild(styleTag);
|
|
}
|
|
|
|
// 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.
|
|
styleTag.innerHTML = `
|
|
: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;
|
|
}
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* Debounces a function call.
|
|
*
|
|
* @function
|
|
* @param {Function} func - A function to be called
|
|
* @param {number} wait - The time to wait before calling the function
|
|
*/
|
|
function debounce(func, wait = 50) {
|
|
let timeout;
|
|
return () => {
|
|
const later = () => {
|
|
timeout = null;
|
|
func();
|
|
};
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(later, wait);
|
|
};
|
|
}
|
|
|