/* Keep styling light; inherit theme look & feel */ .decocalc{--gap:1rem; --radius:12px; --border:#e6e6e6; --muted:#6b7280} .decocalc{font:inherit; color:inherit; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:clamp(1rem,2vw,1.25rem); box-shadow:0 1px 2px rgba(0,0,0,.03); max-width:980px; margin:1rem auto} .decocalc h3{margin:.25rem 0 1rem; font-size:1.25rem} .decocalc .row{display:grid; gap:var(--gap)} .decocalc .grid-2{grid-template-columns:repeat(2, minmax(0,1fr))} .decocalc .grid-3{grid-template-columns:repeat(3, minmax(0,1fr))} .decocalc label{display:block; font-weight:600; margin-bottom:.35rem} .decocalc .muted{color:var(--muted); font-weight:400} .decocalc input, .decocalc select{width:100%; padding:.6rem .7rem; border:1px solid var(--border); border-radius:10px; background:#fff; font:inherit} .decocalc .inline{display:flex; gap:.5rem; align-items:center} .decocalc .badge{font-size:.85rem; padding:.2rem .5rem; border:1px solid var(--border); border-radius:999px} .decocalc .areas{display:flex; flex-direction:column; gap:.75rem} .decocalc .area-card{border:1px dashed var(--border); border-radius:12px; padding:.75rem} .decocalc .controls{display:flex; gap:.5rem; flex-wrap:wrap} .decocalc .button, .decocalc button{cursor:pointer; border:1px solid var(--border); background:#f8f8f8; padding:.6rem .9rem; border-radius:999px} .decocalc .button.primary{background:var(--mfn-btn-bg, #111); color:#fff; border-color:var(--mfn-btn-bg, #111)} .decocalc details{border:1px solid var(--border); border-radius:12px; padding:.75rem} .decocalc summary{cursor:pointer; font-weight:600} .decocalc .results{margin-top:1rem; border-top:1px solid var(--border); padding-top:1rem} .decocalc .kpis{display:grid; gap:var(--gap); grid-template-columns:repeat(2, minmax(0,1fr))} .decocalc .kpi{border:1px solid var(--border); border-radius:12px; padding:1rem} .decocalc .kpi h4{margin:0 0 .25rem; font-size:1.1rem} .decocalc .small{font-size:.9rem} .decocalc .right{justify-content:flex-end} @media (max-width:720px){ .decocalc .grid-2,.decocalc .grid-3,.decocalc .kpis{grid-template-columns:1fr} .decocalc .right{justify-content:flex-start} } (function(){ const $ = (sel,ctx=document)=>ctx.querySelector(sel); const $$ = (sel,ctx=document)=>Array.from(ctx.querySelectorAll(sel)); const el = $('#decoramic-tile-calculator'); // Prefill from data-attributes if present const prefill = { tileWmm: parseFloat(el.dataset.tileWidthMm||''), tileHmm: parseFloat(el.dataset.tileLengthMm||''), tilesPerBox: parseFloat(el.dataset.tilesPerBox||''), sqmPerBox: parseFloat(el.dataset.sqmPerBox||'') }; const areasWrap = $('#dc-areas'); const addBtn = $('#dc-add-area'); const unitSel = $('#dc-unit'); const wastageInp = $('#dc-wastage'); const layoutSel = $('#dc-layout'); const tileW = $('#dc-tile-w'), tileH = $('#dc-tile-h'), gap = $('#dc-gap'); const tilesPerBox = $('#dc-tiles-per-box'), sqmPerBox = $('#dc-sqm-per-box'); const adh = $('#dc-adh-kg'), grout = $('#dc-grout-kg'); const calcBtn = $('#dc-calc'), resetBtn = $('#dc-reset'); const kpis = $('#dc-kpis'); const foot = $('#dc-footnote'); // Area row template function areaRow(i){ const row = document.createElement('div'); row.className = 'area-card'; row.innerHTML = ` `; // remove $('.dc-remove',row).addEventListener('click',()=>{ row.remove(); announce('Area removed'); }); return row; } // Add first row on init function addArea(){ areasWrap.appendChild(areaRow($$('.area-card',areasWrap).length+1)); } addBtn.addEventListener('click', addArea); addArea(); // Unit switching function updateUnitBadges(){ const metric = unitSel.value === 'metric'; $('#dc-tile-w-unit').textContent = metric ? 'mm' : 'in'; $('#dc-tile-h-unit').textContent = metric ? 'mm' : 'in'; $('#dc-gap-unit').textContent = metric ? 'mm' : 'in'; $$('.area-card').forEach(card=>{ $('#unit-badge',card).textContent = metric ? 'm / m²' : 'ft / ft²'; $$('input',card).forEach(inp=>{ inp.placeholder = metric ? inp.placeholder : inp.placeholder; }); }); } unitSel.addEventListener('change', updateUnitBadges); updateUnitBadges(); // Prefill if provided if(!Number.isNaN(prefill.tileWmm)) tileW.value = prefill.tileWmm; if(!Number.isNaN(prefill.tileHmm)) tileH.value = prefill.tileHmm; if(!Number.isNaN(prefill.tilesPerBox)) tilesPerBox.value = prefill.tilesPerBox; if(!Number.isNaN(prefill.sqmPerBox)) sqmPerBox.value = prefill.sqmPerBox; // Helpers: unit conversions const toM = (val, metric)=> metric ? parseFloat(val||0) : parseFloat(val||0) * 0.3048; const toMM = (val, metric)=> metric ? parseFloat(val||0) : parseFloat(val||0) * 25.4; const toM2FromLW = (L,W,metric)=>{ const l = toM(L,metric), w = toM(W,metric); return (l>0 && w>0) ? l*w : 0; }; const toM2 = (area, metric)=> metric ? parseFloat(area||0) : parseFloat(area||0) * 0.09290304; // Layout wastage bump (in %) function layoutBump(layout){ switch(layout){ case 'staggered': return 2; case 'diagonal' : return 3; case 'herringbone': return 5; default: return 0; } } function sumAreas(){ const metric = unitSel.value==='metric'; let total = 0; $$('.area-card',areasWrap).forEach(card=>{ const [L,W,A] = $$('input',card); const aLW = toM2FromLW(L.value, W.value, metric); const a = parseFloat(A.value||0); const aDirect = a>0 ? toM2(a, metric) : 0; total += (aDirect>0 ? aDirect : aLW); }); return total; } function tileAreaM2(){ const metric = unitSel.value==='metric'; const w = toMM(tileW.value, metric); const h = toMM(tileH.value, metric); if(w>0 && h>0){ return (w/1000)*(h/1000); // mm -> m } return 0; } function announce(msg){ // Assistive announcement; could be expanded foot.setAttribute('data-msg', msg); } function pushGA4(name, params){ try{ window.dataLayer = window.dataLayer || []; window.dataLayer.push({event: name, ...params}); }catch(e){} } function format(n, dp=2){ if(!Number.isFinite(n)) return '0'; return new Intl.NumberFormat(undefined,{minimumFractionDigits:dp, maximumFractionDigits:dp}).format(n); } function calc(){ const metric = unitSel.value==='metric'; const layout = layoutSel.value; const baseWaste = Math.max(0, Math.min(25, parseFloat(wastageInp.value||0))); const totalWaste = baseWaste + layoutBump(layout); let areaNet = sumAreas(); // m² if(areaNet<=0){ kpis.innerHTML = ``; return; } // Apply wastage const areaWithWaste = areaNet * (1 + totalWaste/100); // Tiles + Boxes const tArea = tileAreaM2(); let tilesNeeded = tArea>0 ? Math.ceil(areaWithWaste / tArea) : 0; let boxesNeeded = 0; const sqmBox = parseFloat(sqmPerBox.value||0); const tPerBox = parseFloat(tilesPerBox.value||0); if(sqmBox>0){ boxesNeeded = Math.ceil(areaWithWaste / sqmBox); }else if(tPerBox>0 && tilesNeeded>0){ boxesNeeded = Math.ceil(tilesNeeded / tPerBox); } // Materials const adhKg = Math.max(0, parseFloat(adh.value||0)); const groutKg = Math.max(0, parseFloat(grout.value||0)); const adhTotal = areaWithWaste * adhKg; const groutTotal = areaWithWaste * groutKg; // Joint hint (purely informational) const joint = toMM(gap.value||0, metric); // KPIs render kpis.innerHTML = ` `; announce('Calculation complete'); pushGA4('tile_calc_submit',{ calc_areas: $$('.area-card').length, area_net_m2: +areaNet.toFixed(2), area_inc_waste_m2: +areaWithWaste.toFixed(2), wastage_percent: totalWaste, unit_system: metric ? 'metric' : 'imperial', tile_area_m2: tArea>0? +tArea.toFixed(4) : 0, tiles_needed: tilesNeeded||0, boxes_needed: boxesNeeded||0 }); } // Events calcBtn.addEventListener('click', calc); resetBtn.addEventListener('click', ()=>{ $$('.area-card').forEach(a=>a.remove()); addArea(); [tileW,tileH,gap,tilesPerBox,sqmPerBox].forEach(i=>i.value=''); wastageInp.value=10; layoutSel.value='straight'; kpis.innerHTML=''; announce('Calculator reset'); }); // Enter-to-calc on inputs $$('#decoramic-tile-calculator input').forEach(inp=>{ inp.addEventListener('keydown', e=>{ if(e.key==='Enter'){ e.preventDefault(); calc(); } }); }); })();