https://earthheir.com/cdn/shop/t/51/assets/comparison-table-component.js?v=76363157117044982441783779695

1const CSS_CLASSES={TABLE:"comparison-table",WRAPPER:"comparison-table-wrapper",STICKY_COLUMN:"comparison-table__sticky-column",SCROLLABLE_CONTENT:"comparison-table__scrollable-content",CRITERIA_HEADER:"comparison-table__criteria-header",PRODUCTS_HEADER:"comparison-table__products-header",CRITERIA:"comparison-table__criteria",DATA_ROW:"comparison-table__data-row",PRODUCT:"comparison-table__product",CELL:"comparison-table__cell",PRODUCT_IMAGE:"comparison-table__product-image",PRODUCT_IMG:"comparison-table__product-img",PRODUCT_TITLE:"comparison-table__product-title",PRODUCT_DESCRIPTION:"comparison-table__product-description",PRODUCT_BUTTON:"comparison-table__product-button",PRODUCT_ICON:"comparison-table__product-icon",PRODUCT_TEXT:"comparison-table__product-text",CRITERIA_ICON:"comparison-table__criteria-icon",CRITERIA_NAME:"comparison-table__criteria-name",WARNING_ICON:"comparison-table__warning-icon",CUSTOM_ICON:"comparison-table__custom-icon",INLINE_CRITERIA:"comparison-table__inline-criteria",AUTO_FIT:"comparison-table--auto-fit",SCROLL:"comparison-table--scroll",WITH_CRITERIA:"comparison-table--with-criteria",INLINE_CRITERIA_MODIFIER:"comparison-table--inline-criteria",NO_SHADOW:"comparison-table--no-shadow",PLACEHOLDER:"comparison-table__product--placeholder"};class ComparisonTableComponent extends HTMLElement{constructor(){super(),this.resizeTimeout=null,this.syncTimeout=null,this.observer=null,this.isInitialized=!1}connectedCallback(){this.init()}disconnectedCallback(){this.cleanup()}init(){if(this.isInitialized)return;const table=this.querySelector(`.${CSS_CLASSES.TABLE}`);table&&(this.setupTable(table),this.setupResizeListener(),this.setupMutationObserver(),this.isInitialized=!0)}setupTable(table){if(!table.closest(`.${CSS_CLASSES.WRAPPER}`))return;const productColumns=table.querySelectorAll(`.${CSS_CLASSES.PRODUCT}`);if(productColumns.length===0)return;table.dataset.productCount=productColumns.length,this.updateTableMode(table),table.querySelectorAll("img").forEach(img=>{img.complete||(img.addEventListener("load",()=>this.syncHeights(table)),img.addEventListener("error",()=>this.syncHeights(table)))})}setupResizeListener(){const handleResize=()=>{clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout(()=>{const table=this.querySelector(`.${CSS_CLASSES.TABLE}`);table&&this.updateTableMode(table)},100)};window.addEventListener("resize",handleResize),this.resizeHandler=handleResize}setupMutationObserver(){this.observer=new MutationObserver(mutations=>{let shouldUpdate=!1;mutations.forEach(mutation=>{if(mutation.type==="childList"){const addedNodes=Array.from(mutation.addedNodes),removedNodes=Array.from(mutation.removedNodes);(addedNodes.some(node=>node.nodeType===Node.ELEMENT_NODE&&(node.classList?.contains(CSS_CLASSES.PRODUCT)||node.classList?.contains(CSS_CLASSES.DATA_ROW)||node.querySelector?.(`.${CSS_CLASSES.PRODUCT}`)||node.querySelector?.(`.${CSS_CLASSES.DATA_ROW}`)))||removedNodes.some(node=>node.nodeType===Node.ELEMENT_NODE&&(node.classList?.contains(CSS_CLASSES.PRODUCT)||node.classList?.contains(CSS_CLASSES.DATA_ROW)||node.querySelector?.(`.${CSS_CLASSES.PRODUCT}`)||node.querySelector?.(`.${CSS_CLASSES.DATA_ROW}`))))&&(shouldUpdate=!0)}}),shouldUpdate&&(clearTimeout(this.syncTimeout),this.syncTimeout=setTimeout(()=>{const table=this.querySelector(`.${CSS_CLASSES.TABLE}`);table&&this.updateTableMode(table)},150))}),this.observer.observe(this,{childList:!0,subtree:!0})}updateTableMode(table){const wrapper=table.closest(`.${CSS_CLASSES.WRAPPER}`);if(!wrapper)return;const productCount=parseInt(table.dataset.productCount)||0;if(productCount===0)return;const stickyColumn=table.querySelector(`.${CSS_CLASSES.STICKY_COLUMN}`),scrollableContent=table.querySelector(`.${CSS_CLASSES.SCROLLABLE_CONTENT}`);if(!scrollableContent)return;const wrapperWidth=wrapper.offsetWidth;let availableWidth;if(stickyColumn){const stickyWidth=stickyColumn.offsetWidth;availableWidth=wrapperWidth-stickyWidth-2}else availableWidth=wrapperWidth;let columnWidth;window.innerWidth<=480?columnWidth=120:window.innerWidth<=768?columnWidth=150:columnWidth=200;const requiredWidth=productCount*columnWidth,minColumnWidth=window.innerWidth<=480?100:window.innerWidth<=768?120:150,shouldAutoFit=requiredWidth<=availableWidth&&availableWidth/productCount>=minColumnWidth;

1if(table.classList.remove(CSS_CLASSES.AUTO_FIT,CSS_CLASSES.SCROLL),shouldAutoFit){table.classList.add(CSS_CLASSES.AUTO_FIT),scrollableContent.style.overflowX="visible";const equalColumnWidth=Math.ceil(availableWidth/productCount),productColumns=table.querySelectorAll(`.${CSS_CLASSES.PRODUCT}`),dataCells=table.querySelectorAll(`.${CSS_CLASSES.CELL}`);productColumns.forEach(column=>{column.style.minWidth=`${equalColumnWidth}px`,column.style.width=`${equalColumnWidth}px`}),dataCells.forEach(cell=>{cell.style.minWidth=`${equalColumnWidth}px`,cell.style.width=`${equalColumnWidth}px`})}else{table.classList.add(CSS_CLASSES.SCROLL),scrollableContent.style.overflowX="auto";const productColumns=table.querySelectorAll(`.${CSS_CLASSES.PRODUCT}`),dataCells=table.querySelectorAll(`.${CSS_CLASSES.CELL}`);productColumns.forEach(column=>{column.style.minWidth="",column.style.width=""}),dataCells.forEach(cell=>{cell.style.minWidth="",cell.style.width=""})}this.syncHeights(table)}syncHeights(table){const criteriaHeader=table.querySelector(`.${CSS_CLASSES.CRITERIA_HEADER}`),productsHeader=table.querySelector(`.${CSS_CLASSES.PRODUCTS_HEADER}`),criteriaRows=table.querySelectorAll(`.${CSS_CLASSES.CRITERIA}`),dataRows=table.querySelectorAll(`.${CSS_CLASSES.DATA_ROW}`);if(!this.checkIfHeightsNeedSync(criteriaHeader,productsHeader,criteriaRows,dataRows))return;const elements=[criteriaHeader,productsHeader,...criteriaRows,...dataRows].filter(Boolean);elements.forEach(el=>{el.style.transition="height 0.2s ease-out"}),requestAnimationFrame(()=>{if(criteriaHeader&&productsHeader){const headerHeight=Math.max(criteriaHeader.offsetHeight,productsHeader.offsetHeight);criteriaHeader.style.height=headerHeight+"px",productsHeader.style.height=headerHeight+"px"}requestAnimationFrame(()=>{const rowCount=Math.min(criteriaRows.length,dataRows.length);for(let i=0;i<rowCount;i++){const crit=criteriaRows[i],row=dataRows[i],maxH=Math.max(crit.offsetHeight,row.offsetHeight);crit.style.height=maxH+"px",row.style.height=maxH+"px"}setTimeout(()=>{elements.forEach(el=>{el.style.transition=""})},200)})})}checkIfHeightsNeedSync(criteriaHeader,productsHeader,criteriaRows,dataRows){if(criteriaHeader&&productsHeader&&Math.abs(criteriaHeader.offsetHeight-productsHeader.offsetHeight)>5)return!0;const rowCount=Math.min(criteriaRows.length,dataRows.length);for(let i=0;i<rowCount;i++){const crit=criteriaRows[i],row=dataRows[i];if(Math.abs(crit.offsetHeight-row.offsetHeight)>5)return!0}return!1}cleanup(){this.resizeHandler&&window.removeEventListener("resize",this.resizeHandler),this.observer&&this.observer.disconnect(),this.resizeTimeout&&clearTimeout(this.resizeTimeout),this.syncTimeout&&clearTimeout(this.syncTimeout),this.isInitialized=!1}refresh(){const table=this.querySelector(`.${CSS_CLASSES.TABLE}`);table&&this.setupTable(table)}updateProductCount(){const table=this.querySelector(`.${CSS_CLASSES.TABLE}`);if(table){const productColumns=table.querySelectorAll(`.${CSS_CLASSES.PRODUCT}`);table.dataset.productCount=productColumns.length,this.updateTableMode(table)}}handleContentChange(){this.refresh()}}customElements.get("comparison-table-component")||customElements.define("comparison-table-component",ComparisonTableComponent);
2//# sourceMappingURL=/cdn/shop/t/51/assets/comparison-table-component.js.map?v=76363157117044982441783779695