popupable 1.8.2 → 1.9.0

package/README.md

@@ -282,6 +282,18 @@ Use `data-popupable-anim` to choose an open/close animation style. The default i
 
 The popup container receives a `popupable-anim-{name}` class (e.g. `popupable-anim-float`), which can be used to apply custom CSS for that animation style.
 
+#### What's inherited from the source element
+
+Animations with `styles: true` (built-in: `expand`) copy the following from the source element to the popup clone at open, then transition them away as it grows:
+
+* `border-radius`
+* `border`
+* `outline`
+* `box-shadow`
+* Effective `opacity` (cumulative through ancestors, so a thumbnail inside a half-transparent wrapper inherits the combined opacity). If the animation also has `fade: true`, opacity inheritance is skipped so the fade goes from `0`.
+
+This is what makes the open animation feel continuous with the page. Animations without `styles: true` (built-ins: `pop`, `line`, `float`) skip this so they don't carry decorations they don't need.
+
 #### Custom animation styles
 
 Register your own animation style by adding an object to `window.popupableAnimTypes`. The object must have a `position` method that receives the original element and the final expanded rect, and returns the starting rect for the open animation (which is also the ending rect for close). Additional static flags control the animation behaviour.
@@ -289,10 +301,27 @@ Register your own animation style by adding an object to `window.popupableAnimTy
 | Property | Type | Description |
 |---|---|---|
 | `position(el, rect)` | function | Returns `{ top, left, width, height }` for the start of the open animation |
-| `styles` | boolean | Copies border, outline, and box-shadow from the element to the popup clone, then transitions them out |
-| `fade` | boolean | Fades opacity in/out alongside the geometry |
+| `styles` | boolean | Copies border-radius, border, outline, box-shadow, and effective opacity from the element to the popup clone, then transitions them out |
+| `fade` | boolean | Fades opacity in/out alongside the geometry. Overrides the opacity inheritance from `styles` so the animation always fades from `0`. |
 | `crossfade` | boolean | Crossfades between the thumbnail and alternate source image as it opens |
 | `hideSource` | boolean | Hides the original element while the popup is open |
+| `close` | object | Optional close-time fallback, see below |
+
+If your `position` reads from the original element, the close animation can break when the element is no longer where the popup opened from:
+
+* It became `display: none`
+* It was removed from the DOM
+* It scrolled out of view
+* It got clipped by an `overflow` container
+
+Provide a `close` rule to fall back to a source-independent animation in that case:
+
+| `close` property | Type | Description |
+|---|---|---|
+| `condition(original)` | function | Return `true` if this animation is still valid for the close. If it returns `false`, the `fallback` animation is used to close instead. |
+| `fallback` | string | Name of the animation to close with when `condition` returns `false`. Should be a source-independent style (`pop`, `line`, `float`). The fallback runs directly; its own `close.condition` is not evaluated. |
+
+The built-in `expand` style uses this to fall back to `pop` when the source element isn't visible at close time.
 
 ```js
 window.popupableAnimTypes.myAnim = {

package/dist/popupable.min.css

@@ -1,7 +1,7 @@
 /*!
  * popupable
- * Version  : 1.8.2
+ * Version  : 1.9.0
  * License  : MIT
  * Copyright: 2026 Ewan Howell
  */
-@property --popupable-screen-padding{syntax:"<length>";inherits:true;initial-value:40px}@property --popupable-background{syntax:"<color>";inherits:true;initial-value:#000B}@property --popupable-ui-background{syntax:"<color>";inherits:true;initial-value:#0008}@property --popupable-blur{syntax:"<length>";inherits:true;initial-value:6px}@property --popupable-open-duration{syntax:"<time>";inherits:true;initial-value:.25s}@property --popupable-open-easing{syntax:"*";inherits:true;initial-value:ease}@property --popupable-switch-duration{syntax:"<time>";inherits:true;initial-value:.25s}@property --popupable-switch-easing{syntax:"*";inherits:true;initial-value:ease}@property --popupable-text-color{syntax:"<color>";inherits:true;initial-value:#fff}[data-popupable],[data-popupable] *{cursor:pointer!important}.popupable-hide{visibility:hidden!important}.popupable-loading,.popupable-loading *{cursor:wait!important}.popupable-block-touch *{touch-action:none!important}.popupable-container{position:fixed;inset:0;transition:background var(--popupable-open-duration) ease,backdrop-filter var(--popupable-open-duration) ease;z-index:2147483646;user-select:none;pointer-events:none;touch-action:none}.popupable-container.popupable-active{z-index:2147483647;background:var(--popupable-background);backdrop-filter:blur(var(--popupable-blur))}.popupable-container>*{pointer-events:none}.popupable-container *{box-sizing:border-box;color:var(--popupable-text-color);-webkit-tap-highlight-color:transparent}.popupable-container.popupable-open,.popupable-container.popupable-open>*{pointer-events:initial}.popupable-clones{transition:transform var(--popupable-switch-duration) var(--popupable-switch-easing)}.popupable-clone-container{position:fixed;transition:all var(--popupable-open-duration) var(--popupable-open-easing);pointer-events:initial;overflow:hidden;transform:translateX(calc(var(--popupable-view-width) * var(--popupable-offset-multiplier)));transform-origin:0 0}.popupable-clone-container.popupable-clone-loading>.popupable-clone,.popupable-clone-container.popupable-clone-loading>.popupable-clone-layer{visibility:hidden}.popupable-clone-container.popupable-clone-loading::after{content:"";position:absolute;inset:-16px;background:radial-gradient(circle at var(--popupable-loading-x1,30%) var(--popupable-loading-y1,20%),var(--popupable-loading-c1,rgba(255,255,255,.07)),transparent 55%),radial-gradient(circle at var(--popupable-loading-x2,70%) var(--popupable-loading-y2,80%),var(--popupable-loading-c2,rgba(255,255,255,.05)),transparent 60%),linear-gradient(var(--popupable-loading-angle,135deg),var(--popupable-loading-a,#1a1a1a) 0,var(--popupable-loading-b,#242424) 50%,var(--popupable-loading-a,#1a1a1a) 100%);filter:blur(8px) saturate(.6);pointer-events:none;z-index:0}.popupable-clone-container.popupable-transparent::before{content:"";position:absolute;inset:0;background-image:conic-gradient(#313131 .25turn,#1e1e1e .25turn .5turn,#313131 .5turn .75turn,#1e1e1e .75turn);background-size:32px 32px;background-attachment:fixed;z-index:-1;opacity:0;transition:opacity var(--popupable-open-duration) var(--popupable-open-easing);image-rendering:pixelated}.popupable-fade .popupable-clone-container{opacity:0}.popupable-container.popupable-active .popupable-clone-container{border-radius:0!important;border-width:0!important;outline-width:0!important;box-shadow:none!important;opacity:1}.popupable-container.popupable-active .popupable-clone-container.popupable-transparent::before{opacity:1}.popupable-container.popupable-open .popupable-clone-container{transition:transform var(--popupable-switch-duration) var(--popupable-switch-easing),translate var(--popupable-switch-duration) var(--popupable-switch-easing)}.popupable-clone,.popupable-clone-layer{width:100%;height:100%;position:absolute;inset:0;transition:opacity var(--popupable-open-duration) var(--popupable-open-easing)}.popupable-clone-layer{opacity:0;object-fit:cover}video.popupable-clone:fullscreen{object-fit:contain!important}.popupable-crossfade.popupable-open .popupable-clone:not(:last-child){opacity:0}.popupable-container:not(.popupable-crossfade) .popupable-clone-layer,.popupable-crossfade.popupable-active .popupable-clone-layer{opacity:1}.popupable-viewport{position:fixed;left:var(--popupable-vv-left,0);top:var(--popupable-vv-top,0);width:calc(var(--popupable-vv-width,100vw) * var(--popupable-vv-scale,1));height:calc(var(--popupable-vv-height,100vh) * var(--popupable-vv-scale,1));transform-origin:top left;transform:scale(var(--popupable-vv-ui-scale,1));pointer-events:none!important}.popupable-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:opacity var(--popupable-open-duration) var(--popupable-open-easing),transform var(--popupable-open-duration) var(--popupable-open-easing);cursor:pointer;position:relative;opacity:0}.popupable-button::before{content:"";position:absolute;inset:0;opacity:.5;background:var(--popupable-ui-background);transition:opacity .25s;border-radius:50%}.popupable-button svg{width:24px;height:24px;z-index:1}.popupable-container.popupable-open .popupable-button{transition:background .25s,opacity .25s,transform .25s}.popupable-button-container:hover .popupable-button::before,.popupable-button:hover::before{opacity:1}.popupable-button-container{position:absolute;padding:40px;cursor:pointer;z-index:1;pointer-events:auto}.popupable-next-container{top:50%;transform:translateY(-50%);right:calc(var(--popupable-screen-padding)/ 2)}.popupable-prev-container{top:50%;transform:translateY(-50%);left:calc(var(--popupable-screen-padding)/ 2)}.popupable-close-container{position:absolute;bottom:0;right:0;padding:20px;transform:translateY(100%)}.popupable-next{transform:translateX(40px)}.popupable-prev{transform:translateX(-40px)}.popupable-close{transform:translateY(40px)}.popupable-container.popupable-active .popupable-button{transform:initial}.popupable-container:not(.popupable-locked).popupable-active .popupable-button{opacity:1}.popupable-next-container:hover .popupable-button{transform:translateX(4px)}.popupable-prev-container:hover .popupable-button{transform:translateX(-4px)}.popupable-button-disabled,.popupable-button-inactive,.popupable-locked .popupable-button-container{pointer-events:none}.popupable-locked .popupable-button-container .popupable-button,:is(.popupable-button-disabled,.popupable-button-inactive) .popupable-button{opacity:0!important}.popupable-locked .popupable-next-container .popupable-next,.popupable-next-container:is(.popupable-button-disabled,.popupable-button-inactive) .popupable-next{transform:translateX(40px)}.popupable-locked .popupable-prev-container .popupable-prev,.popupable-prev-container:is(.popupable-button-disabled,.popupable-button-inactive) .popupable-prev{transform:translateX(-40px)}.popupable-footer,.popupable-header{position:absolute;top:0;left:0;right:0;opacity:0;transition:opacity var(--popupable-open-duration) var(--popupable-open-easing),transform var(--popupable-open-duration) var(--popupable-open-easing);transform:translateY(-40px);background:var(--popupable-ui-background);pointer-events:auto}.popupable-footer{top:initial;bottom:0;transform:translateY(40px)}.popupable-container.popupable-active:not(.popupable-locked) .popupable-footer,.popupable-container.popupable-active:not(.popupable-locked) .popupable-header{opacity:1;transform:initial}.popupable-counter{padding:10px;text-align:center}.popupable-counter+.popupable-thumbnails,.popupable-thumbnails+.popupable-counter{border-top:1px solid #fff3}.popupable-content-container{display:grid;align-items:flex-end;transition:height var(--popupable-switch-duration) var(--popupable-switch-easing);overflow:hidden;position:relative}.popupable-content{grid-column:1;grid-row:1;text-align:center;padding:16px;display:flex;flex-direction:column;gap:8px;user-select:text;transition:opacity var(--popupable-switch-duration) var(--popupable-switch-easing),transform var(--popupable-switch-duration) var(--popupable-switch-easing);position:absolute;bottom:0;left:50%;transform:translateX(-50%);max-width:100%;width:max-content}.popupable-title{font-size:32px;font-weight:600}.popupable-content-before{pointer-events:none;opacity:0;transform:translateX(calc(-50% - 80px))}.popupable-content-after{pointer-events:none;opacity:0;transform:translateX(calc(-50% + 80px))}.popupable-content-container:not(:first-child) .popupable-content{padding-top:17px}.popupable-content-container:not(:last-child) .popupable-content{padding-bottom:17px}.popupable-content-container:not(:first-child)::before{content:"";position:absolute;height:1px;top:0;left:0;right:0;background-color:#fff3}.popupable-footer .popupable-content-container:not(:last-child)::after,.popupable-header .popupable-content-container:not(:nth-last-child(2))::after{content:"";position:absolute;height:1px;bottom:0;left:0;right:0;background-color:#fff3}.popupable-thumbnails{display:flex;gap:10px;padding:10px;justify-content:safe center;overflow:hidden;scrollbar-width:none;touch-action:pan-x}.popupable-thumbnails.popupable-thumbnails-dragging{cursor:grabbing}.popupable-thumbnail{width:64px;height:64px;object-fit:cover;opacity:.65;cursor:pointer;transition:opacity .2s,outline-color .2s;outline:2px solid #0000;outline-offset:-2px;flex:0 0 auto;content-visibility:auto}.popupable-thumbnail:hover{opacity:1}.popupable-thumbnail.popupable-thumbnail-active{opacity:1;outline-color:#fffa}.popupable-zoomable{cursor:zoom-in}.popupable-zoomed{cursor:zoom-out}.popupable-block-transitions,.popupable-block-transitions *{transition:initial!important}@media (max-width:768px){:root{--popupable-screen-padding:14px}.popupable-button{width:42px;height:42px}.popupable-next-container,.popupable-prev-container{padding:36px}.popupable-button svg{width:25px;height:25px}.popupable-counter{padding:8px}.popupable-content{padding:14px;gap:6px}.popupable-content-container:not(:first-child) .popupable-content{padding-top:15px}.popupable-content-container:not(:last-child) .popupable-content{padding-bottom:15px}.popupable-title{font-size:28px}.popupable-thumbnail{width:48px;height:48px}}
+@property --popupable-screen-padding{syntax:"<length>";inherits:true;initial-value:40px}@property --popupable-background{syntax:"<color>";inherits:true;initial-value:#000B}@property --popupable-ui-background{syntax:"<color>";inherits:true;initial-value:#0008}@property --popupable-blur{syntax:"<length>";inherits:true;initial-value:6px}@property --popupable-open-duration{syntax:"<time>";inherits:true;initial-value:.25s}@property --popupable-open-easing{syntax:"*";inherits:true;initial-value:ease}@property --popupable-switch-duration{syntax:"<time>";inherits:true;initial-value:.25s}@property --popupable-switch-easing{syntax:"*";inherits:true;initial-value:ease}@property --popupable-text-color{syntax:"<color>";inherits:true;initial-value:#fff}[data-popupable],[data-popupable] *{cursor:pointer!important}.popupable-hide{visibility:hidden!important}.popupable-loading,.popupable-loading *{cursor:wait!important}.popupable-block-touch *{touch-action:none!important}.popupable-container{position:fixed;inset:0;transition:background var(--popupable-open-duration) ease,backdrop-filter var(--popupable-open-duration) ease;z-index:2147483646;user-select:none;pointer-events:none;touch-action:none}.popupable-container.popupable-active{z-index:2147483647;background:var(--popupable-background);backdrop-filter:blur(var(--popupable-blur))}.popupable-container>*{pointer-events:none}.popupable-container *{box-sizing:border-box;color:var(--popupable-text-color);-webkit-tap-highlight-color:transparent}.popupable-container.popupable-open,.popupable-container.popupable-open>*{pointer-events:initial}.popupable-clones{transition:transform var(--popupable-switch-duration) var(--popupable-switch-easing)}.popupable-clone-container{position:fixed;transition:all var(--popupable-open-duration) var(--popupable-open-easing);pointer-events:initial;overflow:hidden;transform:translateX(calc(var(--popupable-view-width) * var(--popupable-offset-multiplier)));transform-origin:0 0}.popupable-clone-container.popupable-clone-loading>.popupable-clone,.popupable-clone-container.popupable-clone-loading>.popupable-clone-layer{visibility:hidden}.popupable-clone-container.popupable-clone-loading::after{content:"";position:absolute;inset:-16px;background:radial-gradient(circle at var(--popupable-loading-x1,30%) var(--popupable-loading-y1,20%),var(--popupable-loading-c1,rgba(255,255,255,.07)),transparent 55%),radial-gradient(circle at var(--popupable-loading-x2,70%) var(--popupable-loading-y2,80%),var(--popupable-loading-c2,rgba(255,255,255,.05)),transparent 60%),linear-gradient(var(--popupable-loading-angle,135deg),var(--popupable-loading-a,#1a1a1a) 0,var(--popupable-loading-b,#242424) 50%,var(--popupable-loading-a,#1a1a1a) 100%);filter:blur(8px) saturate(.6);pointer-events:none;z-index:0}.popupable-clone-container.popupable-transparent::before{content:"";position:absolute;inset:0;background-image:conic-gradient(#313131 .25turn,#1e1e1e .25turn .5turn,#313131 .5turn .75turn,#1e1e1e .75turn);background-size:32px 32px;background-attachment:fixed;z-index:-1;opacity:0;transition:opacity var(--popupable-open-duration) var(--popupable-open-easing);image-rendering:pixelated}.popupable-fade .popupable-clone-container{opacity:0}.popupable-container.popupable-active .popupable-clone-container{border-radius:0!important;border-width:0!important;outline-width:0!important;box-shadow:none!important;opacity:1!important}.popupable-container.popupable-active .popupable-clone-container.popupable-transparent::before{opacity:1}.popupable-container.popupable-open .popupable-clone-container{transition:transform var(--popupable-switch-duration) var(--popupable-switch-easing),translate var(--popupable-switch-duration) var(--popupable-switch-easing)}.popupable-clone,.popupable-clone-layer{width:100%;height:100%;position:absolute;inset:0;transition:opacity var(--popupable-open-duration) var(--popupable-open-easing)}.popupable-clone-layer{opacity:0;object-fit:cover}video.popupable-clone:fullscreen{object-fit:contain!important}.popupable-crossfade.popupable-open .popupable-clone:not(:last-child){opacity:0}.popupable-container:not(.popupable-crossfade) .popupable-clone-layer,.popupable-crossfade.popupable-active .popupable-clone-layer{opacity:1}.popupable-viewport{position:fixed;left:var(--popupable-vv-left,0);top:var(--popupable-vv-top,0);width:calc(var(--popupable-vv-width,100vw) * var(--popupable-vv-scale,1));height:calc(var(--popupable-vv-height,100vh) * var(--popupable-vv-scale,1));transform-origin:top left;transform:scale(var(--popupable-vv-ui-scale,1));pointer-events:none!important}.popupable-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:opacity var(--popupable-open-duration) var(--popupable-open-easing),transform var(--popupable-open-duration) var(--popupable-open-easing);cursor:pointer;position:relative;opacity:0}.popupable-button::before{content:"";position:absolute;inset:0;opacity:.5;background:var(--popupable-ui-background);transition:opacity .25s;border-radius:50%}.popupable-button svg{width:24px;height:24px;z-index:1}.popupable-container.popupable-open .popupable-button{transition:background .25s,opacity .25s,transform .25s}.popupable-button-container:hover .popupable-button::before,.popupable-button:hover::before{opacity:1}.popupable-button-container{position:absolute;padding:40px;cursor:pointer;z-index:1;pointer-events:auto}.popupable-next-container{top:50%;transform:translateY(-50%);right:calc(var(--popupable-screen-padding)/ 2)}.popupable-prev-container{top:50%;transform:translateY(-50%);left:calc(var(--popupable-screen-padding)/ 2)}.popupable-close-container{position:absolute;bottom:0;right:0;padding:20px;transform:translateY(100%)}.popupable-next{transform:translateX(40px)}.popupable-prev{transform:translateX(-40px)}.popupable-close{transform:translateY(40px)}.popupable-container.popupable-active .popupable-button{transform:initial}.popupable-container:not(.popupable-locked).popupable-active .popupable-button{opacity:1}.popupable-next-container:hover .popupable-button{transform:translateX(4px)}.popupable-prev-container:hover .popupable-button{transform:translateX(-4px)}.popupable-button-disabled,.popupable-button-inactive,.popupable-locked .popupable-button-container{pointer-events:none}.popupable-locked .popupable-button-container .popupable-button,:is(.popupable-button-disabled,.popupable-button-inactive) .popupable-button{opacity:0!important}.popupable-locked .popupable-next-container .popupable-next,.popupable-next-container:is(.popupable-button-disabled,.popupable-button-inactive) .popupable-next{transform:translateX(40px)}.popupable-locked .popupable-prev-container .popupable-prev,.popupable-prev-container:is(.popupable-button-disabled,.popupable-button-inactive) .popupable-prev{transform:translateX(-40px)}.popupable-footer,.popupable-header{position:absolute;top:0;left:0;right:0;opacity:0;transition:opacity var(--popupable-open-duration) var(--popupable-open-easing),transform var(--popupable-open-duration) var(--popupable-open-easing);transform:translateY(-40px);background:var(--popupable-ui-background);pointer-events:auto}.popupable-footer{top:initial;bottom:0;transform:translateY(40px)}.popupable-container.popupable-active:not(.popupable-locked) .popupable-footer,.popupable-container.popupable-active:not(.popupable-locked) .popupable-header{opacity:1;transform:initial}.popupable-counter{padding:10px;text-align:center}.popupable-counter+.popupable-thumbnails,.popupable-thumbnails+.popupable-counter{border-top:1px solid #fff3}.popupable-content-container{display:grid;align-items:flex-end;transition:height var(--popupable-switch-duration) var(--popupable-switch-easing);overflow:hidden;position:relative}.popupable-content{grid-column:1;grid-row:1;text-align:center;padding:16px;display:flex;flex-direction:column;gap:8px;user-select:text;transition:opacity var(--popupable-switch-duration) var(--popupable-switch-easing),transform var(--popupable-switch-duration) var(--popupable-switch-easing);position:absolute;bottom:0;left:50%;transform:translateX(-50%);max-width:100%;width:max-content}.popupable-title{font-size:32px;font-weight:600}.popupable-content-before{pointer-events:none;opacity:0;transform:translateX(calc(-50% - 80px))}.popupable-content-after{pointer-events:none;opacity:0;transform:translateX(calc(-50% + 80px))}.popupable-content-container:not(:first-child) .popupable-content{padding-top:17px}.popupable-content-container:not(:last-child) .popupable-content{padding-bottom:17px}.popupable-content-container:not(:first-child)::before{content:"";position:absolute;height:1px;top:0;left:0;right:0;background-color:#fff3}.popupable-footer .popupable-content-container:not(:last-child)::after,.popupable-header .popupable-content-container:not(:nth-last-child(2))::after{content:"";position:absolute;height:1px;bottom:0;left:0;right:0;background-color:#fff3}.popupable-thumbnails{display:flex;gap:10px;padding:10px;justify-content:safe center;overflow:hidden;scrollbar-width:none;touch-action:pan-x}.popupable-thumbnails.popupable-thumbnails-dragging{cursor:grabbing}.popupable-thumbnail{width:64px;height:64px;object-fit:cover;opacity:.65;cursor:pointer;transition:opacity .2s,outline-color .2s;outline:2px solid #0000;outline-offset:-2px;flex:0 0 auto;content-visibility:auto}.popupable-thumbnail:hover{opacity:1}.popupable-thumbnail.popupable-thumbnail-active{opacity:1;outline-color:#fffa}.popupable-zoomable{cursor:zoom-in}.popupable-zoomed{cursor:zoom-out}.popupable-block-transitions,.popupable-block-transitions *{transition:initial!important}@media (max-width:768px){:root{--popupable-screen-padding:14px}.popupable-button{width:42px;height:42px}.popupable-next-container,.popupable-prev-container{padding:36px}.popupable-button svg{width:25px;height:25px}.popupable-counter{padding:8px}.popupable-content{padding:14px;gap:6px}.popupable-content-container:not(:first-child) .popupable-content{padding-top:15px}.popupable-content-container:not(:last-child) .popupable-content{padding-bottom:15px}.popupable-title{font-size:28px}.popupable-thumbnail{width:48px;height:48px}}

package/dist/popupable.min.js

@@ -1,7 +1,7 @@
 /*!
  * popupable
- * Version  : 1.8.2
+ * Version  : 1.9.0
  * License  : MIT
  * Copyright: 2026 Ewan Howell
  */
-{let e,t,n,o=0;const a=3;let r;function triggerHaptic(){if("function"!=typeof navigator.vibrate){if(!r){r=document.createElement("label"),r.style.cssText="position:fixed;left:-9999px;top:-9999px;opacity:0;pointer-events:none";const e=document.createElement("input");e.type="checkbox",e.setAttribute("switch",""),r.append(e),document.body.append(r)}r.click()}else navigator.vibrate([10])}function disableScroll(){window.addEventListener("wheel",prevent,{passive:!1}),window.addEventListener("touchmove",prevent,{passive:!1}),window.addEventListener("keydown",blockKeys,!0)}function enableScroll(){window.removeEventListener("wheel",prevent),window.removeEventListener("touchmove",prevent),window.removeEventListener("keydown",blockKeys,!0)}function prevent(e){e.preventDefault()}function blockKeys(e){["ArrowUp","ArrowDown","PageUp","PageDown","Home","End"," "].includes(e.key)&&e.preventDefault()}function getGroupAverageAspect(e){if(!e?.group)return 0;let t=0,n=0;for(const o of e.group){const e=o.source,a=e?e.naturalWidth||e.videoWidth:0,r=e?e.naturalHeight||e.videoHeight:0,i=a&&r?a/r:o.knownAspect;i&&(t+=i,n++)}return n>0?t/n:0}function calcExpandedRect(t){const n=t.original,o=visualViewport?.width||window.innerWidth,a=visualViewport?.height||window.innerHeight,r=visualViewport?.offsetTop||0,i=visualViewport?.offsetLeft||0,s=visualViewport?.scale||1,l=1/s,p=e.popup,c=(parseFloat(getComputedStyle(p).getPropertyValue("--popupable-screen-padding"))||40)/s,u=Math.max(0,o-2*c),d=a-2*c,m=Math.max(0,d);let b;if(t.maintainAspect){const e=n.getBoundingClientRect();b=e.width/e.height}else{b=(t.source.naturalWidth||t.source.videoWidth)/(t.source.naturalHeight||t.source.videoHeight)||getGroupAverageAspect(e)||1}let f=0,g=0;if(e.orderPlacement){const n=e.popup.querySelector(".popupable-counter"),o=n?n.getBoundingClientRect().height/l:0,a=e.thumbnailsContainer?e.thumbnailsContainer.getBoundingClientRect().height/l:0,r=e.contentContainer,i=t.content?t.content.getBoundingClientRect().height/l:r?.previousElementSibling&&r?.nextElementSibling&&parseFloat(getComputedStyle(r,"::after").height)||0,{counterTop:s,contentTop:p,thumbnailsTop:c,counterBottom:u,contentBottom:d,thumbnailsBottom:m}=e.orderPlacement;f=(s?o:0)+(p?i:0)+(c?a:0),g=(u?o:0)+(d?i:0)+(m?a:0)}const h=Math.max(0,a-f-g-2*c);let v=u,y=v/b;if(y>m&&(y=m,v=y*b),y>h&&(y=h,v=y*b),t.noUpscale){const e=t.cloneLayer||n,o=e.naturalWidth||e.videoWidth,a=e.naturalHeight||e.videoHeight;if(o&&a){const e=o/s,t=a/s,n=Math.min(1,e/v,t/y);n<1&&(v*=n,y*=n)}}let x=r+c+(m-y)/2;const w=r+a-g-c-y;return x=Math.min(x,w),x=Math.max(x,r+f+c),{top:x,left:i+c+(u-v)/2,width:v,height:y}}function setCloneToOriginalRect(t,n){const o=calcExpandedRect(e),{top:a,left:r,width:i,height:s}=e.animation.position(n,o);t.style.top=a+"px",t.style.left=r+"px",t.style.width=i+"px",t.style.height=s+"px"}window.popupableAnimTypes={expand:{styles:!0,hideSource:!0,crossfade:!0,position(e){const t=e.getBoundingClientRect();return{top:visualViewport.offsetTop+t.top,left:visualViewport.offsetLeft+t.left,width:t.width,height:t.height}}},pop:{fade:!0,position:(e,{top:t,left:n,width:o,height:a})=>({top:t+.05*a,left:n+.05*o,width:.9*o,height:.9*a})},line:{fade:!0,position:(e,{top:t,left:n,width:o,height:a})=>({top:t+a/2,left:n+.05*o,width:.9*o,height:0})},float:{fade:!0,position:(e,{top:t,left:n,width:o,height:a})=>({top:t+40,left:n,width:o,height:a})}};const i=3;function parseCssTime(e){if(!e)return 0;const t=parseFloat(e);return Number.isNaN(t)?0:/ms\s*$/i.test(e)?t:1e3*t}function getReleaseDelay(e){const t=e?.popup||document.documentElement;return parseCssTime(getComputedStyle(t).getPropertyValue("--popupable-switch-duration"))}function buildDecodeQueue(e,t=e.group?.currentIndex,{delayRelease:n=!0}={}){if(!e.group)return;const o=e.group.length,a=n?getReleaseDelay(e):0;for(let n=0;n<o;n++){const o=e.group[n];Math.abs(n-t)>i?o.releaseDecode&&!o._releaseTimer&&(a<=0?o.releaseDecode():o._releaseTimer=setTimeout(()=>{o._releaseTimer=null,o.releaseDecode()},a)):o._releaseTimer&&(clearTimeout(o._releaseTimer),o._releaseTimer=null)}const r=[];t!==e.group.currentIndex&&t>=0&&t<o&&r.push(e.group[t]);for(let n=1;n<=i;n++)t+n<o&&r.push(e.group[t+n]),t-n>=0&&r.push(e.group[t-n]);e.decodeQueue=r,runDecodeQueue(e)}function projectSnapIndex(e,t){const n=window.innerWidth,o=Math.abs(t);if(o<=Math.max(.1*n,64))return e.currentIndex;const a=Math.max(0,Math.floor((o-n/2)/n))+1,r=t>0?-1:1;return Math.max(0,Math.min(e.length-1,e.currentIndex+r*a))}const s=100;let l,p=0,c=null,u=-1;function scheduleDragDecodeQueue(t){if(u=t,c)return;const n=Math.max(0,s-(performance.now()-p));c=setTimeout(()=>{c=null,p=performance.now();const t=u;u=-1,t>=0&&e?.group&&t!==e.group.currentIndex&&buildDecodeQueue(e,t,{delayRelease:!1})},n)}function cancelDragDecodeQueue(){c&&(clearTimeout(c),c=null),u=-1}async function runDecodeQueue(e){if(!e.decodeQueueRunning){for(e.decodeQueueRunning=!0;e.decodeQueue&&e.decodeQueue.length&&!e.decodeAborted;){const t=e.decodeQueue.shift();try{await t.triggerDecode()}catch{}}e.decodeQueueRunning=!1}}function openPopupable(e){if("open"===e.state)return;e.state="open",triggerHaptic();const{cloneContainer:t,popup:n,transition:o,group:a,listeners:r}=e;n.classList.add("popupable-active"),e.clearNavInactive?.(),updateExpandedSize(),e.closingContainer?.removeEventListener("transitionend",o.listener);const i=e.closingContainer??t;o.listener=t=>{if(t&&t.target!==t.currentTarget)return;i.removeEventListener("transitionend",o.listener),n.classList.add("popupable-open");const s=a?a[a.currentIndex]:e;if(s.video&&(s.zoomable?s.source.controls=!1:s.explicitControls||(s.source.controls=!0)),a)for(const e of a)e.cloneContainer.style.display=null;for(const e of r)e.target.addEventListener(e.event,e.func,e.args);e.scheduleNavHide?.()},o.duration?i.addEventListener("transitionend",o.listener):o.listener()}function closePopupable(){if(!e||"close"===e.state)return;if(o++,e.state="close",e.decodeAborted=!0,e.decodeQueue=null,e.group)for(const t of e.group)t._releaseTimer&&(clearTimeout(t._releaseTimer),t._releaseTimer=null);document.body.classList.add("popupable-block-touch"),setTimeout(()=>document.body.classList.remove("popupable-block-touch"),300);const{cloneContainer:n,original:a,popup:r,transition:i,group:s,listeners:l}=e;a.classList.remove("popupable-loading"),r.classList.remove("popupable-active"),r.classList.remove("popupable-open");const p=s?s[s.currentIndex].cloneContainer:n;if(e.closingContainer=p,setCloneToOriginalRect(p,a),s)for(const e of s)e.cloneContainer!==p&&(e.cloneContainer.style.display="none");for(const e of l)e.target.removeEventListener(e.event,e.func);n.removeEventListener("transitionend",i.listener);const c=s?s[s.currentIndex]:e;c.video&&c.source&&(c.source.controls=!1);const u=c.original===a,d=e;i.listener=n=>{n&&n.target!==n.currentTarget||(p.removeEventListener("transitionend",i.listener),a.classList.remove("popupable-hide"),u&&c.video&&"VIDEO"===a.tagName&&!c.cloneLayer&&(a.currentTime=c.source.currentTime),u&&c.wasPlaying&&"VIDEO"===a.tagName&&a.play(),r.remove(),d===e&&(enableScroll(),t=e,e=null))},i.duration?p.addEventListener("transitionend",i.listener):i.listener()}function updateExpandedSize(){if(!e||"close"===e.state)return;if((e.group??[e]).some(e=>e.cloneContainer?.classList.contains("popupable-block-transitions")))return;const t=visualViewport?.width||window.innerWidth,n=visualViewport?.height||window.innerHeight,o=visualViewport?.offsetTop||0,a=visualViewport?.offsetLeft||0,r=visualViewport?.scale||1;document.documentElement.style.setProperty("--popupable-view-width",t+"px"),e.popup.style.setProperty("--popupable-vv-width",t+"px"),e.popup.style.setProperty("--popupable-vv-height",n+"px"),e.popup.style.setProperty("--popupable-vv-top",o+"px"),e.popup.style.setProperty("--popupable-vv-left",a+"px"),e.popup.style.setProperty("--popupable-vv-scale",r),e.popup.style.setProperty("--popupable-vv-ui-scale",1/r);const i=1/r;let s;s=e.group?e.group:[e];for(const e of s){const{top:t,left:n,width:o,height:a}=calcExpandedRect(e);e.cloneContainer.style.top=t+"px",e.cloneContainer.style.left=n+"px",e.cloneContainer.style.width=o+"px",e.cloneContainer.style.height=a+"px"}if(e.contentContainer){let t;if(t=e.group?e.group[e.group.currentIndex]:e,t.content){const n=t.content.getBoundingClientRect();e.contentContainer.style.height=n.height/i+"px"}else{const t=e.contentContainer,n=t.previousElementSibling&&t.nextElementSibling&&parseFloat(getComputedStyle(t,"::after").height)||0;t.style.height=n+"px"}}}const d=new WeakSet;function ensureShadowStyles(e){const t=e?.getRootNode?.();t instanceof ShadowRoot&&!d.has(t)&&(l||(l=new CSSStyleSheet,l.replaceSync(".popupable-hide{visibility:hidden!important}.popupable-loading,.popupable-loading *{cursor:wait!important}")),d.add(t),t.adoptedStyleSheets=[...t.adoptedStyleSheets,l])}const m=/\.(mp4|m4v|webm|ogv|mov|3gp|m3u8|flv)(\?|#|$)/i;function isVideo(e){const t=inheritAttr(e,"data-popupable-type");if(t)return"video"===t;if("VIDEO"===e.tagName)return!0;if("IMG"===e.tagName)return!1;const n=e.getAttribute("data-popupable-src")||e.getAttribute("src")||"";return m.test(n)}const b=e=>e.getAttribute("currentSrc")||e.getAttribute("src")||e.getAttribute("data-popupable-src");function ancestorClosest(e,t){let n=e;for(;n;){const e=n.closest?.(t);if(e)return e;const o=n.getRootNode?.();n=o instanceof ShadowRoot?o.host:null}return null}function composedClosest(e,t){for(const n of e.composedPath())if(1===n.nodeType&&n.matches?.(t))return n;return null}function inheritAttr(e,t){const n=ancestorClosest(e,`[${t}]`);if(!n)return;const o=n.getAttribute(t);return"false"!==o?o||!0:void 0}function resolveProp(e,t){if(t in e)return t;const n=t.toLowerCase();for(let t=e;t;t=Object.getPrototypeOf(t))for(const e of Object.getOwnPropertyNames(t))if(e.toLowerCase()===n)return e;return t}function parsePopupableOrder(e){const t=["counter","image","content","thumbnails"],n=new Set(t),o=[];if(e)for(const t of e.split(",")){const e=t.trim().toLowerCase();e&&n.has(e)&&!o.includes(e)&&o.push(e)}for(const e of t)o.includes(e)||o.push(e);const a=o.indexOf("image");return{top:o.slice(0,a),bottom:o.slice(a+1)}}function cloneElement(e,t=e){const n={knownAspect:0},o=inheritAttr(e,"data-popupable-anim"),a=popupableAnimTypes[o]?o:"expand",r=popupableAnimTypes[a],i=inheritAttr(e,"data-popupable-src"),s=b(e),l=inheritAttr(e,"data-popupable-title"),p=inheritAttr(e,"data-popupable-description"),c=inheritAttr(e,"data-popupable-zoomable"),u=getComputedStyle(e),d=t===e?u:getComputedStyle(t),f=t!==e?b(t):null,g=t===e,h=document.createElement("div");h.className="popupable-clone-container",inheritAttr(e,"data-popupable-transparent")&&h.classList.add("popupable-transparent"),c&&h.classList.add("popupable-zoomable"),h.style.borderRadius=u.borderRadius,r.styles&&(h.style.border=u.border,h.style.outline=u.outline,h.style.boxShadow=u.boxShadow);const v=isVideo(e);let y=!1;const x=inheritAttr(e,"data-popupable-poster"),w=("string"==typeof x?x:null)||("VIDEO"===e.tagName?e.getAttribute("poster"):null),L=f||s||i,C=m.test(L)||v&&L===s,E=i&&s||f;let I,P,A;C?(I=document.createElement("video"),I.className="popupable-clone",g&&(I.src=L),I.playsInline=!0,I.controls=!1,v&&!E||(I.muted=!0,I.loop=!0,I.autoplay=!0),g&&w&&L===s&&(I.poster=w)):(I=new Image,I.className="popupable-clone",g&&(I.src=L),I.style.imageRendering=d.imageRendering);const M="IMG"===t.tagName||"VIDEO"===t.tagName;I.style.objectFit=M?d.objectFit:"cover",M&&(I.style.objectPosition=d.objectPosition),I.style.background=d.background,h.append(I);const N=e=>{const t=e.naturalWidth||e.videoWidth,o=e.naturalHeight||e.videoHeight;t&&o&&(n.knownAspect=t/o)};if("VIDEO"===I.tagName?I.addEventListener("loadedmetadata",()=>{N(I),updateExpandedSize()}):I.addEventListener("load",()=>{N(I),updateExpandedSize()}),E){const t=i||s;if(m.test(t)||v&&t===s?(P=document.createElement("video"),P.className="popupable-clone-layer",g&&(P.src=t),P.playsInline=!0,P.controls=!1,v||(P.muted=!0,P.loop=!0,P.autoplay=!0),g&&w&&t===s&&(P.poster=w)):(P=new Image,P.className="popupable-clone-layer",g&&(P.src=t),P.style.imageRendering=u.imageRendering),h.append(P),"VIDEO"===P.tagName?P.addEventListener("loadedmetadata",()=>{N(P),updateExpandedSize()}):P.addEventListener("load",()=>{N(P),updateExpandedSize()}),"fill"===I.style.objectFit&&"IMG"===I.tagName){const t=e.getBoundingClientRect();e.naturalWidth&&e.naturalHeight&&Math.abs(t.width/t.height-e.naturalWidth/e.naturalHeight)<.01&&(I.style.objectFit="cover")}A=P}else A=I;v&&"VIDEO"===e.tagName&&t===e&&(C&&(I.currentTime=e.currentTime),y=!e.paused,e.pause());const S=inheritAttr(e,"data-popupable-attr");let D,T=!1;if("string"==typeof S)for(const e of S.split(",")){const t=e.trim();if(!t)continue;const n=t.indexOf("=");if(-1===n)A[resolveProp(A,t)]=!0,"controls"===t.toLowerCase()&&(T=!0);else{const e=t.slice(0,n).trim(),o=t.slice(n+1).trim(),a=Number(o),r=resolveProp(A,e);"true"===o?A[r]=!0:"false"===o?A[r]=!1:""===o||Number.isNaN(a)?A[r]=o:A[r]=a,"controls"===e.toLowerCase()&&(T=!0)}}if(l||p){if(D=document.createElement("div"),D.classList="popupable-content",l){const e=document.createElement("div");e.className="popupable-title",e.textContent=l,D.append(e)}if(p){const e=document.createElement("div");e.className="popupable-description",e.textContent=p,D.append(e)}}const k=[I,P].filter(Boolean),z=Promise.all(k.filter(e=>"VIDEO"===e.tagName).map(e=>{const t=new Promise(t=>{if(e.readyState>=1)return t();e.addEventListener("loadedmetadata",t,{once:!0}),e.addEventListener("error",t,{once:!0})});if(e.poster){const n=new Promise(t=>{const n=new Image;n.addEventListener("load",t,{once:!0}),n.addEventListener("error",t,{once:!0}),n.src=e.poster});return Promise.all([n,t])}return t})),F=L,R=P?i||s:null;let V=g||!P;const O="VIDEO"===I.tagName&&w&&L===s?w:null,X=P&&"VIDEO"===P.tagName&&w&&(i||s)===s?w:null;let W=!g,H=null;const Y=(e,t)=>e+Math.random()*(t-e),$=(e,t,n)=>`hsl(${e.toFixed(0)} ${t.toFixed(0)}% ${n.toFixed(0)}%)`,B=Math.random();let Q,_,j;B<.2?(Q=Y(6,14),_=Y(22,38),j=Y(20,45)):B<.55?(Q=Y(14,26),_=Y(38,58),j=Y(25,55)):B<.85?(Q=Y(22,38),_=Y(58,75),j=Y(35,65)):(Q=Y(32,50),_=Y(72,90),j=Y(40,75));const q=Y(0,360),U=(q+Y(20,140))%360,G=(q+Y(-40,220)+360)%360;function K(){W&&(W=!1,h.classList.remove("popupable-clone-loading"),V&&F&&!I.getAttribute("src")&&(I.src=F,"VIDEO"===I.tagName&&O&&(I.poster=O)),P&&R&&!P.getAttribute("src")&&(P.src=R,"VIDEO"===P.tagName&&X&&(P.poster=X)))}function Z(){if(K(),H)return H;const e=k.filter(e=>"VIDEO"!==e.tagName);return e.length?(H=Promise.all(e.map(e=>e.decode?e.decode().catch(()=>{}):new Promise(t=>{if(e.complete)return t();e.addEventListener("load",t,{once:!0}),e.addEventListener("error",t,{once:!0})}))).then(()=>z),H):(H=z,H)}return h.style.setProperty("--popupable-loading-x1",Y(0,100).toFixed(0)+"%"),h.style.setProperty("--popupable-loading-y1",Y(0,100).toFixed(0)+"%"),h.style.setProperty("--popupable-loading-x2",Y(0,100).toFixed(0)+"%"),h.style.setProperty("--popupable-loading-y2",Y(0,100).toFixed(0)+"%"),h.style.setProperty("--popupable-loading-c1",`hsla(${G.toFixed(0)} ${Math.min(95,j+Y(10,25)).toFixed(0)}% ${_.toFixed(0)}% / ${Y(.55,.9).toFixed(2)})`),h.style.setProperty("--popupable-loading-c2",`hsla(${U.toFixed(0)} ${j.toFixed(0)}% ${(.8*_).toFixed(0)}% / ${Y(.4,.75).toFixed(2)})`),h.style.setProperty("--popupable-loading-angle",Y(0,360).toFixed(0)+"deg"),h.style.setProperty("--popupable-loading-a",$(q,.6*j,Q)),h.style.setProperty("--popupable-loading-b",$(U,.8*j,(Q+_)/2)),W&&h.classList.add("popupable-clone-loading"),Object.assign(n,{id:e.dataset.popupable,original:e,cloneContainer:h,clone:I,cloneLayer:P,maintainAspect:inheritAttr(e,"data-popupable-maintain-aspect"),noUpscale:inheritAttr(e,"data-popupable-no-upscale"),counter:inheritAttr(e,"data-popupable-counter"),thumbnails:inheritAttr(e,"data-popupable-thumbnails"),order:parsePopupableOrder(inheritAttr(e,"data-popupable-order")),animationName:a,animation:r,get ready(){return Z()},triggerDecode:Z,ensureLoaded:K,markAsActiveInGroup:function(){V=!0,W||!F||I.getAttribute("src")||(I.src=F,"VIDEO"===I.tagName&&O&&(I.poster=O))},releaseDecode:function(){W||(W=!0,H=null,h.classList.add("popupable-clone-loading"),"VIDEO"===I.tagName?(I.paused||I.pause(),I.removeAttribute("src"),I.removeAttribute("poster"),I.load()):I.removeAttribute("src"),P&&("VIDEO"===P.tagName?(P.paused||P.pause(),P.removeAttribute("src"),P.removeAttribute("poster"),P.load()):P.removeAttribute("src")))},content:D,zoomable:c,source:A,video:v,explicitControls:T,wasPlaying:y})}let f,g,h;document.addEventListener("pointerdown",t=>{0===t.button&&(f||(n=t.composedPath()[0]??t.target,g=t.clientX,h=t.clientY),f||"open"!==e?.state||composedClosest(t,".popupable-header, .popupable-footer")||(f=!0))});let v=!1;function handleMove(t){if("open"!==e?.state||!e.group||!f)return;if(!e.popup?.classList.contains("popupable-open"))return g=t.touches?.[0].clientX??t.clientX,void(h=t.touches?.[0].clientY??t.clientY);const n=e.group[e.group.currentIndex],o=t.touches?.[0].clientX??t.clientX;!v&&Math.abs(o-g)>a&&n.video&&(v=!0,n.source.style.pointerEvents="none"),n.cloneContainer.parentElement.style.transition="initial",n.cloneContainer.parentElement.style.transform=`translateX(${o-g}px)`;const r=projectSnapIndex(e.group,o-g);r!==e.lastProjectedIndex&&(e.lastProjectedIndex=r,scheduleDragDecodeQueue(r))}document.addEventListener("mousemove",handleMove),document.addEventListener("touchmove",handleMove,{passive:!0}),document.addEventListener("pointerup",async r=>{if(0!==r.button)return;if(f){f=!1,cancelDragDecodeQueue();const J=e.group?e.group[e.group.currentIndex]:e;v&&(v=!1,J.source.style.pointerEvents=null),J.cloneContainer.parentElement.style.transition=null,J.cloneContainer.parentElement.style.transform=null;const ee=r.clientX-g,te=Math.abs(ee),ne=r.clientY-h,oe=Math.abs(ne);if("touch"===r.pointerType&&oe>56&&oe>1.1*te)return void closePopupable();if(e.group&&te>a){const ae=Math.max(0,Math.floor((te-window.innerWidth/2)/window.innerWidth));if(ee>Math.max(.1*window.innerWidth,64))for(let re=0;re<=ae;re++)e.goPrev();else if(ee<-Math.max(.1*window.innerWidth,64))for(let ie=0;ie<=ae;ie++)e.goNext();return void(e.blocked=!0)}}const i=r.composedPath()[0]??r.target,s=composedClosest(r,".popupable-viewport")&&!ancestorClosest(n,".popupable-viewport");if(!s&&i!=n&&(!n.classList.contains("popupable-clone-container")||i!==t?.original)&&(!ancestorClosest(n,".popupable-container")||composedClosest(r,".popupable-container"))||Math.abs(r.clientX-g)>a||Math.abs(r.clientY-h)>a)return;const l=(s?ancestorClosest(n,"[data-popupable]"):null)||composedClosest(r,"[data-popupable]");if(!l){if(s)return void closePopupable();if(composedClosest(r,".popupable-container"))return;return void(e&&("zoomed"===e.state?e.unzoom():closePopupable()))}if(r.preventDefault(),e&&"close"!==e.state&&e.original===l)return;e&&closePopupable();const p=++o;e={transition:{},listeners:[]};const c=e,u=document.createElement("div");u.className="popupable-clones";const d=cloneElement(l),{cloneContainer:m,content:y}=d;let x;const w=ancestorClosest(l,"[data-popupable-group]"),L=w?.getAttribute("data-popupable-group"),C=L&&"false"!==L?L:null;if(C){const se=[],le=new Set,pe=l.getRootNode?.()??document;for(const ce of pe.querySelectorAll(`[data-popupable-group="${C}"]`)){ce.hasAttribute("data-popupable")&&!le.has(ce)&&(le.add(ce),se.push(ce));for(const ue of ce.querySelectorAll("[data-popupable]")){if(le.has(ue))continue;const de=ue.getAttribute("data-popupable-group");null!==de&&de!==C||ancestorClosest(ue,"[data-popupable-group]")!==ce||(le.add(ue),se.push(ue))}}if(se.length){x=[];for(const[me,be]of se.entries())if(be===l)x.push(d),x.currentIndex=me,u.append(m);else{const fe=cloneElement(be,l);fe.cloneContainer.style.display="none",x.push(fe),u.append(fe.cloneContainer)}for(const[ge,he]of x.entries()){if(!he.content)continue;const ve=ge-x.currentIndex;ve>0?he.content.classList.add("popupable-content-after"):ve<0&&he.content.classList.add("popupable-content-before")}}}else u.append(m);const E=document.createElement("div");E.className=`popupable-container popupable-anim-${d.animationName}`,d.id&&(E.id=d.id);const I=document.createElement("div");let P,A,M,N,S,D,T,k,z,F,R;I.className="popupable-viewport",(y||x&&x.some(e=>e.content))&&(P=document.createElement("div"),P.classList="popupable-content-container");const V={};if(x){d.counter&&(N=document.createElement("div"),N.className="popupable-counter"),d.thumbnails&&(S=document.createElement("div"),S.className="popupable-thumbnails",D=x.map((e,t)=>{let n;const o=inheritAttr(e.original,"data-popupable-thumb"),a="string"==typeof o?o:null;if(e.video){const t=inheritAttr(e.original,"data-popupable-poster"),o=("string"==typeof t?t:null)||("VIDEO"===e.original.tagName?e.original.getAttribute("poster"):null);a||o?(n=new Image,n.src=a||o):(n=document.createElement("video"),n.src=inheritAttr(e.original,"data-popupable-src")||b(e.original),n.muted=!0,n.playsInline=!0,n.preload="metadata",n.disablePictureInPicture=!0,n.disableRemotePlayback=!0)}else n=new Image,n.src=a||inheritAttr(e.original,"data-popupable-src")||b(e.original);return n.className="popupable-thumbnail",n.dataset.thumbnailIndex=t,S.append(n),n})),I.innerHTML=`\n        <div class="popupable-button-container popupable-prev-container${x.currentIndex?"":" popupable-button-disabled"}">\n          <div class="popupable-button popupable-prev">\n            <svg width="24px" height="24px" viewBox="0 -960 960 960" fill="currentColor">\n              <path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/>\n            </svg>\n          </div>\n        </div>\n        <div class="popupable-button-container popupable-next-container${x.currentIndex===x.length-1?" popupable-button-disabled":""}">\n          <div class="popupable-button popupable-next">\n            <svg width="24px" height="24px" viewBox="0 -960 960 960" fill="currentColor">\n              <path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/>\n            </svg>\n          </div>\n        </div>\n      `;const ye=I.querySelector(".popupable-next-container"),xe=I.querySelector(".popupable-prev-container");let we,Le,Ce,Ee;const Ie=!(navigator.maxTouchPoints>0||window.matchMedia("(hover: none)").matches);function O(){ye.classList.remove("popupable-button-inactive"),xe.classList.remove("popupable-button-inactive"),e.scheduleNavHide()}function X(e){const t=x[x.currentIndex];t.video&&t.source&&(t.source.paused||(t.swipePaused=!0,t.source.pause()),t.source.controls=!1),x.currentIndex=e;const n=x[x.currentIndex];n.video&&n.source&&(n.zoomable||n.explicitControls||(n.source.controls=!0),n.source.play().catch(()=>{}),n.swipePaused=!1),R()}if(e.scheduleNavHide=()=>{Ie&&(clearTimeout(we),Ee||(we=setTimeout(()=>{Ee||(ye.classList.add("popupable-button-inactive"),xe.classList.add("popupable-button-inactive"))},1500)))},e.clearNavInactive=()=>{ye.classList.remove("popupable-button-inactive"),xe.classList.remove("popupable-button-inactive")},R=async()=>{const t=x[x.currentIndex];t.markAsActiveInGroup(),await t.ready,x.currentIndex?xe.classList.remove("popupable-button-disabled"):xe.classList.add("popupable-button-disabled"),x.currentIndex===x.length-1?ye.classList.add("popupable-button-disabled"):ye.classList.remove("popupable-button-disabled");for(const[e,t]of x.entries()){const n=e-x.currentIndex;t.cloneContainer.style.setProperty("--popupable-offset-multiplier",n),t.cloneContainer.style.zIndex=-1*Math.abs(n),t.content&&(n?n>0?(t.content.classList.add("popupable-content-after"),t.content.classList.remove("popupable-content-before")):(t.content.classList.add("popupable-content-before"),t.content.classList.remove("popupable-content-after")):(t.content.classList.remove("popupable-content-before"),t.content.classList.remove("popupable-content-after")))}if(t.id?E.id=t.id:E.removeAttribute("id"),N&&(N.textContent=`${x.currentIndex+1} / ${x.length}`),D){for(const[e,t]of D.entries())t.classList.toggle("popupable-thumbnail-active",e===x.currentIndex);const e=D[x.currentIndex];requestAnimationFrame(()=>{if(!e||!S?.isConnected)return;const t=getComputedStyle(S),n=parseFloat(t.paddingLeft)||0,o=parseFloat(t.paddingRight)||0,a=S.scrollLeft+n,r=S.scrollLeft+S.clientWidth-o,i=e.offsetLeft,s=i+e.offsetWidth;let l=S.scrollLeft;i<a?l=Math.max(0,i-n):s>r&&(l=s-S.clientWidth+o),l!==S.scrollLeft&&(T?S.scrollTo({left:l,behavior:"smooth"}):S.scrollLeft=l),T=!0})}e.closeContainer.classList.toggle("popupable-button-inactive",!t.zoomable&&!t.video),updateExpandedSize(),e.lastProjectedIndex=e.group.currentIndex,buildDecodeQueue(e)},k=()=>{x.currentIndex>=x.length-1||X(x.currentIndex+1)},z=()=>{x.currentIndex<=0||X(x.currentIndex-1)},e.listeners.push({target:ye,event:"click",func:()=>k()},{target:xe,event:"click",func:()=>z()},{target:document,event:"keydown",func:t=>{if("zoomed"!==e.state)switch(t.key){case"ArrowRight":case"ArrowDown":case"PageDown":case"d":case"s":k();break;case"ArrowLeft":case"ArrowUp":case"PageUp":case"a":case"w":z();break;case"Home":x.currentIndex=0,R();break;case"End":x.currentIndex=x.length-1,R();break;case"0":case"1":case"2":case"3":case"4":case"5":case"6":case"7":case"8":case"9":x.currentIndex=Math.min(Math.max(Number(t.key),1)-1,x.length-1),R()}}},{target:document,event:"wheel",func:t=>{if("zoomed"===e.state)return;const n=performance.now();n-(F||0)<80||(t.deltaY>50?(F=n,k()):t.deltaY<-50&&(F=n,z()))},args:{passive:!0}}),S){let Pe,Ae,Me,Ne,Se,De,Te,ke,ze;function W(){ze&&(cancelAnimationFrame(ze),ze=null)}function H(){if(W(),Math.abs(ke)<.01)return;let e=performance.now();ze=requestAnimationFrame(function t(n){if(!S.isConnected)return void W();const o=S.scrollWidth-S.clientWidth;if(o<=0)return void W();const a=Math.min(32,n-e);e=n;let r=S.scrollLeft+ke*a;r<0&&(r=0),r>o&&(r=o),S.scrollLeft=r,S.scrollLeft<=.1&&ke<0||S.scrollLeft>=o-.1&&ke>0?W():(ke*=Math.pow(.8,a/16.67),Math.abs(ke)<=.002?W():ze=requestAnimationFrame(t))})}e.listeners.push({target:S,event:"pointerdown",func:e=>{if(0!==e.button)return;const t=S.scrollWidth-S.clientWidth;Me=t>0,W(),Pe=!0,Ae=!1,Ne=e.clientX,Se=S.scrollLeft,De=S.scrollLeft,Te=performance.now(),ke=0,Me&&S.classList.add("popupable-thumbnails-dragging"),S.setPointerCapture(e.pointerId)}},{target:S,event:"pointermove",func:e=>{if(!Pe)return;const t=e.clientX-Ne;Math.abs(t)>a&&(Ae=!0);const n=performance.now(),o=n-Te,r=Se-t;if(S.scrollLeft=r,o>0){const e=(S.scrollLeft-De)/o;ke=.65*ke+.35*e,De=S.scrollLeft,Te=n}}},{target:S,event:"pointerup",func:e=>{if(!Pe)return;if(Pe=!1,Me&&S.classList.remove("popupable-thumbnails-dragging"),S.hasPointerCapture(e.pointerId)&&S.releasePointerCapture(e.pointerId),Ae)return performance.now()-Te>10&&(ke=0),void H();const t=document.elementFromPoint(e.clientX,e.clientY)?.closest?.(".popupable-thumbnail");t&&(x.currentIndex=Number(t.dataset.thumbnailIndex),R())}},{target:S,event:"pointercancel",func:e=>{Pe&&(Pe=!1,Me&&S.classList.remove("popupable-thumbnails-dragging"),S.hasPointerCapture(e.pointerId)&&S.releasePointerCapture(e.pointerId),W())}},{target:S,event:"wheel",func:e=>{e.stopPropagation(),e.preventDefault();const t=S.scrollWidth-S.clientWidth;if(t<=0)return;const n=Math.abs(e.deltaX)>Math.abs(e.deltaY)?e.deltaX:e.deltaY,o=S.scrollLeft<=.1,a=S.scrollLeft>=t-.1;if(o&&n<0||a&&n>0)return;o&&n>0&&ke<0&&(ke=0),a&&n<0&&ke>0&&(ke=0);ke=(ke||0)+.015*n,ze||H()},args:{passive:!1}})}Ie&&(e.listeners.push({target:ye,event:"pointerenter",func:()=>{Ee=!0,O()}},{target:xe,event:"pointerenter",func:()=>{Ee=!0,O()}},{target:ye,event:"pointerleave",func:()=>{Ee=!1,e.scheduleNavHide()}},{target:xe,event:"pointerleave",func:()=>{Ee=!1,e.scheduleNavHide()}}),e.listeners.push({target:E,event:"pointermove",func:t=>{if("zoomed"!==e.state)return null==Le||null==Ce?(Le=t.clientX,void(Ce=t.clientY)):void(Math.abs(t.clientX-Le)<a&&Math.abs(t.clientY-Ce)<a||(Le=t.clientX,Ce=t.clientY,O()))},args:{passive:!0}}));for(const Fe of x)Fe.content&&P&&P.append(Fe.content)}else y&&P.append(y);const Y={counter:!!N,content:!!P,thumbnails:!!S},$=d.order.top.filter(e=>Y[e]),B=d.order.bottom.filter(e=>Y[e]);function Q(e,t){e&&("counter"===t&&N?(V[e===A?"counterTop":"counterBottom"]=!0,e.append(N)):"content"===t&&P?(V[e===A?"contentTop":"contentBottom"]=!0,e.append(P)):"thumbnails"===t&&S&&(V[e===A?"thumbnailsTop":"thumbnailsBottom"]=!0,e.append(S)))}A=document.createElement("div"),A.className="popupable-header",M=document.createElement("div"),M.className="popupable-footer";for(const Re of $)Q(A,Re);for(const Ve of B)Q(M,Ve);I.append(A),I.append(M);const _=document.createElement("div");_.className="popupable-button-container popupable-close-container",_.innerHTML='<div class="popupable-button popupable-close"><svg width="24px" height="24px" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></div>',_.addEventListener("click",closePopupable),d.zoomable||d.video||_.classList.add("popupable-button-inactive"),A.append(_),E.append(u,I),Object.assign(c,d,{popup:E,group:x,contentContainer:P,thumbnailsContainer:S,orderPlacement:V,closeContainer:_,goNext:k,goPrev:z}),ensureShadowStyles(l);const j=setTimeout(()=>{p===o&&l.classList.add("popupable-loading")},250);if(await c.ready,clearTimeout(j),l.classList.remove("popupable-loading"),p!==o||e!==c||"close"===c.state)return;m.classList.add("popupable-block-transitions"),d.animation.hideSource&&l.classList.add("popupable-hide"),d.animation.crossfade&&E.classList.add("popupable-crossfade"),d.animation.fade&&E.classList.add("popupable-fade"),document.body.append(E),setCloneToOriginalRect(m,l),d.video&&d.source.play().catch(()=>{}),disableScroll();const q=getComputedStyle(E);c.transition.duration=1e3*parseFloat(q.transitionDuration)+1e3*parseFloat(q.transitionDelay),E._state=c,requestAnimationFrame(()=>{requestAnimationFrame(()=>{m.classList.remove("popupable-block-transitions"),openPopupable(E._state),x&&(R(),buildDecodeQueue(E._state))})});let U,G=0;x&&E.addEventListener("dragstart",e=>e.preventDefault());const K=new Map;function Z(e,t,n,o,r=[]){if("open"!==e.state)return;let i=0;const s=t.cloneContainer.parentElement,l=s.style.transform;if(l){const e=l.match(/translateX\((-?\d+(?:\.\d+)?)px\)/);e&&(i=Number(e[1])||0)}const p=Math.abs(i)>.5;f=!1,p?(t.cloneContainer.style.translate="0 0",t.cloneContainer.style.transition="translate var(--popupable-switch-duration), transform 0s",s.style.transition=null,s.style.transform=null,t.cloneContainer.style.translate=`${i}px 0`):(s.style.transition=null,s.style.transform=null),e.state="zoomed",E.classList.add("popupable-locked");let c,u,d=o;const m=new Map;let b,g,h,v,y,x,w,L,C,P,A=!1;const M=t.cloneContainer.getBoundingClientRect(),N=n?.clientX??M.left+M.width/2,S=n?.clientY??M.top+M.height/2;c=(N-M.left)*(1-d),u=(S-M.top)*(1-d);const D=()=>t.cloneContainer.style.transform=`translate(${c}px, ${u}px) scale(${d})`;function T(e,n,o){const a=d;var r;if(r=e,d=Math.min(6,Math.max(.5,r)),d===a)return!1;const i=t.cloneContainer.getBoundingClientRect(),s=d/a,l=n-i.left,p=o-i.top;return c+=l*(1-s),u+=p*(1-s),!0}function k(){if(1===m.size){const e=m.values().next().value;return b=e.id,g=e.x,h=e.y,v=null,y=null,void(x=null)}if(m.size>=2){b=null;const[e,t]=[...m.values()];return v=(e.x+t.x)/2,y=(e.y+t.y)/2,void(x=Math.hypot(t.x-e.x,t.y-e.y))}b=null,g=null,h=null,v=null,y=null,x=null}if(t.cloneContainer.classList.add("popupable-zoomed"),D(),r.length){p||(t.cloneContainer.style.transition="none"),P=!0;for(const e of r)m.set(e.id,{id:e.id,x:e.x,y:e.y}),E.setPointerCapture(e.id);k()}e.unzoom=()=>{e.state="open",E.classList.remove("popupable-locked");for(const e of m.keys())E.hasPointerCapture(e)&&E.releasePointerCapture(e);m.clear(),t.cloneContainer.classList.remove("popupable-zoomed"),t.cloneContainer.style.transition=null,t.cloneContainer.style.transform=null,t.cloneContainer.style.translate=null;for(const t of e.zoomListeners)t.target.removeEventListener(t.event,t.func)},e.zoomListeners=[{target:E,event:"pointerdown",func:e=>{0===e.button&&(t.cloneContainer.style.transition="none",E.setPointerCapture(e.pointerId),m.set(e.pointerId,{id:e.pointerId,x:e.clientX,y:e.clientY}),1===m.size?(w=e.target,L=e.clientX,C=e.clientY,P=!1):P=!0,k(),e.preventDefault())}},{target:E,event:"pointermove",func:e=>{const t=m.get(e.pointerId);if(t){if(t.x=e.clientX,t.y=e.clientY,!P&&(Math.abs(e.clientX-L)>a||Math.abs(e.clientY-C)>a)&&(P=!0),1===m.size&&b===e.pointerId){const t=e.clientX-g,n=e.clientY-h;if(!t&&!n)return;return c+=t,u+=n,g=e.clientX,h=e.clientY,void D()}if(m.size>=2){const[e,t]=[...m.values()],n=(e.x+t.x)/2,o=(e.y+t.y)/2,a=Math.hypot(t.x-e.x,t.y-e.y);if(!x)return v=n,y=o,void(x=a);c+=n-v,u+=o-y,T(d*(a/x),n,o),A=!0,v=n,y=o,x=a,D()}}}},{target:E,event:"pointerup",func:n=>{if(m.has(n.pointerId)){if(m.delete(n.pointerId),E.hasPointerCapture(n.pointerId)&&E.releasePointerCapture(n.pointerId),A&&d<=1.01&&m.size<2)return e.skipOpenTouchPointerUps=m.size,void e.unzoom();if(!m.size&&!P&&Math.abs(n.clientX-L)<a&&Math.abs(n.clientY-C)<a){if(w?.closest?.(".popupable-clone-container")===t.cloneContainer||(w===E||w===I))return void e.unzoom()}k()}}},{target:E,event:"pointercancel",func:e=>{m.has(e.pointerId)&&(m.delete(e.pointerId),E.hasPointerCapture(e.pointerId)&&E.releasePointerCapture(e.pointerId),k())}},{target:E,event:"wheel",func:e=>{t.cloneContainer.style.transition="none",T(d*Math.exp(.002*-e.deltaY),e.clientX,e.clientY)&&D()},args:{passive:!0}}];for(const t of e.zoomListeners)t.target.addEventListener(t.event,t.func,t.args)}e.listeners.push({target:E,event:"pointerdown",func:e=>{if("open"!==E._state.state||"touch"!==e.pointerType)return;const t=E._state,n=t.group?t.group[t.group.currentIndex]:t;e.target.closest(".popupable-clone-container")===n.cloneContainer&&(K.set(e.pointerId,{id:e.pointerId,x:e.clientX,y:e.clientY}),K.size>=2&&(Z(t,n,e,1,[...K.values()].slice(0,2)),K.clear(),e.preventDefault()))}},{target:E,event:"pointermove",func:e=>{const t=K.get(e.pointerId);t&&(t.x=e.clientX,t.y=e.clientY)}},{target:E,event:"pointerup",func:e=>{K.delete(e.pointerId)}},{target:E,event:"pointercancel",func:e=>{K.delete(e.pointerId)}}),E.addEventListener("pointerup",t=>{if("zoomed"===E._state.state)return;if("touch"===t.pointerType&&(E._state.skipOpenTouchPointerUps||0)>0)return void E._state.skipOpenTouchPointerUps--;const o=performance.now(),a=null!=t.target.closest(".popupable-next-container, .popupable-prev-container");if(U&&o-G<250)return void(G=o);if(a?(U=!0,G=o):(U=!1,G=o),0!==t.button||!((t.target.classList.contains("popupable-clone")||t.target.classList.contains("popupable-clone-layer"))&&n.classList.contains("popupable-clone-container")||t.target==n&&(t.target.closest(".popupable-clone-container")||t.target.classList.contains("popupable-viewport")||t.target.classList.contains("popupable-container"))||t.target.classList.contains("popupable-container")&&n===e.original.parentElement))return;const r=E._state,i=r.group?r.group[r.group.currentIndex]:r;r.blocked&&(r.blocked=!1),"open"!==r.state?(t.stopPropagation(),e!==r&&(closePopupable(),e=r),openPopupable(e)):requestAnimationFrame(()=>{r.blocked?r.blocked=!1:i.zoomable&&(t.target.classList.contains("popupable-clone")||t.target.classList.contains("popupable-clone-layer"))?Z(r,i,t,2):i.video&&(t.target.classList.contains("popupable-clone")||t.target.closest(".popupable-clone-container")===i.cloneContainer)||closePopupable()})})}),document.addEventListener("keydown",t=>{if("Escape"===t.key||"Backspace"===t.key||" "===t.key||"Delete"===t.key){if("zoomed"===e.state)return void e.unzoom();closePopupable()}}),window.addEventListener("resize",updateExpandedSize),visualViewport&&visualViewport.addEventListener("resize",updateExpandedSize)}
+{let e,t,n,o=0;const a=3;let i;function triggerHaptic(){if("function"!=typeof navigator.vibrate){if(!i){i=document.createElement("label"),i.style.cssText="position:fixed;left:-9999px;top:-9999px;opacity:0;pointer-events:none";const e=document.createElement("input");e.type="checkbox",e.setAttribute("switch",""),i.append(e),document.body.append(i)}i.click()}else navigator.vibrate([10])}function disableScroll(){window.addEventListener("wheel",prevent,{passive:!1}),window.addEventListener("touchmove",prevent,{passive:!1}),window.addEventListener("keydown",blockKeys,!0)}function enableScroll(){window.removeEventListener("wheel",prevent),window.removeEventListener("touchmove",prevent),window.removeEventListener("keydown",blockKeys,!0)}function prevent(e){e.preventDefault()}function blockKeys(e){["ArrowUp","ArrowDown","PageUp","PageDown","Home","End"," "].includes(e.key)&&e.preventDefault()}function getGroupAverageAspect(e){if(!e?.group)return 0;let t=0,n=0;for(const o of e.group){const e=o.source,a=e?e.naturalWidth||e.videoWidth:0,i=e?e.naturalHeight||e.videoHeight:0,r=a&&i?a/i:o.knownAspect;r&&(t+=r,n++)}return n>0?t/n:0}function calcExpandedRect(t){const n=t.original,o=visualViewport?.width||window.innerWidth,a=visualViewport?.height||window.innerHeight,i=visualViewport?.offsetTop||0,r=visualViewport?.offsetLeft||0,s=visualViewport?.scale||1,l=1/s,p=e.popup,c=(parseFloat(getComputedStyle(p).getPropertyValue("--popupable-screen-padding"))||40)/s,u=Math.max(0,o-2*c),d=a-2*c,m=Math.max(0,d);let f;if(t.maintainAspect){const e=n.getBoundingClientRect();f=e.width/e.height}else{f=(t.source.naturalWidth||t.source.videoWidth)/(t.source.naturalHeight||t.source.videoHeight)||getGroupAverageAspect(e)||1}let b=0,g=0;if(e.orderPlacement){const n=e.popup.querySelector(".popupable-counter"),o=n?n.getBoundingClientRect().height/l:0,a=e.thumbnailsContainer?e.thumbnailsContainer.getBoundingClientRect().height/l:0,i=e.contentContainer,r=t.content?t.content.getBoundingClientRect().height/l:i?.previousElementSibling&&i?.nextElementSibling&&parseFloat(getComputedStyle(i,"::after").height)||0,{counterTop:s,contentTop:p,thumbnailsTop:c,counterBottom:u,contentBottom:d,thumbnailsBottom:m}=e.orderPlacement;b=(s?o:0)+(p?r:0)+(c?a:0),g=(u?o:0)+(d?r:0)+(m?a:0)}const h=Math.max(0,a-b-g-2*c);let v=u,y=v/f;if(y>m&&(y=m,v=y*f),y>h&&(y=h,v=y*f),t.noUpscale){const e=t.cloneLayer||n,o=e.naturalWidth||e.videoWidth,a=e.naturalHeight||e.videoHeight;if(o&&a){const e=o/s,t=a/s,n=Math.min(1,e/v,t/y);n<1&&(v*=n,y*=n)}}let w=i+c+(m-y)/2;const x=i+a-g-c-y;return w=Math.min(w,x),w=Math.max(w,i+b+c),{top:w,left:r+c+(u-v)/2,width:v,height:y}}function setCloneToOriginalRect(t,n){const o=calcExpandedRect(e),{top:a,left:i,width:r,height:s}=e.animation.position(n,o);t.style.top=a+"px",t.style.left=i+"px",t.style.width=r+"px",t.style.height=s+"px"}window.popupableAnimTypes={expand:{styles:!0,hideSource:!0,crossfade:!0,position(e){const t=e.getBoundingClientRect();return{top:visualViewport.offsetTop+t.top,left:visualViewport.offsetLeft+t.left,width:t.width,height:t.height}},close:{condition(e){if(!e.isConnected)return!1;if(e.checkVisibility&&!e.checkVisibility())return!1;const t=e.getBoundingClientRect();if(0===t.width||0===t.height)return!1;const n=e=>t.right>e.left&&t.left<e.right&&t.bottom>e.top&&t.top<e.bottom,o=getComputedStyle(e).position;if("fixed"!==o){const t=e=>{if(e.parentElement)return e.parentElement;const t=e.getRootNode&&e.getRootNode();return t instanceof ShadowRoot?t.host:null};let a=t(e),i="absolute"===o;for(;a&&a!==document.documentElement;){const e=getComputedStyle(a),o="static"!==e.position;if((!i||o)&&("visible"!==e.overflowX||"visible"!==e.overflowY)&&!n(a.getBoundingClientRect()))return!1;if(o&&(i=!1),"fixed"===e.position)break;"absolute"===e.position&&(i=!0),a=t(a)}}return n({left:0,top:0,right:visualViewport?.width||window.innerWidth,bottom:visualViewport?.height||window.innerHeight})},fallback:"pop"}},pop:{fade:!0,position:(e,{top:t,left:n,width:o,height:a})=>({top:t+.05*a,left:n+.05*o,width:.9*o,height:.9*a})},line:{fade:!0,position:(e,{top:t,left:n,width:o,height:a})=>({top:t+a/2,left:n+.05*o,width:.9*o,height:0})},float:{fade:!0,position:(e,{top:t,left:n,width:o,height:a})=>({top:t+40,left:n,width:o,height:a})}};const r=3;function parseCssTime(e){if(!e)return 0;const t=parseFloat(e);return Number.isNaN(t)?0:/ms\s*$/i.test(e)?t:1e3*t}function getReleaseDelay(e){const t=e?.popup||document.documentElement;return parseCssTime(getComputedStyle(t).getPropertyValue("--popupable-switch-duration"))}function buildDecodeQueue(e,t=e.group?.currentIndex,{delayRelease:n=!0}={}){if(!e.group)return;const o=e.group.length,a=n?getReleaseDelay(e):0;for(let n=0;n<o;n++){const o=e.group[n];Math.abs(n-t)>r?o.releaseDecode&&!o._releaseTimer&&(a<=0?o.releaseDecode():o._releaseTimer=setTimeout(()=>{o._releaseTimer=null,o.releaseDecode()},a)):o._releaseTimer&&(clearTimeout(o._releaseTimer),o._releaseTimer=null)}const i=[];t!==e.group.currentIndex&&t>=0&&t<o&&i.push(e.group[t]);for(let n=1;n<=r;n++)t+n<o&&i.push(e.group[t+n]),t-n>=0&&i.push(e.group[t-n]);e.decodeQueue=i,runDecodeQueue(e)}function projectSnapIndex(e,t){const n=window.innerWidth,o=Math.abs(t);if(o<=Math.max(.1*n,64))return e.currentIndex;const a=Math.max(0,Math.floor((o-n/2)/n))+1,i=t>0?-1:1;return Math.max(0,Math.min(e.length-1,e.currentIndex+i*a))}const s=100;let l,p=0,c=null,u=-1;function scheduleDragDecodeQueue(t){if(u=t,c)return;const n=Math.max(0,s-(performance.now()-p));c=setTimeout(()=>{c=null,p=performance.now();const t=u;u=-1,t>=0&&e?.group&&t!==e.group.currentIndex&&buildDecodeQueue(e,t,{delayRelease:!1})},n)}function cancelDragDecodeQueue(){c&&(clearTimeout(c),c=null),u=-1}async function runDecodeQueue(e){if(!e.decodeQueueRunning){for(e.decodeQueueRunning=!0;e.decodeQueue&&e.decodeQueue.length&&!e.decodeAborted;){const t=e.decodeQueue.shift();try{await t.triggerDecode()}catch{}}e.decodeQueueRunning=!1}}function openPopupable(e){if("open"===e.state)return;e.state="open",triggerHaptic();const{cloneContainer:t,popup:n,transition:o,group:a,listeners:i}=e;n.classList.add("popupable-active"),e.clearNavInactive?.(),updateExpandedSize(),e.closingContainer?.removeEventListener("transitionend",o.listener);const r=e.closingContainer??t;o.listener=t=>{if(t&&t.target!==t.currentTarget)return;r.removeEventListener("transitionend",o.listener),n.classList.add("popupable-open");const s=a?a[a.currentIndex]:e;if(s.video&&(s.zoomable?s.source.controls=!1:s.explicitControls||(s.source.controls=!0)),a)for(const e of a)e.cloneContainer.style.display=null;for(const e of i)e.target.addEventListener(e.event,e.func,e.args);e.scheduleNavHide?.()},o.duration?r.addEventListener("transitionend",o.listener):o.listener()}function closePopupable(){if(!e||"close"===e.state)return;if(o++,e.state="close",e.decodeAborted=!0,e.decodeQueue=null,e.group)for(const t of e.group)t._releaseTimer&&(clearTimeout(t._releaseTimer),t._releaseTimer=null);document.body.classList.add("popupable-block-touch"),setTimeout(()=>document.body.classList.remove("popupable-block-touch"),300);const{cloneContainer:n,original:a,popup:i,transition:r,group:s,listeners:l}=e;a.classList.remove("popupable-loading"),i.classList.remove("popupable-active"),i.classList.remove("popupable-open");const p=s?s[s.currentIndex].cloneContainer:n;e.closingContainer=p;const c=e.animation.close;if(c?.condition&&!c.condition(a)){const t=popupableAnimTypes[c.fallback]?c.fallback:"pop",n=popupableAnimTypes[t];n&&n!==e.animation&&(i.classList.remove(`popupable-anim-${e.animationName}`),i.classList.add(`popupable-anim-${t}`),i.classList.toggle("popupable-crossfade",!!n.crossfade),i.classList.toggle("popupable-fade",!!n.fade),e.animation=n,e.animationName=t)}if(setCloneToOriginalRect(p,a),s)for(const e of s)e.cloneContainer!==p&&(e.cloneContainer.style.display="none");for(const e of l)e.target.removeEventListener(e.event,e.func);n.removeEventListener("transitionend",r.listener);const u=s?s[s.currentIndex]:e;u.video&&u.source&&(u.source.controls=!1);const d=u.original===a,m=e;r.listener=n=>{n&&n.target!==n.currentTarget||(p.removeEventListener("transitionend",r.listener),a.classList.remove("popupable-hide"),d&&u.video&&"VIDEO"===a.tagName&&!u.cloneLayer&&(a.currentTime=u.source.currentTime),d&&u.wasPlaying&&"VIDEO"===a.tagName&&a.play(),i.remove(),m===e&&(enableScroll(),t=e,e=null))},r.duration?p.addEventListener("transitionend",r.listener):r.listener()}function updateExpandedSize(){if(!e||"close"===e.state)return;if((e.group??[e]).some(e=>e.cloneContainer?.classList.contains("popupable-block-transitions")))return;const t=visualViewport?.width||window.innerWidth,n=visualViewport?.height||window.innerHeight,o=visualViewport?.offsetTop||0,a=visualViewport?.offsetLeft||0,i=visualViewport?.scale||1;document.documentElement.style.setProperty("--popupable-view-width",t+"px"),e.popup.style.setProperty("--popupable-vv-width",t+"px"),e.popup.style.setProperty("--popupable-vv-height",n+"px"),e.popup.style.setProperty("--popupable-vv-top",o+"px"),e.popup.style.setProperty("--popupable-vv-left",a+"px"),e.popup.style.setProperty("--popupable-vv-scale",i),e.popup.style.setProperty("--popupable-vv-ui-scale",1/i);const r=1/i;let s;s=e.group?e.group:[e];for(const e of s){const{top:t,left:n,width:o,height:a}=calcExpandedRect(e);e.cloneContainer.style.top=t+"px",e.cloneContainer.style.left=n+"px",e.cloneContainer.style.width=o+"px",e.cloneContainer.style.height=a+"px"}if(e.contentContainer){let t;if(t=e.group?e.group[e.group.currentIndex]:e,t.content){const n=t.content.getBoundingClientRect();e.contentContainer.style.height=n.height/r+"px"}else{const t=e.contentContainer,n=t.previousElementSibling&&t.nextElementSibling&&parseFloat(getComputedStyle(t,"::after").height)||0;t.style.height=n+"px"}}}const d=new WeakSet;function ensureShadowStyles(e){const t=e?.getRootNode?.();t instanceof ShadowRoot&&!d.has(t)&&(l||(l=new CSSStyleSheet,l.replaceSync(".popupable-hide{visibility:hidden!important}.popupable-loading,.popupable-loading *{cursor:wait!important}")),d.add(t),t.adoptedStyleSheets=[...t.adoptedStyleSheets,l])}const m=/\.(mp4|m4v|webm|ogv|mov|3gp|m3u8|flv)(\?|#|$)/i;function isVideo(e){const t=inheritAttr(e,"data-popupable-type");if(t)return"video"===t;if("VIDEO"===e.tagName)return!0;if("IMG"===e.tagName)return!1;const n=e.getAttribute("data-popupable-src")||e.getAttribute("src")||"";return m.test(n)}const f=e=>e.getAttribute("currentSrc")||e.getAttribute("src")||e.getAttribute("data-popupable-src");function ancestorClosest(e,t){let n=e;for(;n;){const e=n.closest?.(t);if(e)return e;const o=n.getRootNode?.();n=o instanceof ShadowRoot?o.host:null}return null}function composedClosest(e,t){for(const n of e.composedPath())if(1===n.nodeType&&n.matches?.(t))return n;return null}function inheritAttr(e,t){const n=ancestorClosest(e,`[${t}]`);if(!n)return;const o=n.getAttribute(t);return"false"!==o?o||!0:void 0}function resolveProp(e,t){if(t in e)return t;const n=t.toLowerCase();for(let t=e;t;t=Object.getPrototypeOf(t))for(const e of Object.getOwnPropertyNames(t))if(e.toLowerCase()===n)return e;return t}function parsePopupableOrder(e){const t=["counter","image","content","thumbnails"],n=new Set(t),o=[];if(e)for(const t of e.split(",")){const e=t.trim().toLowerCase();e&&n.has(e)&&!o.includes(e)&&o.push(e)}for(const e of t)o.includes(e)||o.push(e);const a=o.indexOf("image");return{top:o.slice(0,a),bottom:o.slice(a+1)}}function cloneElement(e,t=e){const n={knownAspect:0},o=inheritAttr(e,"data-popupable-anim"),a=popupableAnimTypes[o]?o:"expand",i=popupableAnimTypes[a],r=inheritAttr(e,"data-popupable-src"),s=f(e),l=inheritAttr(e,"data-popupable-title"),p=inheritAttr(e,"data-popupable-description"),c=inheritAttr(e,"data-popupable-zoomable"),u=getComputedStyle(e),d=t===e?u:getComputedStyle(t),b=t!==e?f(t):null,g=t===e,h=document.createElement("div");if(h.className="popupable-clone-container",inheritAttr(e,"data-popupable-transparent")&&h.classList.add("popupable-transparent"),c&&h.classList.add("popupable-zoomable"),i.styles&&(h.style.borderRadius=u.borderRadius,h.style.border=u.border,h.style.outline=u.outline,h.style.boxShadow=u.boxShadow,!i.fade)){let t=1,n=e;for(;n;)if(t*=parseFloat(getComputedStyle(n).opacity)||1,n.parentElement)n=n.parentElement;else{const e=n.getRootNode&&n.getRootNode();n=e instanceof ShadowRoot?e.host:null}t<1&&(h.style.opacity=t)}const v=isVideo(e);let y=!1;const w=inheritAttr(e,"data-popupable-poster"),x=("string"==typeof w?w:null)||("VIDEO"===e.tagName?e.getAttribute("poster"):null),L=b||s||r,C=m.test(L)||v&&L===s,E=r&&s||b;let I,P,A;C?(I=document.createElement("video"),I.className="popupable-clone",g&&(I.src=L),I.playsInline=!0,I.controls=!1,v&&!E||(I.muted=!0,I.loop=!0,I.autoplay=!0),g&&x&&L===s&&(I.poster=x)):(I=new Image,I.className="popupable-clone",g&&(I.src=L),I.style.imageRendering=d.imageRendering);const N="IMG"===t.tagName||"VIDEO"===t.tagName;I.style.objectFit=N?d.objectFit:"cover",N&&(I.style.objectPosition=d.objectPosition),I.style.background=d.background,h.append(I);const M=e=>{const t=e.naturalWidth||e.videoWidth,o=e.naturalHeight||e.videoHeight;t&&o&&(n.knownAspect=t/o)};if("VIDEO"===I.tagName?I.addEventListener("loadedmetadata",()=>{M(I),updateExpandedSize()}):I.addEventListener("load",()=>{M(I),updateExpandedSize()}),E){const t=r||s;if(m.test(t)||v&&t===s?(P=document.createElement("video"),P.className="popupable-clone-layer",g&&(P.src=t),P.playsInline=!0,P.controls=!1,v||(P.muted=!0,P.loop=!0,P.autoplay=!0),g&&x&&t===s&&(P.poster=x)):(P=new Image,P.className="popupable-clone-layer",g&&(P.src=t),P.style.imageRendering=u.imageRendering),h.append(P),"VIDEO"===P.tagName?P.addEventListener("loadedmetadata",()=>{M(P),updateExpandedSize()}):P.addEventListener("load",()=>{M(P),updateExpandedSize()}),"fill"===I.style.objectFit&&"IMG"===I.tagName){const t=e.getBoundingClientRect();e.naturalWidth&&e.naturalHeight&&Math.abs(t.width/t.height-e.naturalWidth/e.naturalHeight)<.01&&(I.style.objectFit="cover")}A=P}else A=I;v&&"VIDEO"===e.tagName&&t===e&&(C&&(I.currentTime=e.currentTime),y=!e.paused,e.pause());const S=inheritAttr(e,"data-popupable-attr");let T,k=!1;if("string"==typeof S)for(const e of S.split(",")){const t=e.trim();if(!t)continue;const n=t.indexOf("=");if(-1===n)A[resolveProp(A,t)]=!0,"controls"===t.toLowerCase()&&(k=!0);else{const e=t.slice(0,n).trim(),o=t.slice(n+1).trim(),a=Number(o),i=resolveProp(A,e);"true"===o?A[i]=!0:"false"===o?A[i]=!1:""===o||Number.isNaN(a)?A[i]=o:A[i]=a,"controls"===e.toLowerCase()&&(k=!0)}}if(l||p){if(T=document.createElement("div"),T.classList="popupable-content",l){const e=document.createElement("div");e.className="popupable-title",e.textContent=l,T.append(e)}if(p){const e=document.createElement("div");e.className="popupable-description",e.textContent=p,T.append(e)}}const D=[I,P].filter(Boolean),z=Promise.all(D.filter(e=>"VIDEO"===e.tagName).map(e=>{const t=new Promise(t=>{if(e.readyState>=1)return t();e.addEventListener("loadedmetadata",t,{once:!0}),e.addEventListener("error",t,{once:!0})});if(e.poster){const n=new Promise(t=>{const n=new Image;n.addEventListener("load",t,{once:!0}),n.addEventListener("error",t,{once:!0}),n.src=e.poster});return Promise.all([n,t])}return t})),R=L,V=P?r||s:null;let F=g||!P;const O="VIDEO"===I.tagName&&x&&L===s?x:null,X=P&&"VIDEO"===P.tagName&&x&&(r||s)===s?x:null;let W=!g,$=null;const H=(e,t)=>e+Math.random()*(t-e),Y=(e,t,n)=>`hsl(${e.toFixed(0)} ${t.toFixed(0)}% ${n.toFixed(0)}%)`,B=Math.random();let Q,_,j;B<.2?(Q=H(6,14),_=H(22,38),j=H(20,45)):B<.55?(Q=H(14,26),_=H(38,58),j=H(25,55)):B<.85?(Q=H(22,38),_=H(58,75),j=H(35,65)):(Q=H(32,50),_=H(72,90),j=H(40,75));const q=H(0,360),U=(q+H(20,140))%360,G=(q+H(-40,220)+360)%360;function K(){W&&(W=!1,h.classList.remove("popupable-clone-loading"),F&&R&&!I.getAttribute("src")&&(I.src=R,"VIDEO"===I.tagName&&O&&(I.poster=O)),P&&V&&!P.getAttribute("src")&&(P.src=V,"VIDEO"===P.tagName&&X&&(P.poster=X)))}function Z(){if(K(),$)return $;const e=D.filter(e=>"VIDEO"!==e.tagName);return e.length?($=Promise.all(e.map(e=>e.decode?e.decode().catch(()=>{}):new Promise(t=>{if(e.complete)return t();e.addEventListener("load",t,{once:!0}),e.addEventListener("error",t,{once:!0})}))).then(()=>z),$):($=z,$)}return h.style.setProperty("--popupable-loading-x1",H(0,100).toFixed(0)+"%"),h.style.setProperty("--popupable-loading-y1",H(0,100).toFixed(0)+"%"),h.style.setProperty("--popupable-loading-x2",H(0,100).toFixed(0)+"%"),h.style.setProperty("--popupable-loading-y2",H(0,100).toFixed(0)+"%"),h.style.setProperty("--popupable-loading-c1",`hsla(${G.toFixed(0)} ${Math.min(95,j+H(10,25)).toFixed(0)}% ${_.toFixed(0)}% / ${H(.55,.9).toFixed(2)})`),h.style.setProperty("--popupable-loading-c2",`hsla(${U.toFixed(0)} ${j.toFixed(0)}% ${(.8*_).toFixed(0)}% / ${H(.4,.75).toFixed(2)})`),h.style.setProperty("--popupable-loading-angle",H(0,360).toFixed(0)+"deg"),h.style.setProperty("--popupable-loading-a",Y(q,.6*j,Q)),h.style.setProperty("--popupable-loading-b",Y(U,.8*j,(Q+_)/2)),W&&h.classList.add("popupable-clone-loading"),Object.assign(n,{id:e.dataset.popupable,original:e,cloneContainer:h,clone:I,cloneLayer:P,maintainAspect:inheritAttr(e,"data-popupable-maintain-aspect"),noUpscale:inheritAttr(e,"data-popupable-no-upscale"),counter:inheritAttr(e,"data-popupable-counter"),thumbnails:inheritAttr(e,"data-popupable-thumbnails"),order:parsePopupableOrder(inheritAttr(e,"data-popupable-order")),animationName:a,animation:i,get ready(){return Z()},triggerDecode:Z,ensureLoaded:K,markAsActiveInGroup:function(){F=!0,W||!R||I.getAttribute("src")||(I.src=R,"VIDEO"===I.tagName&&O&&(I.poster=O))},releaseDecode:function(){W||(W=!0,$=null,h.classList.add("popupable-clone-loading"),"VIDEO"===I.tagName?(I.paused||I.pause(),I.removeAttribute("src"),I.removeAttribute("poster"),I.load()):I.removeAttribute("src"),P&&("VIDEO"===P.tagName?(P.paused||P.pause(),P.removeAttribute("src"),P.removeAttribute("poster"),P.load()):P.removeAttribute("src")))},content:T,zoomable:c,source:A,video:v,explicitControls:k,wasPlaying:y})}let b,g,h;document.addEventListener("pointerdown",t=>{0===t.button&&(b||(n=t.composedPath()[0]??t.target,g=t.clientX,h=t.clientY),b||"open"!==e?.state||composedClosest(t,".popupable-header, .popupable-footer")||(b=!0))});let v=!1;function handleMove(t){if("open"!==e?.state||!e.group||!b)return;if(!e.popup?.classList.contains("popupable-open"))return g=t.touches?.[0].clientX??t.clientX,void(h=t.touches?.[0].clientY??t.clientY);const n=e.group[e.group.currentIndex],o=t.touches?.[0].clientX??t.clientX;!v&&Math.abs(o-g)>a&&n.video&&(v=!0,n.source.style.pointerEvents="none"),n.cloneContainer.parentElement.style.transition="initial",n.cloneContainer.parentElement.style.transform=`translateX(${o-g}px)`;const i=projectSnapIndex(e.group,o-g);i!==e.lastProjectedIndex&&(e.lastProjectedIndex=i,scheduleDragDecodeQueue(i))}document.addEventListener("mousemove",handleMove),document.addEventListener("touchmove",handleMove,{passive:!0}),document.addEventListener("pointerup",async i=>{if(0!==i.button)return;if(b){b=!1,cancelDragDecodeQueue();const J=e.group?e.group[e.group.currentIndex]:e;v&&(v=!1,J.source.style.pointerEvents=null),J.cloneContainer.parentElement.style.transition=null,J.cloneContainer.parentElement.style.transform=null;const ee=i.clientX-g,te=Math.abs(ee),ne=i.clientY-h,oe=Math.abs(ne);if("touch"===i.pointerType&&oe>56&&oe>1.1*te)return void closePopupable();if(e.group&&te>a){const ae=Math.max(0,Math.floor((te-window.innerWidth/2)/window.innerWidth));if(ee>Math.max(.1*window.innerWidth,64))for(let ie=0;ie<=ae;ie++)e.goPrev();else if(ee<-Math.max(.1*window.innerWidth,64))for(let re=0;re<=ae;re++)e.goNext();return void(e.blocked=!0)}}const r=i.composedPath()[0]??i.target,s=composedClosest(i,".popupable-viewport")&&!ancestorClosest(n,".popupable-viewport");if(!s&&r!=n&&(!n.classList.contains("popupable-clone-container")||r!==t?.original)&&(!ancestorClosest(n,".popupable-container")||composedClosest(i,".popupable-container"))||Math.abs(i.clientX-g)>a||Math.abs(i.clientY-h)>a)return;const l=(s?ancestorClosest(n,"[data-popupable]"):null)||composedClosest(i,"[data-popupable]");if(!l){if(s)return void closePopupable();if(composedClosest(i,".popupable-container"))return;return void(e&&("zoomed"===e.state?e.unzoom():closePopupable()))}if(i.preventDefault(),e&&"close"!==e.state&&e.original===l)return;e&&closePopupable();const p=++o;e={transition:{},listeners:[]};const c=e,u=document.createElement("div");u.className="popupable-clones";const d=cloneElement(l),{cloneContainer:m,content:y}=d;let w;const x=ancestorClosest(l,"[data-popupable-group]"),L=x?.getAttribute("data-popupable-group"),C=L&&"false"!==L?L:null;if(C){const se=[],le=new Set,pe=l.getRootNode?.()??document;for(const ce of pe.querySelectorAll(`[data-popupable-group="${C}"]`)){ce.hasAttribute("data-popupable")&&!le.has(ce)&&(le.add(ce),se.push(ce));for(const ue of ce.querySelectorAll("[data-popupable]")){if(le.has(ue))continue;const de=ue.getAttribute("data-popupable-group");null!==de&&de!==C||ancestorClosest(ue,"[data-popupable-group]")!==ce||(le.add(ue),se.push(ue))}}if(se.length){w=[];for(const[me,fe]of se.entries())if(fe===l)w.push(d),w.currentIndex=me,u.append(m);else{const be=cloneElement(fe,l);be.cloneContainer.style.display="none",w.push(be),u.append(be.cloneContainer)}for(const[ge,he]of w.entries()){if(!he.content)continue;const ve=ge-w.currentIndex;ve>0?he.content.classList.add("popupable-content-after"):ve<0&&he.content.classList.add("popupable-content-before")}}}else u.append(m);const E=document.createElement("div");E.className=`popupable-container popupable-anim-${d.animationName}`,d.id&&(E.id=d.id);const I=document.createElement("div");let P,A,N,M,S,T,k,D,z,R,V;I.className="popupable-viewport",(y||w&&w.some(e=>e.content))&&(P=document.createElement("div"),P.classList="popupable-content-container");const F={};if(w){d.counter&&(M=document.createElement("div"),M.className="popupable-counter"),d.thumbnails&&(S=document.createElement("div"),S.className="popupable-thumbnails",T=w.map((e,t)=>{let n;const o=inheritAttr(e.original,"data-popupable-thumb"),a="string"==typeof o?o:null;if(e.video){const t=inheritAttr(e.original,"data-popupable-poster"),o=("string"==typeof t?t:null)||("VIDEO"===e.original.tagName?e.original.getAttribute("poster"):null);a||o?(n=new Image,n.src=a||o):(n=document.createElement("video"),n.src=inheritAttr(e.original,"data-popupable-src")||f(e.original),n.muted=!0,n.playsInline=!0,n.preload="metadata",n.disablePictureInPicture=!0,n.disableRemotePlayback=!0)}else n=new Image,n.src=a||inheritAttr(e.original,"data-popupable-src")||f(e.original);return n.className="popupable-thumbnail",n.dataset.thumbnailIndex=t,S.append(n),n})),I.innerHTML=`\n        <div class="popupable-button-container popupable-prev-container${w.currentIndex?"":" popupable-button-disabled"}">\n          <div class="popupable-button popupable-prev">\n            <svg width="24px" height="24px" viewBox="0 -960 960 960" fill="currentColor">\n              <path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/>\n            </svg>\n          </div>\n        </div>\n        <div class="popupable-button-container popupable-next-container${w.currentIndex===w.length-1?" popupable-button-disabled":""}">\n          <div class="popupable-button popupable-next">\n            <svg width="24px" height="24px" viewBox="0 -960 960 960" fill="currentColor">\n              <path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/>\n            </svg>\n          </div>\n        </div>\n      `;const ye=I.querySelector(".popupable-next-container"),we=I.querySelector(".popupable-prev-container");let xe,Le,Ce,Ee;const Ie=!(navigator.maxTouchPoints>0||window.matchMedia("(hover: none)").matches);function O(){ye.classList.remove("popupable-button-inactive"),we.classList.remove("popupable-button-inactive"),e.scheduleNavHide()}function X(e){const t=w[w.currentIndex];t.video&&t.source&&(t.source.paused||(t.swipePaused=!0,t.source.pause()),t.source.controls=!1),w.currentIndex=e;const n=w[w.currentIndex];n.video&&n.source&&(n.zoomable||n.explicitControls||(n.source.controls=!0),n.source.play().catch(()=>{}),n.swipePaused=!1),V()}if(e.scheduleNavHide=()=>{Ie&&(clearTimeout(xe),Ee||(xe=setTimeout(()=>{Ee||(ye.classList.add("popupable-button-inactive"),we.classList.add("popupable-button-inactive"))},1500)))},e.clearNavInactive=()=>{ye.classList.remove("popupable-button-inactive"),we.classList.remove("popupable-button-inactive")},V=async()=>{const t=w[w.currentIndex];t.markAsActiveInGroup(),await t.ready,w.currentIndex?we.classList.remove("popupable-button-disabled"):we.classList.add("popupable-button-disabled"),w.currentIndex===w.length-1?ye.classList.add("popupable-button-disabled"):ye.classList.remove("popupable-button-disabled");for(const[e,t]of w.entries()){const n=e-w.currentIndex;t.cloneContainer.style.setProperty("--popupable-offset-multiplier",n),t.cloneContainer.style.zIndex=-1*Math.abs(n),t.content&&(n?n>0?(t.content.classList.add("popupable-content-after"),t.content.classList.remove("popupable-content-before")):(t.content.classList.add("popupable-content-before"),t.content.classList.remove("popupable-content-after")):(t.content.classList.remove("popupable-content-before"),t.content.classList.remove("popupable-content-after")))}if(t.id?E.id=t.id:E.removeAttribute("id"),M&&(M.textContent=`${w.currentIndex+1} / ${w.length}`),T){for(const[e,t]of T.entries())t.classList.toggle("popupable-thumbnail-active",e===w.currentIndex);const e=T[w.currentIndex];requestAnimationFrame(()=>{if(!e||!S?.isConnected)return;const t=getComputedStyle(S),n=parseFloat(t.paddingLeft)||0,o=parseFloat(t.paddingRight)||0,a=S.scrollLeft+n,i=S.scrollLeft+S.clientWidth-o,r=e.offsetLeft,s=r+e.offsetWidth;let l=S.scrollLeft;r<a?l=Math.max(0,r-n):s>i&&(l=s-S.clientWidth+o),l!==S.scrollLeft&&(k?S.scrollTo({left:l,behavior:"smooth"}):S.scrollLeft=l),k=!0})}e.closeContainer.classList.toggle("popupable-button-inactive",!(t.zoomable||t.video&&(!t.explicitControls||t.source.controls))),updateExpandedSize(),e.lastProjectedIndex=e.group.currentIndex,buildDecodeQueue(e)},D=()=>{w.currentIndex>=w.length-1||X(w.currentIndex+1)},z=()=>{w.currentIndex<=0||X(w.currentIndex-1)},e.listeners.push({target:ye,event:"click",func:()=>D()},{target:we,event:"click",func:()=>z()},{target:document,event:"keydown",func:t=>{if("zoomed"!==e.state)switch(t.key){case"ArrowRight":case"ArrowDown":case"PageDown":case"d":case"s":D();break;case"ArrowLeft":case"ArrowUp":case"PageUp":case"a":case"w":z();break;case"Home":w.currentIndex=0,V();break;case"End":w.currentIndex=w.length-1,V();break;case"0":case"1":case"2":case"3":case"4":case"5":case"6":case"7":case"8":case"9":w.currentIndex=Math.min(Math.max(Number(t.key),1)-1,w.length-1),V()}}},{target:document,event:"wheel",func:t=>{if("zoomed"===e.state)return;const n=performance.now();n-(R||0)<80||(t.deltaY>50?(R=n,D()):t.deltaY<-50&&(R=n,z()))},args:{passive:!0}}),S){let Pe,Ae,Ne,Me,Se,Te,ke,De,ze;function W(){ze&&(cancelAnimationFrame(ze),ze=null)}function $(){if(W(),Math.abs(De)<.01)return;let e=performance.now();ze=requestAnimationFrame(function t(n){if(!S.isConnected)return void W();const o=S.scrollWidth-S.clientWidth;if(o<=0)return void W();const a=Math.min(32,n-e);e=n;let i=S.scrollLeft+De*a;i<0&&(i=0),i>o&&(i=o),S.scrollLeft=i,S.scrollLeft<=.1&&De<0||S.scrollLeft>=o-.1&&De>0?W():(De*=Math.pow(.8,a/16.67),Math.abs(De)<=.002?W():ze=requestAnimationFrame(t))})}e.listeners.push({target:S,event:"pointerdown",func:e=>{if(0!==e.button)return;const t=S.scrollWidth-S.clientWidth;Ne=t>0,W(),Pe=!0,Ae=!1,Me=e.clientX,Se=S.scrollLeft,Te=S.scrollLeft,ke=performance.now(),De=0,Ne&&S.classList.add("popupable-thumbnails-dragging"),S.setPointerCapture(e.pointerId)}},{target:S,event:"pointermove",func:e=>{if(!Pe)return;const t=e.clientX-Me;Math.abs(t)>a&&(Ae=!0);const n=performance.now(),o=n-ke,i=Se-t;if(S.scrollLeft=i,o>0){const e=(S.scrollLeft-Te)/o;De=.65*De+.35*e,Te=S.scrollLeft,ke=n}}},{target:S,event:"pointerup",func:e=>{if(!Pe)return;if(Pe=!1,Ne&&S.classList.remove("popupable-thumbnails-dragging"),S.hasPointerCapture(e.pointerId)&&S.releasePointerCapture(e.pointerId),Ae)return performance.now()-ke>10&&(De=0),void $();const t=document.elementFromPoint(e.clientX,e.clientY)?.closest?.(".popupable-thumbnail");t&&(w.currentIndex=Number(t.dataset.thumbnailIndex),V())}},{target:S,event:"pointercancel",func:e=>{Pe&&(Pe=!1,Ne&&S.classList.remove("popupable-thumbnails-dragging"),S.hasPointerCapture(e.pointerId)&&S.releasePointerCapture(e.pointerId),W())}},{target:S,event:"wheel",func:e=>{e.stopPropagation(),e.preventDefault();const t=S.scrollWidth-S.clientWidth;if(t<=0)return;const n=Math.abs(e.deltaX)>Math.abs(e.deltaY)?e.deltaX:e.deltaY,o=S.scrollLeft<=.1,a=S.scrollLeft>=t-.1;if(o&&n<0||a&&n>0)return;o&&n>0&&De<0&&(De=0),a&&n<0&&De>0&&(De=0);De=(De||0)+.015*n,ze||$()},args:{passive:!1}})}Ie&&(e.listeners.push({target:ye,event:"pointerenter",func:()=>{Ee=!0,O()}},{target:we,event:"pointerenter",func:()=>{Ee=!0,O()}},{target:ye,event:"pointerleave",func:()=>{Ee=!1,e.scheduleNavHide()}},{target:we,event:"pointerleave",func:()=>{Ee=!1,e.scheduleNavHide()}}),e.listeners.push({target:E,event:"pointermove",func:t=>{if("zoomed"!==e.state)return null==Le||null==Ce?(Le=t.clientX,void(Ce=t.clientY)):void(Math.abs(t.clientX-Le)<a&&Math.abs(t.clientY-Ce)<a||(Le=t.clientX,Ce=t.clientY,O()))},args:{passive:!0}}));for(const Re of w)Re.content&&P&&P.append(Re.content)}else y&&P.append(y);const H={counter:!!M,content:!!P,thumbnails:!!S},Y=d.order.top.filter(e=>H[e]),B=d.order.bottom.filter(e=>H[e]);function Q(e,t){e&&("counter"===t&&M?(F[e===A?"counterTop":"counterBottom"]=!0,e.append(M)):"content"===t&&P?(F[e===A?"contentTop":"contentBottom"]=!0,e.append(P)):"thumbnails"===t&&S&&(F[e===A?"thumbnailsTop":"thumbnailsBottom"]=!0,e.append(S)))}A=document.createElement("div"),A.className="popupable-header",N=document.createElement("div"),N.className="popupable-footer";for(const Ve of Y)Q(A,Ve);for(const Fe of B)Q(N,Fe);I.append(A),I.append(N);const _=document.createElement("div");_.className="popupable-button-container popupable-close-container",_.innerHTML='<div class="popupable-button popupable-close"><svg width="24px" height="24px" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></div>',_.addEventListener("click",closePopupable),d.zoomable||d.video&&(!d.explicitControls||d.source.controls)||_.classList.add("popupable-button-inactive"),A.append(_),E.append(u,I),Object.assign(c,d,{popup:E,group:w,contentContainer:P,thumbnailsContainer:S,orderPlacement:F,closeContainer:_,goNext:D,goPrev:z}),ensureShadowStyles(l);const j=setTimeout(()=>{p===o&&l.classList.add("popupable-loading")},250);if(await c.ready,clearTimeout(j),l.classList.remove("popupable-loading"),p!==o||e!==c||"close"===c.state)return;m.classList.add("popupable-block-transitions"),d.animation.hideSource&&l.classList.add("popupable-hide"),d.animation.crossfade&&E.classList.add("popupable-crossfade"),d.animation.fade&&E.classList.add("popupable-fade"),document.body.append(E),setCloneToOriginalRect(m,l),d.video&&d.source.play().catch(()=>{}),disableScroll();const q=getComputedStyle(E);c.transition.duration=1e3*parseFloat(q.transitionDuration)+1e3*parseFloat(q.transitionDelay),E._state=c,requestAnimationFrame(()=>{requestAnimationFrame(()=>{m.classList.remove("popupable-block-transitions"),openPopupable(E._state),w&&(V(),buildDecodeQueue(E._state))})});let U,G=0;w&&E.addEventListener("dragstart",e=>e.preventDefault());const K=new Map;function Z(e,t,n,o,i=[]){if("open"!==e.state)return;let r=0;const s=t.cloneContainer.parentElement,l=s.style.transform;if(l){const e=l.match(/translateX\((-?\d+(?:\.\d+)?)px\)/);e&&(r=Number(e[1])||0)}const p=Math.abs(r)>.5;b=!1,p?(t.cloneContainer.style.translate="0 0",t.cloneContainer.style.transition="translate var(--popupable-switch-duration), transform 0s",s.style.transition=null,s.style.transform=null,t.cloneContainer.style.translate=`${r}px 0`):(s.style.transition=null,s.style.transform=null),e.state="zoomed",E.classList.add("popupable-locked");let c,u,d=o;const m=new Map;let f,g,h,v,y,w,x,L,C,P,A=!1;const N=t.cloneContainer.getBoundingClientRect(),M=n?.clientX??N.left+N.width/2,S=n?.clientY??N.top+N.height/2;c=(M-N.left)*(1-d),u=(S-N.top)*(1-d);const T=()=>t.cloneContainer.style.transform=`translate(${c}px, ${u}px) scale(${d})`;function k(e,n,o){const a=d;var i;if(i=e,d=Math.min(6,Math.max(.5,i)),d===a)return!1;const r=t.cloneContainer.getBoundingClientRect(),s=d/a,l=n-r.left,p=o-r.top;return c+=l*(1-s),u+=p*(1-s),!0}function D(){if(1===m.size){const e=m.values().next().value;return f=e.id,g=e.x,h=e.y,v=null,y=null,void(w=null)}if(m.size>=2){f=null;const[e,t]=[...m.values()];return v=(e.x+t.x)/2,y=(e.y+t.y)/2,void(w=Math.hypot(t.x-e.x,t.y-e.y))}f=null,g=null,h=null,v=null,y=null,w=null}if(t.cloneContainer.classList.add("popupable-zoomed"),T(),i.length){p||(t.cloneContainer.style.transition="none"),P=!0;for(const e of i)m.set(e.id,{id:e.id,x:e.x,y:e.y}),E.setPointerCapture(e.id);D()}e.unzoom=()=>{e.state="open",E.classList.remove("popupable-locked");for(const e of m.keys())E.hasPointerCapture(e)&&E.releasePointerCapture(e);m.clear(),t.cloneContainer.classList.remove("popupable-zoomed"),t.cloneContainer.style.transition=null,t.cloneContainer.style.transform=null,t.cloneContainer.style.translate=null;for(const t of e.zoomListeners)t.target.removeEventListener(t.event,t.func)},e.zoomListeners=[{target:E,event:"pointerdown",func:e=>{0===e.button&&(t.cloneContainer.style.transition="none",E.setPointerCapture(e.pointerId),m.set(e.pointerId,{id:e.pointerId,x:e.clientX,y:e.clientY}),1===m.size?(x=e.target,L=e.clientX,C=e.clientY,P=!1):P=!0,D(),e.preventDefault())}},{target:E,event:"pointermove",func:e=>{const t=m.get(e.pointerId);if(t){if(t.x=e.clientX,t.y=e.clientY,!P&&(Math.abs(e.clientX-L)>a||Math.abs(e.clientY-C)>a)&&(P=!0),1===m.size&&f===e.pointerId){const t=e.clientX-g,n=e.clientY-h;if(!t&&!n)return;return c+=t,u+=n,g=e.clientX,h=e.clientY,void T()}if(m.size>=2){const[e,t]=[...m.values()],n=(e.x+t.x)/2,o=(e.y+t.y)/2,a=Math.hypot(t.x-e.x,t.y-e.y);if(!w)return v=n,y=o,void(w=a);c+=n-v,u+=o-y,k(d*(a/w),n,o),A=!0,v=n,y=o,w=a,T()}}}},{target:E,event:"pointerup",func:n=>{if(m.has(n.pointerId)){if(m.delete(n.pointerId),E.hasPointerCapture(n.pointerId)&&E.releasePointerCapture(n.pointerId),A&&d<=1.01&&m.size<2)return e.skipOpenTouchPointerUps=m.size,void e.unzoom();if(!m.size&&!P&&Math.abs(n.clientX-L)<a&&Math.abs(n.clientY-C)<a){if(x?.closest?.(".popupable-clone-container")===t.cloneContainer||(x===E||x===I))return void e.unzoom()}D()}}},{target:E,event:"pointercancel",func:e=>{m.has(e.pointerId)&&(m.delete(e.pointerId),E.hasPointerCapture(e.pointerId)&&E.releasePointerCapture(e.pointerId),D())}},{target:E,event:"wheel",func:e=>{t.cloneContainer.style.transition="none",k(d*Math.exp(.002*-e.deltaY),e.clientX,e.clientY)&&T()},args:{passive:!0}}];for(const t of e.zoomListeners)t.target.addEventListener(t.event,t.func,t.args)}e.listeners.push({target:E,event:"pointerdown",func:e=>{if("open"!==E._state.state||"touch"!==e.pointerType)return;const t=E._state,n=t.group?t.group[t.group.currentIndex]:t;e.target.closest(".popupable-clone-container")===n.cloneContainer&&(K.set(e.pointerId,{id:e.pointerId,x:e.clientX,y:e.clientY}),K.size>=2&&(Z(t,n,e,1,[...K.values()].slice(0,2)),K.clear(),e.preventDefault()))}},{target:E,event:"pointermove",func:e=>{const t=K.get(e.pointerId);t&&(t.x=e.clientX,t.y=e.clientY)}},{target:E,event:"pointerup",func:e=>{K.delete(e.pointerId)}},{target:E,event:"pointercancel",func:e=>{K.delete(e.pointerId)}}),E.addEventListener("pointerup",t=>{if("zoomed"===E._state.state)return;if("touch"===t.pointerType&&(E._state.skipOpenTouchPointerUps||0)>0)return void E._state.skipOpenTouchPointerUps--;const o=performance.now(),a=null!=t.target.closest(".popupable-next-container, .popupable-prev-container");if(U&&o-G<250)return void(G=o);if(a?(U=!0,G=o):(U=!1,G=o),0!==t.button||!((t.target.classList.contains("popupable-clone")||t.target.classList.contains("popupable-clone-layer"))&&n.classList.contains("popupable-clone-container")||t.target==n&&(t.target.closest(".popupable-clone-container")||t.target.classList.contains("popupable-viewport")||t.target.classList.contains("popupable-container"))||t.target.classList.contains("popupable-container")&&n===e.original.parentElement))return;const i=E._state,r=i.group?i.group[i.group.currentIndex]:i;i.blocked&&(i.blocked=!1),"open"!==i.state?(t.stopPropagation(),e!==i&&(closePopupable(),e=i),openPopupable(e)):requestAnimationFrame(()=>{i.blocked?i.blocked=!1:r.zoomable&&(t.target.classList.contains("popupable-clone")||t.target.classList.contains("popupable-clone-layer"))?Z(i,r,t,2):r.video&&r.source.controls&&(t.target.classList.contains("popupable-clone")||t.target.closest(".popupable-clone-container")===r.cloneContainer)||closePopupable()})})}),document.addEventListener("keydown",t=>{if("Escape"===t.key||"Backspace"===t.key||" "===t.key||"Delete"===t.key){if("zoomed"===e.state)return void e.unzoom();closePopupable()}}),window.addEventListener("resize",updateExpandedSize),visualViewport&&visualViewport.addEventListener("resize",updateExpandedSize)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "popupable",
-  "version": "1.8.2",
+  "version": "1.9.0",
   "description": "A lightweight, zero-dependency lightbox library using modern JavaScript and CSS.",
   "author": "Ewan Howell <ewanhowell5195>",
   "license": "MIT",