index.js
1 lines
| 1 | import*as t from"@wordpress/interactivity";var e,n,r={d:function(t,e){for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},o:function(t,e){return Object.prototype.hasOwnProperty.call(t,e)}},a=(e={getContext:function(){return t.getContext},getElement:function(){return t.getElement},store:function(){return t.store},withSyncEvent:function(){return t.withSyncEvent}},n={},r.d(n,e),n);let o=!1,i=0,g=[];const{state:l,actions:c,callbacks:s}=(0,a.store)("surecart/lightbox",{state:{images:[],currentImageIndex:-1,get currentImageId(){return l.currentImageIndex>-1&&l.images.length>0?l.images[l.currentImageIndex]:null},get currentImage(){return l.metadata[l.currentImageId]},get hasNavigation(){return l.images.length>1},get hasNextImage(){return l.currentImageIndex+1<l.images.length},get hasPreviousImage(){return l.currentImageIndex-1>=0},get overlayOpened(){return null!==l.currentImageId},get roleAttribute(){return l.overlayOpened?"dialog":null},get ariaModal(){return l.overlayOpened?"true":null},get enlargedSrc(){return l.currentImage.uploadedSrc||"data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="},get imgStyles(){return l.overlayOpened&&"object-fit:cover;"},get isContentHidden(){const t=(0,a.getContext)();return l.overlayEnabled&&l.currentImageId===t.imageId},get isContentVisible(){const t=(0,a.getContext)();return!l.overlayEnabled&&l.currentImageId===t.imageId},get imageButtonRight(){const{imageId:t}=(0,a.getContext)();return l.metadata[t].imageButtonRight},get imageButtonTop(){const{imageId:t}=(0,a.getContext)();return l.metadata[t].imageButtonTop}},actions:{showLightbox(){const{imageId:t,images:e}=(0,a.getContext)();l.metadata[t]?.imageRef?.complete&&(l.scrollTopReset=document.documentElement.scrollTop,l.scrollLeftReset=document.documentElement.scrollLeft,l.images=(e||[t]).filter((e=>{const n=e?.id||e,r=l?.metadata[n],a=r?.imageRef;if(!a)return!1;const o=a&&function(t){for(;t;){if("none"===window.getComputedStyle(t).display)return!1;t=t.parentElement}return!0}(a);return r?.galleryId===l.metadata[t]?.galleryId&&o})).map((t=>t?.id?t.id:t)),s.setCurrentImageIndex(t),l.overlayEnabled=!0,s.setOverlayStyles(),g=[],document.querySelectorAll("body > :not(.sc-lightbox-overlay):not(.wp-block-surecart-product-quick-view)").forEach((t=>{t.hasAttribute("inert")||t.querySelector(".sc-lightbox-overlay")||t.querySelector(".wp-block-surecart-product-quick-view")||(t.setAttribute("inert",""),g.push(t))})))},hideLightbox(){l.overlayEnabled&&(l.showClosingAnimation=!0,l.overlayEnabled=!1,setTimeout((function(){l.currentImage.buttonRef.focus({preventScroll:!0}),l.currentImageIndex=-1,l.images=[]}),450),g.forEach((t=>{t.removeAttribute("inert")})),g=[])},showPreviousImage(t){l.hasNavigation&&(t.stopPropagation(),l.hasPreviousImage&&(l.currentImageIndex=l.currentImageIndex-1,s.setOverlayStyles()))},showNextImage(t){l.hasNavigation&&(t.stopPropagation(),l.hasNextImage&&(l.currentImageIndex=l.currentImageIndex+1,s.setOverlayStyles()))},handleKeydown(t){l.overlayEnabled&&("Escape"===t.key&&c.hideLightbox(),"ArrowLeft"===t.key?c.showPreviousImage(t):"ArrowRight"===t.key&&c.showNextImage(t))},handleTouchMove:(0,a.withSyncEvent)((function(t){l.overlayEnabled&&t.preventDefault()})),handleTouchStart(){o=!0},handleTouchEnd(){i=Date.now(),o=!1},handleScroll(){l.overlayOpened&&!o&&Date.now()-i>450&&window.scrollTo(l.scrollLeftReset,l.scrollTopReset)}},callbacks:{setCurrentImageIndex(t){const e=l.images.findIndex((e=>e.toString()===t.toString()));l.currentImageIndex=e},setOverlayStyles(){if(!l.overlayEnabled)return;let{naturalWidth:t,naturalHeight:e,offsetWidth:n,offsetHeight:r}=l.currentImage.imageRef,{x:o,y:i}=l.currentImage.imageRef.getBoundingClientRect();const g=t/e;let c=n/r;if("contain"===l.currentImage.scaleAttr)if(g>c){const t=n/g;i+=(r-t)/2,r=t}else{const t=r*g;o+=(n-t)/2,n=t}c=n/r;let s=parseFloat(l.currentImage.targetWidth&&"none"!==l.currentImage.targetWidth?l.currentImage.targetWidth:t),u=parseFloat(l.currentImage.targetHeight&&"none"!==l.currentImage.targetHeight?l.currentImage.targetHeight:e),d=s/u,m=s,h=u,I=s,f=u;if(g.toFixed(2)!==d.toFixed(2)){if(g>d){const t=s/g;u-t>s?(u=t,s=t*g):u=s/g}else{const t=u*g;s-t>u?(s=t,u=t/g):s=u*g}I=s,f=u,d=s/u,c>d?(m=s,h=m/c):(h=u,m=h*c)}(n>I||r>f)&&(I=n,f=r);let p=0;window.innerWidth>480?p=l.hasNavigation?140:80:window.innerWidth>1920&&(p=160);const x=Math.min(window.innerWidth-p,I),y=Math.min(window.innerHeight-80,f);c>x/y?(I=x,f=I/c):(f=y,I=f*c);const v=n/I,b=s*(I/m),w=u*(f/h),E=l.currentImage.imageRef.closest(".swiper");if(E){const{state:t}=(0,a.store)("surecart/image-slider");if(t&&t.active&&t.swiper){const{x:t,y:e}=E.getBoundingClientRect();o=t,i=e}}l.overlayStyles=`\n\t\t\t\t:root {\n\t\t\t\t\t--sc-lightbox--initial-top-position: ${i}px;\n\t\t\t\t\t--sc-lightbox--initial-left-position: ${o}px;\n\t\t\t\t\t--sc-lightbox--container-width: ${I+1}px;\n\t\t\t\t\t--sc-lightbox--container-height: ${f+1}px;\n\t\t\t\t\t--sc-lightbox--image-width: ${b}px;\n\t\t\t\t\t--sc-lightbox--image-height: ${w}px;\n\t\t\t\t\t--sc-lightbox--scale: ${v};\n\t\t\t\t\t--sc-lightbox--scrollbar-width: ${window.innerWidth-document.documentElement.clientWidth}px;\n\t\t\t\t}\n\t\t\t\t`},setScreenReaderText(){const{ref:t}=(0,a.getElement)();l.overlayEnabled?t.textContent=l.currentImage.screenReaderText:t.textContent=""},setImageRef(){const{imageId:t}=(0,a.getContext)(),{ref:e}=(0,a.getElement)();l.metadata[t].imageRef=e,l.metadata[t].currentSrc=e.currentSrc,s.setButtonStyles()},setButtonStyles(){const{imageId:t}=(0,a.getContext)(),{ref:e}=(0,a.getElement)(),{naturalWidth:n,naturalHeight:r,offsetWidth:o,offsetHeight:i}=e;if(0===n||0===r)return;const g=e.parentElement,c=e.parentElement.clientWidth;let s=e.parentElement.clientHeight;const u=g.querySelector("figcaption");if(u){const t=window.getComputedStyle(u);["absolute","fixed"].includes(t.position)||(s=s-u.offsetHeight-parseFloat(t.marginTop)-parseFloat(t.marginBottom))}const d=s-i,m=c-o;let h=d+16,I=m+16;if("contain"===l.metadata[t].scaleAttr){const t=n/r;t>=o/i?(h=(i-o/t)/2+d+16,I=m+16):(h=d+16,I=(o-i*t)/2+m+16)}l.metadata[t].imageButtonTop=h,l.metadata[t].imageButtonRight=I},setOverlayFocus(){if(l.overlayEnabled){const{ref:t}=(0,a.getElement)();t.focus()}},initTriggerButton(){const{imageId:t}=(0,a.getContext)(),{ref:e}=(0,a.getElement)();l.metadata[t].buttonRef=e}}}); |