// ================================================================ // Specialmål madras – Hulk Pro Advanced JS // Indsæt denne kode i: // Form Integration → Advanced → Advanced JS // ================================================================ console.log('Hulk JS kører'); console.log(document.getElementById('form_input_8')); (function () { // ── Hulk felt ID'er ── var FIELD_LAENGDE = 'form_input_8'; var FIELD_BREDDE = 'form_input_9'; var FIELD_TYKKELSE = 'form_input_12'; var FIELD_STOF = 'form_input_15'; var FIELD_NAVN = 'form_input_0'; var FIELD_EMAIL = 'form_input_2'; var DROPZONE_ID = 'file-dropzone-18'; var notches = { tl: false, tr: false, bl: false, br: false }; var notchLabels = { tl: 'Venstre forhjørne', tr: 'Højre forhjørne', bl: 'Venstre baghjørne', br: 'Højre baghjørne' }; // ── Hent feltværdier ── function get(id) { var el = document.getElementById(id); return el ? el.value : ''; } function vals() { return { L: parseFloat(get(FIELD_LAENGDE)) || 0, W: parseFloat(get(FIELD_BREDDE)) || 0, T: get(FIELD_TYKKELSE), stof: get(FIELD_STOF), NW: parseFloat(get('mc-nw')) || 10, ND: parseFloat(get('mc-nd')) || 10, navn: get(FIELD_NAVN), email: get(FIELD_EMAIL), }; } function activeList() { return Object.entries(notches) .filter(function(e) { return e[1]; }) .map(function(e) { return notchLabels[e[0]]; }); } // ── Injicér skitse-UI ved siden af formularen ── function injectUI() { if (document.getElementById('mc-skitse-panel')) return; // Find formularen og wrap den i et grid var formEl = document.querySelector('.pxFormGenerator'); if (!formEl) return; // Opret wrapper grid var wrapper = document.createElement('div'); wrapper.id = 'mc-outer-grid'; wrapper.style.cssText = [ 'display:grid', 'grid-template-columns:1fr 380px', 'gap:2rem', 'align-items:start', ].join(';'); // Sæt formularen ind i wrapper formEl.parentNode.insertBefore(wrapper, formEl); wrapper.appendChild(formEl); // Byg skitse-panel var panel = document.createElement('div'); panel.id = 'mc-skitse-panel'; panel.style.cssText = 'position:sticky;top:2rem;'; panel.innerHTML = [ '', '

Din skitse

', '

Opdateres automatisk når du udfylder mål

', '

Indhak i hjørner (valgfrit)

', '

', '', '', '', '', '

', '

', 'Indhak bredde (cm)', '', 'Indhak dybde (cm)', '', '

Samme mål gælder alle valgte hjørner

', '

Udfyld længde og bredde i formularen...

