| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158 |
- import "./chunk-WFTEJBJX.js";
- // node_modules/photoswipe/dist/photoswipe-lightbox.esm.js
- function createElement(className, tagName, appendToEl) {
- const el = document.createElement(tagName);
- if (className) {
- el.className = className;
- }
- if (appendToEl) {
- appendToEl.appendChild(el);
- }
- return el;
- }
- function toTransformString(x, y, scale) {
- let propValue = `translate3d(${x}px,${y || 0}px,0)`;
- if (scale !== void 0) {
- propValue += ` scale3d(${scale},${scale},1)`;
- }
- return propValue;
- }
- function setWidthHeight(el, w, h) {
- el.style.width = typeof w === "number" ? `${w}px` : w;
- el.style.height = typeof h === "number" ? `${h}px` : h;
- }
- var LOAD_STATE = {
- IDLE: "idle",
- LOADING: "loading",
- LOADED: "loaded",
- ERROR: "error"
- };
- function specialKeyUsed(e) {
- return "button" in e && e.button === 1 || e.ctrlKey || e.metaKey || e.altKey || e.shiftKey;
- }
- function getElementsFromOption(option, legacySelector, parent = document) {
- let elements = [];
- if (option instanceof Element) {
- elements = [option];
- } else if (option instanceof NodeList || Array.isArray(option)) {
- elements = Array.from(option);
- } else {
- const selector = typeof option === "string" ? option : legacySelector;
- if (selector) {
- elements = Array.from(parent.querySelectorAll(selector));
- }
- }
- return elements;
- }
- function isPswpClass(fn) {
- return typeof fn === "function" && fn.prototype && fn.prototype.goTo;
- }
- function isSafari() {
- return !!(navigator.vendor && navigator.vendor.match(/apple/i));
- }
- var PhotoSwipeEvent = class {
- /**
- * @param {T} type
- * @param {PhotoSwipeEventsMap[T]} [details]
- */
- constructor(type, details) {
- this.type = type;
- this.defaultPrevented = false;
- if (details) {
- Object.assign(this, details);
- }
- }
- preventDefault() {
- this.defaultPrevented = true;
- }
- };
- var Eventable = class {
- constructor() {
- this._listeners = {};
- this._filters = {};
- this.pswp = void 0;
- this.options = void 0;
- }
- /**
- * @template {keyof PhotoSwipeFiltersMap} T
- * @param {T} name
- * @param {PhotoSwipeFiltersMap[T]} fn
- * @param {number} priority
- */
- addFilter(name, fn, priority = 100) {
- var _this$_filters$name, _this$_filters$name2, _this$pswp;
- if (!this._filters[name]) {
- this._filters[name] = [];
- }
- (_this$_filters$name = this._filters[name]) === null || _this$_filters$name === void 0 || _this$_filters$name.push({
- fn,
- priority
- });
- (_this$_filters$name2 = this._filters[name]) === null || _this$_filters$name2 === void 0 || _this$_filters$name2.sort((f1, f2) => f1.priority - f2.priority);
- (_this$pswp = this.pswp) === null || _this$pswp === void 0 || _this$pswp.addFilter(name, fn, priority);
- }
- /**
- * @template {keyof PhotoSwipeFiltersMap} T
- * @param {T} name
- * @param {PhotoSwipeFiltersMap[T]} fn
- */
- removeFilter(name, fn) {
- if (this._filters[name]) {
- this._filters[name] = this._filters[name].filter((filter) => filter.fn !== fn);
- }
- if (this.pswp) {
- this.pswp.removeFilter(name, fn);
- }
- }
- /**
- * @template {keyof PhotoSwipeFiltersMap} T
- * @param {T} name
- * @param {Parameters<PhotoSwipeFiltersMap[T]>} args
- * @returns {Parameters<PhotoSwipeFiltersMap[T]>[0]}
- */
- applyFilters(name, ...args) {
- var _this$_filters$name3;
- (_this$_filters$name3 = this._filters[name]) === null || _this$_filters$name3 === void 0 || _this$_filters$name3.forEach((filter) => {
- args[0] = filter.fn.apply(this, args);
- });
- return args[0];
- }
- /**
- * @template {keyof PhotoSwipeEventsMap} T
- * @param {T} name
- * @param {EventCallback<T>} fn
- */
- on(name, fn) {
- var _this$_listeners$name, _this$pswp2;
- if (!this._listeners[name]) {
- this._listeners[name] = [];
- }
- (_this$_listeners$name = this._listeners[name]) === null || _this$_listeners$name === void 0 || _this$_listeners$name.push(fn);
- (_this$pswp2 = this.pswp) === null || _this$pswp2 === void 0 || _this$pswp2.on(name, fn);
- }
- /**
- * @template {keyof PhotoSwipeEventsMap} T
- * @param {T} name
- * @param {EventCallback<T>} fn
- */
- off(name, fn) {
- var _this$pswp3;
- if (this._listeners[name]) {
- this._listeners[name] = this._listeners[name].filter((listener) => fn !== listener);
- }
- (_this$pswp3 = this.pswp) === null || _this$pswp3 === void 0 || _this$pswp3.off(name, fn);
- }
- /**
- * @template {keyof PhotoSwipeEventsMap} T
- * @param {T} name
- * @param {PhotoSwipeEventsMap[T]} [details]
- * @returns {AugmentedEvent<T>}
- */
- dispatch(name, details) {
- var _this$_listeners$name2;
- if (this.pswp) {
- return this.pswp.dispatch(name, details);
- }
- const event = (
- /** @type {AugmentedEvent<T>} */
- new PhotoSwipeEvent(name, details)
- );
- (_this$_listeners$name2 = this._listeners[name]) === null || _this$_listeners$name2 === void 0 || _this$_listeners$name2.forEach((listener) => {
- listener.call(this, event);
- });
- return event;
- }
- };
- var Placeholder = class {
- /**
- * @param {string | false} imageSrc
- * @param {HTMLElement} container
- */
- constructor(imageSrc, container) {
- this.element = createElement("pswp__img pswp__img--placeholder", imageSrc ? "img" : "div", container);
- if (imageSrc) {
- const imgEl = (
- /** @type {HTMLImageElement} */
- this.element
- );
- imgEl.decoding = "async";
- imgEl.alt = "";
- imgEl.src = imageSrc;
- imgEl.setAttribute("role", "presentation");
- }
- this.element.setAttribute("aria-hidden", "true");
- }
- /**
- * @param {number} width
- * @param {number} height
- */
- setDisplayedSize(width, height) {
- if (!this.element) {
- return;
- }
- if (this.element.tagName === "IMG") {
- setWidthHeight(this.element, 250, "auto");
- this.element.style.transformOrigin = "0 0";
- this.element.style.transform = toTransformString(0, 0, width / 250);
- } else {
- setWidthHeight(this.element, width, height);
- }
- }
- destroy() {
- var _this$element;
- if ((_this$element = this.element) !== null && _this$element !== void 0 && _this$element.parentNode) {
- this.element.remove();
- }
- this.element = null;
- }
- };
- var Content = class {
- /**
- * @param {SlideData} itemData Slide data
- * @param {PhotoSwipeBase} instance PhotoSwipe or PhotoSwipeLightbox instance
- * @param {number} index
- */
- constructor(itemData, instance, index) {
- this.instance = instance;
- this.data = itemData;
- this.index = index;
- this.element = void 0;
- this.placeholder = void 0;
- this.slide = void 0;
- this.displayedImageWidth = 0;
- this.displayedImageHeight = 0;
- this.width = Number(this.data.w) || Number(this.data.width) || 0;
- this.height = Number(this.data.h) || Number(this.data.height) || 0;
- this.isAttached = false;
- this.hasSlide = false;
- this.isDecoding = false;
- this.state = LOAD_STATE.IDLE;
- if (this.data.type) {
- this.type = this.data.type;
- } else if (this.data.src) {
- this.type = "image";
- } else {
- this.type = "html";
- }
- this.instance.dispatch("contentInit", {
- content: this
- });
- }
- removePlaceholder() {
- if (this.placeholder && !this.keepPlaceholder()) {
- setTimeout(() => {
- if (this.placeholder) {
- this.placeholder.destroy();
- this.placeholder = void 0;
- }
- }, 1e3);
- }
- }
- /**
- * Preload content
- *
- * @param {boolean} isLazy
- * @param {boolean} [reload]
- */
- load(isLazy, reload) {
- if (this.slide && this.usePlaceholder()) {
- if (!this.placeholder) {
- const placeholderSrc = this.instance.applyFilters(
- "placeholderSrc",
- // use image-based placeholder only for the first slide,
- // as rendering (even small stretched thumbnail) is an expensive operation
- this.data.msrc && this.slide.isFirstSlide ? this.data.msrc : false,
- this
- );
- this.placeholder = new Placeholder(placeholderSrc, this.slide.container);
- } else {
- const placeholderEl = this.placeholder.element;
- if (placeholderEl && !placeholderEl.parentElement) {
- this.slide.container.prepend(placeholderEl);
- }
- }
- }
- if (this.element && !reload) {
- return;
- }
- if (this.instance.dispatch("contentLoad", {
- content: this,
- isLazy
- }).defaultPrevented) {
- return;
- }
- if (this.isImageContent()) {
- this.element = createElement("pswp__img", "img");
- if (this.displayedImageWidth) {
- this.loadImage(isLazy);
- }
- } else {
- this.element = createElement("pswp__content", "div");
- this.element.innerHTML = this.data.html || "";
- }
- if (reload && this.slide) {
- this.slide.updateContentSize(true);
- }
- }
- /**
- * Preload image
- *
- * @param {boolean} isLazy
- */
- loadImage(isLazy) {
- var _this$data$src, _this$data$alt;
- if (!this.isImageContent() || !this.element || this.instance.dispatch("contentLoadImage", {
- content: this,
- isLazy
- }).defaultPrevented) {
- return;
- }
- const imageElement = (
- /** @type HTMLImageElement */
- this.element
- );
- this.updateSrcsetSizes();
- if (this.data.srcset) {
- imageElement.srcset = this.data.srcset;
- }
- imageElement.src = (_this$data$src = this.data.src) !== null && _this$data$src !== void 0 ? _this$data$src : "";
- imageElement.alt = (_this$data$alt = this.data.alt) !== null && _this$data$alt !== void 0 ? _this$data$alt : "";
- this.state = LOAD_STATE.LOADING;
- if (imageElement.complete) {
- this.onLoaded();
- } else {
- imageElement.onload = () => {
- this.onLoaded();
- };
- imageElement.onerror = () => {
- this.onError();
- };
- }
- }
- /**
- * Assign slide to content
- *
- * @param {Slide} slide
- */
- setSlide(slide) {
- this.slide = slide;
- this.hasSlide = true;
- this.instance = slide.pswp;
- }
- /**
- * Content load success handler
- */
- onLoaded() {
- this.state = LOAD_STATE.LOADED;
- if (this.slide && this.element) {
- this.instance.dispatch("loadComplete", {
- slide: this.slide,
- content: this
- });
- if (this.slide.isActive && this.slide.heavyAppended && !this.element.parentNode) {
- this.append();
- this.slide.updateContentSize(true);
- }
- if (this.state === LOAD_STATE.LOADED || this.state === LOAD_STATE.ERROR) {
- this.removePlaceholder();
- }
- }
- }
- /**
- * Content load error handler
- */
- onError() {
- this.state = LOAD_STATE.ERROR;
- if (this.slide) {
- this.displayError();
- this.instance.dispatch("loadComplete", {
- slide: this.slide,
- isError: true,
- content: this
- });
- this.instance.dispatch("loadError", {
- slide: this.slide,
- content: this
- });
- }
- }
- /**
- * @returns {Boolean} If the content is currently loading
- */
- isLoading() {
- return this.instance.applyFilters("isContentLoading", this.state === LOAD_STATE.LOADING, this);
- }
- /**
- * @returns {Boolean} If the content is in error state
- */
- isError() {
- return this.state === LOAD_STATE.ERROR;
- }
- /**
- * @returns {boolean} If the content is image
- */
- isImageContent() {
- return this.type === "image";
- }
- /**
- * Update content size
- *
- * @param {Number} width
- * @param {Number} height
- */
- setDisplayedSize(width, height) {
- if (!this.element) {
- return;
- }
- if (this.placeholder) {
- this.placeholder.setDisplayedSize(width, height);
- }
- if (this.instance.dispatch("contentResize", {
- content: this,
- width,
- height
- }).defaultPrevented) {
- return;
- }
- setWidthHeight(this.element, width, height);
- if (this.isImageContent() && !this.isError()) {
- const isInitialSizeUpdate = !this.displayedImageWidth && width;
- this.displayedImageWidth = width;
- this.displayedImageHeight = height;
- if (isInitialSizeUpdate) {
- this.loadImage(false);
- } else {
- this.updateSrcsetSizes();
- }
- if (this.slide) {
- this.instance.dispatch("imageSizeChange", {
- slide: this.slide,
- width,
- height,
- content: this
- });
- }
- }
- }
- /**
- * @returns {boolean} If the content can be zoomed
- */
- isZoomable() {
- return this.instance.applyFilters("isContentZoomable", this.isImageContent() && this.state !== LOAD_STATE.ERROR, this);
- }
- /**
- * Update image srcset sizes attribute based on width and height
- */
- updateSrcsetSizes() {
- if (!this.isImageContent() || !this.element || !this.data.srcset) {
- return;
- }
- const image = (
- /** @type HTMLImageElement */
- this.element
- );
- const sizesWidth = this.instance.applyFilters("srcsetSizesWidth", this.displayedImageWidth, this);
- if (!image.dataset.largestUsedSize || sizesWidth > parseInt(image.dataset.largestUsedSize, 10)) {
- image.sizes = sizesWidth + "px";
- image.dataset.largestUsedSize = String(sizesWidth);
- }
- }
- /**
- * @returns {boolean} If content should use a placeholder (from msrc by default)
- */
- usePlaceholder() {
- return this.instance.applyFilters("useContentPlaceholder", this.isImageContent(), this);
- }
- /**
- * Preload content with lazy-loading param
- */
- lazyLoad() {
- if (this.instance.dispatch("contentLazyLoad", {
- content: this
- }).defaultPrevented) {
- return;
- }
- this.load(true);
- }
- /**
- * @returns {boolean} If placeholder should be kept after content is loaded
- */
- keepPlaceholder() {
- return this.instance.applyFilters("isKeepingPlaceholder", this.isLoading(), this);
- }
- /**
- * Destroy the content
- */
- destroy() {
- this.hasSlide = false;
- this.slide = void 0;
- if (this.instance.dispatch("contentDestroy", {
- content: this
- }).defaultPrevented) {
- return;
- }
- this.remove();
- if (this.placeholder) {
- this.placeholder.destroy();
- this.placeholder = void 0;
- }
- if (this.isImageContent() && this.element) {
- this.element.onload = null;
- this.element.onerror = null;
- this.element = void 0;
- }
- }
- /**
- * Display error message
- */
- displayError() {
- if (this.slide) {
- var _this$instance$option, _this$instance$option2;
- let errorMsgEl = createElement("pswp__error-msg", "div");
- errorMsgEl.innerText = (_this$instance$option = (_this$instance$option2 = this.instance.options) === null || _this$instance$option2 === void 0 ? void 0 : _this$instance$option2.errorMsg) !== null && _this$instance$option !== void 0 ? _this$instance$option : "";
- errorMsgEl = /** @type {HTMLDivElement} */
- this.instance.applyFilters("contentErrorElement", errorMsgEl, this);
- this.element = createElement("pswp__content pswp__error-msg-container", "div");
- this.element.appendChild(errorMsgEl);
- this.slide.container.innerText = "";
- this.slide.container.appendChild(this.element);
- this.slide.updateContentSize(true);
- this.removePlaceholder();
- }
- }
- /**
- * Append the content
- */
- append() {
- if (this.isAttached || !this.element) {
- return;
- }
- this.isAttached = true;
- if (this.state === LOAD_STATE.ERROR) {
- this.displayError();
- return;
- }
- if (this.instance.dispatch("contentAppend", {
- content: this
- }).defaultPrevented) {
- return;
- }
- const supportsDecode = "decode" in this.element;
- if (this.isImageContent()) {
- if (supportsDecode && this.slide && (!this.slide.isActive || isSafari())) {
- this.isDecoding = true;
- this.element.decode().catch(() => {
- }).finally(() => {
- this.isDecoding = false;
- this.appendImage();
- });
- } else {
- this.appendImage();
- }
- } else if (this.slide && !this.element.parentNode) {
- this.slide.container.appendChild(this.element);
- }
- }
- /**
- * Activate the slide,
- * active slide is generally the current one,
- * meaning the user can see it.
- */
- activate() {
- if (this.instance.dispatch("contentActivate", {
- content: this
- }).defaultPrevented || !this.slide) {
- return;
- }
- if (this.isImageContent() && this.isDecoding && !isSafari()) {
- this.appendImage();
- } else if (this.isError()) {
- this.load(false, true);
- }
- if (this.slide.holderElement) {
- this.slide.holderElement.setAttribute("aria-hidden", "false");
- }
- }
- /**
- * Deactivate the content
- */
- deactivate() {
- this.instance.dispatch("contentDeactivate", {
- content: this
- });
- if (this.slide && this.slide.holderElement) {
- this.slide.holderElement.setAttribute("aria-hidden", "true");
- }
- }
- /**
- * Remove the content from DOM
- */
- remove() {
- this.isAttached = false;
- if (this.instance.dispatch("contentRemove", {
- content: this
- }).defaultPrevented) {
- return;
- }
- if (this.element && this.element.parentNode) {
- this.element.remove();
- }
- if (this.placeholder && this.placeholder.element) {
- this.placeholder.element.remove();
- }
- }
- /**
- * Append the image content to slide container
- */
- appendImage() {
- if (!this.isAttached) {
- return;
- }
- if (this.instance.dispatch("contentAppendImage", {
- content: this
- }).defaultPrevented) {
- return;
- }
- if (this.slide && this.element && !this.element.parentNode) {
- this.slide.container.appendChild(this.element);
- }
- if (this.state === LOAD_STATE.LOADED || this.state === LOAD_STATE.ERROR) {
- this.removePlaceholder();
- }
- }
- };
- function getViewportSize(options, pswp) {
- if (options.getViewportSizeFn) {
- const newViewportSize = options.getViewportSizeFn(options, pswp);
- if (newViewportSize) {
- return newViewportSize;
- }
- }
- return {
- x: document.documentElement.clientWidth,
- // TODO: height on mobile is very incosistent due to toolbar
- // find a way to improve this
- //
- // document.documentElement.clientHeight - doesn't seem to work well
- y: window.innerHeight
- };
- }
- function parsePaddingOption(prop, options, viewportSize, itemData, index) {
- let paddingValue = 0;
- if (options.paddingFn) {
- paddingValue = options.paddingFn(viewportSize, itemData, index)[prop];
- } else if (options.padding) {
- paddingValue = options.padding[prop];
- } else {
- const legacyPropName = "padding" + prop[0].toUpperCase() + prop.slice(1);
- if (options[legacyPropName]) {
- paddingValue = options[legacyPropName];
- }
- }
- return Number(paddingValue) || 0;
- }
- function getPanAreaSize(options, viewportSize, itemData, index) {
- return {
- x: viewportSize.x - parsePaddingOption("left", options, viewportSize, itemData, index) - parsePaddingOption("right", options, viewportSize, itemData, index),
- y: viewportSize.y - parsePaddingOption("top", options, viewportSize, itemData, index) - parsePaddingOption("bottom", options, viewportSize, itemData, index)
- };
- }
- var MAX_IMAGE_WIDTH = 4e3;
- var ZoomLevel = class {
- /**
- * @param {PhotoSwipeOptions} options PhotoSwipe options
- * @param {SlideData} itemData Slide data
- * @param {number} index Slide index
- * @param {PhotoSwipe} [pswp] PhotoSwipe instance, can be undefined if not initialized yet
- */
- constructor(options, itemData, index, pswp) {
- this.pswp = pswp;
- this.options = options;
- this.itemData = itemData;
- this.index = index;
- this.panAreaSize = null;
- this.elementSize = null;
- this.fit = 1;
- this.fill = 1;
- this.vFill = 1;
- this.initial = 1;
- this.secondary = 1;
- this.max = 1;
- this.min = 1;
- }
- /**
- * Calculate initial, secondary and maximum zoom level for the specified slide.
- *
- * It should be called when either image or viewport size changes.
- *
- * @param {number} maxWidth
- * @param {number} maxHeight
- * @param {Point} panAreaSize
- */
- update(maxWidth, maxHeight, panAreaSize) {
- const elementSize = {
- x: maxWidth,
- y: maxHeight
- };
- this.elementSize = elementSize;
- this.panAreaSize = panAreaSize;
- const hRatio = panAreaSize.x / elementSize.x;
- const vRatio = panAreaSize.y / elementSize.y;
- this.fit = Math.min(1, hRatio < vRatio ? hRatio : vRatio);
- this.fill = Math.min(1, hRatio > vRatio ? hRatio : vRatio);
- this.vFill = Math.min(1, vRatio);
- this.initial = this._getInitial();
- this.secondary = this._getSecondary();
- this.max = Math.max(this.initial, this.secondary, this._getMax());
- this.min = Math.min(this.fit, this.initial, this.secondary);
- if (this.pswp) {
- this.pswp.dispatch("zoomLevelsUpdate", {
- zoomLevels: this,
- slideData: this.itemData
- });
- }
- }
- /**
- * Parses user-defined zoom option.
- *
- * @private
- * @param {'initial' | 'secondary' | 'max'} optionPrefix Zoom level option prefix (initial, secondary, max)
- * @returns { number | undefined }
- */
- _parseZoomLevelOption(optionPrefix) {
- const optionName = (
- /** @type {'initialZoomLevel' | 'secondaryZoomLevel' | 'maxZoomLevel'} */
- optionPrefix + "ZoomLevel"
- );
- const optionValue = this.options[optionName];
- if (!optionValue) {
- return;
- }
- if (typeof optionValue === "function") {
- return optionValue(this);
- }
- if (optionValue === "fill") {
- return this.fill;
- }
- if (optionValue === "fit") {
- return this.fit;
- }
- return Number(optionValue);
- }
- /**
- * Get zoom level to which image will be zoomed after double-tap gesture,
- * or when user clicks on zoom icon,
- * or mouse-click on image itself.
- * If you return 1 image will be zoomed to its original size.
- *
- * @private
- * @return {number}
- */
- _getSecondary() {
- let currZoomLevel = this._parseZoomLevelOption("secondary");
- if (currZoomLevel) {
- return currZoomLevel;
- }
- currZoomLevel = Math.min(1, this.fit * 3);
- if (this.elementSize && currZoomLevel * this.elementSize.x > MAX_IMAGE_WIDTH) {
- currZoomLevel = MAX_IMAGE_WIDTH / this.elementSize.x;
- }
- return currZoomLevel;
- }
- /**
- * Get initial image zoom level.
- *
- * @private
- * @return {number}
- */
- _getInitial() {
- return this._parseZoomLevelOption("initial") || this.fit;
- }
- /**
- * Maximum zoom level when user zooms
- * via zoom/pinch gesture,
- * via cmd/ctrl-wheel or via trackpad.
- *
- * @private
- * @return {number}
- */
- _getMax() {
- return this._parseZoomLevelOption("max") || Math.max(1, this.fit * 4);
- }
- };
- function lazyLoadData(itemData, instance, index) {
- const content = instance.createContentFromData(itemData, index);
- let zoomLevel;
- const {
- options
- } = instance;
- if (options) {
- zoomLevel = new ZoomLevel(options, itemData, -1);
- let viewportSize;
- if (instance.pswp) {
- viewportSize = instance.pswp.viewportSize;
- } else {
- viewportSize = getViewportSize(options, instance);
- }
- const panAreaSize = getPanAreaSize(options, viewportSize, itemData, index);
- zoomLevel.update(content.width, content.height, panAreaSize);
- }
- content.lazyLoad();
- if (zoomLevel) {
- content.setDisplayedSize(Math.ceil(content.width * zoomLevel.initial), Math.ceil(content.height * zoomLevel.initial));
- }
- return content;
- }
- function lazyLoadSlide(index, instance) {
- const itemData = instance.getItemData(index);
- if (instance.dispatch("lazyLoadSlide", {
- index,
- itemData
- }).defaultPrevented) {
- return;
- }
- return lazyLoadData(itemData, instance, index);
- }
- var PhotoSwipeBase = class extends Eventable {
- /**
- * Get total number of slides
- *
- * @returns {number}
- */
- getNumItems() {
- var _this$options;
- let numItems = 0;
- const dataSource = (_this$options = this.options) === null || _this$options === void 0 ? void 0 : _this$options.dataSource;
- if (dataSource && "length" in dataSource) {
- numItems = dataSource.length;
- } else if (dataSource && "gallery" in dataSource) {
- if (!dataSource.items) {
- dataSource.items = this._getGalleryDOMElements(dataSource.gallery);
- }
- if (dataSource.items) {
- numItems = dataSource.items.length;
- }
- }
- const event = this.dispatch("numItems", {
- dataSource,
- numItems
- });
- return this.applyFilters("numItems", event.numItems, dataSource);
- }
- /**
- * @param {SlideData} slideData
- * @param {number} index
- * @returns {Content}
- */
- createContentFromData(slideData, index) {
- return new Content(slideData, this, index);
- }
- /**
- * Get item data by index.
- *
- * "item data" should contain normalized information that PhotoSwipe needs to generate a slide.
- * For example, it may contain properties like
- * `src`, `srcset`, `w`, `h`, which will be used to generate a slide with image.
- *
- * @param {number} index
- * @returns {SlideData}
- */
- getItemData(index) {
- var _this$options2;
- const dataSource = (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.dataSource;
- let dataSourceItem = {};
- if (Array.isArray(dataSource)) {
- dataSourceItem = dataSource[index];
- } else if (dataSource && "gallery" in dataSource) {
- if (!dataSource.items) {
- dataSource.items = this._getGalleryDOMElements(dataSource.gallery);
- }
- dataSourceItem = dataSource.items[index];
- }
- let itemData = dataSourceItem;
- if (itemData instanceof Element) {
- itemData = this._domElementToItemData(itemData);
- }
- const event = this.dispatch("itemData", {
- itemData: itemData || {},
- index
- });
- return this.applyFilters("itemData", event.itemData, index);
- }
- /**
- * Get array of gallery DOM elements,
- * based on childSelector and gallery element.
- *
- * @param {HTMLElement} galleryElement
- * @returns {HTMLElement[]}
- */
- _getGalleryDOMElements(galleryElement) {
- var _this$options3, _this$options4;
- if ((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.children || (_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.childSelector) {
- return getElementsFromOption(this.options.children, this.options.childSelector, galleryElement) || [];
- }
- return [galleryElement];
- }
- /**
- * Converts DOM element to item data object.
- *
- * @param {HTMLElement} element DOM element
- * @returns {SlideData}
- */
- _domElementToItemData(element) {
- const itemData = {
- element
- };
- const linkEl = (
- /** @type {HTMLAnchorElement} */
- element.tagName === "A" ? element : element.querySelector("a")
- );
- if (linkEl) {
- itemData.src = linkEl.dataset.pswpSrc || linkEl.href;
- if (linkEl.dataset.pswpSrcset) {
- itemData.srcset = linkEl.dataset.pswpSrcset;
- }
- itemData.width = linkEl.dataset.pswpWidth ? parseInt(linkEl.dataset.pswpWidth, 10) : 0;
- itemData.height = linkEl.dataset.pswpHeight ? parseInt(linkEl.dataset.pswpHeight, 10) : 0;
- itemData.w = itemData.width;
- itemData.h = itemData.height;
- if (linkEl.dataset.pswpType) {
- itemData.type = linkEl.dataset.pswpType;
- }
- const thumbnailEl = element.querySelector("img");
- if (thumbnailEl) {
- var _thumbnailEl$getAttri;
- itemData.msrc = thumbnailEl.currentSrc || thumbnailEl.src;
- itemData.alt = (_thumbnailEl$getAttri = thumbnailEl.getAttribute("alt")) !== null && _thumbnailEl$getAttri !== void 0 ? _thumbnailEl$getAttri : "";
- }
- if (linkEl.dataset.pswpCropped || linkEl.dataset.cropped) {
- itemData.thumbCropped = true;
- }
- }
- return this.applyFilters("domItemData", itemData, element, linkEl);
- }
- /**
- * Lazy-load by slide data
- *
- * @param {SlideData} itemData Data about the slide
- * @param {number} index
- * @returns {Content} Image that is being decoded or false.
- */
- lazyLoadData(itemData, index) {
- return lazyLoadData(itemData, this, index);
- }
- };
- var PhotoSwipeLightbox = class extends PhotoSwipeBase {
- /**
- * @param {PhotoSwipeOptions} [options]
- */
- constructor(options) {
- super();
- this.options = options || {};
- this._uid = 0;
- this.shouldOpen = false;
- this._preloadedContent = void 0;
- this.onThumbnailsClick = this.onThumbnailsClick.bind(this);
- }
- /**
- * Initialize lightbox, should be called only once.
- * It's not included in the main constructor, so you may bind events before it.
- */
- init() {
- getElementsFromOption(this.options.gallery, this.options.gallerySelector).forEach((galleryElement) => {
- galleryElement.addEventListener("click", this.onThumbnailsClick, false);
- });
- }
- /**
- * @param {MouseEvent} e
- */
- onThumbnailsClick(e) {
- if (specialKeyUsed(e) || window.pswp) {
- return;
- }
- let initialPoint = {
- x: e.clientX,
- y: e.clientY
- };
- if (!initialPoint.x && !initialPoint.y) {
- initialPoint = null;
- }
- let clickedIndex = this.getClickedIndex(e);
- clickedIndex = this.applyFilters("clickedIndex", clickedIndex, e, this);
- const dataSource = {
- gallery: (
- /** @type {HTMLElement} */
- e.currentTarget
- )
- };
- if (clickedIndex >= 0) {
- e.preventDefault();
- this.loadAndOpen(clickedIndex, dataSource, initialPoint);
- }
- }
- /**
- * Get index of gallery item that was clicked.
- *
- * @param {MouseEvent} e click event
- * @returns {number}
- */
- getClickedIndex(e) {
- if (this.options.getClickedIndexFn) {
- return this.options.getClickedIndexFn.call(this, e);
- }
- const clickedTarget = (
- /** @type {HTMLElement} */
- e.target
- );
- const childElements = getElementsFromOption(
- this.options.children,
- this.options.childSelector,
- /** @type {HTMLElement} */
- e.currentTarget
- );
- const clickedChildIndex = childElements.findIndex((child) => child === clickedTarget || child.contains(clickedTarget));
- if (clickedChildIndex !== -1) {
- return clickedChildIndex;
- } else if (this.options.children || this.options.childSelector) {
- return -1;
- }
- return 0;
- }
- /**
- * Load and open PhotoSwipe
- *
- * @param {number} index
- * @param {DataSource} [dataSource]
- * @param {Point | null} [initialPoint]
- * @returns {boolean}
- */
- loadAndOpen(index, dataSource, initialPoint) {
- if (window.pswp || !this.options) {
- return false;
- }
- if (!dataSource && this.options.gallery && this.options.children) {
- const galleryElements = getElementsFromOption(this.options.gallery);
- if (galleryElements[0]) {
- dataSource = {
- gallery: galleryElements[0]
- };
- }
- }
- this.options.index = index;
- this.options.initialPointerPos = initialPoint;
- this.shouldOpen = true;
- this.preload(index, dataSource);
- return true;
- }
- /**
- * Load the main module and the slide content by index
- *
- * @param {number} index
- * @param {DataSource} [dataSource]
- */
- preload(index, dataSource) {
- const {
- options
- } = this;
- if (dataSource) {
- options.dataSource = dataSource;
- }
- const promiseArray = [];
- const pswpModuleType = typeof options.pswpModule;
- if (isPswpClass(options.pswpModule)) {
- promiseArray.push(Promise.resolve(
- /** @type {Type<PhotoSwipe>} */
- options.pswpModule
- ));
- } else if (pswpModuleType === "string") {
- throw new Error("pswpModule as string is no longer supported");
- } else if (pswpModuleType === "function") {
- promiseArray.push(
- /** @type {() => Promise<Type<PhotoSwipe>>} */
- options.pswpModule()
- );
- } else {
- throw new Error("pswpModule is not valid");
- }
- if (typeof options.openPromise === "function") {
- promiseArray.push(options.openPromise());
- }
- if (options.preloadFirstSlide !== false && index >= 0) {
- this._preloadedContent = lazyLoadSlide(index, this);
- }
- const uid = ++this._uid;
- Promise.all(promiseArray).then((iterableModules) => {
- if (this.shouldOpen) {
- const mainModule = iterableModules[0];
- this._openPhotoswipe(mainModule, uid);
- }
- });
- }
- /**
- * @private
- * @param {Type<PhotoSwipe> | { default: Type<PhotoSwipe> }} module
- * @param {number} uid
- */
- _openPhotoswipe(module, uid) {
- if (uid !== this._uid && this.shouldOpen) {
- return;
- }
- this.shouldOpen = false;
- if (window.pswp) {
- return;
- }
- const pswp = typeof module === "object" ? new module.default(this.options) : new module(this.options);
- this.pswp = pswp;
- window.pswp = pswp;
- Object.keys(this._listeners).forEach((name) => {
- var _this$_listeners$name;
- (_this$_listeners$name = this._listeners[name]) === null || _this$_listeners$name === void 0 || _this$_listeners$name.forEach((fn) => {
- pswp.on(
- name,
- /** @type {EventCallback<typeof name>} */
- fn
- );
- });
- });
- Object.keys(this._filters).forEach((name) => {
- var _this$_filters$name;
- (_this$_filters$name = this._filters[name]) === null || _this$_filters$name === void 0 || _this$_filters$name.forEach((filter) => {
- pswp.addFilter(name, filter.fn, filter.priority);
- });
- });
- if (this._preloadedContent) {
- pswp.contentLoader.addToCache(this._preloadedContent);
- this._preloadedContent = void 0;
- }
- pswp.on("destroy", () => {
- this.pswp = void 0;
- delete window.pswp;
- });
- pswp.init();
- }
- /**
- * Unbinds all events, closes PhotoSwipe if it's open.
- */
- destroy() {
- var _this$pswp;
- (_this$pswp = this.pswp) === null || _this$pswp === void 0 || _this$pswp.destroy();
- this.shouldOpen = false;
- this._listeners = {};
- getElementsFromOption(this.options.gallery, this.options.gallerySelector).forEach((galleryElement) => {
- galleryElement.removeEventListener("click", this.onThumbnailsClick, false);
- });
- }
- };
- export {
- PhotoSwipeLightbox as default
- };
- /*! Bundled license information:
- photoswipe/dist/photoswipe-lightbox.esm.js:
- (*!
- * PhotoSwipe Lightbox 5.4.4 - https://photoswipe.com
- * (c) 2024 Dmytro Semenov
- *)
- */
- //# sourceMappingURL=photoswipe_lightbox.js.map
|