https://www.theknottyones.com/cdn/shop/t/101/assets/expandable-ima…?v=51727975723012439741762431810

1(function(){function adjustGalleryControls(){const isDesktop=window.matchMedia("(min-width: 1024px)").matches,mobileGallery=document.getElementById("mobile-gallery"),desktopGallery=document.getElementById("desktop-gallery");toggleDataControls(mobileGallery,!isDesktop),toggleDataControls(desktopGallery,isDesktop)}function toggleDataControls(element,shouldSet){element&&(shouldSet?element.setAttribute("data-controls","expLightbox"):element.removeAttribute("data-controls"))}adjustGalleryControls(),window.addEventListener("resize",adjustGalleryControls);var ExpGallery=function(element){this.element=element,this.slideshow=this.element.getElementsByClassName("js-exp-lightbox__body")[0],this.slideshowList=this.element.getElementsByClassName("js-exp-lightbox__slideshow")[0],this.slideshowId=this.element.getAttribute("id"),this.gallery=document.querySelector('[data-controls="'+this.slideshowId+'"]'),this.galleryItems=this.gallery.getElementsByClassName("js-exp-gallery__item"),this.lazyload=this.gallery.getAttribute("data-placeholder"),this.animationRunning=!1,this.menuBar=this.element.getElementsByClassName("js-menu-bar"),initNewContent(this),initLightboxMarkup(this),lazyLoadLightbox(this),initSlideshow(this),initModal(this),initModalEvents(this)};const galleryObserver=new MutationObserver(function(mutations){mutations.forEach(function(mutation){mutation.type=="childList"&&updateGalleries()})});galleryObserver.observe(document.querySelector("#desktop-gallery"),{childList:!0,subtree:!0}),galleryObserver.observe(document.querySelector("#mobile-gallery"),{childList:!0,subtree:!0});function updateGalleries(){expGalleriesArray=[];const expGalleries2=document.getElementsByClassName("js-exp-lightbox");animationSupported=window.requestAnimationFrame&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches;for(var i2=0;i2<expGalleries2.length;i2++)expGalleriesArray.push([new ExpGallery(expGalleries2[i2])])}function initNewContent(gallery){gallery.infiniteScrollParent=gallery.gallery.closest("[data-container]"),!gallery.infiniteScrollParent&&gallery.gallery.classList.contains("js-infinite-scroll")&&(gallery.infiniteScrollParent=gallery.gallery),gallery.infiniteScrollParent&&gallery.infiniteScrollParent.addEventListener("content-loaded",function(event){initLightboxMarkup(gallery),initSlideshow(gallery)})}function initLightboxMarkup(gallery){var slideshowContent="";gallery.itemToSlideMap=[];for(var slideIndex=0,i2=0;i2<gallery.galleryItems.length;i2++){var hasVideo=gallery.galleryItems[i2].getElementsByTagName("video").length>0;if(hasVideo){gallery.itemToSlideMap[i2]=-1;continue}var caption=gallery.galleryItems[i2].getElementsByClassName("js-exp-gallery__caption"),image=gallery.galleryItems[i2].getElementsByTagName("img")[0],caption=gallery.galleryItems[i2].getElementsByClassName("js-exp-gallery__caption");if(!image){gallery.itemToSlideMap[i2]=-1;continue}gallery.itemToSlideMap[i2]=slideIndex;var src=image.getAttribute("data-modal-src");src||(src=image.getAttribute("data-src")),src||(src=image.getAttribute("src"));var altAttr=image.getAttribute("alt");altAttr=altAttr?'alt="'+altAttr+'"':"";var draggable=gallery.slideshow.getAttribute("data-swipe")=="on"?'draggable="false" ondragstart="return false;"':"",imgBlock=gallery.lazyload?'<img data-src="'+src+'" data-loading="lazy" src="'+gallery.lazyload+'" '+altAttr+" "+draggable+' class=" ei1-pointer-events-auto">':'<img src="'+src+'" data-loading="lazy" '+draggable+' class=" ei1-pointer-events-auto">',captionBlock=caption.length>0?'<figcaption class="exp-lightbox__caption ei1-pointer-events-auto">'+caption[0].textContent+"</figcaption>":"";slideshowContent=slideshowContent+'<li class="slideshow__item js-slideshow__item"><figure class="exp-lightbox__media"><div class="exp-lightbox__media-outer"><div class="exp-lightbox__media-inner">'+imgBlock+"</div></div>"+captionBlock+"</li>",slideIndex++}gallery.slideshowList.innerHTML=slideshowContent,gallery.slides=gallery.slideshowList.getElementsByClassName("js-slideshow__item");var imgMorph=document.createElement("div");

1imgMorph.setAttribute("aria-hidden","true"),imgMorph.setAttribute("class","exp-lightbox__clone-img-wrapper js-exp-lightbox__clone-img-wrapper"),imgMorph.setAttribute("data-exp-morph",gallery.slideshowId),imgMorph.innerHTML='<svg><defs><clipPath id="'+gallery.slideshowId+'-clip"><rect/></clipPath></defs><image height="100%" width="100%" clip-path="url(#'+gallery.slideshowId+'-clip)"></image></svg>',document.body.appendChild(imgMorph),gallery.imgMorph=document.querySelector('.js-exp-lightbox__clone-img-wrapper[data-exp-morph="'+gallery.slideshowId+'"]'),gallery.imgMorphSVG=gallery.imgMorph.getElementsByTagName("svg")[0],gallery.imgMorphRect=gallery.imgMorph.getElementsByTagName("rect")[0],gallery.imgMorphImg=gallery.imgMorph.getElementsByTagName("image")[0];const isDesktop=window.matchMedia("(min-width: 1024px)").matches;if(gallery.slideshow.getAttribute("data-zoom")=="on"&&isDesktop){var zoomImg=document.createElement("div");zoomImg.setAttribute("aria-hidden","true"),zoomImg.setAttribute("class","exp-lightbox__zoom exp-lightbox__zoom--no-transition js-exp-lightbox__zoom"),zoomImg.innerHTML="<img>",gallery.element.appendChild(zoomImg),gallery.zoomImg=gallery.element.getElementsByClassName("js-exp-lightbox__zoom")[0]}}function attachTapListener(image,imageContainer){const element=image,hammertime=new Hammer(element,{});hammertime.get("pinch").set({enable:!0}),hammertime.get("pan").set({direction:Hammer.DIRECTION_ALL});const container=imageContainer,containerHeight=container.clientHeight,containerWidth=container.clientWidth,screenWidth=document.body.clientWidth,screenHeight=document.body.clientHeight,elementHeight=element.clientHeight,elementWidth=element.clientWidth;let currentScale=1,offsetX=0,offsetY=0,panOffsetX=0,panOffsetY=0,pinchCentreX=0,pinchCentreY=0;hammertime.on("pinchstart",function(e){panOffsetX=offsetX,panOffsetY=offsetY,pinchCentreX=Math.round((e.center.x-panOffsetX-screenWidth/2)/currentScale),pinchCentreY=Math.round((e.center.y-panOffsetY-screenHeight/2)/currentScale)}),hammertime.on("pinch",function(e){let scale=Math.min(5,Math.max(1,currentScale*e.scale));offsetX=panOffsetX+Math.round(pinchCentreX*(1-e.scale)),offsetY=panOffsetY+Math.round(pinchCentreY*(1-e.scale)),offsetX+=e.deltaX,offsetY+=e.deltaY;let overlapX=Math.max(0,Math.round((elementWidth*scale-containerWidth)/2)),overlapY=Math.max(0,Math.round((elementHeight*scale-containerHeight)/2));offsetX=Math.max(-overlapX,Math.min(overlapX,offsetX)),offsetY=Math.max(-overlapY,Math.min(overlapY,offsetY));let transforms2=["translate("+offsetX+"px,"+offsetY+"px)","scale("+scale+")"];element.style.transform=transforms2.join(" ")}),hammertime.on("pinchend",function(e){currentScale=Math.min(5,Math.max(1,currentScale*e.scale))}),hammertime.on("panstart",function(){panOffsetX=offsetX,panOffsetY=offsetY}),hammertime.on("tap",function(e){currentScale+=1,currentScale=Math.min(5,currentScale);let transforms2=["translate("+offsetX+"px,"+offsetY+"px)","scale("+currentScale+")"];element.style.transform=transforms2.join(" ")}),hammertime.on("panmove",function(e){let overlapX=Math.max(0,Math.round((elementWidth*currentScale-containerWidth)/2)),overlapY=Math.max(0,Math.round((elementHeight*currentScale-containerHeight)/2));panOffsetX=Math.max(-overlapX,Math.min(overlapX,offsetX+e.deltaX)),panOffsetY=Math.max(-overlapY,Math.min(overlapY,offsetY+e.deltaY)),transforms=["translate("+panOffsetX+"px,"+panOffsetY+"px)","scale("+currentScale+")"],element.style.transform=transforms.join(" ")}),hammertime.on("panend",function(e){offsetX=panOffsetX,offsetY=panOffsetY})}function lazyLoadLightbox(gallery){gallery.slideshow.addEventListener("newItemSelected",function(event){gallery.selectedSlide=event.detail,lazyLoadSlide(gallery),triggerMenuEvent(gallery)}),gallery.slideshow.addEventListener("imagesLoaded",function(){gallery.imagesLoadedFlag=!0})}function resetZoomForCurrentSlide(gallery){var currentSlide=gallery.slides[gallery.selectedSlide],image=currentSlide.querySelector("img");image&&(image.style.transform="scale(1)")}function lazyLoadSlide(gallery){setSlideMedia(gallery,gallery.selectedSlide),setSlideMedia(gallery,gallery.selectedSlide+1),setSlideMedia(gallery,gallery.selectedSlide-1),resetZoomForCurrentSlide(gallery)}function setSlideMedia(gallery,index){index<0&&(index=gallery.slides.length-1),index>gallery.slides.length-1&&(index=0);for(var imgs=gallery.slides[index].querySelectorAll("img[data-src]"),i2=0;i2<imgs.length;i2++)imgs[i2].onload=()=>

1{if(index===gallery.selectedSlide){var selectedSlide=gallery.slides[gallery.selectedSlide],image=selectedSlide.querySelector("img");window.matchMedia("(min-width: 1024px)").matches||attachTapListener(image,image.parentElement)}},imgs[i2].src=imgs[i2].getAttribute("data-src")}function initSlideshow(gallery){if(resetSlideshowControls(gallery),gallery.slideshowNav=gallery.element.getElementsByClassName("js-slideshow__control"),gallery.slides.length<=1){toggleSlideshowElements(gallery,!0);return}var swipe=!!(gallery.slideshow.getAttribute("data-swipe")&&gallery.slideshow.getAttribute("data-swipe")=="on");gallery.slideshowObj=new Slideshow({element:gallery.slideshow,navigation:!1,autoplay:!1,swipe})}function resetSlideshowControls(gallery){var arrowControl=gallery.element.getElementsByClassName("js-slideshow__control");if(arrowControl.length!=0){var controlsWrapper=arrowControl[0].parentElement;controlsWrapper&&(controlsWrapper.innerHTML=controlsWrapper.innerHTML)}}function toggleSlideshowElements(gallery,bool){if(gallery.slideshowNav.length>0)for(var i2=0;i2<gallery.slideshowNav.length;i2++)bool?gallery.slideshowNav[i2].classList.add("ei1-hide"):gallery.slideshowNav[i2].classList.remove("ei1-hide")}function initModal(gallery){gallery.element.classList.add("exp-lightbox--no-transition"),gallery.element.addEventListener("modalIsClose",function(event){gallery.element.classList.add("exp-lightbox--no-transition"),gallery.imgMorph.style=""}),gallery.gallery.addEventListener("click",function(event){event.target.classList.contains("infobox")||event.target.closest(".infobox")||event.target.tagName.toLowerCase()==="a"?event.preventDefault():openModalLightbox(gallery,event)})}function initModalEvents(gallery){gallery.zoomImg&&(gallery.slideshow.addEventListener("click",function(event){event.target.tagName.toLowerCase()=="img"&&event.target.closest(".js-slideshow__item")&&!gallery.modalSwiping&&modalZoomImg(gallery,event.target)}),gallery.zoomImg.addEventListener("click",function(event){modalZoomImg(gallery,!1)}),gallery.element.addEventListener("modalIsClose",function(event){modalZoomImg(gallery,!1),closeModalAnimation(gallery)})),gallery.slideshowObj}function modalZoomImg(gallery,img){if(gallery.zoomImg){var bool=!1;img&&(gallery.originImg=img,gallery.zoomImg.children[0].setAttribute("src",img.getAttribute("src")),bool=!0),animationSupported?requestAnimationFrame(function(){animateZoomImg(gallery,bool)}):gallery.zoomImg.classList.toggle("exp-lightbox__zoom--is-visible",bool)}}function animateZoomImg(gallery,bool){if(gallery.originImg){var originImgPosition=gallery.originImg.getBoundingClientRect(),originStyle="translateX("+originImgPosition.left+"px) translateY("+(originImgPosition.top+gallery.zoomImg.scrollTop)+"px) scale("+originImgPosition.width/gallery.zoomImg.scrollWidth+")",finalStyle="scale(1)";bool?gallery.zoomImg.children[0].style.transform=originStyle:gallery.zoomImg.addEventListener("transitionend",function cb(){gallery.zoomImg.classList.add("exp-lightbox__zoom--no-transition"),gallery.zoomImg.scrollTop=0,gallery.zoomImg.removeEventListener("transitionend",cb)}),setTimeout(function(){gallery.zoomImg.classList.remove("exp-lightbox__zoom--no-transition"),gallery.zoomImg.classList.toggle("exp-lightbox__zoom--is-visible",bool),gallery.zoomImg.children[0].style.transform=bool?finalStyle:originStyle},50)}}function openModalLightbox(gallery,event){var item=event.target.closest(".js-exp-gallery__item");if(item){var hasVideo=item.getElementsByTagName("video").length>0;if(!hasVideo){resetSlideshowItemsVisibility(gallery);var itemIndex=Array.prototype.indexOf.call(gallery.galleryItems,item);gallery.selectedSlide=gallery.itemToSlideMap[itemIndex],setSelectedItem(gallery),lazyLoadSlide(gallery),animationSupported?window.requestAnimationFrame(function(){animateSelectedImage(gallery,!1,itemIndex),openModal(gallery,item)}):(openModal(gallery,item),gallery.element.classList.remove("exp-lightbox--no-transition")),triggerMenuEvent(gallery)}}}function resetSlideshowItemsVisibility(gallery){for(var index=0,i2=0;i2<gallery.galleryItems.length;i2++){var slideIndex=gallery.itemToSlideMap[i2];if(slideIndex!==-1){var itemVisible=isVisible(gallery.galleryItems[i2]);itemVisible?(index=index+1,gallery.slides[slideIndex].classList.remove("ei1-hide")):gallery.slides[slideIndex].classList.add("ei1-hide")}}toggleSlideshowElements(gallery,index<2)}function setSelectedItem(gallery){var lastSelected=gallery.slideshow.getElementsByClassName("slideshow__item--selected");lastSelected.length>0&&lastSelected[0].classList.remove("slideshow__item--selected"),gallery.slides[gallery.selectedSlide].classList.add("slideshow__item--selected"),gallery.slideshowObj&&(gallery.slideshowObj.selectedSlide=gallery.selectedSlide)}function openModal(gallery,item){gallery.element.dispatchEvent(new CustomEvent("openM

1odal",{detail:item})),gallery.modalSwiping=!1}function closeModal(gallery){gallery.modalSwiping=!0,gallery.element.dispatchEvent(new CustomEvent("closeModal"))}function closeModalAnimation(gallery){gallery.selectedSlide=gallery.slideshowObj?gallery.slideshowObj.selectedSlide:0;var galleryItemIndex=gallery.itemToSlideMap.indexOf(gallery.selectedSlide);if(galleryItemIndex!==-1){var boundingRect=gallery.galleryItems[galleryItemIndex].getBoundingClientRect();if(boundingRect.topf<0||boundingRect.top>window.innerHeight){var windowScrollTop=window.scrollY||document.documentElement.scrollTop;window.scrollTo(0,boundingRect.top+windowScrollTop)}animateSelectedImage(gallery,!0,galleryItemIndex)}}function animateSelectedImage(gallery,bool,galleryItemIndex){if(!(typeof galleryItemIndex>"u"&&(galleryItemIndex=gallery.itemToSlideMap.indexOf(gallery.selectedSlide),galleryItemIndex===-1))){var imgInit=gallery.galleryItems[galleryItemIndex].getElementsByTagName("img")[0],imgInitPosition=imgInit.getBoundingClientRect(),imgFinal=gallery.slides[gallery.selectedSlide].getElementsByTagName("img")[0],imgFinalPosition=imgFinal.getBoundingClientRect();if(bool)runAnimation(gallery,imgInit,imgInitPosition,imgFinal,imgFinalPosition,bool);else{imgFinal.style.visibility="hidden",gallery.animationRunning=!1;var image=new Image;image.onload=function(){gallery.animationRunning||(imgFinalPosition=imgFinal.getBoundingClientRect(),runAnimation(gallery,imgInit,imgInitPosition,imgFinal,imgFinalPosition,bool))},image.src=imgFinal.getAttribute("data-src")?imgFinal.getAttribute("data-src"):imgFinal.getAttribute("src"),image.complete&&(gallery.animationRunning=!0,imgFinalPosition=imgFinal.getBoundingClientRect(),runAnimation(gallery,imgInit,imgInitPosition,imgFinal,imgFinalPosition,bool))}}}function runAnimation(gallery,imgInit,imgInitPosition,imgFinal,imgFinalPosition,bool){var scale=imgFinalPosition.width>imgFinalPosition.height?imgFinalPosition.height/imgInitPosition.height:imgFinalPosition.width/imgInitPosition.width,initHeight=imgFinalPosition.width>imgFinalPosition.height?imgInitPosition.height:imgFinalPosition.height/scale,initWidth=imgFinalPosition.width>imgFinalPosition.height?imgFinalPosition.width/scale:imgInitPosition.width,initTranslateY=(imgInitPosition.height-initHeight)/2,initTranslateX=(imgInitPosition.width-initWidth)/2,initTop=imgInitPosition.top+initTranslateY,initLeft=imgInitPosition.left+initTranslateX,translateX=imgFinalPosition.left-imgInitPosition.left,translateY=imgFinalPosition.top-imgInitPosition.top,finTranslateX=translateX-initTranslateX,finTranslateY=translateY-initTranslateY,initScaleX=imgInitPosition.width/initWidth,initScaleY=imgInitPosition.height/initHeight,finScaleX=1,finScaleY=1;bool&&(scale=1/scale,finScaleX=initScaleX,finScaleY=initScaleY,initScaleX=1,initScaleY=1,finTranslateX=-1*finTranslateX,finTranslateY=-1*finTranslateY,initTop=imgFinalPosition.top,initLeft=imgFinalPosition.left,initHeight=imgFinalPosition.height,initWidth=imgFinalPosition.width),bool||(imgFinal.style.visibility=""),gallery.imgMorph.setAttribute("style","height: "+initHeight+"px; width: "+initWidth+"px; top: "+initTop+"px; left: "+initLeft+"px;"),gallery.imgMorphSVG.setAttribute("viewbox","0 0 "+initWidth+" "+initHeight),gallery.imgMorphImg.setAttribute("xlink:href",imgInit.getAttribute("src")),gallery.imgMorphImg.setAttribute("href",imgInit.getAttribute("src")),gallery.imgMorphRect.setAttribute("style","height: "+initHeight+"px; width: "+initWidth+"px;"),gallery.imgMorphRect.setAttribute("transform","translate("+initWidth/2*(1-initScaleX)+" "+initHeight/2*(1-initScaleY)+") scale("+initScaleX+","+initScaleY+")"),gallery.imgMorph.classList.add("exp-lightbox__clone-img-wrapper--is-visible"),gallery.slideshowList.classList.add("slideshow__content--is-hidden"),gallery.galleryItems[gallery.selectedSlide].classList.add("exp-gallery-item-hidden"),gallery.imgMorph.addEventListener("transitionend",function cb(event){event.propertyName.indexOf("transform")<0||(gallery.element.classList.remove("exp-lightbox--no-transition"),gallery.imgMorph.classList.remove("exp-lightbox__clone-img-wrapper--is-visible"),gallery.slideshowList.classList.remove("slideshow__content--is-hidden"),gallery.imgMorp

1h.removeAttribute("style"),gallery.imgMorphRect.removeAttribute("style"),gallery.imgMorphRect.removeAttribute("transform"),gallery.imgMorphImg.removeAttribute("href"),gallery.imgMorphImg.removeAttribute("xlink:href"),gallery.galleryItems[gallery.selectedSlide].classList.remove("exp-gallery-item-hidden"),gallery.imgMorph.removeEventListener("transitionend",cb))}),gallery.imgMorph.style.transform="translateX("+finTranslateX+"px) translateY("+finTranslateY+"px) scale("+scale+")",animateRectScale(gallery.imgMorphRect,initScaleX,initScaleY,finScaleX,finScaleY,initWidth,initHeight)}function animateRectScale(rect,scaleX,scaleY,finScaleX,finScaleY,width,height){var currentTime=null,duration=parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--exp-gallery-animation-duration"))*1e3||300,animateScale=function(timestamp){currentTime||(currentTime=timestamp);var progress=timestamp-currentTime;progress>duration&&(progress=duration);var valX=easeOutQuad(progress,scaleX,finScaleX-scaleX,duration),valY=easeOutQuad(progress,scaleY,finScaleY-scaleY,duration);rect.setAttribute("transform","translate("+width/2*(1-valX)+" "+height/2*(1-valY)+") scale("+valX+","+valY+")"),progress<duration&&window.requestAnimationFrame(animateScale)};function easeOutQuad(t,b,c,d){return t/=d,-c*t*(t-2)+b}window.requestAnimationFrame(animateScale)}function keyboardNavigateLightbox(gallery,direction){gallery.element.classList.contains("modal--is-visible")&&(!document.activeElement.closest(".js-exp-lightbox__body")&&document.activeElement.closest(".js-modal")||gallery.slideshowObj&&(direction=="next"?gallery.slideshowObj.showNext():gallery.slideshowObj.showPrev()))}function triggerMenuEvent(gallery){if(!(gallery.menuBar.length<1)){var event=new CustomEvent("update-menu",{detail:{index:gallery.selectedSlide,item:gallery.slides[gallery.selectedSlide]}});gallery.menuBar[0].dispatchEvent(event)}}function isVisible(element){return element.offsetWidth||element.offsetHeight||element.getClientRects().length}window.ExpGallery=ExpGallery;var expGalleries=document.getElementsByClassName("js-exp-lightbox"),animationSupported=window.requestAnimationFrame&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches;if(expGalleries.length>0)for(var expGalleriesArray=[],i=0;i<expGalleries.length;i++){let updateLightbox2=function(direction){for(var i2=0;i2<expGalleriesArray.length;i2++)(function(i3){keyboardNavigateLightbox(expGalleriesArray[i3],direction)})(i2)};var updateLightbox=updateLightbox2;(function(i2){expGalleriesArray.push(new ExpGallery(expGalleries[i2]))})(i),window.addEventListener("keydown",function(event){event.keyCode&&event.keyCode==39||event.key&&event.key.toLowerCase()=="arrowright"?updateLightbox2("next"):(event.keyCode&&event.keyCode==37||event.key&&event.key.toLowerCase()=="arrowleft")&&updateLightbox2("prev")})}})();
2//# sourceMappingURL=/cdn/shop/t/101/assets/expandable-image-gallery.js.map?v=51727975723012439741762431810