https://namuk.com/cdn/shop/t/119/assets/product-media-grid.js?v=164641067815714333461789544163

1const SCROLL_PASSTHROUGH_THRESHOLD=10;class ProductMediaGrid extends HTMLElement{connectedCallback(){this.scrollContainer=this.querySelector(".product-media-grid__items"),this.productGridItems=this.scrollContainer?.querySelectorAll("[data-product-grid-item]"),this.rows=this.calculateRows(),!(this.rows.length<=1)&&(this.createIndicators(),this.setupObserver(),this.setupScrollPassThrough())}disconnectedCallback(){this.observer?.disconnect(),this.passThroughAbortController?.abort()}isScrollContainerAtBottom(){if(!this.scrollContainer)return!1;const{scrollTop,clientHeight,scrollHeight}=this.scrollContainer;return scrollTop+clientHeight>=scrollHeight-10}setupScrollPassThrough(){if(!this.scrollContainer||this.rows.length<=1)return;this.passThroughAbortController=new AbortController;const{signal}=this.passThroughAbortController;this.scrollContainer.addEventListener("wheel",e=>{!this.isScrollContainerAtBottom()||e.deltaY<=0||(e.preventDefault(),window.scrollBy({top:e.deltaY,behavior:"auto"}))},{passive:!1,signal});let touchStartY=0;this.scrollContainer.addEventListener("touchstart",e=>{touchStartY=e.touches[0].clientY},{passive:!0,signal}),this.scrollContainer.addEventListener("touchmove",e=>{if(!this.isScrollContainerAtBottom())return;const touchY=e.touches[0].clientY,deltaY=touchStartY-touchY;deltaY<=0||(e.preventDefault(),window.scrollBy({top:deltaY,behavior:"auto"}),touchStartY=touchY)},{passive:!1,signal})}calculateRows(){const rows=[],items=[...this.productGridItems];let rowIndex=0,i=0;for(;i<items.length;){const itemsInRow=rowIndex===4?1:2,rowItems=items.slice(i,i+itemsInRow);rowItems.length>0&&rows.push({index:rowIndex,items:rowItems}),i+=itemsInRow,rowIndex++}return rows}createIndicators(){let watcher=this.querySelector("product-media-watcher");watcher||(watcher=document.createElement("product-media-watcher"),this.appendChild(watcher));const container=document.createElement("div");container.className="product-grid-indicators",this.rows.forEach(row=>{const dot=document.createElement("button");dot.setAttribute("type","button"),dot.setAttribute("data-row-index",row.index),dot.setAttribute("aria-label",`Scroll to row ${row.index+1}`),dot.className="product-grid-indicator",container.appendChild(dot)}),watcher.appendChild(container),this.indicatorContainer=container,this.indicators=container.querySelectorAll(".product-grid-indicator")}setupObserver(){this.intersectingRows=new Map;const options={root:this.scrollContainer,rootMargin:"0px",threshold:[0,.25,.5,.75,1]};this.observer=new IntersectionObserver(entries=>{if(entries.forEach(entry=>{const item=entry.target,rowIndex=this.findRowIndexForItem(item);if(rowIndex!==-1){if(!entry.isIntersecting)return this.intersectingRows.delete(rowIndex);this.intersectingRows.set(rowIndex,{ratio:entry.intersectionRatio,boundingClientRect:entry.boundingClientRect,rootBounds:entry.rootBounds})}}),this.intersectingRows.size<=0)return;let maxRatio=0,activeRowIndex=0;this.intersectingRows.forEach((data,rowIndex)=>{data.ratio>maxRatio&&(maxRatio=data.ratio,activeRowIndex=rowIndex)}),this.updateActiveIndicator(activeRowIndex)},options),this.rows.forEach(row=>this.observer.observe(row.items[0]))}findRowIndexForItem(item){for(let i=0;i<this.rows.length;i++)if(this.rows[i].items.includes(item))return i;return-1}updateActiveIndicator(rowIndex){this.indicators.forEach(indicator=>{indicator.classList.remove("active")}),this.indicators[rowIndex]&&this.indicators[rowIndex].classList.add("active")}scrollToRow(rowIndex){const row=this.rows[rowIndex];if(!row||!row.items[0])return console.warn(`Row ${rowIndex} not found`);const targetItem=row.items[0],containerRect=this.scrollContainer.getBoundingClientRect(),targetRect=targetItem.getBoundingClientRect(),scrollTop=this.scrollContainer.scrollTop+(targetRect.top-containerRect.top);this.scrollContainer.scrollTo({top:scrollTop,behavior:"smooth"})}}class ProductMediaWatcher extends HTMLElement{connectedCallback(){this.grid=this.closest("product-media-grid"),this.setupEventListeners()}disconnectedCallback(){this.abortController?.abort()}

1setupEventListeners(){if(!this.grid?.scrollContainer)return;this.abortController=new AbortController;const{signal}=this.abortController;this.addEventListener("click",({target})=>{const button=target.closest(".product-grid-indicator");if(!button)return;const rowIndex=parseInt(button.getAttribute("data-row-index"),10);this.grid?.scrollToRow(rowIndex)},{signal}),this.grid?.scrollContainer?.addEventListener("scroll",()=>{},{signal})}}window.ProductMediaGrid=ProductMediaGrid,window.ProductMediaWatcher=ProductMediaWatcher,customElements.define("product-media-grid",ProductMediaGrid),customElements.define("product-media-watcher",ProductMediaWatcher);
2//# sourceMappingURL=/cdn/shop/t/119/assets/product-media-grid.js.map?v=164641067815714333461789544163