| 1 |
( function () { |
| 2 |
var el = wp.element.createElement; |
| 3 |
var useState = wp.element.useState; |
| 4 |
var Fragment = wp.element.Fragment; |
| 5 |
var registerBlockType = wp.blocks.registerBlockType; |
| 6 |
var __ = wp.i18n.__; |
| 7 |
var InspectorControls = wp.blockEditor.InspectorControls; |
| 8 |
var PanelColorSettings = wp.blockEditor.PanelColorSettings; |
| 9 |
var useBlockProps = wp.blockEditor.useBlockProps; |
| 10 |
var RichText = wp.blockEditor.RichText; |
| 11 |
var PanelBody = wp.components.PanelBody; |
| 12 |
var RangeControl = wp.components.RangeControl; |
| 13 |
var ToggleControl = wp.components.ToggleControl; |
| 14 |
var TextControl = wp.components.TextControl; |
| 15 |
|
| 16 |
function getTypographyControl() { |
| 17 |
return (typeof window.bkbgTypographyControl !== 'undefined') ? window.bkbgTypographyControl : null; |
| 18 |
} |
| 19 |
function getTypoCssVars() { |
| 20 |
return (typeof window.bkbgTypoCssVars !== 'undefined') ? window.bkbgTypoCssVars : function() { return {}; }; |
| 21 |
} |
| 22 |
|
| 23 |
/* ---- Minimal Code128-B encoder (editor preview only) ---- */ |
| 24 |
function makeBarPattern(text) { |
| 25 |
// Returns a simple alternating bar pattern based on char codes for preview |
| 26 |
var bits = []; |
| 27 |
for (var i = 0; i < Math.min(text.length, 20); i++) { |
| 28 |
var c = text.charCodeAt(i); |
| 29 |
bits.push(c % 2 === 0 ? [2,1,2,1,1] : [1,2,1,2,2]); |
| 30 |
} |
| 31 |
return bits; |
| 32 |
} |
| 33 |
|
| 34 |
function BarcodePreview(props) { |
| 35 |
var text = props.text || 'SAMPLE'; |
| 36 |
var barH = props.barHeight || 60; |
| 37 |
var barW = props.barWidth || 2; |
| 38 |
var barColor = props.barColor || '#000'; |
| 39 |
var bgColor = props.bgColor || '#fff'; |
| 40 |
var showLabel = props.showLabel; |
| 41 |
var pattern = makeBarPattern(text); |
| 42 |
|
| 43 |
var bars = []; |
| 44 |
var x = 4; |
| 45 |
var isBar = true; |
| 46 |
for (var g = 0; g < pattern.length; g++) { |
| 47 |
for (var b = 0; b < pattern[g].length; b++) { |
| 48 |
var w = pattern[g][b] * barW; |
| 49 |
if (isBar) { |
| 50 |
bars.push(el('rect', { key: x + '-' + b, x: x, y: 4, width: w, height: barH, fill: barColor })); |
| 51 |
} |
| 52 |
x += w; |
| 53 |
isBar = !isBar; |
| 54 |
} |
| 55 |
} |
| 56 |
var totalW = x + 4; |
| 57 |
var totalH = barH + (showLabel ? 20 : 8); |
| 58 |
|
| 59 |
return el('div', { style: { background: bgColor, display: 'inline-block', padding: '8px', borderRadius: 8, border: '1px solid #e5e7eb' } }, |
| 60 |
el('svg', { width: totalW, height: totalH, style: { display: 'block' } }, |
| 61 |
el('rect', { x: 0, y: 0, width: totalW, height: totalH, fill: bgColor }), |
| 62 |
bars, |
| 63 |
showLabel ? el('text', { |
| 64 |
x: totalW / 2, y: barH + 16, |
| 65 |
textAnchor: 'middle', fill: barColor, |
| 66 |
fontSize: 11, fontFamily: 'monospace' |
| 67 |
}, text) : null |
| 68 |
) |
| 69 |
); |
| 70 |
} |
| 71 |
|
| 72 |
function EditorPreview(props) { |
| 73 |
var a = props.attributes; |
| 74 |
var setAttributes = props.setAttributes; |
| 75 |
var TC = getTypographyControl(); |
| 76 |
var _tv = getTypoCssVars(); |
| 77 |
var blockProps = useBlockProps({ style: Object.assign({ background: a.sectionBg, borderRadius: 16, padding: '28px 20px' }, _tv(a.titleTypo || {}, '--bkbg-brc-title-'), _tv(a.subtitleTypo || {}, '--bkbg-brc-sub-')) }); |
| 78 |
|
| 79 |
return el(Fragment, null, |
| 80 |
el(InspectorControls, null, |
| 81 |
el(PanelBody, { title: __('Content', 'blockenberg'), initialOpen: true }, |
| 82 |
el(TextControl, { |
| 83 |
label: __('Default Text / Number', 'blockenberg'), |
| 84 |
value: a.defaultText, |
| 85 |
onChange: function (v) { setAttributes({ defaultText: v }); } |
| 86 |
}) |
| 87 |
), |
| 88 |
el(PanelBody, { title: __('Barcode Settings', 'blockenberg'), initialOpen: false }, |
| 89 |
el(RangeControl, { |
| 90 |
label: __('Bar Height (px)', 'blockenberg'), |
| 91 |
value: a.barHeight, min: 30, max: 200, |
| 92 |
onChange: function (v) { setAttributes({ barHeight: v }); } |
| 93 |
}), |
| 94 |
el(RangeControl, { |
| 95 |
label: __('Bar Width Multiplier', 'blockenberg'), |
| 96 |
value: a.barWidth, min: 1, max: 5, |
| 97 |
onChange: function (v) { setAttributes({ barWidth: v }); } |
| 98 |
}), |
| 99 |
el(ToggleControl, { |
| 100 |
__nextHasNoMarginBottom: true, |
| 101 |
label: __('Show Text Label', 'blockenberg'), |
| 102 |
checked: a.showLabel, |
| 103 |
onChange: function (v) { setAttributes({ showLabel: v }); } |
| 104 |
}), |
| 105 |
el(ToggleControl, { |
| 106 |
__nextHasNoMarginBottom: true, |
| 107 |
label: __('Show Download Button', 'blockenberg'), |
| 108 |
checked: a.showDownload, |
| 109 |
onChange: function (v) { setAttributes({ showDownload: v }); } |
| 110 |
}), |
| 111 |
el(ToggleControl, { |
| 112 |
__nextHasNoMarginBottom: true, |
| 113 |
label: __('Show Copy Button', 'blockenberg'), |
| 114 |
checked: a.showCopy, |
| 115 |
onChange: function (v) { setAttributes({ showCopy: v }); } |
| 116 |
}) |
| 117 |
), |
| 118 |
|
| 119 |
el( PanelBody, { title: __( 'Typography', 'blockenberg' ), initialOpen: false }, |
| 120 |
TC && el(TC, { label: __('Title', 'blockenberg'), value: a.titleTypo || {}, onChange: function(v){ setAttributes({titleTypo: v}); } }), |
| 121 |
TC && el(TC, { label: __('Subtitle', 'blockenberg'), value: a.subtitleTypo || {}, onChange: function(v){ setAttributes({subtitleTypo: v}); } }) |
| 122 |
), |
| 123 |
el(PanelColorSettings, { |
| 124 |
title: __('Colors', 'blockenberg'), |
| 125 |
initialOpen: false, |
| 126 |
colorSettings: [ |
| 127 |
{ label: __('Accent Color', 'blockenberg'), value: a.accentColor, onChange: function (v) { setAttributes({ accentColor: v || '#1f2937' }); } }, |
| 128 |
{ label: __('Bar Color', 'blockenberg'), value: a.barColor, onChange: function (v) { setAttributes({ barColor: v || '#000000' }); } }, |
| 129 |
{ label: __('Barcode Background', 'blockenberg'), value: a.bgColor, onChange: function (v) { setAttributes({ bgColor: v || '#ffffff' }); } }, |
| 130 |
{ label: __('Section Background', 'blockenberg'), value: a.sectionBg, onChange: function (v) { setAttributes({ sectionBg: v || '#f9fafb' }); } }, |
| 131 |
{ label: __('Title Color', 'blockenberg'), value: a.titleColor, onChange: function (v) { setAttributes({ titleColor: v || '#111827' }); } }, |
| 132 |
{ label: __('Button Color', 'blockenberg'), value: a.buttonBg, onChange: function (v) { setAttributes({ buttonBg: v || '#1f2937' }); } } |
| 133 |
] |
| 134 |
}) |
| 135 |
), |
| 136 |
el('div', blockProps, |
| 137 |
el(RichText, { |
| 138 |
tagName: 'h3', |
| 139 |
className: 'bkbg-brc-title', |
| 140 |
value: a.title, |
| 141 |
onChange: function (v) { setAttributes({ title: v }); }, |
| 142 |
placeholder: __('Block Title', 'blockenberg'), |
| 143 |
style: { color: a.titleColor, margin: '0 0 6px', textAlign: 'center' } |
| 144 |
}), |
| 145 |
el(RichText, { |
| 146 |
tagName: 'p', |
| 147 |
className: 'bkbg-brc-subtitle', |
| 148 |
value: a.subtitle, |
| 149 |
onChange: function (v) { setAttributes({ subtitle: v }); }, |
| 150 |
placeholder: __('Subtitle', 'blockenberg'), |
| 151 |
style: { color: a.titleColor + 'bb', textAlign: 'center', margin: '0 0 16px' } |
| 152 |
}), |
| 153 |
el('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 } }, |
| 154 |
el('input', { |
| 155 |
type: 'text', |
| 156 |
readOnly: true, |
| 157 |
value: a.defaultText, |
| 158 |
className: 'bkbg-brc-input', |
| 159 |
style: { |
| 160 |
width: 280, padding: '10px 14px', borderRadius: 8, |
| 161 |
border: '2px solid #e5e7eb', fontSize: 15, |
| 162 |
fontFamily: 'monospace', textAlign: 'center', |
| 163 |
background: '#fff', color: '#111' |
| 164 |
} |
| 165 |
}), |
| 166 |
el(BarcodePreview, { |
| 167 |
text: a.defaultText, |
| 168 |
barHeight: a.barHeight, |
| 169 |
barWidth: a.barWidth, |
| 170 |
barColor: a.barColor, |
| 171 |
bgColor: a.bgColor, |
| 172 |
showLabel: a.showLabel |
| 173 |
}), |
| 174 |
el('div', { style: { display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'center' } }, |
| 175 |
el('button', { |
| 176 |
style: { |
| 177 |
background: a.buttonBg, color: '#fff', border: 'none', |
| 178 |
borderRadius: 8, padding: '9px 22px', fontWeight: 700, cursor: 'default' |
| 179 |
} |
| 180 |
}, 'Generate'), |
| 181 |
a.showDownload && el('button', { |
| 182 |
style: { |
| 183 |
background: a.buttonBg + '22', color: a.buttonBg, border: '2px solid ' + a.buttonBg, |
| 184 |
borderRadius: 8, padding: '9px 22px', fontWeight: 700, cursor: 'default' |
| 185 |
} |
| 186 |
}, '⬇ Download'), |
| 187 |
a.showCopy && el('button', { |
| 188 |
style: { |
| 189 |
background: a.buttonBg + '22', color: a.buttonBg, border: '2px solid ' + a.buttonBg, |
| 190 |
borderRadius: 8, padding: '9px 22px', fontWeight: 700, cursor: 'default' |
| 191 |
} |
| 192 |
}, '📋 Copy') |
| 193 |
) |
| 194 |
) |
| 195 |
) |
| 196 |
); |
| 197 |
} |
| 198 |
|
| 199 |
registerBlockType('blockenberg/barcode-generator', { |
| 200 |
edit: EditorPreview, |
| 201 |
save: function (props) { |
| 202 |
var a = props.attributes; |
| 203 |
return el('div', useBlockProps.save(), |
| 204 |
el('div', { |
| 205 |
className: 'bkbg-brc-app', |
| 206 |
'data-opts': JSON.stringify(a) |
| 207 |
}, |
| 208 |
el(RichText.Content, { tagName: 'h3', className: 'bkbg-brc-title', value: a.title }), |
| 209 |
el(RichText.Content, { tagName: 'p', className: 'bkbg-brc-subtitle', value: a.subtitle }) |
| 210 |
) |
| 211 |
); |
| 212 |
} |
| 213 |
}); |
| 214 |
}() ); |
| 215 |
|
