| 1 |
( function () { |
| 2 |
const el = window.wp.element.createElement; |
| 3 |
const { registerBlockType } = window.wp.blocks; |
| 4 |
const { InspectorControls, useBlockProps, PanelColorSettings } = window.wp.blockEditor; |
| 5 |
const { PanelBody, RangeControl, ToggleControl, TextControl, TextareaControl, SelectControl, Button } = window.wp.components; |
| 6 |
const { __ } = window.wp.i18n; |
| 7 |
|
| 8 |
var _dtrTC, _dtrTV; |
| 9 |
function _tc() { return _dtrTC || (_dtrTC = window.bkbgTypographyControl); } |
| 10 |
function _tv(typo, prefix) { return (_dtrTV || (_dtrTV = window.bkbgTypoCssVars))(typo, prefix); } |
| 11 |
var IP = function () { return window.bkbgIconPicker; }; |
| 12 |
|
| 13 |
function nodeById(nodes, id) { return nodes.find(n => n.id === id) || null; } |
| 14 |
function updNode(nodes, id, field, val) { return nodes.map(n => n.id === id ? { ...n, [field]: val } : n); } |
| 15 |
|
| 16 |
// Unique ID generator |
| 17 |
let _uid = Date.now(); |
| 18 |
function uid() { return 'n' + (++_uid); } |
| 19 |
|
| 20 |
// ── Editor preview ──────────────────────────────────────────────── |
| 21 |
// Shows a static non-interactive rendering of the first question |
| 22 |
function renderPreviewNode(node, a) { |
| 23 |
if (!node) return el('div', { style: { padding: '20px', color: '#999' } }, __('Root node not found. Check node IDs.')); |
| 24 |
|
| 25 |
if (node.type === 'result') { |
| 26 |
return el('div', { |
| 27 |
className: 'bkbg-dt-result-card', |
| 28 |
style: { |
| 29 |
background: node.resultColor || '#6c3fb5', color: a.resultTextColor, |
| 30 |
borderRadius: a.cardRadius + 'px', padding: '28px 32px', textAlign: 'center' |
| 31 |
} |
| 32 |
}, |
| 33 |
el('div', { style: { fontSize: '36px', marginBottom: '12px' } }, '🎯'), |
| 34 |
el('p', { style: { fontSize: a.fontSize + 'px', lineHeight: 1.6, margin: 0 } }, node.text), |
| 35 |
); |
| 36 |
} |
| 37 |
|
| 38 |
// Question node (static preview) |
| 39 |
return el('div', { |
| 40 |
className: 'bkbg-dt-question-card', |
| 41 |
style: { background: a.cardBg, border: '1px solid ' + a.cardBorder, borderRadius: a.cardRadius + 'px', padding: '28px 32px' } |
| 42 |
}, |
| 43 |
el('p', { style: { fontSize: a.questionSize + 'px', fontWeight: 700, color: a.questionColor, margin: '0 0 24px', lineHeight: 1.4 } }, node.text), |
| 44 |
el('div', { style: { display: 'flex', gap: '12px' } }, |
| 45 |
el('button', { |
| 46 |
style: { |
| 47 |
flex: 1, background: a.yesBg, color: a.yesText, border: 'none', |
| 48 |
borderRadius: '8px', padding: '12px 20px', fontSize: a.fontSize + 'px', |
| 49 |
fontWeight: 700, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' |
| 50 |
} |
| 51 |
}, el('span', { className: 'bkbg-dt-btn-icon' }, |
| 52 |
(!a.yesIconType || a.yesIconType === 'custom-char') ? a.yesIcon : IP().buildEditorIcon(a.yesIconType, a.yesIcon, a.yesIconDashicon, a.yesIconImageUrl, a.yesIconDashiconColor) |
| 53 |
), node.yesLabel || __('Yes')), |
| 54 |
el('button', { |
| 55 |
style: { |
| 56 |
flex: 1, background: a.noBg, color: a.noText, border: 'none', |
| 57 |
borderRadius: '8px', padding: '12px 20px', fontSize: a.fontSize + 'px', |
| 58 |
fontWeight: 700, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' |
| 59 |
} |
| 60 |
}, el('span', { className: 'bkbg-dt-btn-icon' }, |
| 61 |
(!a.noIconType || a.noIconType === 'custom-char') ? a.noIcon : IP().buildEditorIcon(a.noIconType, a.noIcon, a.noIconDashicon, a.noIconImageUrl, a.noIconDashiconColor) |
| 62 |
), node.noLabel || __('No')), |
| 63 |
), |
| 64 |
el('div', { style: { marginTop: '16px', fontSize: (a.breadcrumbFontSize || 12) + 'px', color: a.breadcrumbColor, textAlign: 'center' } }, |
| 65 |
__('Interactive in preview — visitors follow branches to personalised results') |
| 66 |
) |
| 67 |
); |
| 68 |
} |
| 69 |
|
| 70 |
// ── Node ID select options ───────────────────────────────────────── |
| 71 |
function nodeOptions(nodes) { |
| 72 |
return [{ value: '', label: __('— none —') }].concat(nodes.map(n => ({ value: n.id, label: (n.type === 'result' ? '🎯 ' : '❓ ') + n.id + ': ' + n.text.substring(0, 40) }))); |
| 73 |
} |
| 74 |
|
| 75 |
function wrapStyle(a) { |
| 76 |
return { background: a.bgColor, borderRadius: a.borderRadius + 'px', paddingTop: a.paddingTop + 'px', paddingBottom: a.paddingBottom + 'px', paddingLeft: '32px', paddingRight: '32px' }; |
| 77 |
} |
| 78 |
|
| 79 |
registerBlockType('blockenberg/decision-tree', { |
| 80 |
edit: function ({ attributes: a, setAttributes }) { |
| 81 |
const blockProps = useBlockProps({ style: Object.assign(wrapStyle(a), { '--bkbg-dtr-ttl-fs': (a.titleSize || 24) + 'px', '--bkbg-dtr-sub-fs': (a.subtitleFontSize || 16) + 'px' }, _tv(a.typoTitle || {}, '--bkbg-dtr-ttl-'), _tv(a.typoSubtitle || {}, '--bkbg-dtr-sub-')) }); |
| 82 |
const root = nodeById(a.nodes, a.rootId); |
| 83 |
const opts = nodeOptions(a.nodes); |
| 84 |
|
| 85 |
// Count question nodes (for progress estimate) |
| 86 |
const questionCount = a.nodes.filter(n => n.type === 'question').length; |
| 87 |
|
| 88 |
return el('div', blockProps, |
| 89 |
el(InspectorControls, {}, |
| 90 |
el(PanelBody, { title: __('Content'), initialOpen: true }, |
| 91 |
el(TextControl, { label: __('Title'), value: a.title, onChange: v => setAttributes({ title: v }) }), |
| 92 |
el(ToggleControl, { label: __('Show title'), checked: a.showTitle, onChange: v => setAttributes({ showTitle: v }) }), |
| 93 |
el(TextControl, { label: __('Subtitle'), value: a.subtitle, onChange: v => setAttributes({ subtitle: v }) }), |
| 94 |
el(ToggleControl, { label: __('Show subtitle'), checked: a.showSubtitle, onChange: v => setAttributes({ showSubtitle: v }) }), |
| 95 |
el(SelectControl, { label: __('Root (starting) node'), value: a.rootId, options: opts, onChange: v => setAttributes({ rootId: v }) }), |
| 96 |
el(ToggleControl, { label: __('Show breadcrumb trail'), checked: a.showBreadcrumb, onChange: v => setAttributes({ showBreadcrumb: v }) }), |
| 97 |
el(ToggleControl, { label: __('Show step progress'), checked: a.showProgress, onChange: v => setAttributes({ showProgress: v }) }), |
| 98 |
el('p', { style: { fontSize: '11px', fontWeight: 600, marginTop: '12px' } }, __('Yes button icon')), |
| 99 |
el(IP().IconPickerControl, IP().iconPickerProps(a, setAttributes, { charAttr: 'yesIcon', typeAttr: 'yesIconType', dashiconAttr: 'yesIconDashicon', imageUrlAttr: 'yesIconImageUrl', colorAttr: 'yesIconDashiconColor' })), |
| 100 |
el('p', { style: { fontSize: '11px', fontWeight: 600, marginTop: '12px' } }, __('No button icon')), |
| 101 |
el(IP().IconPickerControl, IP().iconPickerProps(a, setAttributes, { charAttr: 'noIcon', typeAttr: 'noIconType', dashiconAttr: 'noIconDashicon', imageUrlAttr: 'noIconImageUrl', colorAttr: 'noIconDashiconColor' })), |
| 102 |
), |
| 103 |
el(PanelBody, { title: __('Nodes (' + a.nodes.length + ')'), initialOpen: false }, |
| 104 |
a.nodes.map((node, i) => |
| 105 |
el(PanelBody, { key: i, title: (node.type === 'result' ? '🎯 ' : '❓ ') + node.id, initialOpen: false }, |
| 106 |
el(TextControl, { label: __('Node ID'), value: node.id, onChange: v => setAttributes({ nodes: updNode(a.nodes, node.id, 'id', v) }) }), |
| 107 |
el(SelectControl, { label: __('Type'), value: node.type, options: [{ value: 'question', label: 'Question (has branches)' }, { value: 'result', label: 'Result (leaf node)' }], onChange: v => setAttributes({ nodes: updNode(a.nodes, node.id, 'type', v) }) }), |
| 108 |
el(TextareaControl, { label: node.type === 'result' ? __('Result text') : __('Question text'), value: node.text, rows: 3, onChange: v => setAttributes({ nodes: updNode(a.nodes, node.id, 'text', v) }) }), |
| 109 |
node.type === 'question' && [ |
| 110 |
el(TextControl, { key: 'yl', label: __('Yes label'), value: node.yesLabel || 'Yes', onChange: v => setAttributes({ nodes: updNode(a.nodes, node.id, 'yesLabel', v) }) }), |
| 111 |
el(SelectControl, { key: 'yi', label: __('Yes → goes to node'), value: node.yesId || '', options: opts, onChange: v => setAttributes({ nodes: updNode(a.nodes, node.id, 'yesId', v) }) }), |
| 112 |
el(TextControl, { key: 'nl', label: __('No label'), value: node.noLabel || 'No', onChange: v => setAttributes({ nodes: updNode(a.nodes, node.id, 'noLabel', v) }) }), |
| 113 |
el(SelectControl, { key: 'ni', label: __('No → goes to node'), value: node.noId || '', options: opts, onChange: v => setAttributes({ nodes: updNode(a.nodes, node.id, 'noId', v) }) }), |
| 114 |
], |
| 115 |
node.type === 'result' && el('div', { style: { marginBottom: '8px' } }, |
| 116 |
el('label', { style: { display: 'block', marginBottom: '6px', fontSize: '11px', fontWeight: '600', textTransform: 'uppercase' } }, __('Result card color')), |
| 117 |
el('input', { type: 'color', value: node.resultColor || '#6c3fb5', style: { width: '100%', height: '36px', border: '1px solid #ddd', borderRadius: '4px', cursor: 'pointer' }, onChange: e => setAttributes({ nodes: updNode(a.nodes, node.id, 'resultColor', e.target.value) }) }), |
| 118 |
), |
| 119 |
el(Button, { |
| 120 |
variant: 'secondary', isDestructive: true, isSmall: true, |
| 121 |
onClick: () => setAttributes({ nodes: a.nodes.filter(n => n.id !== node.id) }) |
| 122 |
}, __('Remove node')), |
| 123 |
) |
| 124 |
), |
| 125 |
el('div', { style: { display: 'flex', gap: '8px', marginTop: '8px' } }, |
| 126 |
el(Button, { variant: 'secondary', onClick: () => { const id = uid(); setAttributes({ nodes: a.nodes.concat([{ id, type: 'question', text: 'New question?', yesId: '', noId: '', yesLabel: 'Yes', noLabel: 'No' }]) }); } }, __('+ Question')), |
| 127 |
el(Button, { variant: 'secondary', onClick: () => { const id = uid(); setAttributes({ nodes: a.nodes.concat([{ id, type: 'result', text: 'Result description goes here.', resultColor: '#6c3fb5' }]) }); } }, __('+ Result')), |
| 128 |
), |
| 129 |
), |
| 130 |
el(PanelBody, { title: __('Typography'), initialOpen: false }, |
| 131 |
_tc() && el(_tc(), { label: __('Title'), typo: a.typoTitle || {}, onChange: v => setAttributes({ typoTitle: v }), defaultSize: a.titleSize || 24 }), |
| 132 |
_tc() && el(_tc(), { label: __('Subtitle'), typo: a.typoSubtitle || {}, onChange: v => setAttributes({ typoSubtitle: v }), defaultSize: a.subtitleFontSize || 16 }), |
| 133 |
el(RangeControl, { __nextHasNoMarginBottom: true, label: __('Question size'), value: a.questionSize, min: 14, max: 30, onChange: v => setAttributes({ questionSize: v }) }), |
| 134 |
el(RangeControl, { __nextHasNoMarginBottom: true, label: __('Body font size'), value: a.fontSize, min: 12, max: 20, onChange: v => setAttributes({ fontSize: v }) }), |
| 135 |
el(RangeControl, { __nextHasNoMarginBottom: true, label: __('Breadcrumb font size'), value: a.breadcrumbFontSize, min: 9, max: 18, onChange: v => setAttributes({ breadcrumbFontSize: v }) }), |
| 136 |
), |
| 137 |
el(PanelBody, { title: __('Spacing'), initialOpen: false }, |
| 138 |
el(RangeControl, { label: __('Border radius'), value: a.borderRadius, min: 0, max: 32, onChange: v => setAttributes({ borderRadius: v }) }), |
| 139 |
el(RangeControl, { label: __('Card radius'), value: a.cardRadius, min: 0, max: 24, onChange: v => setAttributes({ cardRadius: v }) }), |
| 140 |
el(RangeControl, { label: __('Padding top'), value: a.paddingTop, min: 0, max: 120, onChange: v => setAttributes({ paddingTop: v }) }), |
| 141 |
el(RangeControl, { label: __('Padding bottom'), value: a.paddingBottom, min: 0, max: 120, onChange: v => setAttributes({ paddingBottom: v }) }), |
| 142 |
), |
| 143 |
el(PanelColorSettings, { |
| 144 |
title: __('Colors'), initialOpen: false, |
| 145 |
colorSettings: [ |
| 146 |
{ label: __('Background'), value: a.bgColor, onChange: v => setAttributes({ bgColor: v || '#ffffff' }) }, |
| 147 |
{ label: __('Card BG'), value: a.cardBg, onChange: v => setAttributes({ cardBg: v || '#f8fafc' }) }, |
| 148 |
{ label: __('Card border'), value: a.cardBorder, onChange: v => setAttributes({ cardBorder: v || '#e2e8f0' }) }, |
| 149 |
{ label: __('Title'), value: a.titleColor, onChange: v => setAttributes({ titleColor: v || '#0f172a' }) }, |
| 150 |
{ label: __('Subtitle'), value: a.subtitleColor, onChange: v => setAttributes({ subtitleColor: v || '#64748b' }) }, |
| 151 |
{ label: __('Question text'), value: a.questionColor, onChange: v => setAttributes({ questionColor: v || '#0f172a' }) }, |
| 152 |
{ label: __('Yes button BG'), value: a.yesBg, onChange: v => setAttributes({ yesBg: v || '#22c55e' }) }, |
| 153 |
{ label: __('Yes button text'),value: a.yesText, onChange: v => setAttributes({ yesText: v || '#ffffff' }) }, |
| 154 |
{ label: __('No button BG'), value: a.noBg, onChange: v => setAttributes({ noBg: v || '#ef4444' }) }, |
| 155 |
{ label: __('No button text'), value: a.noText, onChange: v => setAttributes({ noText: v || '#ffffff' }) }, |
| 156 |
{ label: __('Back button BG'), value: a.backBg, onChange: v => setAttributes({ backBg: v || '#f1f5f9' }) }, |
| 157 |
{ label: __('Back button text'),value: a.backText, onChange: v => setAttributes({ backText: v || '#374151' }) }, |
| 158 |
{ label: __('Breadcrumb'), value: a.breadcrumbColor, onChange: v => setAttributes({ breadcrumbColor: v || '#94a3b8' }) }, |
| 159 |
{ label: __('Result text'), value: a.resultTextColor, onChange: v => setAttributes({ resultTextColor: v || '#ffffff' }) }, |
| 160 |
] |
| 161 |
}), |
| 162 |
), |
| 163 |
|
| 164 |
// ── Canvas ────────────────────────────────────────── |
| 165 |
a.showTitle && el('h3', { className: 'bkbg-dt-title', style: { color: a.titleColor, margin: '0 0 8px', textAlign: 'center' } }, a.title), |
| 166 |
a.showSubtitle && el('p', { className: 'bkbg-dt-subtitle', style: { color: a.subtitleColor, textAlign: 'center', margin: '0 0 28px' } }, a.subtitle), |
| 167 |
|
| 168 |
// Tree map (all question nodes as an overview) |
| 169 |
el('div', { className: 'bkbg-dt-node-map', style: { marginBottom: '24px', display: 'flex', flexWrap: 'wrap', gap: '8px' } }, |
| 170 |
a.nodes.map((node, i) => |
| 171 |
el('span', { |
| 172 |
key: i, |
| 173 |
style: { |
| 174 |
display: 'inline-flex', alignItems: 'center', gap: '4px', |
| 175 |
background: node.type === 'result' ? (node.resultColor || '#6c3fb5') : a.cardBg, |
| 176 |
color: node.type === 'result' ? a.resultTextColor : a.questionColor, |
| 177 |
border: '1px solid ' + (node.type === 'result' ? 'transparent' : a.cardBorder), |
| 178 |
borderRadius: '8px', padding: '4px 10px', fontSize: '12px', fontWeight: 600 |
| 179 |
} |
| 180 |
}, node.type === 'result' ? '🎯' : '❓', node.id) |
| 181 |
) |
| 182 |
), |
| 183 |
|
| 184 |
// Preview of root node |
| 185 |
renderPreviewNode(root, a), |
| 186 |
); |
| 187 |
}, |
| 188 |
|
| 189 |
save: function ({ attributes: a }) { |
| 190 |
return el('div', window.wp.blockEditor.useBlockProps.save(), |
| 191 |
el('div', { className: 'bkbg-decision-tree-app', 'data-opts': JSON.stringify(a) }) |
| 192 |
); |
| 193 |
} |
| 194 |
}); |
| 195 |
}() ); |
| 196 |
|
