https://kingsloot.com/cdn/shop/t/499/assets/customize-wallet.js?v=5244836848576789141785441252

1class CustomizeModal extends HTMLElement{constructor(){super(),this.cart=document.querySelector("cart-notification")||document.querySelector("cart-drawer"),this.canvas=this.querySelector("#walletCanvas"),this.ctx=this.canvas.getContext("2d"),this.engravingInput=this.querySelector("#engraving-input"),this.fontSelect=this.querySelectorAll("#font-select .item"),this.walletImage=new Image;let customImage=document.querySelector(".image-product-customize-js").src,index=customImage.indexOf("&width"),updateImage=customImage.slice(0,index);this.walletImage.src=`${updateImage}&width=1000`,this.offsetX=Number(document.querySelector(".text_wrapper").dataset.firstposition),this.offsetY=Number(document.querySelector(".text_wrapper").dataset.secondposition),this.angleDegree=document.querySelector(".text_wrapper").dataset.rotate,this.walletImage.onload=()=>{this.canvas.width=this.walletImage.width,this.canvas.height=this.walletImage.height,this.drawCanvas()},this.engravingInput.addEventListener("input",()=>this.drawCanvas()),this.fontSelect.forEach(element=>{element.addEventListener("click",this.changeSelectedFont.bind(this))})}connectedCallback(){if(this._wired)return;this._wired=!0,this.querySelector(".open-content-js").addEventListener("click",this.openCloseDropFont.bind(this)),this.querySelector(".add-to-cart-js").addEventListener("click",this.addToCart.bind(this));const openModalBtn=document.querySelector(".js-customize-btn");if(!openModalBtn)return;openModalBtn.addEventListener("click",this.openModal.bind(this));const closeEl=this.querySelector(".icon-close");closeEl.addEventListener("click",this.closeModal.bind(this)),closeEl.addEventListener("touchend",e=>{e.preventDefault(),e.stopPropagation(),this.closeModal(e)},{passive:!1})}async addToCart(e){if(!CustomizeModal._atcInFlight){CustomizeModal._atcInFlight=!0;try{const parent=document.querySelector("product-info"),customizeWalletModal=document.querySelector(".js-customize-modal"),modalContent=document.querySelector(".modal-content-js"),idVariant=parseInt(parent.querySelector('input[name="id"]').value),idVariantFont=modalContent.dataset.variantFont,idProduct=parseInt(modalContent.dataset.productid,10),textCuztomize=document.querySelector("#engraving-input").value,fontSelected=document.querySelector(".font-seleted").dataset.font,title=document.querySelector(".customize_title").textContent,price=modalContent.dataset.variantprice,hasEngravingSaleTag=(modalContent.dataset.tags||"").split(",").map(t=>t.trim()).includes("engraving-sale"),eligibleIds=[3818591879256,7310259060927,7521020838079,7877450891455,7928799985855],engravingQty=[8214977806527,8244589035711].includes(idProduct)?2:1,items={items:[{id:idVariantFont,quantity:engravingQty},{id:idVariant,quantity:1,properties:{engrave:"true",Engraving:"Yes",Font:fontSelected,Text:textCuztomize,_engraving_price:hasEngravingSaleTag?"Free":price,_id_font:idVariantFont,_is_main_custom:"true"}}],sections:this.cart.getSectionsToRender().map(section=>section.id)},response=await this.cart.addToCartOnly(items,idVariant);publish(PUB_SUB_EVENTS.cartUpdate,{source:"product-form",productVariantId:idVariant,cartData:response}),this.cart.renderContents(response),this.submitButton?.classList.remove("loading"),this.cart&&this.cart.classList.contains("is-empty")&&this.cart.classList.remove("is-empty"),this.error||this.submitButton?.removeAttribute("aria-disabled"),customizeWalletModal.dataset.active=="true"&&(customizeWalletModal.dataset.active="false")}finally{CustomizeModal._atcInFlight=!1}}}drawCanvas(){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.drawImage(this.walletImage,0,0,this.canvas.width,this.canvas.height);let fontSelect=document.querySelector(".font-seleted").dataset.font,fontSize=document.querySelector(".font-seleted").dataset.fontsize,montSize=fontSize,corSize=fontSize,petitSize=fontSize;this.ctx.font=`${montSize}px ${fontSelect}`,fontSelect=="Cormorant Garamond"&&(this.ctx.font=`${corSize}px ${fontSelect}`),fontSelect=="Petit Formal Script"&&(this.ctx.font=`${petitSize}px ${fontSelect}`);const baseColor=document.querySelector(".text_wrapper").dataset.color;this.ctx.textAlign="center",this.ctx.textBaseline="middle";const text=this.engravingInput.value,x=this.canvas.width/2+this.offsetX,y=this.canvas.height*.75+this.offsetY,angleInDegrees=this.angleDegree,title=document.querySelector(".customize_title")?.textContent?.toLowerCase()||"",isRing=title.includes("ring")||title.includes("band");if(this.ctx.save(),this.ctx.translate(x,y),this.ctx.rotate(angleInDegrees*Math.PI/180),isRing&&text.length>0){const radius=parseFloat(fontSize)*10,chars=text.split("");let currentWidth=-this.ctx.measureText(text).width/2;const curveStrength=-490,k=.5/radius;for(let i=0;i<chars.length;

1i++){const char=chars[i],charWidth=this.ctx.measureText(char).width,angle=currentWidth/radius*.5,yCurve=angle*angle*curveStrength,slope=2*curveStrength*k*k*currentWidth,rot=Math.atan(slope);this.ctx.save(),this.ctx.translate(currentWidth+charWidth/2,yCurve),this.ctx.rotate(rot),this.ctx.fillStyle="rgba(0,0,0,0.45)",this.ctx.shadowColor="rgba(0,0,0,0.4)",this.ctx.shadowBlur=2,this.ctx.shadowOffsetX=.5,this.ctx.shadowOffsetY=.5,this.ctx.fillText(char,0,0),this.ctx.restore(),this.ctx.save(),this.ctx.translate(currentWidth+charWidth/2,yCurve),this.ctx.rotate(rot),this.ctx.globalCompositeOperation="lighter",this.ctx.fillStyle="rgba(255,255,255,0.6)",this.ctx.shadowColor="transparent",this.ctx.translate(-.4,-.6),this.ctx.fillText(char,0,0),this.ctx.restore(),this.ctx.save(),this.ctx.translate(currentWidth+charWidth/2,yCurve),this.ctx.rotate(rot),this.ctx.globalCompositeOperation="multiply",this.ctx.fillStyle=baseColor,this.ctx.fillText(char,0,0),this.ctx.restore(),currentWidth+=charWidth}this.ctx.globalCompositeOperation="source-over",this.ctx.shadowColor="transparent"}else this.ctx.fillStyle=baseColor,this.ctx.fillText(text,0,0);this.ctx.restore(),this.validateButton(text)}validateSizeChangeText(){const containerTextCustom=document.querySelector(".text-custom-js"),contentMax=document.querySelector(".customize-text");if(containerTextCustom.offsetWidth>contentMax.offsetWidth){const sizeAprox=(containerTextCustom.offsetWidth-contentMax.offsetWidth)/10}else if(containerTextCustom.offsetWidth!==0){const sizeAprox=(contentMax.offsetWidth-containerTextCustom.offsetWidth)/10}containerTextCustom.offsetWidth===0&&setTimeout(()=>{if(containerTextCustom.offsetWidth>contentMax.offsetWidth){const sizeAprox=(containerTextCustom.offsetWidth-contentMax.offsetWidth)/10;this.countFont=this.countFont-sizeAprox}},200)}validateButton(text){const button=document.querySelector(".add-to-cart-js"),button2=document.querySelector(".btn-continue-modal");if(text.length>0){button.removeAttribute("disabled"),button2?.removeAttribute("disabled");return}button.setAttribute("disabled",!0),button2?.setAttribute("disabled",!0)}closeModal(e){const modal=document.querySelector(".js-customize-modal");modal&&(document.querySelector(".sticky-add-cart")?.classList.remove("hidden"),modal.dataset.active="false")}async openModal(e){document.querySelector(".js-customize-modal").dataset.active="true",document.querySelector(".sticky-add-cart").classList.add("hidden"),this.renderProducModal()}stringToHTML(htmlString){const div=document.createElement("div");return div.innerHTML=htmlString,div}parseCurrency(value){const match=value.match(/^([€$])\s*([\d,]+)$/);if(match){const symbol=match[1],numericValue=parseFloat(match[2].replace(",",""));return{symbol,value:numericValue}}return null}getObjectImage(titleImageCustom){const arrayMedia=JSON.parse(document.querySelector(".modal-content-js").dataset.images);let resultImage=arrayMedia.find(element=>element.alt===titleImageCustom);if(!resultImage){const nameAlternative=titleImageCustom.split("/")[0].concat("Custom");resultImage=arrayMedia.find(element=>element.alt===nameAlternative.trim())}return resultImage?resultImage.preview_image.src:arrayMedia[0].preview_image.src}sumValues({priceProduct,priceFont}){const parsedValue1=this.parseCurrency(priceProduct),parsedValue2=this.parseCurrency(priceFont),priceSum=parsedValue1.value+parsedValue2.value;return`${parsedValue1.symbol}${priceSum.toFixed(2)}`}renderProducModal(){const parent=document.querySelector("product-info"),selectVariants=parent.querySelectorAll(".option-selected-js"),titleVariant=Array.from(selectVariants).filter(el=>!el.classList.contains("hd-Size")).map(el=>el.textContent.trim()).join(" / ");console.log(titleVariant);const titleProduct=document.querySelector(".c-product__title .title-product-custom").textContent,priceProduct=parent.querySelector(".price-current").textContent.trim().replace(/\n/g,""),titleImageCustom=titleVariant.concat(" Custom").trim().replace(/\s+/g," "),priceFont=document.querySelector(".modal-content-js").dataset.variantprice.trim().replace(/\n/g,""),totalPrice=this.sumValues({priceProduct,priceFont}),totalPriceTwo=priceProduct,imageUrl=this.getObjectImage(titleImageCustom);console.log(imageUrl);const listItemsEngraving=document.querySelectorAll(".swiper-main-media .swiper-wrapper li"),visibleItems=Array.from(listItemsEngraving).filter(li=>li.style.display!=="none");let urlPosition3=null,urlPosition6=null;const getImgSrc=li=>{if(!li)return null;const img=li.querySelector("img, picture img");if(img?.currentSrc)return img.currentSrc;if(img?.src)return img.src;const srcset=li.querySelector("source[srcset]")?.getAttribute("srcset");return srcset?srcset.split(",")[0].trim().split(" ")[0]:null};if(Array.isArray(visibleItems)?visibleItems.length>=3:visibleItems?.length>=3){urlPosition3=getImgSrc(visibleItems[2]);const firstImageCarousel=document.querySelector(".media-one-image");firstImageCarousel&&urlPosition3&&(firstImageCarousel.src=urlPosition3)}(Array.isArray(visibleItems)?visibleItems.length>=6:visibleItems?.length>=6)&&(urlPosition6=getImgSrc(visibleItems[5])),!urlPosition6&&(Array.isArray(visibleItems)?visibleItems.length>=1:visibleItems?.length>=1)&&(urlPosition6=getImgSrc(visibleItems[0]));const twoImageCarousel=document.querySelector(".media-two-image");twoImageCarousel&&urlPosition6&&(twoImageCarousel.src=urlPosition6);let scale=1;const zoomStep=.5,maxScale=2,minScale=1,zoomInButton=document.getElementById("zoomIn"),zoomOutButton=document.getElementById("zoomOut"),zoomableImages=document.querySelectorAll(".zoomable");document.querySelector(".btn-back-custom").addEventListener("click",()=>{zoomOutButton.click()}),zoomInButton.addEventListener("click",()=>{scale<maxScale&&(scale+=zoomStep,updateZoom()),zoomInButton.style.display="none",zoomOutButton.style.display="block",document.querySelector(".swiper-images-engravig .swiper-button-prev").style.display="none",document.querySelector(".swiper-images-engravig .swiper-button-next").style.display="none",document.querySelector(".swiper-images-engravig .swiper-pagination").style.display="none",document.querySelector(".btn-back-custom").style.display="block"}),zoomOutButton.addEventListener("click",()=>{scale>minScale&&(scale-=zoomStep,updateZoom()),zoomInButton.style.display="block",zoomOutButton.style.display="none",document.querySelector(".swiper-images-engravig .swiper-button-prev").style.display="flex",document.querySelector(".swiper-images-engravig .swiper-button-next").style.display="flex",document.querySelector(".swiper-images-engravig .swiper-pagination").style.display="block",document.querySelector(".btn-back-custom").style.display="none"});

1function updateZoom(){zoomableImages.forEach(image=>{scale===1?(image.style.transform="scale(1)",image.classList.remove("img-zoom")):(image.style.transform=`scale(${scale})`,image.classList.add("img-zoom"))})}this.paintingModal({titleProduct,imageUrl,totalPrice,totalPriceTwo});const swiperEngtaving=new Swiper(".swiper-images-engravig",{loop:!1,delay:1,effect:"fade",fadeEffect:{crossFade:!0},pagination:{el:".swiper-pagination",clickable:!0},navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"},on:{slideChange:function(){zoomOutButton.click()}}})}paintingModal({titleProduct,imageUrl,totalPrice,totalPriceTwo}){const containerImage=document.querySelector(".image-product-customize-js"),containerTitle=document.querySelector(".customize_title"),containerPrice=document.querySelector(".price-customize-js"),containerPriceTwo=document.querySelector(".price-customize-js-two");containerImage.setAttribute("src",imageUrl),containerTitle.textContent=titleProduct,containerPriceTwo&&(containerPriceTwo.textContent=totalPriceTwo),containerPrice&&(containerPrice.textContent=totalPrice);let customImage=document.querySelector(".image-product-customize-js").src,index=customImage.indexOf("&width"),updateImage=customImage.slice(0,index);this.walletImage.src=`${updateImage}&width=1000`,this.offsetX=Number(document.querySelector(".text_wrapper").dataset.firstposition),this.offsetY=Number(document.querySelector(".text_wrapper").dataset.secondposition),this.angleDegree=document.querySelector(".text_wrapper").dataset.rotate,this.canvas.width=this.walletImage.width,this.canvas.height=this.walletImage.height,this.drawCanvas()}openCloseDropFont(e){const parent=e.target.closest(".open-content-js");parent.dataset.active=parent.dataset.active!=="true"}changeSelectedFont(e){const containerTextCustom=document.querySelector("#engraving-input"),selected=document.querySelector(".font-seleted"),classFont=e.target.dataset.class,dataFont=e.target.dataset.font;selected.textContent=e.target.textContent,selected.setAttribute("class",`${classFont} font-seleted`),selected.setAttribute("data-selected",classFont),selected.setAttribute("data-font",dataFont),this.drawCanvas()}}customElements.define("customize-wallet",CustomizeModal),document.addEventListener("DOMContentLoaded",function(){const select=document.getElementById("size-1-select"),btn=document.querySelector(".js-customize-btn");if(!select||!btn)return;let textNode=null;if(btn.childNodes.forEach(function(n){n.nodeType===3&&n.textContent.trim().length&&(textNode=n)}),!textNode)return;const originalText=textNode.textContent.trim();function updateBtn(){(select.value||"").trim()?(textNode.textContent=" "+originalText+" ",btn.style.pointerEvents="",btn.style.opacity=""):(textNode.textContent=" Select A Size To Engrave ",btn.style.pointerEvents="none",btn.style.opacity="0.5")}updateBtn(),select.addEventListener("change",updateBtn),btn.addEventListener("click",function(e){select.value||e.preventDefault()})});
2//# sourceMappingURL=/cdn/shop/t/499/assets/customize-wallet.js.map?v=5244836848576789141785441252