@edgedev/edgecomponents
Version:
Reusable flipbook and magazine Vue components
828 lines • 196 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");i.appendChild(document.createTextNode('.viewport{-webkit-overflow-scrolling:touch;width:100%;height:100%}.viewport.zoom{overflow:scroll}.viewport.zoom.drag-to-scroll{overflow:hidden}.flipbook-container{position:relative;width:100%;height:100%;transform-origin:top left;-webkit-user-select:none;user-select:none}.click-to-flip{position:absolute;width:50%;height:100%;top:0;-webkit-user-select:none;user-select:none}.click-to-flip.left{left:0}.click-to-flip.right{right:0}.bounding-box{position:absolute;-webkit-user-select:none;user-select:none}.page{position:absolute;backface-visibility:hidden}.polygon{position:absolute;top:0;background-repeat:no-repeat;backface-visibility:hidden;transform-origin:center left}.polygon.blank{background-color:#ddd}.polygon .lighting{width:100%;height:100%}@font-face{font-family:swiper-icons;src:url(data:application/font-woff;charset=utf-8;base64,\\ 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);font-weight:400;font-style:normal}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{--swiper-navigation-size: 44px}.swiper-button-prev,.swiper-button-next{position:absolute;top:var(--swiper-navigation-top-offset, 50%);width:calc(var(--swiper-navigation-size) / 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size) / 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color))}.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev.swiper-button-hidden,.swiper-button-next.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-prev,.swiper-navigation-disabled .swiper-button-next{display:none!important}.swiper-button-prev svg,.swiper-button-next svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-prev svg,.swiper-rtl .swiper-button-next svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset, 10px);right:auto}.swiper-button-lock{display:none}.swiper-button-prev:after,.swiper-button-next:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:"prev"}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset, 10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:"next"}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;transform:translate3d(0,-50%,0)}.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translate(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.foldout-fade-enter-active,.foldout-fade-leave-active{transition:opacity .3s ease}.foldout-fade-enter-from,.foldout-fade-leave-to{opacity:0}.foldout-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;background:#080f1759;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:30;pointer-events:auto;overscroll-behavior:contain;touch-action:pan-y}.foldout-panels-wrapper{width:min(1900px,98vw);height:min(90vh,900px);overflow:auto;border-radius:.35rem;border:1px solid rgba(255,255,255,.12);background:#080f178c}.foldout-panels{display:flex;width:min(1800px,110vw);height:auto;gap:0;transform-origin:center;align-items:flex-start;justify-content:flex-start;padding:0}.foldout-panel{flex:1 1 0;background:#0b172c;border-radius:0;box-shadow:inset 0 0 12px #0003;overflow:hidden;display:flex;align-items:center;justify-content:center;min-width:33.3333%;max-width:33.3333%}.foldout-panel img{width:100%;height:auto;display:block;object-fit:contain}.foldout-overlay.foldout-stage-intro .foldout-panel:nth-child(n+3),.foldout-overlay.foldout-stage-collapsing .foldout-panel:nth-child(n+3){transform:scaleX(0);opacity:0}.foldout-overlay.foldout-stage-expanding .foldout-panel:nth-child(3),.foldout-overlay.foldout-stage-expanded .foldout-panel:nth-child(3){transform:scaleX(1);opacity:1;transition-delay:.05s}.foldout-overlay.foldout-stage-expanding .foldout-panel:nth-child(4),.foldout-overlay.foldout-stage-expanded .foldout-panel:nth-child(4){transform:scaleX(1);opacity:1;transition-delay:.15s}.foldout-controls{text-align:center;color:#f8fafc}.foldout-title{font-size:1.1rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.25rem}.foldout-controls.single-line .foldout-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin-top:.35rem}.foldout-controls.single-line .foldout-toggle{display:inline-flex;gap:.25rem}.foldout-controls.single-line .foldout-actions>*{margin:0}.foldout-pages{font-size:.95rem;opacity:.85;margin-bottom:.5rem}.foldout-hint{font-size:.9rem;opacity:.7}.foldout-zoom-controls{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.foldout-zoom-button{width:2rem;height:2rem;border-radius:9999px;border:1px solid rgba(255,255,255,.25);background:#0f766e40;color:#f8fafc;font-size:1rem;font-weight:500;line-height:1;transition:background .2s ease,opacity .2s ease}.foldout-zoom-button:disabled{opacity:.4;cursor:not-allowed}.foldout-zoom-button:not(:disabled):hover{background:#0f766e73}.foldout-zoom-label{font-size:.8rem;font-weight:500}.foldout-button{padding:.5rem .7rem;background:#0f766e;color:#fff;border-radius:9999px;border:none;font-weight:500;font-size:14px;letter-spacing:.02em;cursor:pointer;transition:transform .2s ease,background .2s ease}.foldout-button:hover{transform:translateY(-1px);background:#115e59}.foldout-button.secondary{background:#0ea5e940;margin-top:.5rem}.foldout-button.secondary:hover{background:#0ea5e966}.foldout-prompt{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.foldout-prompt-card{background:#0f172ad9;padding:1.5rem;border-radius:1rem;text-align:center;box-shadow:0 10px 25px #00000059}.foldout-prompt-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}.flipbook-shell{width:100%;height:100%;transition:opacity .3s ease,filter .3s ease}.flipbook-shell.foldout-active{opacity:.15;filter:blur(2px);pointer-events:none}.foldout-panels{touch-action:none}')),document.head.appendChild(i)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
import { ref as R, reactive as Kt, computed as A, onMounted as pt, onBeforeUnmount as gt, watch as oe, createElementBlock as ee, openBlock as J, createBlock as Qt, renderSlot as Ot, createElementVNode as U, Teleport as Mi, normalizeProps as zt, guardReactiveProps as Jt, mergeProps as Ii, normalizeStyle as ve, normalizeClass as ot, createCommentVNode as _e, Fragment as Bt, renderList as At, withDirectives as Li, vShow as Oi, onUpdated as ei, provide as ti, nextTick as zi, h as fe, onBeforeUpdate as Bi, inject as Ai, resolveComponent as Vt, createVNode as st, withCtx as Ue, createTextVNode as ki, Transition as Di, withModifiers as Ze, toDisplayString as Ht, unref as Wt } from "vue";
const _i = ["src"], Fi = ["src"], ks = {
__name: "flipbook",
props: {
magazine: {
type: Object,
required: !0
},
flipDuration: {
type: Number,
default: 1e3
},
zoomDuration: {
type: Number,
default: 500
},
zoomLevels: {
type: Array,
default: () => [1, 2, 4]
},
perspective: {
type: Number,
default: 2400
},
nPolygons: {
type: Number,
default: 10
},
ambient: {
type: Number,
default: 0.4
},
gloss: {
type: Number,
default: 0.6
},
swipeMin: {
type: Number,
default: 3
},
singlePage: {
type: Boolean,
default: !1
},
forwardDirection: {
type: String,
default: "right",
validator: (t) => t === "right" || t === "left"
},
centering: {
type: Boolean,
default: !0
},
startPage: {
type: Number,
default: null
},
loadingImage: {
type: String,
default: "spinner"
},
clickToZoom: {
type: Boolean,
default: !0
},
dragToFlip: {
type: Boolean,
default: !0
},
wheel: {
type: String,
default: "scroll"
},
teleport: {
type: String,
default: ""
}
},
emits: [
"flip-left-start",
"flip-left-end",
"flip-right-start",
"flip-right-end",
"zoom-start",
"zoom-end"
],
setup(t, { expose: e, emit: n }) {
const i = t, a = n, r = (g) => g ** 2, d = (g) => 1 - r(1 - g), l = (g) => g < 0.5 ? r(g * 2) / 2 : 0.5 + d((g - 0.5) * 2) / 2, o = R(1), u = R(null), s = Kt({
viewWidth: 0,
viewHeight: 0,
imageWidth: null,
imageHeight: null,
displayedPages: 1,
nImageLoad: 0,
nImageLoadTrigger: 0,
imageLoadCallback: null,
currentPage: 0,
firstPage: 0,
secondPage: 1,
zoomIndex: 0,
zooming: !1,
touchStartX: null,
touchStartY: null,
maxMove: 0,
activeCursor: null,
hasTouchEvents: !1,
hasPointerEvents: !1,
minX: 1 / 0,
maxX: -1 / 0,
preloadedImages: {},
flip: {
progress: 0,
direction: null,
frontImage: null,
backImage: null,
auto: !1,
opacity: 1
},
currentCenterOffset: null,
animatingCenter: !1,
startScrollLeft: 0,
startScrollTop: 0,
scrollLeft: 0,
scrollTop: 0,
loadedImages: {},
mounted: !1,
finalImages: {}
}), c = A(() => {
var z, W, X;
if ((z = i.magazine) != null && z.thumbnailImages)
return [null, ...i.magazine.thumbnailImages.slice().sort((G, V) => {
const ne = Number.parseInt(G.pageName.replace(/\D/g, "")), se = Number.parseInt(V.pageName.replace(/\D/g, ""));
return ne - se;
}).map((G) => G.url)];
const g = ((X = (W = i.magazine) == null ? void 0 : W.ccState) == null ? void 0 : X.cfImages) || {};
return [null, ...Object.keys(g).sort().map((G) => g[G].variants.find((ne) => ne.includes("/thumbnail"))).filter(Boolean)];
}), h = A(() => {
var z, W, X;
if ((z = i.magazine) != null && z.highResImages)
return [null, ...i.magazine.highResImages.slice().sort((G, V) => {
const ne = Number.parseInt(G.pageName.replace(/\D/g, "")), se = Number.parseInt(V.pageName.replace(/\D/g, ""));
return ne - se;
}).map((G) => G.url)];
const g = ((X = (W = i.magazine) == null ? void 0 : W.ccState) == null ? void 0 : X.cfImages) || {};
return [null, ...Object.keys(g).sort().map((G) => g[G].variants.find((ne) => ne.includes("/public"))).filter(Boolean)];
}), w = A(() => i.zoomLevels || [1]), m = A(() => !s.flip.direction && s.currentPage + s.displayedPages < c.value.length), v = (g, C = !1) => {
if (C && o.value > 1 && !s.zooming) {
const z = h.value[g];
return z && console.log("Using high-res image:", z), z.replace("/public", "/highres");
}
return c.value[g] || null;
}, M = A(() => !s.flip.direction && s.currentPage >= s.displayedPages && !(s.displayedPages === 1 && !v(s.firstPage - 1))), y = A(() => typeof navigator < "u" && /Trident/.test(navigator.userAgent)), f = A(() => i.forwardDirection === "left" ? m.value : M.value), p = A(() => i.forwardDirection === "right" ? m.value : M.value), b = A(() => !s.zooming && s.zoomIndex < w.value.length - 1), x = A(() => !s.zooming && s.zoomIndex > 0), L = A(() => c.value[0] == null ? c.value.length - 1 : c.value.length), O = A(() => c.value[0] != null ? s.currentPage + 1 : Math.max(1, s.currentPage)), P = A(() => i.forwardDirection === "right" || s.displayedPages === 1 ? s.firstPage : s.secondPage), S = A(() => i.forwardDirection === "left" ? s.firstPage : s.secondPage), T = A(() => P.value !== null && P.value > 0), I = A(() => S.value !== null && s.displayedPages === 2), D = A(() => s.activeCursor ? s.activeCursor : y.value ? "auto" : i.clickToZoom && b.value ? "zoom-in" : i.clickToZoom && x.value ? "zoom-out" : i.dragToFlip ? "grab" : "auto"), N = A(() => {
const g = s.displayedPages * s.imageWidth, C = s.viewWidth / g, z = s.viewHeight / s.imageHeight;
return Math.min(C, z);
}), _ = A(() => Math.round(s.imageWidth * N.value)), $ = A(() => Math.round(s.imageHeight * N.value)), k = A(() => (s.viewWidth - _.value * s.displayedPages) / 2), H = A(() => (s.viewHeight - $.value) / 2), F = A(() => {
const g = _.value / i.nPolygons;
return `${Math.ceil(g + 1 / o.value)}px`;
}), Y = A(() => `${$.value}px`), K = A(() => `${_.value}px ${$.value}px`), ue = (g) => {
if (!s.flip.direction)
return [];
let C = s.flip.progress, z = s.flip.direction;
s.displayedPages === 1 && z !== i.forwardDirection && (C = 1 - C, z = i.forwardDirection), s.flip.opacity = s.displayedPages === 1 && C > 0.7 ? 1 - (C - 0.7) / 0.3 : 1;
const W = g === "front" ? s.flip.frontImage : s.flip.backImage, X = _.value / i.nPolygons;
let G = k.value, V = !1;
s.displayedPages === 1 ? i.forwardDirection === "right" ? g === "back" && (V = !0, G = k.value - _.value) : z === "left" ? g === "back" ? G = _.value - k.value : V = !0 : g === "front" ? G = _.value - k.value : V = !0 : z === "left" ? g === "back" ? G = s.viewWidth / 2 : V = !0 : g === "front" ? G = s.viewWidth / 2 : V = !0;
const ne = (Le, qe) => {
const Oe = [], Xe = [-0.5, -0.25, 0, 0.25, 0.5];
if (i.ambient < 1) {
const we = 1 - i.ambient, re = Xe.map(
(me) => (1 - Math.cos((Le - qe * me) / 180 * Math.PI)) * we
);
Oe.push(`
linear-gradient(to right,
rgba(0, 0, 0, ${re[0]}),
rgba(0, 0, 0, ${re[1]}) 25%,
rgba(0, 0, 0, ${re[2]}) 50%,
rgba(0, 0, 0, ${re[3]}) 75%,
rgba(0, 0, 0, ${re[4]}))
`);
}
if (i.gloss > 0 && !y.value) {
const me = Xe.map(
(Ye) => Math.max(
Math.cos((Le + 30 - qe * Ye) / 180 * Math.PI) ** 200,
Math.cos((Le - 30 - qe * Ye) / 180 * Math.PI) ** 200
)
);
Oe.push(`
linear-gradient(to right,
rgba(255, 255, 255, ${me[0] * i.gloss}),
rgba(255, 255, 255, ${me[1] * i.gloss}) 25%,
rgba(255, 255, 255, ${me[2] * i.gloss}) 50%,
rgba(255, 255, 255, ${me[3] * i.gloss}) 75%,
rgba(255, 255, 255, ${me[4] * i.gloss}))
`);
}
return Oe.join(",");
}, se = new DOMMatrix();
se.translateSelf(s.viewWidth / 2, 0), se.scaleSelf(1, 1, i.perspective), se.translateSelf(-s.viewWidth / 2, 0), se.translateSelf(G, H.value);
let Te = 0;
C > 0.5 && (Te = -(C - 0.5) * 2 * 180), z === "left" && (Te = -Te), Te += g === "back" ? 180 : 0, Te && (V && se.translateSelf(_.value, 0), se.rotateAxisAngleSelf(0, 1, 0, Te), V && se.translateSelf(-_.value, 0));
let Ie = C < 0.5 ? C * 2 * Math.PI : (1 - (C - 0.5) * 2) * Math.PI;
Ie === 0 && (Ie = 1e-9);
const We = _.value / Ie;
let Re = 0;
const je = Ie / i.nPolygons;
let Ee = je / 2 / Math.PI * 180, pe = je / Math.PI * 180;
V && (Ee = -Ie / Math.PI * 180 + pe / 2), g === "back" && (Ee = -Ee, pe = -pe), s.minX = 1 / 0, s.maxX = -1 / 0;
const ge = [];
for (let Le = 0; Le < i.nPolygons; Le++) {
const qe = `${Le / (i.nPolygons - 1) * 100}% 0px`, Oe = new DOMMatrix(se), Xe = V ? Ie - Re : Re;
let we = Math.sin(Xe) * We;
we = V ? _.value - we : we;
let re = (1 - Math.cos(Xe)) * We;
re = g === "back" ? -re : re, (isNaN(we) || !isFinite(we)) && (we = 0), (isNaN(re) || !isFinite(re)) && (re = 0), Oe.translateSelf(we, 0, re), Oe.rotateAxisAngleSelf(0, 1, 0, -Ee);
const me = Oe.m41, Ye = me + X;
s.maxX = Math.max(me, Ye, s.maxX), s.minX = Math.min(me, Ye, s.minX);
const Ci = ne(Te - Ee, pe);
Re += je, Ee += pe, ge.push([g + Le, W, Ci, qe, Oe.toString(), Math.abs(Math.round(re))]);
}
return ge;
}, Ce = A(() => [
...ue("front"),
// Generates polygon data for the front side
...ue("back")
// Generates polygon data for the back side
]), Qe = (g) => {
if (s.imageWidth == null)
return g;
if (s.loadedImages[g])
return g;
{
const C = new Image();
return C.onload = () => {
s.loadedImages[g] = !0;
}, C.src = g, i.loadingImage;
}
}, Ne = (g, C) => {
if (s.finalImages[g])
return;
const z = new Image();
z.onload = () => {
s.finalImages[g] = C;
}, z.src = C;
}, mt = A(() => Ce.value.map(([g, C, z, W, X, G]) => {
const V = C.replace("/thumbnail", "/highres");
Ne(C, V);
const ne = s.finalImages[C] || C;
return {
key: g,
bgImage: `url(${ne})`,
lighting: z,
bgPos: W,
transform: X,
z: G
};
})), he = A(() => {
if (s.displayedPages === 1)
return k.value;
const g = T.value ? k.value : s.viewWidth / 2;
return g < s.minX ? g : s.minX;
}), Be = A(() => {
if (s.displayedPages === 1)
return s.viewWidth - k.value;
const g = I.value ? s.viewWidth - k.value : s.viewWidth / 2;
return g > s.maxX ? g : s.maxX;
}), Me = A(() => {
const g = i.centering ? Math.round(s.viewWidth / 2 - (he.value + Be.value) / 2) : 0;
return s.currentCenterOffset == null && s.imageWidth != null && (s.currentCenterOffset = g), g;
}), Ae = A(() => Math.round(s.currentCenterOffset)), $e = A(() => !i.hasTouchEvents), Je = A(() => {
const g = (Be.value - he.value) * o.value;
return g < s.viewWidth ? (he.value + Ae.value) * o.value - (s.viewWidth - g) / 2 : (he.value + Ae.value) * o.value;
}), He = A(() => {
const g = (Be.value - he.value) * o.value;
return g < s.viewWidth ? (he.value + Ae.value) * o.value - (s.viewWidth - g) / 2 : (Be.value + Ae.value) * o.value - s.viewWidth;
}), et = A(() => {
const g = $.value * o.value;
return g < s.viewHeight ? H.value * o.value - (s.viewHeight - g) / 2 : H.value * o.value;
}), vt = A(() => {
const g = $.value * o.value;
return g < s.viewHeight ? H.value * o.value - (s.viewHeight - g) / 2 : (H.value + $.value) * o.value - s.viewHeight;
}), ht = A(() => Math.min(He.value, Math.max(Je.value, s.scrollLeft))), tt = A(() => Math.min(vt.value, Math.max(et.value, s.scrollTop))), E = () => {
s.displayedPages === 1 && s.currentPage === 0 && c.value.length && !v(0) && s.currentPage++;
}, B = () => {
const g = u.value;
g && (s.viewWidth = g.clientWidth, s.viewHeight = g.clientHeight, s.displayedPages = s.viewWidth > s.viewHeight && !i.singlePage ? 2 : 1, s.displayedPages === 2 && (s.currentPage &= -2), E(), s.minX = 1 / 0, s.maxX = -1 / 0);
}, q = (g) => {
g == null || g === O.value || (c.value[0] == null ? s.displayedPages === 2 && g === 1 ? s.currentPage = 0 : s.currentPage = g : s.currentPage = g - 1, s.minX = 1 / 0, s.maxX = -1 / 0, s.currentCenterOffset = Me.value);
}, Z = (g, C = !1) => {
const z = v(g, C);
if (C && o.value > 1 && !s.zooming)
return z;
if (z)
return Qe(z);
}, j = (g = !1) => {
for (let C = s.currentPage - 3; C <= s.currentPage + 3; C++)
Z(C);
if (g)
for (let C = s.currentPage; C < s.currentPage + s.displayedPages; C++) {
const z = h.value[C];
if (z) {
const W = new Image();
W.src = z;
}
}
}, ae = () => {
s.firstPage = s.currentPage, s.secondPage = s.currentPage + 1, j();
const g = P.value, C = S.value, z = v(g), W = v(C), X = z == null ? void 0 : z.replace("/thumbnail", "/highres"), G = W == null ? void 0 : W.replace("/thumbnail", "/highres");
z && X && Ne(z, X), W && G && Ne(W, G);
};
pt(() => {
window.addEventListener("resize", B, { passive: !0 }), B(), o.value = w.value[0], q(i.startPage), console.log("canzoom"), console.log(s.zoomIndex), console.log(w.value), console.log(o.value), console.log(b.value), ae(), s.mounted = !0;
}), gt(() => {
window.removeEventListener("resize", B, { passive: !0 });
});
const ce = (g, C) => {
s.nImageLoad = 0, s.nImageLoadTrigger = g, s.imageLoadCallback = C;
}, Q = (g) => {
const C = Date.now(), z = i.flipDuration * (1 - s.flip.progress), W = s.flip.progress;
s.flip.auto = !0, a(`flip-${s.flip.direction}-start`, O.value);
const X = () => {
requestAnimationFrame(() => {
const G = Date.now() - C;
let V = W + G / z;
V = V > 1 ? 1 : V, s.flip.progress = g ? l(V) : V, V < 1 ? X() : (s.flip.direction !== i.forwardDirection ? s.currentPage -= s.displayedPages : s.currentPage += s.displayedPages, a(`flip-${s.flip.direction}-end`, O.value), s.displayedPages === 1 && s.flip.direction === i.forwardDirection ? s.flip.direction = null : ce(1, () => {
s.flip.direction = null;
}), s.flip.auto = !1);
});
};
X();
}, ie = (g, C) => {
g !== i.forwardDirection ? s.displayedPages === 1 ? (s.flip.frontImage = v(s.currentPage - 1), s.flip.backImage = null) : (s.flip.frontImage = v(s.firstPage), s.flip.backImage = v(s.currentPage - s.displayedPages + 1)) : s.displayedPages === 1 ? (s.flip.frontImage = v(s.currentPage), s.flip.backImage = null) : (s.flip.frontImage = v(s.secondPage), s.flip.backImage = v(s.currentPage + s.displayedPages)), s.flip.direction = g, s.flip.progress = 0, requestAnimationFrame(() => {
requestAnimationFrame(() => {
s.flip.direction !== i.forwardDirection ? s.displayedPages === 2 && (s.firstPage = s.currentPage - s.displayedPages) : s.displayedPages === 1 ? s.firstPage = s.currentPage + s.displayedPages : s.secondPage = s.currentPage + 1 + s.displayedPages, C && Q(!0);
});
});
}, ke = () => {
f.value && ie("left", !0);
}, Se = () => {
p.value && ie("right", !0);
}, De = () => {
const g = Date.now(), C = i.flipDuration * s.flip.progress, z = s.flip.progress;
s.flip.auto = !0;
const W = () => {
requestAnimationFrame(() => {
const X = Date.now() - g;
let G = z - z * X / C;
G = G < 0 ? 0 : G, s.flip.progress = G, G > 0 ? W() : (s.firstPage = s.currentPage, s.secondPage = s.currentPage + 1, s.displayedPages === 1 && s.flip.direction !== i.forwardDirection ? s.flip.direction = null : ce(1, () => {
s.flip.direction = null;
}), s.flip.auto = !1);
});
};
W();
}, xe = (g, C = null) => {
const z = u.value;
let W, X;
if (C) {
const pe = z.getBoundingClientRect();
W = C.pageX - pe.left, X = C.pageY - pe.top;
} else
W = z.clientWidth / 2, X = z.clientHeight / 2;
const G = o.value, V = g, ne = z.scrollLeft, se = z.scrollTop, Te = W + ne, Ie = X + se, We = Te / G * V - W, Re = Ie / G * V - X, je = Date.now();
s.zooming = !0, a("zoomStart", o.value);
const Ee = () => {
requestAnimationFrame(() => {
const pe = Date.now() - je;
let ge = pe / i.zoomDuration;
ge = ge > 1 ? 1 : ge, ge = l(ge), o.value = G + (V - G) * ge, s.scrollLeft = ne + (We - ne) * ge, s.scrollTop = se + (Re - se) * ge, pe < i.zoomDuration ? Ee() : (a("zoomEnd", g), s.zooming = !1, o.value = g, s.scrollLeft = We, s.scrollTop = Re);
});
};
Ee(), V > 1 && j(!0);
}, Ge = (g) => {
var z;
const C = g.target || ((z = g.path) == null ? void 0 : z[0]);
s.imageWidth == null && (s.imageWidth = C.naturalWidth, console.log("imageWidth", s.imageWidth), s.imageHeight = C.naturalHeight, console.log("imageHeight", s.imageHeight), j()), s.imageLoadCallback && ++s.nImageLoad >= s.nImageLoadTrigger && (s.imageLoadCallback(), s.imageLoadCallback = null);
}, it = (g = null) => {
b.value && (s.zoomIndex += 1, xe(w.value[s.zoomIndex], g));
}, nt = (g = null) => {
x.value && (s.zoomIndex -= 1, xe(w.value[s.zoomIndex], g));
}, vi = (g) => {
s.zoomIndex = (s.zoomIndex + 1) % w.value.length, xe(w.value[s.zoomIndex], g);
}, wt = (g) => {
s.touchStartX = g.pageX, s.touchStartY = g.pageY, s.maxMove = 0, o.value <= 1 ? i.dragToFlip && (s.activeCursor = "grab") : (s.startScrollLeft = u.value.scrollLeft, s.startScrollTop = u.value.scrollTop, s.activeCursor = "all-scroll");
}, hi = (g, C) => {
s.scrollLeft = s.startScrollLeft - g, s.scrollTop = s.startScrollTop - C;
}, yt = (g) => {
if (s.touchStartX == null)
return;
const C = g.pageX - s.touchStartX, z = g.pageY - s.touchStartY;
if (s.maxMove = Math.max(s.maxMove, Math.abs(C)), s.maxMove = Math.max(s.maxMove, Math.abs(z)), o.value > 1) {
$e.value && hi(C, z);
return;
}
if (i.dragToFlip && !(Math.abs(z) > Math.abs(C)))
return s.activeCursor = "grabbing", C > 0 ? (!s.flip.direction && f.value && C >= i.swipeMin && ie("left", !1), s.flip.direction === "left" && (s.flip.progress = C / _.value, s.flip.progress > 1 && (s.flip.progress = 1))) : (!s.flip.direction && p.value && C <= -i.swipeMin && ie("right", !1), s.flip.direction === "right" && (s.flip.progress = -C / _.value, s.flip.progress > 1 && (s.flip.progress = 1))), !0;
}, bt = (g) => {
s.touchStartX != null && (i.clickToZoom && s.maxMove < i.swipeMin && vi(g), s.flip.direction && !s.flip.auto && (s.flip.progress > 0.25 ? Q(!1) : De()), s.touchStartX = null, s.activeCursor = null);
}, wi = (g) => {
s.hasTouchEvents = !0, wt(g.changedTouches[0]);
}, yi = (g) => {
yt(g.changedTouches[0]) && g.cancelable && g.preventDefault();
}, Gt = (g) => bt(g.changedTouches[0]), bi = (g) => {
if (console.log("on pointer down"), s.hasPointerEvents = !0, !s.hasTouchEvents && !(g.which && g.which !== 1)) {
wt(g);
try {
g.target.setPointerCapture(g.pointerId);
} catch (C) {
console.log(C);
}
}
}, Si = (g) => {
s.hasTouchEvents || yt(g);
}, Rt = (g) => {
if (!s.hasTouchEvents) {
bt(g);
try {
g.target.releasePointerCapture(g.pointerId);
} catch (C) {
console.log(C);
}
}
}, xi = (g) => {
console.log("on mouse down"), !(s.hasTouchEvents || s.hasPointerEvents) && (g.which && g.which !== 1 || wt(g));
}, Ti = (g) => {
!s.hasTouchEvents && !s.hasPointerEvents && yt(g);
}, Ei = (g) => {
console.log("on mouse up"), !s.hasTouchEvents && !s.hasPointerEvents && bt(g);
}, Pi = (g) => {
i.wheel === "scroll" && o.value > 1 && $e.value && (s.scrollLeft = u.value.scrollLeft + g.deltaX, s.scrollTop = u.value.scrollTop + g.deltaY, g.cancelable && g.preventDefault()), i.wheel === "zoom" && (g.deltaY >= 100 ? (nt(g), g.cancelable && g.preventDefault()) : g.deltaY <= -100 && (it(g), g.cancelable && g.preventDefault()));
};
oe(() => s.currentPage, () => {
s.firstPage = s.currentPage, s.secondPage = s.currentPage + 1, j();
}), oe(() => Me.value, () => {
if (s.animatingCenter)
return;
const g = () => {
requestAnimationFrame(() => {
const z = Me.value - s.currentCenterOffset;
Math.abs(z) < 0.5 ? (s.currentCenterOffset = Me.value, s.animatingCenter = !1) : (s.currentCenterOffset += z * 0.1, g());
});
};
s.animatingCenter = !0, g();
}), oe(ht, (g) => {
y.value ? requestAnimationFrame(() => {
u.value && (u.value.scrollLeft = g);
}) : u.value && (u.value.scrollLeft = g);
}), oe(() => tt.value, (g) => {
y.value ? requestAnimationFrame(() => {
u.value.scrollTop = g;
}) : u.value.scrollTop = g;
}), oe(() => c.value, (g, C) => {
E(), !(C != null && C.length) && (g != null && g.length) && i.startPage > 1 && g[0] === null && s.currentPage++;
}), oe(() => i.startPage, (g) => {
q(g);
});
const St = (g) => {
document.fullscreenElement ? document.exitFullscreen() : g.requestFullscreen ? g.requestFullscreen() : g.webkitRequestFullscreen ? g.webkitRequestFullscreen() : g.msRequestFullscreen && g.msRequestFullscreen();
};
return oe(() => s.currentPage, () => {
ae();
}), e({
goToPage: q,
flipLeft: ke,
flipRight: Se,
zoomIn: it,
zoomOut: nt,
openFullscreen: St,
viewport: u,
getCurrentPage: () => O.value
}), (g, C) => (J(), ee("div", null, [
s.mounted && i.teleport ? (J(), Qt(Mi, {
key: 0,
to: `#${i.teleport}`
}, [
Ot(g.$slots, "default", zt(Jt({
canFlipLeft: f.value,
canFlipRight: p.value,
canZoomIn: b.value,
canZoomOut: x.value,
page: O.value,
numPages: L.value,
flipLeft: ke,
flipRight: Se,
zoomIn: it,
zoomOut: nt,
goToPage: q,
openFullscreen: St,
viewport: u.value
})))
], 8, ["to"])) : Ot(g.$slots, "default", zt(Ii({ key: 1 }, {
canFlipLeft: f.value,
canFlipRight: p.value,
canZoomIn: b.value,
canZoomOut: x.value,
page: O.value,
numPages: L.value,
flipLeft: ke,
flipRight: Se,
zoomIn: it,
zoomOut: nt,
goToPage: q,
openFullscreen: St,
viewport: u.value
}))),
U("div", {
ref_key: "viewport",
ref: u,
class: ot(["viewport h-full w-full", {
zoom: s.zooming || o.value > 1,
"drag-to-scroll": $e.value
}]),
style: ve({ cursor: D.value === "grabbing" ? "grabbing" : "auto" }),
onTouchmove: yi,
onPointermove: Si,
onMousemove: Ti,
onTouchend: Gt,
onTouchcancel: Gt,
onPointerup: Rt,
onPointercancel: Rt,
onMouseup: Ei,
onWheel: Pi
}, [
U("div", {
class: "flipbook-container",
style: ve({ transform: `scale(${o.value})` })
}, [
U("div", {
class: "click-to-flip left",
style: ve({ cursor: f.value ? "pointer" : "auto" }),
onClick: ke
}, null, 4),
U("div", {
class: "click-to-flip right",
style: ve({ cursor: p.value ? "pointer" : "auto" }),
onClick: Se
}, null, 4),
U("div", {
style: ve({ transform: `translateX(${Ae.value}px)` })
}, [
T.value ? (J(), ee("img", {
key: 0,
class: "fixed page",
style: ve({
width: `${_.value}px`,
height: `${$.value}px`,
left: `${k.value}px`,
top: `${H.value}px`
}),
src: s.finalImages[v(P.value)] || v(P.value),
onLoad: C[0] || (C[0] = (z) => Ge(z))
}, null, 44, _i)) : _e("", !0),
I.value && v(S.value) ? (J(), ee("img", {
key: 1,
class: "fixed page",
style: ve({
width: `${_.value}px`,
height: `${$.value}px`,
left: `${v(P.value) ? s.viewWidth / 2 : (s.viewWidth - _.value) / 2}px`,
top: `${H.value}px`
}),
src: s.finalImages[v(S.value)] || v(S.value),
onLoad: C[1] || (C[1] = (z) => Ge(z))
}, null, 44, Fi)) : _e("", !0),
(J(!0), ee(Bt, null, At(mt.value, ({
key: z,
bgImage: W,
lighting: X,
bgPos: G,
transform: V,
z: ne
}) => (J(), ee("div", {
key: z,
class: ot(["polygon", { blank: !W }]),
style: ve({
left: `${v(P.value) ? 0 : -(_.value / 2)}px`,
backgroundImage: W,
backgroundSize: K.value,
backgroundPosition: G,
width: F.value,
height: Y.value,
transform: V,
zIndex: ne
})
}, [
Li(U("div", {
class: "lighting",
style: ve({ backgroundImage: X })
}, null, 4), [
[Oi, X.length]
])
], 6))), 128)),
U("div", {
class: "bounding-box",
style: ve({
left: `${he.value}px`,
top: `${H.value}px`,
width: `${Be.value - he.value}px`,
height: `${$.value}px`,
cursor: D.value
}),
onTouchstart: wi,
onPointerdown: bi,
onMousedown: xi
}, null, 36)
], 4)
], 4)
], 38)
]));
}
};
function jt(t) {
return t !== null && typeof t == "object" && "constructor" in t && t.constructor === Object;
}
function Nt(t, e) {
t === void 0 && (t = {}), e === void 0 && (e = {});
const n = ["__proto__", "constructor", "prototype"];
Object.keys(e).filter((i) => n.indexOf(i) < 0).forEach((i) => {
typeof t[i] > "u" ? t[i] = e[i] : jt(e[i]) && jt(t[i]) && Object.keys(e[i]).length > 0 && Nt(t[i], e[i]);
});
}
const ii = {
body: {},
addEventListener() {
},
removeEventListener() {
},
activeElement: {
blur() {
},
nodeName: ""
},
querySelector() {
return null;
},
querySelectorAll() {
return [];
},
getElementById() {
return null;
},
createEvent() {
return {
initEvent() {
}
};
},
createElement() {
return {
children: [],
childNodes: [],
style: {},
setAttribute() {
},
getElementsByTagName() {
return [];
}
};
},
createElementNS() {
return {};
},
importNode() {
return null;
},
location: {
hash: "",
host: "",
hostname: "",
href: "",
origin: "",
pathname: "",
protocol: "",
search: ""
}
};
function be() {
const t = typeof document < "u" ? document : {};
return Nt(t, ii), t;
}
const Ni = {
document: ii,
navigator: {
userAgent: ""
},
location: {
hash: "",
host: "",
hostname: "",
href: "",
origin: "",
pathname: "",
protocol: "",
search: ""
},
history: {
replaceState() {
},
pushState() {
},
go() {
},
back() {
}
},
CustomEvent: function() {
return this;
},
addEventListener() {
},
removeEventListener() {
},
getComputedStyle() {
return {
getPropertyValue() {
return "";
}
};
},
Image() {
},
Date() {
},
screen: {},
setTimeout() {
},
clearTimeout() {
},
matchMedia() {
return {};
},
requestAnimationFrame(t) {
return typeof setTimeout > "u" ? (t(), null) : setTimeout(t, 0);
},
cancelAnimationFrame(t) {
typeof setTimeout > "u" || clearTimeout(t);
}
};
function le() {
const t = typeof window < "u" ? window : {};
return Nt(t, Ni), t;
}
function $i(t) {
return t === void 0 && (t = ""), t.trim().split(" ").filter((e) => !!e.trim());
}
function Gi(t) {
const e = t;
Object.keys(e).forEach((n) => {
try {
e[n] = null;
} catch {
}
try {
delete e[n];
} catch {
}
});
}
function kt(t, e) {
return e === void 0 && (e = 0), setTimeout(t, e);
}
function dt() {
return Date.now();
}
function Ri(t) {
const e = le();
let n;
return e.getComputedStyle && (n = e.getComputedStyle(t, null)), !n && t.currentStyle && (n = t.currentStyle), n || (n = t.style), n;
}
function Vi(t, e) {
e === void 0 && (e = "x");
const n = le();
let i, a, r;
const d = Ri(t);
return n.WebKitCSSMatrix ? (a = d.transform || d.webkitTransform, a.split(",").length > 6 && (a = a.split(", ").map((l) => l.replace(",", ".")).join(", ")), r = new n.WebKitCSSMatrix(a === "none" ? "" : a)) : (r = d.MozTransform || d.OTransform || d.MsTransform || d.msTransform || d.transform || d.getPropertyValue("transform").replace("translate(", "matrix(1, 0, 0, 1,"), i = r.toString().split(",")), e === "x" && (n.WebKitCSSMatrix ? a = r.m41 : i.length === 16 ? a = parseFloat(i[12]) : a = parseFloat(i[4])), e === "y" && (n.WebKitCSSMatrix ? a = r.m42 : i.length === 16 ? a = parseFloat(i[13]) : a = parseFloat(i[5])), a || 0;
}
function at(t) {
return typeof t == "object" && t !== null && t.constructor && Object.prototype.toString.call(t).slice(8, -1) === "Object";
}
function Hi(t) {
return typeof window < "u" && typeof window.HTMLElement < "u" ? t instanceof HTMLElement : t && (t.nodeType === 1 || t.nodeType === 11);
}
function de() {
const t = Object(arguments.length <= 0 ? void 0 : arguments[0]), e = ["__proto__", "constructor", "prototype"];
for (let n = 1; n < arguments.length; n += 1) {
const i = n < 0 || arguments.length <= n ? void 0 : arguments[n];
if (i != null && !Hi(i)) {
const a = Object.keys(Object(i)).filter((r) => e.indexOf(r) < 0);
for (let r = 0, d = a.length; r < d; r += 1) {
const l = a[r], o = Object.getOwnPropertyDescriptor(i, l);
o !== void 0 && o.enumerable && (at(t[l]) && at(i[l]) ? i[l].__swiper__ ? t[l] = i[l] : de(t[l], i[l]) : !at(t[l]) && at(i[l]) ? (t[l] = {}, i[l].__swiper__ ? t[l] = i[l] : de(t[l], i[l])) : t[l] = i[l]);
}
}
}
return t;
}
function rt(t, e, n) {
t.style.setProperty(e, n);
}
function ni(t) {
let {
swiper: e,
targetPosition: n,
side: i
} = t;
const a = le(), r = -e.translate;
let d = null, l;
const o = e.params.speed;
e.wrapperEl.style.scrollSnapType = "none", a.cancelAnimationFrame(e.cssModeFrameID);
const u = n > r ? "next" : "prev", s = (h, w) => u === "next" && h >= w || u === "prev" && h <= w, c = () => {
l = (/* @__PURE__ */ new Date()).getTime(), d === null && (d = l);
const h = Math.max(Math.min((l - d) / o, 1), 0), w = 0.5 - Math.cos(h * Math.PI) / 2;
let m = r + w * (n - r);
if (s(m, n) && (m = n), e.wrapperEl.scrollTo({
[i]: m
}), s(m, n)) {
e.wrapperEl.style.overflow = "hidden", e.wrapperEl.style.scrollSnapType = "", setTimeout(() => {
e.wrapperEl.style.overflow = "", e.wrapperEl.scrollTo({
[i]: m
});
}), a.cancelAnimationFrame(e.cssModeFrameID);
return;
}
e.cssModeFrameID = a.requestAnimationFrame(c);
};
c();
}
function ye(t, e) {