| 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 |
|
| 13 |
var SEARCH_ICON = el( 'svg', { viewBox:'0 0 24 24', fill:'currentColor', width:18, height:18, style:{display:'inline-block',verticalAlign:'middle'} }, |
| 14 |
el( 'path', { d:'M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z' } ) |
| 15 |
); |
| 16 |
|
| 17 |
function renderBar( attrs, isEditor ) { |
| 18 |
var wrapStyle = { |
| 19 |
'--bksb-fieldBg': attrs.fieldBg, |
| 20 |
'--bksb-fieldBrd': attrs.fieldBorder, |
| 21 |
'--bksb-fieldTxt': attrs.fieldText, |
| 22 |
'--bksb-btnBg': attrs.btnBg, |
| 23 |
'--bksb-btnTxt': attrs.btnText, |
| 24 |
'--bksb-radius': attrs.borderRadius + 'px', |
| 25 |
'--bksb-h': attrs.fieldHeight + 'px', |
| 26 |
'--bksb-fs': attrs.fontSize + 'px', |
| 27 |
'--bksb-maxW': attrs.maxWidth + 'px', |
| 28 |
'--bksb-align': attrs.alignment === 'center' ? 'center' : attrs.alignment === 'right' ? 'flex-end' : 'flex-start' |
| 29 |
}; |
| 30 |
return el( 'div', { className: 'bksb-wrap', style: wrapStyle }, |
| 31 |
el( 'form', { |
| 32 |
className: 'bksb-form', |
| 33 |
role: 'search', |
| 34 |
action: isEditor ? null : '/', |
| 35 |
method: 'get', |
| 36 |
onSubmit: isEditor ? function(e){e.preventDefault();} : null |
| 37 |
}, |
| 38 |
!isEditor && el( 'input', { type: 'hidden', name: 'post_type', value: 'any' } ), |
| 39 |
el( 'input', { |
| 40 |
className: 'bksb-input', |
| 41 |
type: 'search', |
| 42 |
name: isEditor ? null : 's', |
| 43 |
placeholder: attrs.placeholder, |
| 44 |
'data-live': attrs.liveSearch ? '1' : '0', |
| 45 |
readOnly: isEditor |
| 46 |
} ), |
| 47 |
attrs.showBtn && el( 'button', { className: 'bksb-btn', type: 'submit' }, |
| 48 |
attrs.btnIcon && SEARCH_ICON, |
| 49 |
attrs.btnLabel && el( 'span', null, attrs.btnLabel ) |
| 50 |
), |
| 51 |
attrs.liveSearch && el( 'div', { className: 'bksb-results' } ) |
| 52 |
) |
| 53 |
); |
| 54 |
} |
| 55 |
|
| 56 |
registerBlockType( 'blockenberg/search-bar', { |
| 57 |
edit: function ( props ) { |
| 58 |
var attrs = props.attributes; |
| 59 |
var setAttr = props.setAttributes; |
| 60 |
return el( 'div', null, |
| 61 |
el( InspectorControls, null, |
| 62 |
el( PanelBody, { title: __('Search Settings','blockenberg'), initialOpen: true }, |
| 63 |
el( TextControl, { label:__('Placeholder','blockenberg'), value:attrs.placeholder, onChange:function(v){setAttr({placeholder:v});} } ), |
| 64 |
el( ToggleControl, { label:__('Show Button','blockenberg'), checked:attrs.showBtn, onChange:function(v){setAttr({showBtn:v});}, __nextHasNoMarginBottom:true } ), |
| 65 |
attrs.showBtn && el( ToggleControl, { label:__('Button Icon','blockenberg'), checked:attrs.btnIcon, onChange:function(v){setAttr({btnIcon:v});}, __nextHasNoMarginBottom:true } ), |
| 66 |
attrs.showBtn && el( TextControl, { label:__('Button Label','blockenberg'), value:attrs.btnLabel, onChange:function(v){setAttr({btnLabel:v});} } ), |
| 67 |
el( ToggleControl, { label:__('Live AJAX Search','blockenberg'), checked:attrs.liveSearch, onChange:function(v){setAttr({liveSearch:v});}, __nextHasNoMarginBottom:true } ) |
| 68 |
), |
| 69 |
el( PanelBody, { title: __('Style','blockenberg'), initialOpen: false }, |
| 70 |
el( SelectControl, { label:__('Alignment','blockenberg'), value:attrs.alignment, options:[{label:'Left',value:'left'},{label:'Center',value:'center'},{label:'Right',value:'right'},{label:'Full Width',value:'full'}], onChange:function(v){setAttr({alignment:v});} } ), |
| 71 |
el( RangeControl, { label:__('Max Width (px)','blockenberg'), value:attrs.maxWidth, min:200, max:960, onChange:function(v){setAttr({maxWidth:v});} } ), |
| 72 |
el( RangeControl, { label:__('Field Height (px)','blockenberg'), value:attrs.fieldHeight, min:32, max:80, onChange:function(v){setAttr({fieldHeight:v});} } ), |
| 73 |
el( RangeControl, { label:__('Border Radius (px)','blockenberg'), value:attrs.borderRadius, min:0, max:40, onChange:function(v){setAttr({borderRadius:v});} } ) |
| 74 |
), |
| 75 |
|
| 76 |
el( PanelBody, { title: __( 'Typography', 'blockenberg' ), initialOpen: false }, |
| 77 |
el( RangeControl, { label:__('Font Size (px)','blockenberg'), value:attrs.fontSize, min:12, max:24, onChange:function(v){setAttr({fontSize:v});} } ) |
| 78 |
), |
| 79 |
el( PanelBody, { title: __('Colors','blockenberg'), initialOpen: false }, |
| 80 |
el( PanelColorSettings, { title:__('Colors','blockenberg'), colorSettings:[ |
| 81 |
{ value:attrs.fieldBg, onChange:function(v){setAttr({fieldBg:v||'#fff'});}, label:__('Field Background') }, |
| 82 |
{ value:attrs.fieldBorder, onChange:function(v){setAttr({fieldBorder:v||'#d1d5db'});},label:__('Field Border') }, |
| 83 |
{ value:attrs.fieldText, onChange:function(v){setAttr({fieldText:v||'#111827'});}, label:__('Field Text') }, |
| 84 |
{ value:attrs.btnBg, onChange:function(v){setAttr({btnBg:v||'#6c3fb5'});}, label:__('Button Background') }, |
| 85 |
{ value:attrs.btnText, onChange:function(v){setAttr({btnText:v||'#ffffff'});}, label:__('Button Text') } |
| 86 |
] } ) |
| 87 |
) |
| 88 |
), |
| 89 |
renderBar( attrs, true ) |
| 90 |
); |
| 91 |
}, |
| 92 |
save: function ( props ) { |
| 93 |
return renderBar( props.attributes, false ); |
| 94 |
} |
| 95 |
} ); |
| 96 |
} )(); |
| 97 |
|
