popupable 1.1.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/popupable.min.css +2 -2
- package/dist/popupable.min.js +2 -2
- package/package.json +1 -1
package/dist/popupable.min.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* popupable
|
|
3
|
-
* Version : 1.
|
|
3
|
+
* Version : 1.3.0
|
|
4
4
|
* License : MIT
|
|
5
5
|
* Copyright: 2026 Ewan Howell
|
|
6
6
|
*/
|
|
7
|
-
@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-switch-duration{syntax:"<time>";inherits:true;initial-value:.25s}[data-popupable],[data-popupable] *{cursor:pointer!important}.popupable-hide{visibility:hidden!important}.popupable-loading,.popupable-loading *{cursor:wait!important}.popupable-container{position:fixed;inset:0;transition:background var(--popupable-open-duration),backdrop-filter var(--popupable-open-duration);z-index:2147483646;user-select:none;pointer-events:none}.popupable-container.popupable-active{z-index:2147483647;background:var(--popupable-background);backdrop-filter:blur(var(--popupable-blur))}.popupable-container>*{pointer-events:none}.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-container *{box-sizing:border-box}.popupable-container.popupable-open,.popupable-container.popupable-open>*{pointer-events:initial}.popupable-clones{transition:transform var(--popupable-switch-duration)}.popupable-clone-container{position:fixed;transition:all var(--popupable-open-duration);pointer-events:initial;overflow:hidden;transform:translateX(calc(var(--popupable-view-width) * var(--popupable-offset-multiplier)));transform-origin:0 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);image-rendering:pixelated}.popupable-container.popupable-active .popupable-clone-container{border-radius:0!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),translate var(--popupable-switch-duration)}.popupable-clone,.popupable-clone-layer{width:100%;height:100%;position:absolute;inset:0;transition:opacity var(--popupable-open-duration)}.popupable-clone-layer{opacity:0;object-fit:cover}.popupable-container.popupable-open .popupable-clone:not(:last-child){opacity:0}.popupable-container.popupable-active .popupable-clone-layer{opacity:1}.popupable-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:opacity var(--popupable-open-duration),transform var(--popupable-open-duration);cursor:pointer;position:relative}.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
|
|
7
|
+
@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-switch-duration{syntax:"<time>";inherits:true;initial-value:.25s}[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),backdrop-filter var(--popupable-open-duration);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 *{-webkit-tap-highlight-color:transparent}.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-container *{box-sizing:border-box}.popupable-container.popupable-open,.popupable-container.popupable-open>*{pointer-events:initial}.popupable-clones{transition:transform var(--popupable-switch-duration)}.popupable-clone-container{position:fixed;transition:all var(--popupable-open-duration);pointer-events:initial;overflow:hidden;transform:translateX(calc(var(--popupable-view-width) * var(--popupable-offset-multiplier)));transform-origin:0 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);image-rendering:pixelated}.popupable-container.popupable-active .popupable-clone-container{border-radius:0!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),translate var(--popupable-switch-duration)}.popupable-clone,.popupable-clone-layer{width:100%;height:100%;position:absolute;inset:0;transition:opacity var(--popupable-open-duration)}.popupable-clone-layer{opacity:0;object-fit:cover}.popupable-container.popupable-open .popupable-clone:not(:last-child){opacity:0}.popupable-container.popupable-active .popupable-clone-layer{opacity:1}.popupable-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:opacity var(--popupable-open-duration),transform var(--popupable-open-duration);cursor:pointer;position:relative}.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:hover::before,.popupable-next-container:hover .popupable-button::before,.popupable-prev-container:hover .popupable-button::before{opacity:1}.popupable-next-container,.popupable-prev-container{position:absolute;top:50%;transform:translateY(-50%);padding:40px;cursor:pointer;z-index:1;pointer-events:auto}.popupable-next-container{right:calc(var(--popupable-screen-padding)/ 2)}.popupable-prev-container{left:calc(var(--popupable-screen-padding)/ 2)}.popupable-nav-button{opacity:0}.popupable-next{transform:translateX(40px)}.popupable-prev{transform:translateX(-40px)}.popupable-container.popupable-active .popupable-nav-button{opacity:1;transform:translateX(0)}.popupable-next-container:hover .popupable-button{transform:translateX(4px)}.popupable-prev-container:hover .popupable-button{transform:translateX(-4px)}.popupable-locked :is(.popupable-next-container,.popupable-prev-container),.popupable-nav-disabled,.popupable-nav-inactive{pointer-events:none}.popupable-locked .popupable-next-container .popupable-next,.popupable-next-container:is(.popupable-nav-disabled,.popupable-nav-inactive) .popupable-next{transform:translateX(40px);opacity:0}.popupable-locked .popupable-prev-container .popupable-prev,.popupable-prev-container:is(.popupable-nav-disabled,.popupable-nav-inactive) .popupable-prev{transform:translateX(-40px);opacity:0}.popupable-footer,.popupable-header{position:absolute;top:0;left:0;right:0;opacity:0;transition:opacity var(--popupable-open-duration),transform var(--popupable-open-duration);transform:translateY(-40px);color:#fff;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-footer>*+*,.popupable-header>*+*{border-top:1px solid #fff3}.popupable-content-container{display:grid;align-items:flex-end;transition:height var(--popupable-switch-duration);overflow:hidden;position:relative}.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}.popupable-thumbnail:hover{opacity:1}.popupable-thumbnail.popupable-thumbnail-active{opacity:1;outline-color:#fffa}.popupable-content{grid-column:1;grid-row:1;text-align:center;padding:16px;color:#fff;display:flex;flex-direction:column;gap:8px;user-select:text;transition:opacity var(--popupable-switch-duration),transform var(--popupable-switch-duration);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-zoomable{cursor:zoom-in}.popupable-zoomed{cursor:zoom-out}@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-title{font-size:28px}.popupable-thumbnail{width:48px;height:48px}}
|
package/dist/popupable.min.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* popupable
|
|
3
|
-
* Version : 1.
|
|
3
|
+
* Version : 1.3.0
|
|
4
4
|
* License : MIT
|
|
5
5
|
* Copyright: 2026 Ewan Howell
|
|
6
6
|
*/
|
|
7
|
-
{let e,t,n,o=0;const a=3;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 setCloneToOriginalRect(e,t){const n=t.getBoundingClientRect();e.style.top=visualViewport.offsetTop+n.top+"px",e.style.left=visualViewport.offsetLeft+n.left+"px",e.style.width=n.width+"px",e.style.height=n.height+"px"}function openPopupable(e){if("open"===e.state)return;e.state="open";const{cloneContainer:t,popup:n,transition:o,group:a,listeners:r}=e;n.classList.add("popupable-active"),updateExpandedSize(),t.removeEventListener("transitionend",o.listener),o.listener=e=>{if(!e||e.target===e.currentTarget){if(t.removeEventListener("transitionend",o.listener),n.classList.add("popupable-open"),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)}},o.duration?t.addEventListener("transitionend",o.listener):o.listener()}function closePopupable(){if(!e||"close"===e.state)return;o++,e.state="close";const{cloneContainer:n,clone:a,original:r,popup:i,transition:l,group:s,listeners:p}=e;if(r.classList.remove("popupable-loading"),i.classList.remove("popupable-active"),i.classList.remove("popupable-open"),setCloneToOriginalRect(n,r),s)for(const[e,t]of s.entries())t.clone!==a&&e!==s.currentIndex&&(t.cloneContainer.style.display="none");for(const e of p)e.target.removeEventListener(e.event,e.func);n.removeEventListener("transitionend",l.listener);const c=e;l.listener=o=>{o&&o.target!==o.currentTarget||(n.removeEventListener("transitionend",l.listener),r.classList.remove("popupable-hide"),i.remove(),c===e&&(enableScroll(),t=e,e=null))},l.duration?n.addEventListener("transitionend",l.listener):l.listener()}function updateExpandedSize(){if(!e||"close"===e.state)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=parseFloat(getComputedStyle(e.popup).getPropertyValue("--popupable-vv-ui-scale"))||1,l=(parseFloat(getComputedStyle(e.popup).getPropertyValue("--popupable-screen-padding"))||0)/r,s=Math.max(0,t-2*l),p=n-2*l,c=e.popup.querySelector(".popupable-counter"),u=c?c.getBoundingClientRect().height/i:0;let d;d=e.group?e.group:[e];for(const t of d){let c;if(t.maintainAspect){const e=t.original.getBoundingClientRect();c=e.width/e.height}else c=t.cloneLayer?t.cloneLayer.naturalWidth/t.cloneLayer.naturalHeight:t.original.naturalWidth/t.original.naturalHeight;const d=Math.max(0,p),f=t.content?t.content.getBoundingClientRect().height/i:0,m=e.thumbnailsContainer?e.thumbnailsContainer.getBoundingClientRect().height/i:0,b=(e.orderPlacement.counterTop?u:0)+(e.orderPlacement.contentTop?f:0)+(e.orderPlacement.thumbnailsTop?m:0),v=(e.orderPlacement.counterBottom?u:0)+(e.orderPlacement.contentBottom?f:0)+(e.orderPlacement.thumbnailsBottom?m:0),g=Math.max(0,n-b-v-2*l);let h=s,y=h/c;if(y>d&&(y=d,h=y*c),y>g&&(y=g,h=y*c),t.noUpscale){const e=t.cloneLayer||t.original,n=e.naturalWidth,o=e.naturalHeight;if(n&&o){const e=n/r,t=o/r,a=Math.min(1,e/h,t/y);a<1&&(h*=a,y*=a)}}let L=o+l+(d-y)/2;const x=o+n-v-l-y;L=Math.min(L,x),L=Math.max(L,o+b+l),t.cloneContainer.style.top=L+"px",t.cloneContainer.style.left=a+l+(s-h)/2+"px",t.cloneContainer.style.width=h+"px",t.cloneContainer.style.height=y+"px"}if(e.contentContainer){let t;t=e.group?e.group[e.group.currentIndex]:e;const n=t.content.getBoundingClientRect();e.contentContainer.style.height=n.height/i+"px"}}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){const t=document.createElement("div");t.className="popupable-clone-container",e.hasAttribute("data-popupable-transparent")&&t.classList.add("popupable-transparent");const n=new Image;n.className="popupable-clone",n.src=e.currentSrc??e.src;const o=getComputedStyle(e);let a,r,i;if(t.style.borderRadius=o.borderRadius,n.style.objectFit=o.objectFit,n.style.objectPosition=o.objectPosition,n.style.imageRendering=o.imageRendering,n.style.background=o.background,t.append(n),e.dataset.popupableSrc&&(a=new Image,a.className="popupable-clone-layer",a.src=e.dataset.popupableSrc,a.style.imageRendering=o.imageRendering,t.append(a),"fill"===n.style.objectFit)){const t=e.getBoundingClientRect();e.naturalWidth&&e.naturalHeight&&Math.abs(t.width/t.height-e.naturalWidth/e.naturalHeight)<.01&&(n.style.objectFit="cover")}if(e.dataset.popupableTitle||e.dataset.popupableDescription){if(r=document.createElement("div"),r.classList="popupable-content",e.dataset.popupableTitle){const t=document.createElement("div");t.className="popupable-title",t.textContent=e.dataset.popupableTitle,r.append(t)}if(e.dataset.popupableDescription){const t=document.createElement("div");t.className="popupable-description",t.textContent=e.dataset.popupableDescription,r.append(t)}}return e.hasAttribute("data-popupable-zoomable")&&(i=!0,t.classList.add("popupable-zoomable")),{id:e.dataset.popupable,original:e,cloneContainer:t,clone:n,cloneLayer:a,maintainAspect:e.hasAttribute("data-popupable-maintain-aspect"),noUpscale:e.hasAttribute("data-popupable-no-upscale"),counter:e.hasAttribute("data-popupable-counter"),thumbnails:e.hasAttribute("data-popupable-thumbnails"),order:parsePopupableOrder(e.dataset.popupableOrder),ready:Promise.all([n,a].filter(Boolean).map(e=>e.decode().catch(()=>{}))),content:r,zoomable:i}}let r,i,l,s=0;function handleMove(t){if("open"!==e?.state||!e.group||!r)return;const n=e.group[e.group.currentIndex];n.cloneContainer.parentElement.style.transition="initial",n.cloneContainer.parentElement.style.transform=`translateX(${(t.touches?.[0].clientX??t.clientX)-i}px)`}document.addEventListener("pointerdown",t=>{0===t.button&&("touch"===t.pointerType&&s++,r||(n=t.target,i=t.clientX,l=t.clientY),r||"open"!==e?.state||t.target.closest(".popupable-header, .popupable-footer")||(r=!0))}),document.addEventListener("mousemove",handleMove),document.addEventListener("touchmove",handleMove,{passive:!0}),document.addEventListener("pointerup",async p=>{if(0!==p.button)return;if("touch"===p.pointerType&&(s=Math.max(0,s-1),r&&s>=1))return;if(r){r=!1;const j=e.group?e.group[e.group.currentIndex]:e;j.cloneContainer.parentElement.style.transition=null,j.cloneContainer.parentElement.style.transform=null;const K=p.clientX-i,G=Math.abs(K),Z=p.clientY-l,J=Math.abs(Z);if("touch"===p.pointerType&&J>56&&J>1.1*G)return void closePopupable();if(e.group&&G>a){const Q=Math.max(0,Math.floor((G-window.innerWidth/2)/window.innerWidth));if(K>32)for(let ee=0;ee<=Q;ee++)e.goPrev();else if(K<-32)for(let te=0;te<=Q;te++)e.goNext();return void(e.blocked=!0)}}const c=p.target.closest(".popupable-viewport")&&!n.closest(".popupable-viewport");if(!c&&p.target!=n&&(!n.classList.contains("popupable-clone-container")||p.target!==t?.original)&&(!n.closest(".popupable-container")||p.target.closest(".popupable-container"))||Math.abs(p.clientX-i)>a||Math.abs(p.clientY-l)>a)return;const u=(c?n.closest("[data-popupable]"):null)||p.target.closest("[data-popupable]");if(!u){if(c)return void closePopupable();if(p.target.closest(".popupable-container"))return;return void(e&&("zoomed"===e.state?e.unzoom():closePopupable()))}if(p.preventDefault(),e?.original===u&&e.popup&&!e.popup.isConnected&&"close"!==e.state)return;const d=++o;e&&closePopupable(),e={transition:{},listeners:[]};const f=e,m=document.createElement("div");m.className="popupable-clones";const b=cloneElement(u),{cloneContainer:v,clone:g,content:h}=b;let y;if(u.dataset.popupableGroup){const ne=document.querySelectorAll(`[data-popupable-group="${u.dataset.popupableGroup}"]`);if(ne.length){y=[];for(const[oe,ae]of ne.entries())if(ae===u)y.push(b),y.currentIndex=oe,m.append(v);else{const re=cloneElement(ae);re.cloneContainer.style.display="none",re.cloneContainer.classList.add("popupable-clone-extra"),y.push(re),m.append(re.cloneContainer)}}}else m.append(v);const L=document.createElement("div");L.className="popupable-container",b.id&&(L.id=b.id);const x=document.createElement("div");let w,C,P,E,I,M,z,k,T,X;x.className="popupable-viewport",h&&(w=document.createElement("div"),w.classList="popupable-content-container");const A={};if(y){b.counter&&(C=document.createElement("div"),C.className="popupable-header",E=document.createElement("div"),E.className="popupable-counter",C.append(E)),b.thumbnails&&(I=document.createElement("div"),I.className="popupable-thumbnails",M=y.map((e,t)=>{const n=new Image;return n.className="popupable-thumbnail",n.src=e.original.currentSrc??e.original.src,n.dataset.thumbnailIndex=t,I.append(n),n})),x.innerHTML=`\n <div class="popupable-prev-container${y.currentIndex?"":" popupable-disabled"}">\n <div class="popupable-button popupable-nav-button popupable-prev">\n <svg width="24px" height="24px" viewBox="0 -960 960 960" fill="#fff">\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-next-container${y.currentIndex===y.length-1?" popupable-disabled":""}">\n <div class="popupable-button popupable-nav-button popupable-next">\n <svg width="24px" height="24px" viewBox="0 -960 960 960" fill="#fff">\n <path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/>\n </svg>\n </div>\n </div>\n `;const ie=x.querySelector(".popupable-next-container"),le=x.querySelector(".popupable-prev-container");let se,pe,ce,ue;const de=!(navigator.maxTouchPoints>0||window.matchMedia("(hover: none)").matches);function S(){de&&(clearTimeout(se),ue||(se=setTimeout(()=>{ue||(ie.classList.add("popupable-nav-inactive"),le.classList.add("popupable-nav-inactive"))},1500)))}function Y(){ie.classList.remove("popupable-nav-inactive"),le.classList.remove("popupable-nav-inactive"),S()}async function R(){const e=y[y.currentIndex];await e.ready,y.currentIndex?le.classList.remove("popupable-disabled"):le.classList.add("popupable-disabled"),y.currentIndex===y.length-1?ie.classList.add("popupable-disabled"):ie.classList.remove("popupable-disabled");for(const[e,t]of y.entries()){const n=e-y.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(e.id?L.id=e.id:L.removeAttribute("id"),E&&(E.textContent=`${y.currentIndex+1} / ${y.length}`),M){for(const[e,t]of M.entries())t.classList.toggle("popupable-thumbnail-active",e===y.currentIndex);const e=M[y.currentIndex];requestAnimationFrame(()=>{if(!e||!I?.isConnected)return;const t=getComputedStyle(I),n=parseFloat(t.paddingLeft)||0,o=parseFloat(t.paddingRight)||0,a=I.scrollLeft+n,r=I.scrollLeft+I.clientWidth-o,i=e.offsetLeft,l=i+e.offsetWidth;let s=I.scrollLeft;i<a?s=Math.max(0,i-n):l>r&&(s=l-I.clientWidth+o),s!==I.scrollLeft&&(z?I.scrollTo({left:s,behavior:"smooth"}):I.scrollLeft=s),z=!0})}updateExpandedSize()}if(k=()=>{y.currentIndex>=y.length-1||(y.currentIndex++,R())},T=()=>{y.currentIndex<=0||(y.currentIndex--,R())},R(),de&&S(),e.listeners.push({target:ie,event:"click",func:()=>k()},{target:le,event:"click",func:()=>T()},{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":T();break;case"Home":y.currentIndex=0,R();break;case"End":y.currentIndex=y.length-1,R();break;case"0":case"1":case"2":case"3":case"4":case"5":case"6":case"7":case"8":case"9":y.currentIndex=Math.min(Math.max(Number(t.key),1)-1,y.length-1),R()}}},{target:document,event:"wheel",func:t=>{if("zoomed"===e.state)return;const n=performance.now();n-(X||0)<80||(t.deltaY>50?(X=n,k()):t.deltaY<-50&&(X=n,T()))},args:{passive:!0}}),I){let fe,me,be,ve,ge,he,ye,Le,xe;function B(){xe&&(cancelAnimationFrame(xe),xe=null)}function N(){if(B(),Math.abs(Le)<.01)return;let e=performance.now();xe=requestAnimationFrame(function t(n){if(!I.isConnected)return void B();const o=I.scrollWidth-I.clientWidth;if(o<=0)return void B();const a=Math.min(32,n-e);e=n;let r=I.scrollLeft+Le*a;r<0&&(r=0),r>o&&(r=o),I.scrollLeft=r,I.scrollLeft<=.1&&Le<0||I.scrollLeft>=o-.1&&Le>0?B():(Le*=Math.pow(.8,a/16.67),Math.abs(Le)<=.002?B():xe=requestAnimationFrame(t))})}e.listeners.push({target:I,event:"pointerdown",func:e=>{if(0!==e.button)return;const t=I.scrollWidth-I.clientWidth;be=t>0,B(),fe=!0,me=!1,ve=e.clientX,ge=I.scrollLeft,he=I.scrollLeft,ye=performance.now(),Le=0,be&&I.classList.add("popupable-thumbnails-dragging"),I.setPointerCapture(e.pointerId)}},{target:I,event:"pointermove",func:e=>{if(!fe)return;const t=e.clientX-ve;Math.abs(t)>a&&(me=!0);const n=performance.now(),o=n-ye,r=ge-t;if(I.scrollLeft=r,o>0){const e=(I.scrollLeft-he)/o;Le=.65*Le+.35*e,he=I.scrollLeft,ye=n}}},{target:I,event:"pointerup",func:e=>{if(!fe)return;if(fe=!1,be&&I.classList.remove("popupable-thumbnails-dragging"),I.hasPointerCapture(e.pointerId)&&I.releasePointerCapture(e.pointerId),me)return performance.now()-ye>10&&(Le=0),void N();const t=document.elementFromPoint(e.clientX,e.clientY)?.closest?.(".popupable-thumbnail");t&&(y.currentIndex=Number(t.dataset.thumbnailIndex),R())}},{target:I,event:"pointercancel",func:e=>{fe&&(fe=!1,be&&I.classList.remove("popupable-thumbnails-dragging"),I.hasPointerCapture(e.pointerId)&&I.releasePointerCapture(e.pointerId),B())}},{target:I,event:"wheel",func:e=>{e.stopPropagation(),e.preventDefault();const t=I.scrollWidth-I.clientWidth;if(t<=0)return;const n=Math.abs(e.deltaX)>Math.abs(e.deltaY)?e.deltaX:e.deltaY,o=I.scrollLeft<=.1,a=I.scrollLeft>=t-.1;if(o&&n<0||a&&n>0)return;o&&n>0&&Le<0&&(Le=0),a&&n<0&&Le>0&&(Le=0);Le=(Le||0)+.015*n,xe||N()},args:{passive:!1}})}de&&(e.listeners.push({target:ie,event:"pointerenter",func:()=>{ue=!0,Y()}},{target:le,event:"pointerenter",func:()=>{ue=!0,Y()}},{target:ie,event:"pointerleave",func:()=>{ue=!1,S()}},{target:le,event:"pointerleave",func:()=>{ue=!1,S()}}),e.listeners.push({target:L,event:"pointermove",func:t=>{if("zoomed"!==e.state)return null==pe||null==ce?(pe=t.clientX,void(ce=t.clientY)):void(Math.abs(t.clientX-pe)<a&&Math.abs(t.clientY-ce)<a||(pe=t.clientX,ce=t.clientY,Y()))},args:{passive:!0}}));for(const we of y)we.content&&w&&w.append(we.content)}else h&&w.append(h);const F={counter:!!E,content:!!w,thumbnails:!!I},D=b.order.top.filter(e=>F[e]),W=b.order.bottom.filter(e=>F[e]);function H(e,t){e&&("counter"===t&&E?(A[e===C?"counterTop":"counterBottom"]=!0,e.append(E)):"content"===t&&w?(A[e===C?"contentTop":"contentBottom"]=!0,e.append(w)):"thumbnails"===t&&I&&(A[e===C?"thumbnailsTop":"thumbnailsBottom"]=!0,e.append(I)))}D.length&&(C=document.createElement("div"),C.className="popupable-header"),W.length&&(P=document.createElement("div"),P.className="popupable-footer");for(const Ce of D)H(C,Ce);for(const Pe of W)H(P,Pe);C&&x.append(C),P&&x.append(P),L.append(m,x),Object.assign(f,b,{popup:L,group:y,contentContainer:w,thumbnailsContainer:I,orderPlacement:A,goNext:k,goPrev:T});const O=setTimeout(()=>{d===o&&u.classList.add("popupable-loading")},250);if(await f.ready,clearTimeout(O),u.classList.remove("popupable-loading"),d!==o||e!==f||"close"===f.state)return;setCloneToOriginalRect(v,u),document.body.append(L),u.classList.add("popupable-hide"),disableScroll();const V=getComputedStyle(L);f.transition.duration=1e3*parseFloat(V.transitionDuration)+1e3*parseFloat(V.transitionDelay),L._state=f,requestAnimationFrame(()=>{requestAnimationFrame(()=>{openPopupable(L._state)})});let q,$=0;y&&L.addEventListener("dragstart",e=>e.preventDefault());const U=new Map;function _(e,t,n,o,i=[]){if("open"!==e.state)return;let l=0;const s=t.cloneContainer.parentElement,p=s.style.transform;if(p){const e=p.match(/translateX\((-?\d+(?:\.\d+)?)px\)/);e&&(l=Number(e[1])||0)}const c=Math.abs(l)>.5;r=!1,c?(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=`${l}px 0`):(s.style.transition=null,s.style.transform=null),e.state="zoomed",L.classList.add("popupable-locked");let u,d,f=o;const m=new Map;let b,v,g,h,y,w,C,P,E,I,M=!1;const z=t.cloneContainer.getBoundingClientRect(),k=n?.clientX??z.left+z.width/2,T=n?.clientY??z.top+z.height/2;u=(k-z.left)*(1-f),d=(T-z.top)*(1-f);const X=()=>t.cloneContainer.style.transform=`translate(${u}px, ${d}px) scale(${f})`;function A(e,n,o){const a=f;var r;if(r=e,f=Math.min(6,Math.max(1,r)),f===a)return!1;const i=t.cloneContainer.getBoundingClientRect(),l=f/a,s=n-i.left,p=o-i.top;return u+=s*(1-l),d+=p*(1-l),!0}function S(){if(1===m.size){const e=m.values().next().value;return b=e.id,v=e.x,g=e.y,h=null,y=null,void(w=null)}if(m.size>=2){b=null;const[e,t]=[...m.values()];return h=(e.x+t.x)/2,y=(e.y+t.y)/2,void(w=Math.hypot(t.x-e.x,t.y-e.y))}b=null,v=null,g=null,h=null,y=null,w=null}if(t.cloneContainer.classList.add("popupable-zoomed"),X(),i.length){c||(t.cloneContainer.style.transition="none"),I=!0;for(const e of i)m.set(e.id,{id:e.id,x:e.x,y:e.y}),L.setPointerCapture(e.id);S()}e.unzoom=()=>{e.state="open",L.classList.remove("popupable-locked");for(const e of m.keys())L.hasPointerCapture(e)&&L.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:L,event:"pointerdown",func:e=>{0===e.button&&(t.cloneContainer.style.transition="none",L.setPointerCapture(e.pointerId),m.set(e.pointerId,{id:e.pointerId,x:e.clientX,y:e.clientY}),1===m.size?(C=e.target,P=e.clientX,E=e.clientY,I=!1):I=!0,S(),e.preventDefault())}},{target:L,event:"pointermove",func:e=>{const t=m.get(e.pointerId);if(t){if(t.x=e.clientX,t.y=e.clientY,!I&&(Math.abs(e.clientX-P)>a||Math.abs(e.clientY-E)>a)&&(I=!0),1===m.size&&b===e.pointerId){const t=e.clientX-v,n=e.clientY-g;if(!t&&!n)return;return u+=t,d+=n,v=e.clientX,g=e.clientY,void X()}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 h=n,y=o,void(w=a);u+=n-h,d+=o-y,A(f*(a/w),n,o),M=!0,h=n,y=o,w=a,X()}}}},{target:L,event:"pointerup",func:n=>{if(m.has(n.pointerId)){if(m.delete(n.pointerId),L.hasPointerCapture(n.pointerId)&&L.releasePointerCapture(n.pointerId),M&&f<=1.01&&m.size<2)return e.skipOpenTouchPointerUps=m.size,void e.unzoom();if(!m.size&&!I&&Math.abs(n.clientX-P)<a&&Math.abs(n.clientY-E)<a){if(C?.closest?.(".popupable-clone-container")===t.cloneContainer||(C===L||C===x))return void e.unzoom()}S()}}},{target:L,event:"pointercancel",func:e=>{m.has(e.pointerId)&&(m.delete(e.pointerId),L.hasPointerCapture(e.pointerId)&&L.releasePointerCapture(e.pointerId),S())}},{target:L,event:"wheel",func:e=>{t.cloneContainer.style.transition="none",A(f*Math.exp(.002*-e.deltaY),e.clientX,e.clientY)&&X()},args:{passive:!0}}];for(const t of e.zoomListeners)t.target.addEventListener(t.event,t.func,t.args)}e.listeners.push({target:L,event:"pointerdown",func:e=>{if("open"!==L._state.state||"touch"!==e.pointerType)return;const t=L._state,n=t.group?t.group[t.group.currentIndex]:t;e.target.closest(".popupable-clone-container")===n.cloneContainer&&(U.set(e.pointerId,{id:e.pointerId,x:e.clientX,y:e.clientY}),U.size>=2&&(_(t,n,e,1,[...U.values()].slice(0,2)),U.clear(),e.preventDefault()))}},{target:L,event:"pointermove",func:e=>{const t=U.get(e.pointerId);t&&(t.x=e.clientX,t.y=e.clientY)}},{target:L,event:"pointerup",func:e=>{U.delete(e.pointerId)}},{target:L,event:"pointercancel",func:e=>{U.delete(e.pointerId)}}),L.addEventListener("pointerup",t=>{if("zoomed"===L._state.state)return;if("touch"===t.pointerType&&s>1)return;if("touch"===t.pointerType&&(L._state.skipOpenTouchPointerUps||0)>0)return void L._state.skipOpenTouchPointerUps--;const o=performance.now(),a=null!=t.target.closest(".popupable-next-container, .popupable-prev-container");if(q&&o-$<250)return void($=o);if(a?(q=!0,$=o):(q=!1,$=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=L._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"))?_(r,i,t,2):closePopupable()})})}),document.addEventListener("pointercancel",e=>{"touch"===e.pointerType&&(s=Math.max(0,s-1))}),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)}
|
|
7
|
+
{let e,t,n,o=0;const a=3;let r,i,l,s;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 setCloneToOriginalRect(e,t){const n=t.getBoundingClientRect();e.style.top=visualViewport.offsetTop+n.top+"px",e.style.left=visualViewport.offsetLeft+n.left+"px",e.style.width=n.width+"px",e.style.height=n.height+"px"}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){if(i.removeEventListener("transitionend",o.listener),n.classList.add("popupable-open"),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;o++,e.state="close",document.body.classList.add("popupable-block-touch"),setTimeout(()=>document.body.classList.remove("popupable-block-touch"),300);const{cloneContainer:n,clone:a,original:r,popup:i,transition:l,group:s,listeners:p}=e;r.classList.remove("popupable-loading"),i.classList.remove("popupable-active"),i.classList.remove("popupable-open");const c=s?s[s.currentIndex].cloneContainer:n;if(e.closingContainer=c,setCloneToOriginalRect(c,r),s)for(const e of s)e.cloneContainer!==c&&(e.cloneContainer.style.display="none");for(const e of p)e.target.removeEventListener(e.event,e.func);n.removeEventListener("transitionend",l.listener);const u=e;l.listener=n=>{n&&n.target!==n.currentTarget||(c.removeEventListener("transitionend",l.listener),r.classList.remove("popupable-hide"),i.remove(),u===e&&(enableScroll(),t=e,e=null))},l.duration?c.addEventListener("transitionend",l.listener):l.listener()}function updateExpandedSize(){if(!e||"close"===e.state)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=parseFloat(getComputedStyle(e.popup).getPropertyValue("--popupable-vv-ui-scale"))||1,l=(parseFloat(getComputedStyle(e.popup).getPropertyValue("--popupable-screen-padding"))||0)/r,s=Math.max(0,t-2*l),p=n-2*l,c=e.popup.querySelector(".popupable-counter"),u=c?c.getBoundingClientRect().height/i:0;let d;d=e.group?e.group:[e];for(const t of d){let c;if(t.maintainAspect){const e=t.original.getBoundingClientRect();c=e.width/e.height}else c=t.cloneLayer?t.cloneLayer.naturalWidth/t.cloneLayer.naturalHeight:t.original.naturalWidth/t.original.naturalHeight;const d=Math.max(0,p),m=t.content?t.content.getBoundingClientRect().height/i:0,b=e.thumbnailsContainer?e.thumbnailsContainer.getBoundingClientRect().height/i:0,f=(e.orderPlacement.counterTop?u:0)+(e.orderPlacement.contentTop?m:0)+(e.orderPlacement.thumbnailsTop?b:0),v=(e.orderPlacement.counterBottom?u:0)+(e.orderPlacement.contentBottom?m:0)+(e.orderPlacement.thumbnailsBottom?b:0),g=Math.max(0,n-f-v-2*l);let h=s,y=h/c;if(y>d&&(y=d,h=y*c),y>g&&(y=g,h=y*c),t.noUpscale){const e=t.cloneLayer||t.original,n=e.naturalWidth,o=e.naturalHeight;if(n&&o){const e=n/r,t=o/r,a=Math.min(1,e/h,t/y);a<1&&(h*=a,y*=a)}}let L=o+l+(d-y)/2;const x=o+n-v-l-y;L=Math.min(L,x),L=Math.max(L,o+f+l),t.cloneContainer.style.top=L+"px",t.cloneContainer.style.left=a+l+(s-h)/2+"px",t.cloneContainer.style.width=h+"px",t.cloneContainer.style.height=y+"px"}if(e.contentContainer){let t;t=e.group?e.group[e.group.currentIndex]:e;const n=t.content.getBoundingClientRect();e.contentContainer.style.height=n.height/i+"px"}}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){const n=document.createElement("div");n.className="popupable-clone-container",e.hasAttribute("data-popupable-transparent")&&n.classList.add("popupable-transparent");const o=new Image;o.className="popupable-clone",o.src=t??e.currentSrc??e.src;const a=getComputedStyle(e);let r,i,l;if(n.style.borderRadius=a.borderRadius,o.style.objectFit=a.objectFit,o.style.objectPosition=a.objectPosition,o.style.imageRendering=a.imageRendering,o.style.background=a.background,n.append(o),(e.dataset.popupableSrc||t)&&(r=new Image,r.className="popupable-clone-layer",r.src=e.dataset.popupableSrc??e.currentSrc??e.src,r.style.imageRendering=a.imageRendering,n.append(r),"fill"===o.style.objectFit)){const t=e.getBoundingClientRect();e.naturalWidth&&e.naturalHeight&&Math.abs(t.width/t.height-e.naturalWidth/e.naturalHeight)<.01&&(o.style.objectFit="cover")}if(e.dataset.popupableTitle||e.dataset.popupableDescription){if(i=document.createElement("div"),i.classList="popupable-content",e.dataset.popupableTitle){const t=document.createElement("div");t.className="popupable-title",t.textContent=e.dataset.popupableTitle,i.append(t)}if(e.dataset.popupableDescription){const t=document.createElement("div");t.className="popupable-description",t.textContent=e.dataset.popupableDescription,i.append(t)}}return e.hasAttribute("data-popupable-zoomable")&&(l=!0,n.classList.add("popupable-zoomable")),{id:e.dataset.popupable,original:e,cloneContainer:n,clone:o,cloneLayer:r,maintainAspect:e.hasAttribute("data-popupable-maintain-aspect"),noUpscale:e.hasAttribute("data-popupable-no-upscale"),counter:e.hasAttribute("data-popupable-counter"),thumbnails:e.hasAttribute("data-popupable-thumbnails"),order:parsePopupableOrder(e.dataset.popupableOrder),ready:Promise.all([o,r].filter(Boolean).map(e=>e.decode().catch(()=>{}))),content:i,zoomable:l}}function handleMove(t){if("open"!==e?.state||!e.group||!i)return;if(!e.popup?.classList.contains("popupable-open"))return l=t.touches?.[0].clientX??t.clientX,void(s=t.touches?.[0].clientY??t.clientY);const n=e.group[e.group.currentIndex];n.cloneContainer.parentElement.style.transition="initial",n.cloneContainer.parentElement.style.transform=`translateX(${(t.touches?.[0].clientX??t.clientX)-l}px)`}document.addEventListener("pointerdown",t=>{0===t.button&&(i||(n=t.target,l=t.clientX,s=t.clientY),i||"open"!==e?.state||t.target.closest(".popupable-header, .popupable-footer")||(i=!0))}),document.addEventListener("mousemove",handleMove),document.addEventListener("touchmove",handleMove,{passive:!0}),document.addEventListener("pointerup",async r=>{if(0!==r.button)return;if(i){i=!1;const $=e.group?e.group[e.group.currentIndex]:e;$.cloneContainer.parentElement.style.transition=null,$.cloneContainer.parentElement.style.transform=null;const U=r.clientX-l,_=Math.abs(U),j=r.clientY-s,K=Math.abs(j);if("touch"===r.pointerType&&K>56&&K>1.1*_)return void closePopupable();if(e.group&&_>a){const G=Math.max(0,Math.floor((_-window.innerWidth/2)/window.innerWidth));if(U>32)for(let Z=0;Z<=G;Z++)e.goPrev();else if(U<-32)for(let J=0;J<=G;J++)e.goNext();return void(e.blocked=!0)}}const p=r.target.closest(".popupable-viewport")&&!n.closest(".popupable-viewport");if(!p&&r.target!=n&&(!n.classList.contains("popupable-clone-container")||r.target!==t?.original)&&(!n.closest(".popupable-container")||r.target.closest(".popupable-container"))||Math.abs(r.clientX-l)>a||Math.abs(r.clientY-s)>a)return;const c=(p?n.closest("[data-popupable]"):null)||r.target.closest("[data-popupable]");if(!c){if(p)return void closePopupable();if(r.target.closest(".popupable-container"))return;return void(e&&("zoomed"===e.state?e.unzoom():closePopupable()))}if(r.preventDefault(),e?.original===c&&e.popup&&!e.popup.isConnected&&"close"!==e.state)return;const u=++o;e&&closePopupable(),e={transition:{},listeners:[]};const d=e,m=document.createElement("div");m.className="popupable-clones";const b=cloneElement(c),{cloneContainer:f,content:v}=b;let g;if(c.dataset.popupableGroup){const Q=document.querySelectorAll(`[data-popupable-group="${c.dataset.popupableGroup}"]`);if(Q.length){g=[];for(const[ee,te]of Q.entries())if(te===c)g.push(b),g.currentIndex=ee,m.append(f);else{const ne=cloneElement(te,c.currentSrc??c.src);ne.cloneContainer.style.display="none",g.push(ne),m.append(ne.cloneContainer)}}}else m.append(f);const h=document.createElement("div");h.className="popupable-container",b.id&&(h.id=b.id);const y=document.createElement("div");let L,x,w,C,P,E,I,M,k,z;y.className="popupable-viewport",v&&(L=document.createElement("div"),L.classList="popupable-content-container");const T={};if(g){b.counter&&(x=document.createElement("div"),x.className="popupable-header",C=document.createElement("div"),C.className="popupable-counter",x.append(C)),b.thumbnails&&(P=document.createElement("div"),P.className="popupable-thumbnails",E=g.map((e,t)=>{const n=new Image;return n.className="popupable-thumbnail",n.src=e.original.currentSrc??e.original.src,n.dataset.thumbnailIndex=t,P.append(n),n})),y.innerHTML=`\n <div class="popupable-prev-container${g.currentIndex?"":" popupable-nav-disabled"}">\n <div class="popupable-button popupable-nav-button popupable-prev">\n <svg width="24px" height="24px" viewBox="0 -960 960 960" fill="#fff">\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-next-container${g.currentIndex===g.length-1?" popupable-nav-disabled":""}">\n <div class="popupable-button popupable-nav-button popupable-next">\n <svg width="24px" height="24px" viewBox="0 -960 960 960" fill="#fff">\n <path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/>\n </svg>\n </div>\n </div>\n `;const oe=y.querySelector(".popupable-next-container"),ae=y.querySelector(".popupable-prev-container");let re,ie,le,se;const pe=!(navigator.maxTouchPoints>0||window.matchMedia("(hover: none)").matches);function X(){oe.classList.remove("popupable-nav-inactive"),ae.classList.remove("popupable-nav-inactive"),e.scheduleNavHide()}async function N(){const e=g[g.currentIndex];await e.ready,g.currentIndex?ae.classList.remove("popupable-nav-disabled"):ae.classList.add("popupable-nav-disabled"),g.currentIndex===g.length-1?oe.classList.add("popupable-nav-disabled"):oe.classList.remove("popupable-nav-disabled");for(const[e,t]of g.entries()){const n=e-g.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(e.id?h.id=e.id:h.removeAttribute("id"),C&&(C.textContent=`${g.currentIndex+1} / ${g.length}`),E){for(const[e,t]of E.entries())t.classList.toggle("popupable-thumbnail-active",e===g.currentIndex);const e=E[g.currentIndex];requestAnimationFrame(()=>{if(!e||!P?.isConnected)return;const t=getComputedStyle(P),n=parseFloat(t.paddingLeft)||0,o=parseFloat(t.paddingRight)||0,a=P.scrollLeft+n,r=P.scrollLeft+P.clientWidth-o,i=e.offsetLeft,l=i+e.offsetWidth;let s=P.scrollLeft;i<a?s=Math.max(0,i-n):l>r&&(s=l-P.clientWidth+o),s!==P.scrollLeft&&(I?P.scrollTo({left:s,behavior:"smooth"}):P.scrollLeft=s),I=!0})}updateExpandedSize()}if(e.scheduleNavHide=()=>{pe&&(clearTimeout(re),se||(re=setTimeout(()=>{se||(oe.classList.add("popupable-nav-inactive"),ae.classList.add("popupable-nav-inactive"))},1500)))},e.clearNavInactive=()=>{oe.classList.remove("popupable-nav-inactive"),ae.classList.remove("popupable-nav-inactive")},M=()=>{g.currentIndex>=g.length-1||(g.currentIndex++,N())},k=()=>{g.currentIndex<=0||(g.currentIndex--,N())},N(),e.listeners.push({target:oe,event:"click",func:()=>M()},{target:ae,event:"click",func:()=>k()},{target:document,event:"keydown",func:t=>{if("zoomed"!==e.state)switch(t.key){case"ArrowRight":case"ArrowDown":case"PageDown":case"d":case"s":M();break;case"ArrowLeft":case"ArrowUp":case"PageUp":case"a":case"w":k();break;case"Home":g.currentIndex=0,N();break;case"End":g.currentIndex=g.length-1,N();break;case"0":case"1":case"2":case"3":case"4":case"5":case"6":case"7":case"8":case"9":g.currentIndex=Math.min(Math.max(Number(t.key),1)-1,g.length-1),N()}}},{target:document,event:"wheel",func:t=>{if("zoomed"===e.state)return;const n=performance.now();n-(z||0)<80||(t.deltaY>50?(z=n,M()):t.deltaY<-50&&(z=n,k()))},args:{passive:!0}}),P){let ce,ue,de,me,be,fe,ve,ge,he;function S(){he&&(cancelAnimationFrame(he),he=null)}function Y(){if(S(),Math.abs(ge)<.01)return;let e=performance.now();he=requestAnimationFrame(function t(n){if(!P.isConnected)return void S();const o=P.scrollWidth-P.clientWidth;if(o<=0)return void S();const a=Math.min(32,n-e);e=n;let r=P.scrollLeft+ge*a;r<0&&(r=0),r>o&&(r=o),P.scrollLeft=r,P.scrollLeft<=.1&&ge<0||P.scrollLeft>=o-.1&&ge>0?S():(ge*=Math.pow(.8,a/16.67),Math.abs(ge)<=.002?S():he=requestAnimationFrame(t))})}e.listeners.push({target:P,event:"pointerdown",func:e=>{if(0!==e.button)return;const t=P.scrollWidth-P.clientWidth;de=t>0,S(),ce=!0,ue=!1,me=e.clientX,be=P.scrollLeft,fe=P.scrollLeft,ve=performance.now(),ge=0,de&&P.classList.add("popupable-thumbnails-dragging"),P.setPointerCapture(e.pointerId)}},{target:P,event:"pointermove",func:e=>{if(!ce)return;const t=e.clientX-me;Math.abs(t)>a&&(ue=!0);const n=performance.now(),o=n-ve,r=be-t;if(P.scrollLeft=r,o>0){const e=(P.scrollLeft-fe)/o;ge=.65*ge+.35*e,fe=P.scrollLeft,ve=n}}},{target:P,event:"pointerup",func:e=>{if(!ce)return;if(ce=!1,de&&P.classList.remove("popupable-thumbnails-dragging"),P.hasPointerCapture(e.pointerId)&&P.releasePointerCapture(e.pointerId),ue)return performance.now()-ve>10&&(ge=0),void Y();const t=document.elementFromPoint(e.clientX,e.clientY)?.closest?.(".popupable-thumbnail");t&&(g.currentIndex=Number(t.dataset.thumbnailIndex),N())}},{target:P,event:"pointercancel",func:e=>{ce&&(ce=!1,de&&P.classList.remove("popupable-thumbnails-dragging"),P.hasPointerCapture(e.pointerId)&&P.releasePointerCapture(e.pointerId),S())}},{target:P,event:"wheel",func:e=>{e.stopPropagation(),e.preventDefault();const t=P.scrollWidth-P.clientWidth;if(t<=0)return;const n=Math.abs(e.deltaX)>Math.abs(e.deltaY)?e.deltaX:e.deltaY,o=P.scrollLeft<=.1,a=P.scrollLeft>=t-.1;if(o&&n<0||a&&n>0)return;o&&n>0&&ge<0&&(ge=0),a&&n<0&&ge>0&&(ge=0);ge=(ge||0)+.015*n,he||Y()},args:{passive:!1}})}pe&&(e.listeners.push({target:oe,event:"pointerenter",func:()=>{se=!0,X()}},{target:ae,event:"pointerenter",func:()=>{se=!0,X()}},{target:oe,event:"pointerleave",func:()=>{se=!1,e.scheduleNavHide()}},{target:ae,event:"pointerleave",func:()=>{se=!1,e.scheduleNavHide()}}),e.listeners.push({target:h,event:"pointermove",func:t=>{if("zoomed"!==e.state)return null==ie||null==le?(ie=t.clientX,void(le=t.clientY)):void(Math.abs(t.clientX-ie)<a&&Math.abs(t.clientY-le)<a||(ie=t.clientX,le=t.clientY,X()))},args:{passive:!0}}));for(const ye of g)ye.content&&L&&L.append(ye.content)}else v&&L.append(v);const A={counter:!!C,content:!!L,thumbnails:!!P},R=b.order.top.filter(e=>A[e]),B=b.order.bottom.filter(e=>A[e]);function F(e,t){e&&("counter"===t&&C?(T[e===x?"counterTop":"counterBottom"]=!0,e.append(C)):"content"===t&&L?(T[e===x?"contentTop":"contentBottom"]=!0,e.append(L)):"thumbnails"===t&&P&&(T[e===x?"thumbnailsTop":"thumbnailsBottom"]=!0,e.append(P)))}R.length&&(x=document.createElement("div"),x.className="popupable-header"),B.length&&(w=document.createElement("div"),w.className="popupable-footer");for(const Le of R)F(x,Le);for(const xe of B)F(w,xe);x&&y.append(x),w&&y.append(w),h.append(m,y),Object.assign(d,b,{popup:h,group:g,contentContainer:L,thumbnailsContainer:P,orderPlacement:T,goNext:M,goPrev:k});const H=setTimeout(()=>{u===o&&c.classList.add("popupable-loading")},250);if(await d.ready,clearTimeout(H),c.classList.remove("popupable-loading"),u!==o||e!==d||"close"===d.state)return;setCloneToOriginalRect(f,c),document.body.append(h),c.classList.add("popupable-hide"),disableScroll();const D=getComputedStyle(h);d.transition.duration=1e3*parseFloat(D.transitionDuration)+1e3*parseFloat(D.transitionDelay),h._state=d,requestAnimationFrame(()=>{requestAnimationFrame(()=>{openPopupable(h._state)})});let W,O=0;g&&h.addEventListener("dragstart",e=>e.preventDefault());const V=new Map;function q(e,t,n,o,r=[]){if("open"!==e.state)return;let l=0;const s=t.cloneContainer.parentElement,p=s.style.transform;if(p){const e=p.match(/translateX\((-?\d+(?:\.\d+)?)px\)/);e&&(l=Number(e[1])||0)}const c=Math.abs(l)>.5;i=!1,c?(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=`${l}px 0`):(s.style.transition=null,s.style.transform=null),e.state="zoomed",h.classList.add("popupable-locked");let u,d,m=o;const b=new Map;let f,v,g,L,x,w,C,P,E,I,M=!1;const k=t.cloneContainer.getBoundingClientRect(),z=n?.clientX??k.left+k.width/2,T=n?.clientY??k.top+k.height/2;u=(z-k.left)*(1-m),d=(T-k.top)*(1-m);const X=()=>t.cloneContainer.style.transform=`translate(${u}px, ${d}px) scale(${m})`;function N(e,n,o){const a=m;var r;if(r=e,m=Math.min(6,Math.max(1,r)),m===a)return!1;const i=t.cloneContainer.getBoundingClientRect(),l=m/a,s=n-i.left,p=o-i.top;return u+=s*(1-l),d+=p*(1-l),!0}function S(){if(1===b.size){const e=b.values().next().value;return f=e.id,v=e.x,g=e.y,L=null,x=null,void(w=null)}if(b.size>=2){f=null;const[e,t]=[...b.values()];return L=(e.x+t.x)/2,x=(e.y+t.y)/2,void(w=Math.hypot(t.x-e.x,t.y-e.y))}f=null,v=null,g=null,L=null,x=null,w=null}if(t.cloneContainer.classList.add("popupable-zoomed"),X(),r.length){c||(t.cloneContainer.style.transition="none"),I=!0;for(const e of r)b.set(e.id,{id:e.id,x:e.x,y:e.y}),h.setPointerCapture(e.id);S()}e.unzoom=()=>{e.state="open",h.classList.remove("popupable-locked");for(const e of b.keys())h.hasPointerCapture(e)&&h.releasePointerCapture(e);b.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:h,event:"pointerdown",func:e=>{0===e.button&&(t.cloneContainer.style.transition="none",h.setPointerCapture(e.pointerId),b.set(e.pointerId,{id:e.pointerId,x:e.clientX,y:e.clientY}),1===b.size?(C=e.target,P=e.clientX,E=e.clientY,I=!1):I=!0,S(),e.preventDefault())}},{target:h,event:"pointermove",func:e=>{const t=b.get(e.pointerId);if(t){if(t.x=e.clientX,t.y=e.clientY,!I&&(Math.abs(e.clientX-P)>a||Math.abs(e.clientY-E)>a)&&(I=!0),1===b.size&&f===e.pointerId){const t=e.clientX-v,n=e.clientY-g;if(!t&&!n)return;return u+=t,d+=n,v=e.clientX,g=e.clientY,void X()}if(b.size>=2){const[e,t]=[...b.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 L=n,x=o,void(w=a);u+=n-L,d+=o-x,N(m*(a/w),n,o),M=!0,L=n,x=o,w=a,X()}}}},{target:h,event:"pointerup",func:n=>{if(b.has(n.pointerId)){if(b.delete(n.pointerId),h.hasPointerCapture(n.pointerId)&&h.releasePointerCapture(n.pointerId),M&&m<=1.01&&b.size<2)return e.skipOpenTouchPointerUps=b.size,void e.unzoom();if(!b.size&&!I&&Math.abs(n.clientX-P)<a&&Math.abs(n.clientY-E)<a){if(C?.closest?.(".popupable-clone-container")===t.cloneContainer||(C===h||C===y))return void e.unzoom()}S()}}},{target:h,event:"pointercancel",func:e=>{b.has(e.pointerId)&&(b.delete(e.pointerId),h.hasPointerCapture(e.pointerId)&&h.releasePointerCapture(e.pointerId),S())}},{target:h,event:"wheel",func:e=>{t.cloneContainer.style.transition="none",N(m*Math.exp(.002*-e.deltaY),e.clientX,e.clientY)&&X()},args:{passive:!0}}];for(const t of e.zoomListeners)t.target.addEventListener(t.event,t.func,t.args)}e.listeners.push({target:h,event:"pointerdown",func:e=>{if("open"!==h._state.state||"touch"!==e.pointerType)return;const t=h._state,n=t.group?t.group[t.group.currentIndex]:t;e.target.closest(".popupable-clone-container")===n.cloneContainer&&(V.set(e.pointerId,{id:e.pointerId,x:e.clientX,y:e.clientY}),V.size>=2&&(q(t,n,e,1,[...V.values()].slice(0,2)),V.clear(),e.preventDefault()))}},{target:h,event:"pointermove",func:e=>{const t=V.get(e.pointerId);t&&(t.x=e.clientX,t.y=e.clientY)}},{target:h,event:"pointerup",func:e=>{V.delete(e.pointerId)}},{target:h,event:"pointercancel",func:e=>{V.delete(e.pointerId)}}),h.addEventListener("pointerup",t=>{if("zoomed"===h._state.state)return;if("touch"===t.pointerType&&(h._state.skipOpenTouchPointerUps||0)>0)return void h._state.skipOpenTouchPointerUps--;const o=performance.now(),a=null!=t.target.closest(".popupable-next-container, .popupable-prev-container");if(W&&o-O<250)return void(O=o);if(a?(W=!0,O=o):(W=!1,O=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=h._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"))?q(r,i,t,2):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)}
|