| 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 RichText = wp.blockEditor.RichText; |
| 7 |
var PanelBody = wp.components.PanelBody; |
| 8 |
var PanelColorSettings = wp.blockEditor.PanelColorSettings; |
| 9 |
var SelectControl = wp.components.SelectControl; |
| 10 |
var ToggleControl = wp.components.ToggleControl; |
| 11 |
var RangeControl = wp.components.RangeControl; |
| 12 |
var TextControl = wp.components.TextControl; |
| 13 |
|
| 14 |
var _tc, _tv; |
| 15 |
function getTypoControl() { return _tc || (_tc = window.bkbgTypographyControl); } |
| 16 |
function getTypoCssVars() { return _tv || (_tv = window.bkbgTypoCssVars); } |
| 17 |
|
| 18 |
function buildRing( attrs, opts ) { |
| 19 |
opts = opts || {}; |
| 20 |
var it = opts.inlineTypo; |
| 21 |
var pct = Math.min( 1, attrs.current / ( attrs.goal || 100 ) ); |
| 22 |
var r = ( attrs.size / 2 ) - ( attrs.strokeWidth / 2 ) - 2; |
| 23 |
var circ = 2 * Math.PI * r; |
| 24 |
var offset = circ * ( 1 - pct ); |
| 25 |
var cx = attrs.size / 2; |
| 26 |
var cy = attrs.size / 2; |
| 27 |
|
| 28 |
var centerText = attrs.centerLabel === 'auto' |
| 29 |
? Math.round( pct * 100 ) + '%' |
| 30 |
: ( attrs.centerLabel === 'value' ? attrs.current + '/' + attrs.goal : attrs.customCenterLabel ); |
| 31 |
|
| 32 |
var wrapStyle = { |
| 33 |
'--bkml-text': attrs.textColor, |
| 34 |
'--bkml-lSz': attrs.labelSz + 'px', |
| 35 |
'--bkml-cSz': attrs.centerSz + 'px', |
| 36 |
'--bkml-size': attrs.size + 'px', |
| 37 |
'--bkml-glow': attrs.glow ? 'drop-shadow(0 0 6px ' + attrs.ringColor + ')' : 'none' |
| 38 |
}; |
| 39 |
if (!it) { |
| 40 |
var _tvf = getTypoCssVars(); |
| 41 |
Object.assign(wrapStyle, _tvf(attrs.centerTypo, '--bkml-ct-')); |
| 42 |
Object.assign(wrapStyle, _tvf(attrs.labelTypo, '--bkml-lb-')); |
| 43 |
} |
| 44 |
|
| 45 |
var pctSt = it ? { fontWeight: (attrs.centerFontWeight || 700), lineHeight: (attrs.centerLineHeight || 1.2) } : {}; |
| 46 |
var lblSt = it ? { fontWeight: (attrs.labelFontWeight || 600) } : {}; |
| 47 |
|
| 48 |
return el( 'div', { |
| 49 |
className: 'bkml-wrap', |
| 50 |
style: wrapStyle, |
| 51 |
'data-current': attrs.current, |
| 52 |
'data-goal': attrs.goal, |
| 53 |
'data-animate': attrs.animateOnView ? '1' : '0' |
| 54 |
}, |
| 55 |
el( 'svg', { |
| 56 |
className: 'bkml-svg', |
| 57 |
viewBox: '0 0 ' + attrs.size + ' ' + attrs.size, |
| 58 |
width: attrs.size, |
| 59 |
height: attrs.size, |
| 60 |
'aria-hidden': 'true' |
| 61 |
}, |
| 62 |
el( 'circle', { |
| 63 |
className: 'bkml-track', |
| 64 |
cx: cx, cy: cy, r: r, |
| 65 |
strokeWidth: attrs.strokeWidth, |
| 66 |
stroke: attrs.trackColor, |
| 67 |
fill: 'none' |
| 68 |
} ), |
| 69 |
el( 'circle', { |
| 70 |
className: 'bkml-ring', |
| 71 |
cx: cx, cy: cy, r: r, |
| 72 |
strokeWidth: attrs.strokeWidth, |
| 73 |
stroke: attrs.ringColor, |
| 74 |
fill: 'none', |
| 75 |
strokeDasharray: circ, |
| 76 |
strokeDashoffset: offset, |
| 77 |
strokeLinecap: 'round', |
| 78 |
style: { transform: 'rotate(-90deg)', transformOrigin: 'center', filter: 'var(--bkml-glow)' } |
| 79 |
} ) |
| 80 |
), |
| 81 |
el( 'div', { className: 'bkml-center' }, |
| 82 |
el( 'span', { className: 'bkml-pct', style: pctSt }, centerText ) |
| 83 |
), |
| 84 |
el( 'p', { className: 'bkml-label', style: lblSt }, attrs.label ) |
| 85 |
); |
| 86 |
} |
| 87 |
|
| 88 |
registerBlockType( 'blockenberg/milestone', { |
| 89 |
deprecated: [{ |
| 90 |
save: function ( props ) { |
| 91 |
return buildRing( props.attributes, { inlineTypo: true } ); |
| 92 |
} |
| 93 |
}], |
| 94 |
edit: function ( props ) { |
| 95 |
var attrs = props.attributes; |
| 96 |
var setAttr = props.setAttributes; |
| 97 |
|
| 98 |
return el( 'div', null, |
| 99 |
el( InspectorControls, null, |
| 100 |
el( PanelBody, { title: __( 'Values', 'blockenberg' ), initialOpen: true }, |
| 101 |
el( RangeControl, { |
| 102 |
label: __( 'Current Value', 'blockenberg' ), |
| 103 |
value: attrs.current, min: 0, max: attrs.goal, |
| 104 |
onChange: function (v) { setAttr({ current: v }); } |
| 105 |
} ), |
| 106 |
el( RangeControl, { |
| 107 |
label: __( 'Goal Value', 'blockenberg' ), |
| 108 |
value: attrs.goal, min: 1, max: 1000, |
| 109 |
onChange: function (v) { setAttr({ goal: v }); } |
| 110 |
} ), |
| 111 |
el( SelectControl, { |
| 112 |
label: __( 'Center Label', 'blockenberg' ), |
| 113 |
value: attrs.centerLabel, |
| 114 |
options: [ |
| 115 |
{ label: 'Percentage (%)', value: 'auto' }, |
| 116 |
{ label: 'Value / Goal', value: 'value' }, |
| 117 |
{ label: 'Custom Text', value: 'custom' } |
| 118 |
], |
| 119 |
onChange: function (v) { setAttr({ centerLabel: v }); } |
| 120 |
} ), |
| 121 |
attrs.centerLabel === 'custom' && el( TextControl, { |
| 122 |
label: __( 'Custom Center Text', 'blockenberg' ), |
| 123 |
value: attrs.customCenterLabel, |
| 124 |
onChange: function (v) { setAttr({ customCenterLabel: v }); } |
| 125 |
} ) |
| 126 |
), |
| 127 |
el( PanelBody, { title: __( 'Appearance', 'blockenberg' ), initialOpen: false }, |
| 128 |
el( RangeControl, { |
| 129 |
label: __( 'Ring Size (px)', 'blockenberg' ), |
| 130 |
value: attrs.size, min: 80, max: 280, |
| 131 |
onChange: function (v) { setAttr({ size: v }); } |
| 132 |
} ), |
| 133 |
el( RangeControl, { |
| 134 |
label: __( 'Ring Thickness (px)', 'blockenberg' ), |
| 135 |
value: attrs.strokeWidth, min: 4, max: 30, |
| 136 |
onChange: function (v) { setAttr({ strokeWidth: v }); } |
| 137 |
} ), |
| 138 |
el( ToggleControl, { |
| 139 |
label: __( 'Glow Effect', 'blockenberg' ), |
| 140 |
checked: attrs.glow, |
| 141 |
onChange: function (v) { setAttr({ glow: v }); }, |
| 142 |
__nextHasNoMarginBottom: true |
| 143 |
} ), |
| 144 |
el( ToggleControl, { |
| 145 |
label: __( 'Animate on Scroll', 'blockenberg' ), |
| 146 |
checked: attrs.animateOnView, |
| 147 |
onChange: function (v) { setAttr({ animateOnView: v }); }, |
| 148 |
__nextHasNoMarginBottom: true |
| 149 |
} ) |
| 150 |
), |
| 151 |
|
| 152 |
el( PanelBody, { title: __( 'Typography', 'blockenberg' ), initialOpen: false }, |
| 153 |
el( getTypoControl(), { label: __( 'Center Label', 'blockenberg' ), value: attrs.centerTypo, onChange: function (v) { setAttr({ centerTypo: v }); } }), |
| 154 |
el( getTypoControl(), { label: __( 'Label', 'blockenberg' ), value: attrs.labelTypo, onChange: function (v) { setAttr({ labelTypo: v }); } }) |
| 155 |
), |
| 156 |
el( PanelBody, { title: __( 'Colors', 'blockenberg' ), initialOpen: false }, |
| 157 |
el( PanelColorSettings, { |
| 158 |
title: __( 'Colors', 'blockenberg' ), |
| 159 |
colorSettings: [ |
| 160 |
{ value: attrs.ringColor, onChange: function(v){setAttr({ringColor:v||'#6c3fb5'});}, label: __('Progress Ring') }, |
| 161 |
{ value: attrs.trackColor, onChange: function(v){setAttr({trackColor:v||'#e9e3ff'});}, label: __('Track') }, |
| 162 |
{ value: attrs.textColor, onChange: function(v){setAttr({textColor:v||'#222'});}, label: __('Text') } |
| 163 |
] |
| 164 |
} ) |
| 165 |
) |
| 166 |
), |
| 167 |
buildRing( attrs ) |
| 168 |
); |
| 169 |
}, |
| 170 |
save: function ( props ) { |
| 171 |
return buildRing( props.attributes ); |
| 172 |
} |
| 173 |
} ); |
| 174 |
} )(); |
| 175 |
|