', ].join(''); wrapper.appendChild(panel); // Bind indhak knapper ['tl','tr','bl','br'].forEach(function(k) { document.getElementById('mc-btn-' + k).addEventListener('click', function() { notches[k] = !notches[k]; this.classList.toggle('on', notches[k]); var any = Object.values(notches).some(Boolean); document.getElementById('mc-notch-sizes').classList.toggle('show', any); mcDraw(); }); }); document.getElementById('mc-nw').addEventListener('input', mcDraw); document.getElementById('mc-nd').addEventListener('input', mcDraw); // Bind Hulks felter til live-opdatering [FIELD_LAENGDE, FIELD_BREDDE, FIELD_TYKKELSE, FIELD_STOF].forEach(function(id) { var el = document.getElementById(id); if (el) { el.addEventListener('input', mcDraw); el.addEventListener('change', mcDraw); } }); // Intercept Hulks submit var submitBtn = document.querySelector('.form_submit_div button[type="submit"]'); if (submitBtn) { submitBtn.addEventListener('click', function(e) { var v = vals(); if (!v.L || !v.W) return; e.preventDefault(); e.stopImmediatePropagation(); generateAndInjectPdf(function() { setTimeout(function() { submitBtn.click(); }, 900); }); }, true); } mcDraw(); } // ── Tegn canvas ── function mcDraw() { var v = vals(); var canvas = document.getElementById('mc-canvas'); if (!canvas) return; var ctx = canvas.getContext('2d'); var cw = canvas.width, ch = canvas.height; ctx.clearRect(0, 0, cw, ch); if (!v.L || !v.W) { ctx.fillStyle = '#d1d5db'; ctx.font = '14px sans-serif'; ctx.textAlign = 'center'; ctx.fillText('Indtast længde og bredde', cw / 2, ch / 2 - 10); ctx.fillText('i formularen til venstre', cw / 2, ch / 2 + 10); updateSummary(v); return; } var pad = 50; var scale = Math.min((cw - pad * 2) / v.W, (ch - pad * 2) / v.L); var dw = v.W * scale, dh = v.L * scale; var ox = (cw - dw) / 2, oy = (ch - dh) / 2; var nw = v.NW * scale, nd = v.ND * scale; ctx.fillStyle = '#dbeafe'; ctx.strokeStyle = '#1d4ed8'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(ox + (notches.tl ? nw : 0), oy); ctx.lineTo(ox + dw - (notches.tr ? nw : 0), oy); if (notches.tr) ctx.lineTo(ox + dw, oy + nd); ctx.lineTo(ox + dw, oy + dh - (notches.br ? nd : 0)); if (notches.br) ctx.lineTo(ox + dw - nw, oy + dh); ctx.lineTo(ox + (notches.bl ? nw : 0), oy + dh); if (notches.bl) ctx.lineTo(ox, oy + dh - nd); ctx.lineTo(ox, oy + (notches.tl ? nd : 0)); if (notches.tl) ctx.lineTo(ox + nw, oy); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.setLineDash([4, 4]); ctx.strokeStyle = '#93c5fd'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(ox, oy - 16); ctx.lineTo(ox + dw, oy - 16); ctx.stroke(); ctx.beginPath(); ctx.moveTo(ox - 16, oy); ctx.lineTo(ox - 16, oy + dh); ctx.stroke(); ctx.setLineDash([]); ctx.fillStyle = '#1e3a8a'; ctx.font = 'bold 12px sans-serif'; ctx.textAlign = 'center'; ctx.fillText(v.W + ' cm', ox + dw / 2, oy - 22); ctx.save(); ctx.translate(ox - 26, oy + dh / 2); ctx.rotate(-Math.PI / 2); ctx.fillText(v.L + ' cm', 0, 0); ctx.restore(); if (activeList().length > 0) { ctx.fillStyle = '#6b7280'; ctx.font = '11px sans-serif'; ctx.textAlign = 'left'; ctx.fillText(v.NW + '×' + v.ND + ' cm', ox + 4, oy + dh - 5); } updateSummary(v); } // ── Opsummering ── function updateSummary(v) { var active = activeList(); var rows = []; if (v.L && v.W) rows.push(['Størrelse', v.L + ' × ' + v.W + ' cm']); if (v.T) rows.push(['Tykkelse', v.T]); if (v.stof) rows.push(['Stoftype', v.stof]); rows.push(['Indhak', active.length > 0 ? active.join(', ') : 'Ingen']); if (active.length > 0) rows.push(['Indhaksmål', v.NW + ' × ' + v.ND + ' cm']); var el = document.getElementById('mc-summary'); if (!el) return; el.innerHTML = rows.map(function(r) { return '

' + r[0] + '' + r[1] + '

