1class d extends HTMLElement{constructor(){super(),this.clicked=!1}connectedCallback(){this.compareSecondaryImage=this.querySelector("[data-js-compare-overlay]"),this.slider=this.querySelector("[data-js-compare-slider]"),this.primaryImage=this.querySelector("[data-js-primary-image]"),!(!this.compareSecondaryImage||!this.slider)&&(this.initialize(),this.addEventListeners())}initialize(){this.compareSecondaryImage&&(this.compareSecondaryImage.style.width="50%")}addEventListeners(){this.slider&&(this.slider.addEventListener("mousedown",this.startSlide.bind(this)),this.slider.addEventListener("touchstart",this.startSlide.bind(this))),window.addEventListener("mouseup",this.endSlide.bind(this)),window.addEventListener("touchend",this.endSlide.bind(this)),window.addEventListener("mousemove",this.slideMove.bind(this)),window.addEventListener("touchmove",this.slideMove.bind(this))}startSlide(t){t.preventDefault(),this.clicked=!0}endSlide(){this.clicked=!1}slideMove(t){if(!this.clicked)return;const i=this.getCursorPos(t,this.primaryImage.offsetWidth),s=this.slider.offsetWidth/this.primaryImage.offsetWidth*50,e=Math.max(s,Math.min(i,100-s));this.compareSecondaryImage.style.width=`${e}%`,this.slider.style.left=`${e-s}%`}getCursorPos(t,i){const s=this.primaryImage.getBoundingClientRect();let e=0;return t instanceof MouseEvent?e=t.clientX-s.left:t instanceof TouchEvent&&t.touches.length>0&&(e=t.touches[0].clientX-s.left),e/i*100}}class o extends d{constructor(){super()}connectedCallback(){super.connectedCallback(),this.primaryColorContainer=this.querySelector("[data-js-primary-color] "),this.secondaryColorContainer=this.querySelector("[data-js-secondary-color]"),this.swatchButtons=this.querySelectorAll("[data-js-swatch-btn]"),this.heading=this.querySelector("[data-js-heading]"),this.text=this.querySelector("[data-js-text]"),this.updateTextContent=this.updateTextContent.bind(this),this.addSwatchEventListeners(),this.addFormChangeListener()}addSwatchEventListeners(){this.swatchButtons.forEach(t=>{t.addEventListener("click",()=>{this.updateImageAndColor(t,this.compareSecondaryImage,this.secondaryColorContainer),this.resetSwatchButtonStyles(),t.setAttribute("data-active","true"),t.parentElement.classList.add("!border-off-black")})})}addFormChangeListener(){const t=this.querySelector("[data-js-slider-product-id]")?.getAttribute("data-js-slider-product-id");if(t){const i=document.querySelector(`#product_form_${t}`);i?.addEventListener("change",()=>{const s=i.querySelector('[name="id"]')?.value,e=Array.from(this.swatchButtons).find(a=>a.getAttribute("data-variant-id")===s),r=Array.from(this.swatchButtons).find(a=>a.getAttribute("data-variant-id")!==s);e&&(r&&r.click(),this.swatchButtons.forEach(a=>{a?.parentElement?.classList.remove("!hidden")}),e?.parentElement?.classList.add("!hidden"),this.updateImageAndColor(e,this.primaryImage,this.primaryColorContainer),this.updateTextContent(e))})}}updateImageAndColor(t,i,s){const e=t.getAttribute("data-image-src")||"",r=t.getAttribute("data-name")||"";i.style.backgroundImage=`url(${e})`,s.textContent=r}updateTextContent(t){const i=t.getAttribute("data-heading")||"",s=t.getAttribute("data-text")||"",e=t.getAttribute("data-text-alignment")||"";this.heading.textContent=i,this.text.classList.remove("lg:text-left","lg:text-center","lg:text-right"),this.text.classList.add(e),this.text.innerHTML=s}resetSwatchButtonStyles(){this.swatchButtons.forEach(t=>{const i=t.parentElement;t.setAttribute("data-active","false"),i.classList.remove("!border-off-black")})}}customElements.get("product-card")||customElements.define("patina-slider",o);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.