| 1 |
( function () { |
| 2 |
var el = wp.element.createElement; |
| 3 |
var __ = wp.i18n.__; |
| 4 |
var registerBlockType = wp.blocks.registerBlockType; |
| 5 |
var InspectorControls = wp.blockEditor.InspectorControls; |
| 6 |
var PanelBody = wp.components.PanelBody; |
| 7 |
var PanelColorSettings = wp.blockEditor.PanelColorSettings; |
| 8 |
var SelectControl = wp.components.SelectControl; |
| 9 |
var ToggleControl = wp.components.ToggleControl; |
| 10 |
var RangeControl = wp.components.RangeControl; |
| 11 |
var TextControl = wp.components.TextControl; |
| 12 |
var Button = wp.components.Button; |
| 13 |
|
| 14 |
var _tc; function getTypoControl() { return _tc || (_tc = window.bkbgTypographyControl); } |
| 15 |
var _tv; function getTypoCssVars() { return _tv || (_tv = window.bkbgTypoCssVars); } |
| 16 |
|
| 17 |
function buildSteps( attrs, setAttr ) { |
| 18 |
return attrs.steps.map( function ( step, i ) { |
| 19 |
return el( 'div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 } }, |
| 20 |
el( TextControl, { |
| 21 |
label: __( 'Step', 'blockenberg' ) + ' ' + ( i + 1 ), |
| 22 |
value: step.label, |
| 23 |
onChange: function ( v ) { |
| 24 |
var next = attrs.steps.slice(); |
| 25 |
next[ i ] = Object.assign( {}, step, { label: v } ); |
| 26 |
setAttr( { steps: next } ); |
| 27 |
} |
| 28 |
} ), |
| 29 |
el( Button, { |
| 30 |
isSmall: true, isDestructive: true, |
| 31 |
onClick: function () { |
| 32 |
var next = attrs.steps.filter( function ( _, j ) { return j !== i; } ); |
| 33 |
setAttr( { steps: next } ); |
| 34 |
} |
| 35 |
}, '✕' ) |
| 36 |
); |
| 37 |
} ); |
| 38 |
} |
| 39 |
|
| 40 |
function renderStepBar( attrs ) { |
| 41 |
var _tvf = getTypoCssVars(); |
| 42 |
var wrapStyle = { |
| 43 |
'--bksp-done': attrs.completedColor, |
| 44 |
'--bksp-active': attrs.activeColor, |
| 45 |
'--bksp-pending': attrs.pendingColor, |
| 46 |
'--bksp-cSize': attrs.circleSize + 'px', |
| 47 |
'--bksp-barH': attrs.barHeight + 'px', |
| 48 |
'--bksp-lSz': attrs.labelSz + 'px' |
| 49 |
}; |
| 50 |
Object.assign(wrapStyle, _tvf(attrs.labelTypo, '--bksp-lb-')); |
| 51 |
var children = []; |
| 52 |
attrs.steps.forEach( function ( step, i ) { |
| 53 |
var idx = i + 1; |
| 54 |
var isDone = idx < attrs.currentStep; |
| 55 |
var isActive = idx === attrs.currentStep; |
| 56 |
var stClass = isDone ? 'bksp-done' : isActive ? 'bksp-active' : 'bksp-pending'; |
| 57 |
children.push( el( 'div', { key: 'step-' + i, className: 'bksp-step ' + stClass }, |
| 58 |
el( 'div', { className: 'bksp-circle' }, |
| 59 |
isDone |
| 60 |
? el( 'svg', { viewBox: '0 0 20 20', fill: 'currentColor', width: 14, height: 14 }, |
| 61 |
el( 'path', { d: 'M7 10.4l-2.8-2.8L3 8.8l4 4 8-8-1.2-1.2z' } ) ) |
| 62 |
: attrs.showNumbers ? String( idx ) : null |
| 63 |
), |
| 64 |
el( 'span', { className: 'bksp-label' }, step.label ) |
| 65 |
) ); |
| 66 |
/* connector */ |
| 67 |
if ( i < attrs.steps.length - 1 ) { |
| 68 |
var connDone = idx < attrs.currentStep; |
| 69 |
children.push( el( 'div', { key: 'conn-' + i, className: 'bksp-connector ' + ( connDone ? 'bksp-conn-done' : '' ) } ) ); |
| 70 |
} |
| 71 |
} ); |
| 72 |
return el( 'div', { className: 'bksp-wrap', style: wrapStyle }, children ); |
| 73 |
} |
| 74 |
|
| 75 |
registerBlockType( 'blockenberg/step-progress', { |
| 76 |
edit: function ( props ) { |
| 77 |
var attrs = props.attributes; |
| 78 |
var setAttr = props.setAttributes; |
| 79 |
|
| 80 |
return el( 'div', null, |
| 81 |
el( InspectorControls, null, |
| 82 |
el( PanelBody, { title: __( 'Steps', 'blockenberg' ), initialOpen: true }, |
| 83 |
buildSteps( attrs, setAttr ), |
| 84 |
el( Button, { |
| 85 |
variant: 'secondary', |
| 86 |
onClick: function () { |
| 87 |
setAttr( { steps: attrs.steps.concat( [ { label: 'New Step' } ] ) } ); |
| 88 |
}, |
| 89 |
style: { marginTop: 8 } |
| 90 |
}, __( '+ Add Step', 'blockenberg' ) ), |
| 91 |
el( RangeControl, { |
| 92 |
label: __( 'Current Step', 'blockenberg' ), |
| 93 |
value: attrs.currentStep, min: 1, max: attrs.steps.length, |
| 94 |
onChange: function (v) { setAttr({ currentStep: v }); } |
| 95 |
} ) |
| 96 |
), |
| 97 |
el( PanelBody, { title: __( 'Appearance', 'blockenberg' ), initialOpen: false }, |
| 98 |
el( ToggleControl, { |
| 99 |
label: __( 'Show Step Numbers', 'blockenberg' ), |
| 100 |
checked: attrs.showNumbers, |
| 101 |
onChange: function (v) { setAttr({ showNumbers: v }); }, |
| 102 |
__nextHasNoMarginBottom: true |
| 103 |
} ), |
| 104 |
el( RangeControl, { |
| 105 |
label: __( 'Circle Size (px)', 'blockenberg' ), |
| 106 |
value: attrs.circleSize, min: 24, max: 60, |
| 107 |
onChange: function (v) { setAttr({ circleSize: v }); } |
| 108 |
} ), |
| 109 |
el( RangeControl, { |
| 110 |
label: __( 'Bar / Connector Height (px)', 'blockenberg' ), |
| 111 |
value: attrs.barHeight, min: 2, max: 12, |
| 112 |
onChange: function (v) { setAttr({ barHeight: v }); } |
| 113 |
} ), |
| 114 |
el( SelectControl, { |
| 115 |
label: __( 'Connector Style', 'blockenberg' ), |
| 116 |
value: attrs.connectorStyle, |
| 117 |
options: [ |
| 118 |
{ label: 'Solid', value: 'solid' }, |
| 119 |
{ label: 'Dashed', value: 'dashed' }, |
| 120 |
{ label: 'Dotted', value: 'dotted' } |
| 121 |
], |
| 122 |
onChange: function (v) { setAttr({ connectorStyle: v }); } |
| 123 |
} ) |
| 124 |
), |
| 125 |
|
| 126 |
el( PanelBody, { title: __( 'Typography', 'blockenberg' ), initialOpen: false }, |
| 127 |
getTypoControl() && getTypoControl()({ label: __('Label', 'blockenberg'), value: attrs.labelTypo, onChange: function (v) { setAttr({ labelTypo: v }); } }) |
| 128 |
), |
| 129 |
el( PanelBody, { title: __( 'Colors', 'blockenberg' ), initialOpen: false }, |
| 130 |
el( PanelColorSettings, { |
| 131 |
title: __( 'Colors', 'blockenberg' ), |
| 132 |
colorSettings: [ |
| 133 |
{ value: attrs.completedColor, onChange: function(v){setAttr({completedColor:v||'#22c55e'});}, label: __('Completed') }, |
| 134 |
{ value: attrs.activeColor, onChange: function(v){setAttr({activeColor:v||'#6c3fb5'});}, label: __('Active / Current') }, |
| 135 |
{ value: attrs.pendingColor, onChange: function(v){setAttr({pendingColor:v||'#e5e7eb'});}, label: __('Pending') } |
| 136 |
] |
| 137 |
} ) |
| 138 |
) |
| 139 |
), |
| 140 |
renderStepBar( attrs ) |
| 141 |
); |
| 142 |
}, |
| 143 |
save: function ( props ) { |
| 144 |
var attrs = props.attributes; |
| 145 |
return renderStepBar( attrs ); |
| 146 |
} |
| 147 |
} ); |
| 148 |
} )(); |
| 149 |
|