'; }).join(''); } // ── Generér PDF og injicér i Hulks Dropzone ── function generateAndInjectPdf(callback) { var v = vals(); var statusEl = document.getElementById('mc-status'); if (statusEl) { statusEl.className = ''; statusEl.textContent = 'Genererer PDF-skitse...'; } try { var jsPDF = window.jspdf && window.jspdf.jsPDF; if (!jsPDF) { if (callback) callback(false); return; } var doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' }); var active = activeList(); doc.setFillColor(29, 78, 216); doc.rect(0, 0, 210, 28, 'F'); doc.setFont('helvetica', 'bold'); doc.setFontSize(16); doc.setTextColor(255, 255, 255); doc.text('Specialmaal madras - forespraergsel', 14, 13); doc.setFont('helvetica', 'normal'); doc.setFontSize(9); doc.setTextColor(219, 234, 254); doc.text('Dato: ' + new Date().toLocaleDateString('da-DK') + (v.navn ? ' | ' + v.navn : ''), 14, 21); doc.setFont('helvetica', 'bold'); doc.setFontSize(11); doc.setTextColor(17, 24, 39); doc.text('Kundeoplysninger', 14, 38); doc.setFont('helvetica', 'normal'); doc.setFontSize(10); doc.setTextColor(55, 65, 81); doc.text('Navn: ' + (v.navn || '-'), 14, 46); doc.text('E-mail: ' + (v.email || '-'), 14, 53); doc.setFont('helvetica', 'bold'); doc.setFontSize(11); doc.setTextColor(17, 24, 39); doc.text('Specifikationer', 14, 66); var specs = [ ['Laengde', v.L + ' cm'], ['Bredde', v.W + ' cm'], ['Tykkelse', v.T || '-'], ['Stoftype', v.stof || '-'], ['Indhak', active.length > 0 ? active.join(', ') : 'Ingen'], ]; if (active.length > 0) specs.push(['Indhaksmal', v.NW + ' cm x ' + v.ND + ' cm']); specs.forEach(function(row, i) { var yy = 74 + i * 9; doc.setFillColor(i % 2 === 0 ? 239 : 249, i % 2 === 0 ? 246 : 250, i % 2 === 0 ? 255 : 251); doc.rect(14, yy - 5.5, 182, 9, 'F'); doc.setFont('helvetica', 'normal'); doc.setFontSize(10); doc.setTextColor(107, 114, 128); doc.text(row[0], 18, yy); doc.setFont('helvetica', 'bold'); doc.setTextColor(17, 24, 39); doc.text(row[1], 90, yy); }); var sketchTop = 74 + specs.length * 9 + 10; doc.setFont('helvetica', 'bold'); doc.setFontSize(11); doc.setTextColor(17, 24, 39); doc.text('Skitse (set fra oven)', 14, sketchTop); doc.addImage(document.getElementById('mc-canvas').toDataURL('image/png'), 'PNG', 55, sketchTop + 4, 100, 108); doc.setDrawColor(229, 231, 235); doc.line(14, 278, 196, 278); doc.setFont('helvetica', 'italic'); doc.setFontSize(8); doc.setTextColor(156, 163, 175); doc.text('Mal og skitse er angivet af kunden. Endelige mal bekraeftes ved ordreafgivelse.', 14, 284); // Download til kunden doc.save('madras-' + v.L + 'x' + v.W + 'cm.pdf'); // Injicér i Hulks Dropzone var pdfBlob = doc.output('blob'); var pdfFile = new File([pdfBlob], 'madras-skitse-' + v.L + 'x' + v.W + 'cm.pdf', { type: 'application/pdf' }); if (typeof Dropzone !== 'undefined') { try { var dz = Dropzone.forElement('#' + DROPZONE_ID); if (dz) { dz.removeAllFiles(); dz.addFile(pdfFile); if (statusEl) { statusEl.className = 'ok'; statusEl.textContent = 'PDF klar og vedhæftet!'; } } } catch(dze) { console.warn('Dropzone:', dze); } } if (callback) callback(true); } catch(e) { console.error('PDF fejl:', e); if (statusEl) { statusEl.className = 'err'; statusEl.textContent = 'PDF fejl: ' + e.message; } if (callback) callback(false); } } // ── Load jsPDF og start ── function loadJsPDF(cb) { if (window.jspdf) { cb(); return; } var s = document.createElement('script'); s.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js'; s.onload = cb; document.head.appendChild(s); } // ── Vent på at Hulk er klar ── function waitForHulk() { var attempts = 0; var check = setInterval(function() { attempts++; if (document.getElementById(FIELD_LAENGDE)) { clearInterval(check); loadJsPDF(function() { injectUI(); }); } if (attempts > 40) clearInterval(check); }, 250); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', waitForHulk); } else { waitForHulk(); } })();

Puslehynde

Toplagen til puslehynde, 3 stk/pk

Puslehynde