| 1 |
( function () { |
| 2 |
var el = window.wp.element.createElement; |
| 3 |
var { registerBlockType } = window.wp.blocks; |
| 4 |
var { InspectorControls, PanelColorSettings } = window.wp.blockEditor; |
| 5 |
var { PanelBody, RangeControl, SelectControl, TextControl, TextareaControl, ToggleControl } = window.wp.components; |
| 6 |
var { __ } = window.wp.i18n; |
| 7 |
|
| 8 |
var _tc, _tvf; |
| 9 |
Object.defineProperty(window, '_tc', { get: function () { return _tc || (_tc = window.bkbgTypographyControl); } }); |
| 10 |
Object.defineProperty(window, '_tvf', { get: function () { return _tvf || (_tvf = window.bkbgTypoCssVars); } }); |
| 11 |
function getTypoControl(p, key, label) { return _tc ? _tc(p, key, label) : null; } |
| 12 |
function getTypoCssVars(a) { |
| 13 |
if (!_tvf) return {}; |
| 14 |
return _tvf(a.textTypo || {}, '--bkte-tx-'); |
| 15 |
} |
| 16 |
|
| 17 |
var TAGS = ['h1','h2','h3','h4','p','div'].map(t=>({label:t.toUpperCase(),value:t})); |
| 18 |
var ALIGNS = [{label:'Left',value:'left'},{label:'Center',value:'center'},{label:'Right',value:'right'}]; |
| 19 |
|
| 20 |
registerBlockType('blockenberg/typing-effect', { |
| 21 |
edit: function(props) { |
| 22 |
var a = props.attributes; |
| 23 |
var set = props.setAttributes; |
| 24 |
var phrases = (a.phrases||'').split(',').map(s=>s.trim()).filter(Boolean); |
| 25 |
|
| 26 |
var wrapStyle = (function () { |
| 27 |
var _tv = getTypoCssVars(a); |
| 28 |
var s = { |
| 29 |
background: a.bgColor || undefined, |
| 30 |
paddingTop: a.paddingTop + 'px', |
| 31 |
paddingBottom: a.paddingBottom + 'px', |
| 32 |
textAlign: a.textAlign, |
| 33 |
}; |
| 34 |
Object.assign(s, _tv); |
| 35 |
return s; |
| 36 |
})(); |
| 37 |
|
| 38 |
return el('div', { className: 'bkte-wrap', style: wrapStyle }, |
| 39 |
el(InspectorControls, null, |
| 40 |
el(PanelBody, { title: __('Content'), initialOpen: true }, |
| 41 |
el(TextControl, { label: __('Static Prefix Text'), value: a.prefix, onChange: v => set({prefix:v}) }), |
| 42 |
el(TextareaControl, { label: __('Typing Phrases (comma-separated)'), value: a.phrases, rows: 4, |
| 43 |
help: __('e.g.: beautiful websites,powerful apps,amazing brands'), |
| 44 |
onChange: v => set({phrases:v}) }), |
| 45 |
el(TextControl, { label: __('Static Suffix Text'), value: a.suffix, onChange: v => set({suffix:v}) }), |
| 46 |
el(SelectControl, { label: __('HTML Tag'), value: a.tag, options: TAGS, onChange: v => set({tag:v}) }), |
| 47 |
), |
| 48 |
el(PanelBody, { title: __('Animation'), initialOpen: false }, |
| 49 |
el(RangeControl, { label: __('Type Speed (ms/char)'), value: a.typeSpeed, min:20, max:300, onChange: v=>set({typeSpeed:v}) }), |
| 50 |
el(RangeControl, { label: __('Delete Speed (ms/char)'), value: a.deleteSpeed, min:10, max:200, onChange: v=>set({deleteSpeed:v}) }), |
| 51 |
el(RangeControl, { label: __('Pause After Phrase (ms)'), value: a.pauseDelay, min:200, max:5000, step:100, onChange: v=>set({pauseDelay:v}) }), |
| 52 |
el(ToggleControl, { label: __('Loop'), checked: a.loop, onChange:v=>set({loop:v}), __nextHasNoMarginBottom:true }), |
| 53 |
el(TextControl, { label: __('Cursor Character'), value: a.cursorChar, onChange: v=>set({cursorChar:v.slice(0,2)}) }), |
| 54 |
el(ToggleControl, { label: __('Cursor Blink'), checked: a.cursorBlink, onChange:v=>set({cursorBlink:v}), __nextHasNoMarginBottom:true }), |
| 55 |
), |
| 56 |
el(PanelBody, { title: __('Typography'), initialOpen: false }, |
| 57 |
getTypoControl(props, 'textTypo', __('Text')), |
| 58 |
el(SelectControl, { label: __('Text Align'), value: a.textAlign, options: ALIGNS, onChange: v=>set({textAlign:v}) }), |
| 59 |
), |
| 60 |
el(PanelBody, { title: __('Spacing'), initialOpen: false }, |
| 61 |
el(RangeControl, { label: __('Padding Top (px)'), value: a.paddingTop, min:0, max:200, onChange: v=>set({paddingTop:v}) }), |
| 62 |
el(RangeControl, { label: __('Padding Bottom (px)'), value: a.paddingBottom, min:0, max:200, onChange: v=>set({paddingBottom:v}) }), |
| 63 |
), |
| 64 |
el(PanelColorSettings, { title: __('Colors'), initialOpen: false, colorSettings: [ |
| 65 |
{ label: __('Prefix / Suffix Color'), value: a.prefixColor, onChange: v=>set({prefixColor:v||'#1f2937'}) }, |
| 66 |
{ label: __('Typed Text Color'), value: a.typedColor, onChange: v=>set({typedColor:v||'#6c3fb5'}) }, |
| 67 |
{ label: __('Cursor Color'), value: a.cursorColor, onChange: v=>set({cursorColor:v||'#6c3fb5'}) }, |
| 68 |
{ label: __('Background Color'), value: a.bgColor, onChange: v=>set({bgColor:v||''}) }, |
| 69 |
]}), |
| 70 |
), |
| 71 |
|
| 72 |
el(a.tag||'h2', { className: 'bkte-text', style: { |
| 73 |
textAlign: a.textAlign, margin: 0, |
| 74 |
}}, |
| 75 |
a.prefix && el('span', { className:'bkte-prefix', style:{color:a.prefixColor} }, a.prefix), |
| 76 |
el('span', { className:'bkte-typed', style:{color:a.typedColor} }, phrases[0]||''), |
| 77 |
el('span', { className:'bkte-cursor bkte-cursor-blink', style:{color:a.cursorColor} }, a.cursorChar||'|'), |
| 78 |
a.suffix && el('span', { className:'bkte-suffix', style:{color:a.prefixColor} }, a.suffix), |
| 79 |
), |
| 80 |
); |
| 81 |
}, |
| 82 |
|
| 83 |
save: function({attributes:a}) { |
| 84 |
var wrapStyle = (function () { |
| 85 |
var _tv = getTypoCssVars(a); |
| 86 |
var s = { |
| 87 |
background: a.bgColor || undefined, |
| 88 |
paddingTop: a.paddingTop + 'px', |
| 89 |
paddingBottom: a.paddingBottom + 'px', |
| 90 |
textAlign: a.textAlign, |
| 91 |
}; |
| 92 |
Object.assign(s, _tv); |
| 93 |
return s; |
| 94 |
})(); |
| 95 |
return el('div', { |
| 96 |
className: 'bkte-wrap', style: wrapStyle, |
| 97 |
'data-phrases': a.phrases, |
| 98 |
'data-type-speed': a.typeSpeed, |
| 99 |
'data-delete-speed': a.deleteSpeed, |
| 100 |
'data-pause': a.pauseDelay, |
| 101 |
'data-loop': a.loop ? '1' : '0', |
| 102 |
'data-cursor-blink': a.cursorBlink ? '1' : '0', |
| 103 |
}, |
| 104 |
el(a.tag||'h2', { className:'bkte-text', style: { |
| 105 |
margin:0, |
| 106 |
}}, |
| 107 |
a.prefix && el('span', { className:'bkte-prefix', style:{color:a.prefixColor} }, a.prefix), |
| 108 |
el('span', { className:'bkte-typed', style:{color:a.typedColor} }), |
| 109 |
el('span', { className:'bkte-cursor', style:{color:a.cursorColor} }, a.cursorChar||'|'), |
| 110 |
a.suffix && el('span', { className:'bkte-suffix', style:{color:a.prefixColor} }, a.suffix), |
| 111 |
), |
| 112 |
); |
| 113 |
} |
| 114 |
}); |
| 115 |
}() ); |
| 116 |
|
