' : ''; const swatchDiv = document.createElement('div'); swatchDiv.className = `swatch-item ${isSelected ? 'selected' : ''}`; swatchDiv.dataset.id = swatch.id; swatchDiv.innerHTML = `

${tagHTML}

${swatch.name}

`; swatchDiv.addEventListener('click', () => toggleSelection(swatch)); swatchDiv.addEventListener('mouseenter', () => { popup.show(swatchDiv, swatch); }); swatchDiv.addEventListener('mouseleave', () => { popup.hide(); }); groupGrid.appendChild(swatchDiv); }); groupWrapper.appendChild(groupGrid); gridContainer.appendChild(groupWrapper); }); } function toggleSelection(swatch) { const index = selectedSwatches.findIndex(s => s.id === swatch.id); if (index > -1) { selectedSwatches.splice(index, 1); swatch.checkbox.checked = false; swatch.checkbox.dispatchEvent(new Event('change', { bubbles: true })); } else { if (selectedSwatches.length < MAX_SELECTIONS) { selectedSwatches.push(swatch); swatch.checkbox.checked = true; swatch.checkbox.dispatchEvent(new Event('change', { bubbles: true })); } else { window.parent.postMessage({ type: 'MAX_SELECTIONS_REACHED', payload: { message: `You can only select up to ${MAX_SELECTIONS} samples.` } }, '*'); return; } } document.querySelectorAll('.swatch-item').forEach(item => { const id = parseInt(item.dataset.id); if (selectedSwatches.some(s => s.id === id)) { item.classList.add('selected'); } else { item.classList.remove('selected'); } }); broadcastSwatches(); const hiddenInput = document.querySelector("input[name='Selected swatches']"); if (hiddenInput) { hiddenInput.value = selectedSwatches.map(sw => sw.name).join(", "); } } // ---------------------------------------------------- // Auxiliary Functions // ---------------------------------------------------- function broadcastSwatches() { const safePayload = selectedSwatches.map(swatch => { return { id: swatch.id, name: swatch.name, imgSrc: swatch.imgSrc, color: swatch.color, tag: swatch.tag }; }); window.parent.postMessage({ type: "SWATCH_UPDATE", payload: safePayload }, '*'); } function setupFilters() { const checkboxes = document.querySelectorAll('.filter-cb'); const clearBtn = document.getElementById('clear-filters'); const filterToggleBtn = document.getElementById('filter-toggle-btn'); const sidebar = document.querySelector('.sidebar'); if (filterToggleBtn && sidebar) { filterToggleBtn.addEventListener('click', e => { e.preventDefault(); sidebar.classList.toggle('open'); filterToggleBtn.textContent = sidebar.classList.contains('open') ? 'Hide Filters' : 'Show Filters'; }); } checkboxes.forEach(cb => { cb.addEventListener('change', () => { const checkedColors = Array.from(checkboxes) .filter(i => i.checked) .map(i => i.value); if (checkedColors.length === 0) { renderSwatches(swatchesData); } else { const filtered = swatchesData.filter(s => checkedColors.includes(s.color)); renderSwatches(filtered); } }); }); if (clearBtn) { clearBtn.addEventListener('click', e => { e.preventDefault(); checkboxes.forEach(cb => cb.checked = false); renderSwatches(swatchesData); }); } } function changeToPostCode() { const input = document.querySelector("input[name='Zip code']"); if (input) { const label = input.previousElementSibling; input.name = "Post code"; if (label) label.textContent = "Post code"; } } // ---------------------------------------------------- // Event Listeners // ---------------------------------------------------- window.addEventListener('message', (event) => { if (event.data && event.data.type === 'REMOVE_SWATCH') { const swatchToRemove = event.data.payload; const fullSwatch = swatchesData.find(s => s.name === swatchToRemove.name); if (fullSwatch) { toggleSelection(fullSwatch); } } }); document.addEventListener("DOMContentLoaded", () => { init(); const form = document.querySelector("form"); const submitBtn = document.querySelector("button[type='submit']"); if (!form || !submitBtn) return; submitBtn.addEventListener("click", (e) => { const formData = new FormData(form); const payload = {}; formData.forEach((value, key) => { if (payload[key]) { if (Array.isArray(payload[key])) { payload[key].push(value); } else { payload[key] = [payload[key], value]; } } else { payload[key] = value; } }); console.log("Form payload:", payload); window.parent.postMessage({ type: "form_events_ok", payload }, "*"); }); });

Footstools