| 1 |
( function () { |
| 2 |
const el = window.wp.element.createElement; |
| 3 |
const { useState } = window.wp.element; |
| 4 |
const { registerBlockType } = window.wp.blocks; |
| 5 |
const { InspectorControls, PanelColorSettings } = window.wp.blockEditor; |
| 6 |
const { PanelBody, RangeControl, SelectControl, TextControl, ToggleControl } = window.wp.components; |
| 7 |
const { __ } = window.wp.i18n; |
| 8 |
const Fragment = window.wp.element.Fragment; |
| 9 |
let _tc; const getTypoControl = () => _tc || (_tc = window.bkbgTypographyControl); |
| 10 |
let _tv; const getTypoCssVars = () => _tv || (_tv = window.bkbgTypoCssVars); |
| 11 |
|
| 12 |
function buildTypoVars(a) { |
| 13 |
const fn = getTypoCssVars(); |
| 14 |
if (!fn) return {}; |
| 15 |
return Object.assign({}, fn(a.labelTypo || {}, '--bkpsw-lb-'), fn(a.badgeTypo || {}, '--bkpsw-bd-')); |
| 16 |
} |
| 17 |
|
| 18 |
registerBlockType( 'blockenberg/pricing-switcher', { |
| 19 |
edit: function ( props ) { |
| 20 |
const { attributes: attr, setAttributes } = props; |
| 21 |
const [editorActive, setEditorActive] = useState( attr.defaultActive ); |
| 22 |
|
| 23 |
const isMonthly = editorActive === 'monthly'; |
| 24 |
const wrapStyle = { |
| 25 |
'--bkpsw-accent': attr.accentColor, |
| 26 |
'--bkpsw-bg': attr.bgColor, |
| 27 |
'--bkpsw-active-text': attr.activeText, |
| 28 |
'--bkpsw-inactive-text': attr.inactiveText, |
| 29 |
'--bkpsw-radius': attr.borderRadius + 'px', |
| 30 |
display: 'flex', |
| 31 |
justifyContent: 'center', |
| 32 |
padding: '20px 0', |
| 33 |
...buildTypoVars(attr), |
| 34 |
}; |
| 35 |
|
| 36 |
function btnStyle( active ) { |
| 37 |
return { |
| 38 |
padding: '8px 24px', |
| 39 |
borderRadius: attr.borderRadius + 'px', |
| 40 |
background: active ? attr.accentColor : 'transparent', |
| 41 |
color: active ? attr.activeText : attr.inactiveText, |
| 42 |
border: '2px solid ' + attr.accentColor, |
| 43 |
cursor: 'pointer', |
| 44 |
fontWeight: 600, |
| 45 |
transition: 'all 0.25s', |
| 46 |
}; |
| 47 |
} |
| 48 |
|
| 49 |
return el( 'div', { className: 'bkpsw-outer', style: wrapStyle }, |
| 50 |
el( InspectorControls, null, |
| 51 |
el( PanelBody, { title: __('Labels & Default'), initialOpen: true }, |
| 52 |
el( TextControl, { label: __('Monthly Label'), value: attr.labelMonthly, onChange: v => setAttributes({labelMonthly:v}) }), |
| 53 |
el( TextControl, { label: __('Yearly Label'), value: attr.labelYearly, onChange: v => setAttributes({labelYearly:v}) }), |
| 54 |
el( SelectControl, { label: __('Default Active'), value: attr.defaultActive, |
| 55 |
options: [ {label:__('Monthly'),value:'monthly'}, {label:__('Yearly'),value:'yearly'} ], |
| 56 |
onChange: v => setAttributes({defaultActive:v}) }), |
| 57 |
el( TextControl, { label: __('Saving Badge Text'), value: attr.savingBadge, onChange: v => setAttributes({savingBadge:v}) }), |
| 58 |
el( ToggleControl, { label: __('Show Saving Badge'), checked: attr.showBadge, onChange: v => setAttributes({showBadge:v}), __nextHasNoMarginBottom: true }) |
| 59 |
), |
| 60 |
el( PanelBody, { title: __('Style'), initialOpen: false }, |
| 61 |
el( SelectControl, { label: __('Switch Style'), value: attr.switchStyle, |
| 62 |
options: [ {label:'Pills',value:'pills'}, {label:'Slider',value:'slider'}, {label:'Toggle',value:'toggle'} ], |
| 63 |
onChange: v => setAttributes({switchStyle:v}) }), |
| 64 |
el( RangeControl, { label: __('Border Radius (px)'), value: attr.borderRadius, min: 0, max: 50, onChange: v => setAttributes({borderRadius:v}) }) |
| 65 |
), |
| 66 |
el( PanelBody, { title: __('Typography'), initialOpen: false }, |
| 67 |
(() => { |
| 68 |
const TC = getTypoControl(); |
| 69 |
if (!TC) return el('p', null, 'Loading…'); |
| 70 |
return el( Fragment, null, |
| 71 |
el( TC, { label: 'Label', value: attr.labelTypo, onChange: v => setAttributes({ labelTypo: v }) }), |
| 72 |
el( TC, { label: 'Badge', value: attr.badgeTypo, onChange: v => setAttributes({ badgeTypo: v }) }) |
| 73 |
); |
| 74 |
})() |
| 75 |
), |
| 76 |
el( PanelColorSettings, { title: __('Colors'), initialOpen: false, colorSettings: [ |
| 77 |
{ label: __('Accent Color'), value: attr.accentColor, onChange: v => setAttributes({accentColor:v||'#6c3fb5'}) }, |
| 78 |
{ label: __('Background'), value: attr.bgColor, onChange: v => setAttributes({bgColor:v||'#f3f3f7'}) }, |
| 79 |
{ label: __('Active Text'), value: attr.activeText, onChange: v => setAttributes({activeText:v||'#ffffff'}) }, |
| 80 |
{ label: __('Inactive Text'), value: attr.inactiveText,onChange: v => setAttributes({inactiveText:v||'#555555'}) }, |
| 81 |
]}) |
| 82 |
), |
| 83 |
|
| 84 |
el( 'div', { className: 'bkpsw-switch bkpsw-style-' + attr.switchStyle, |
| 85 |
style: { background: attr.bgColor, borderRadius: attr.borderRadius + 'px', display: 'inline-flex', alignItems: 'center', padding: '4px', gap: '4px' }}, |
| 86 |
el( 'button', { className: 'bkpsw-btn bkpsw-monthly' + (isMonthly?' bkpsw-active':''), |
| 87 |
style: btnStyle(isMonthly), |
| 88 |
onClick: () => setEditorActive('monthly') }, |
| 89 |
attr.labelMonthly |
| 90 |
), |
| 91 |
el( 'button', { className: 'bkpsw-btn bkpsw-yearly' + (!isMonthly?' bkpsw-active':''), |
| 92 |
style: btnStyle(!isMonthly), |
| 93 |
onClick: () => setEditorActive('yearly') }, |
| 94 |
attr.labelYearly, |
| 95 |
attr.showBadge && attr.savingBadge && el( 'span', { className: 'bkpsw-badge', |
| 96 |
style: { marginLeft: '6px', background: '#f59e0b', color: '#fff', borderRadius: '20px', padding: '2px 7px', verticalAlign: 'middle' }}, |
| 97 |
attr.savingBadge |
| 98 |
) |
| 99 |
) |
| 100 |
) |
| 101 |
); |
| 102 |
}, |
| 103 |
|
| 104 |
save: function ( { attributes: attr } ) { |
| 105 |
const isYearly = attr.defaultActive === 'yearly'; |
| 106 |
const wrapCls = 'bkpsw-wrap' + (isYearly ? ' bkpsw-yearly-active' : ' bkpsw-monthly-active'); |
| 107 |
const wrapStyle = { |
| 108 |
'--bkpsw-accent': attr.accentColor, |
| 109 |
'--bkpsw-bg': attr.bgColor, |
| 110 |
'--bkpsw-active-text': attr.activeText, |
| 111 |
'--bkpsw-inactive-text': attr.inactiveText, |
| 112 |
'--bkpsw-radius': attr.borderRadius + 'px', |
| 113 |
display: 'flex', |
| 114 |
justifyContent: 'center', |
| 115 |
padding: '20px 0', |
| 116 |
...buildTypoVars(attr), |
| 117 |
}; |
| 118 |
return el( 'div', { className: wrapCls, style: wrapStyle, 'data-switcher': '1', 'data-default': attr.defaultActive }, |
| 119 |
el( 'div', { className: 'bkpsw-switch bkpsw-style-' + attr.switchStyle, |
| 120 |
style: { background: attr.bgColor, borderRadius: attr.borderRadius + 'px', display: 'inline-flex', alignItems: 'center', padding: '4px', gap: '4px' }}, |
| 121 |
el( 'button', { className: 'bkpsw-btn bkpsw-monthly' + (!isYearly?' bkpsw-active':''), |
| 122 |
'data-target': 'monthly', type: 'button' }, |
| 123 |
attr.labelMonthly |
| 124 |
), |
| 125 |
el( 'button', { className: 'bkpsw-btn bkpsw-yearly' + (isYearly?' bkpsw-active':''), |
| 126 |
'data-target': 'yearly', type: 'button' }, |
| 127 |
attr.labelYearly, |
| 128 |
attr.showBadge && attr.savingBadge && el( 'span', { className: 'bkpsw-badge' }, attr.savingBadge ) |
| 129 |
) |
| 130 |
) |
| 131 |
); |
| 132 |
}, |
| 133 |
|
| 134 |
deprecated: [ |
| 135 |
{ |
| 136 |
attributes: { |
| 137 |
labelMonthly: { type: "string", default: "Monthly" }, |
| 138 |
labelYearly: { type: "string", default: "Yearly" }, |
| 139 |
defaultActive: { type: "string", default: "monthly" }, |
| 140 |
switchStyle: { type: "string", default: "pills" }, |
| 141 |
accentColor: { type: "string", default: "#6c3fb5" }, |
| 142 |
bgColor: { type: "string", default: "#f3f3f7" }, |
| 143 |
activeText: { type: "string", default: "#ffffff" }, |
| 144 |
inactiveText: { type: "string", default: "#555555" }, |
| 145 |
borderRadius: { type: "number", default: 40 }, |
| 146 |
savingBadge: { type: "string", default: "Save 20%" }, |
| 147 |
showBadge: { type: "boolean", default: true }, |
| 148 |
labelFontSize:{ type: "number", default: 14 }, |
| 149 |
badgeFontSize:{ type: "number", default: 11 } |
| 150 |
}, |
| 151 |
save: function ( { attributes: attr } ) { |
| 152 |
const isYearly = attr.defaultActive === 'yearly'; |
| 153 |
const wrapCls = 'bkpsw-wrap' + (isYearly ? ' bkpsw-yearly-active' : ' bkpsw-monthly-active'); |
| 154 |
const wrapStyle = { |
| 155 |
'--bkpsw-accent': attr.accentColor, |
| 156 |
'--bkpsw-bg': attr.bgColor, |
| 157 |
'--bkpsw-active-text': attr.activeText, |
| 158 |
'--bkpsw-inactive-text': attr.inactiveText, |
| 159 |
'--bkpsw-radius': attr.borderRadius + 'px', |
| 160 |
display: 'flex', |
| 161 |
justifyContent: 'center', |
| 162 |
padding: '20px 0', |
| 163 |
}; |
| 164 |
return el( 'div', { className: wrapCls, style: wrapStyle, 'data-switcher': '1', 'data-default': attr.defaultActive }, |
| 165 |
el( 'div', { className: 'bkpsw-switch bkpsw-style-' + attr.switchStyle, |
| 166 |
style: { background: attr.bgColor, borderRadius: attr.borderRadius + 'px', display: 'inline-flex', alignItems: 'center', padding: '4px', gap: '4px' }}, |
| 167 |
el( 'button', { className: 'bkpsw-btn bkpsw-monthly' + (!isYearly?' bkpsw-active':''), |
| 168 |
'data-target': 'monthly', type: 'button' }, |
| 169 |
attr.labelMonthly |
| 170 |
), |
| 171 |
el( 'button', { className: 'bkpsw-btn bkpsw-yearly' + (isYearly?' bkpsw-active':''), |
| 172 |
'data-target': 'yearly', type: 'button' }, |
| 173 |
attr.labelYearly, |
| 174 |
attr.showBadge && attr.savingBadge && el( 'span', { className: 'bkpsw-badge' }, attr.savingBadge ) |
| 175 |
) |
| 176 |
) |
| 177 |
); |
| 178 |
} |
| 179 |
} |
| 180 |
] |
| 181 |
} ); |
| 182 |
}() ); |
| 183 |
|
