| 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 useBlockProps = wp.blockEditor.useBlockProps; |
| 8 |
var PanelColorSettings = wp.blockEditor.PanelColorSettings; |
| 9 |
var PanelBody = wp.components.PanelBody; |
| 10 |
var ToggleControl = wp.components.ToggleControl; |
| 11 |
var RangeControl = wp.components.RangeControl; |
| 12 |
var SelectControl = wp.components.SelectControl; |
| 13 |
var TextControl = wp.components.TextControl; |
| 14 |
|
| 15 |
var _ctcTC, _ctcTV; |
| 16 |
function _tc() { return _ctcTC || (_ctcTC = window.bkbgTypographyControl); } |
| 17 |
function _tv(obj, prefix) { var fn = _ctcTV || (_ctcTV = window.bkbgTypoCssVars); return fn ? fn(obj, prefix) : {}; } |
| 18 |
|
| 19 |
registerBlockType('blockenberg/cta-countdown', { |
| 20 |
title: __('CTA with Countdown', 'blockenberg'), |
| 21 |
icon: 'clock', |
| 22 |
category: 'bkbg-marketing', |
| 23 |
|
| 24 |
edit: function (props) { |
| 25 |
var a = props.attributes; |
| 26 |
var set = props.setAttributes; |
| 27 |
|
| 28 |
function wrapStyle(a) { |
| 29 |
return Object.assign({ |
| 30 |
'--bkbg-ctc-bg': a.bgColor, |
| 31 |
'--bkbg-ctc-text': a.textColor, |
| 32 |
'--bkbg-ctc-heading-c': a.headingColor, |
| 33 |
'--bkbg-ctc-heading-sz': a.headingSize + 'px', |
| 34 |
'--bkbg-ctc-heading-w': a.headingWeight, |
| 35 |
'--bkbg-ctc-sub-c': a.subColor, |
| 36 |
'--bkbg-ctc-sub-sz': a.subSize + 'px', |
| 37 |
'--bkbg-ctc-eyebrow-c': a.eyebrowColor, |
| 38 |
'--bkbg-ctc-eyebrow-sz': a.eyebrowSize + 'px', |
| 39 |
'--bkbg-ctc-accent': a.accentColor, |
| 40 |
'--bkbg-ctc-timer-bg': a.timerBg, |
| 41 |
'--bkbg-ctc-timer-border': a.timerBorder, |
| 42 |
'--bkbg-ctc-num-c': a.timerNumColor, |
| 43 |
'--bkbg-ctc-num-sz': a.numberSize + 'px', |
| 44 |
'--bkbg-ctc-num-w': a.numberWeight, |
| 45 |
'--bkbg-ctc-label-c': a.timerLabelColor, |
| 46 |
'--bkbg-ctc-label-sz': a.labelSize + 'px', |
| 47 |
'--bkbg-ctc-btn-bg': a.btnBg, |
| 48 |
'--bkbg-ctc-btn-text': a.btnText, |
| 49 |
'--bkbg-ctc-btn2-bg': a.btn2Bg, |
| 50 |
'--bkbg-ctc-btn2-text': a.btn2Text, |
| 51 |
'--bkbg-ctc-btn2-border': a.btn2Border, |
| 52 |
'--bkbg-ctc-btn-r': a.buttonRadius + 'px', |
| 53 |
'--bkbg-ctc-btn-sz': a.buttonSize + 'px', |
| 54 |
'--bkbg-ctc-timer-gap': a.timerGap + 'px', |
| 55 |
'--bkbg-ctc-r': a.borderRadius + 'px', |
| 56 |
'--bkbg-ctc-pt': a.paddingTop + 'px', |
| 57 |
'--bkbg-ctc-pb': a.paddingBottom + 'px', |
| 58 |
}, _tv(a.typoHeading, '--bkbg-ctc-hdg-'), _tv(a.typoSub, '--bkbg-ctc-sub-'), _tv(a.typoEyebrow, '--bkbg-ctc-eye-'), _tv(a.typoNumber, '--bkbg-ctc-num-')); |
| 59 |
} |
| 60 |
|
| 61 |
var styleOptions = [ |
| 62 |
{ label: __('Dark', 'blockenberg'), value: 'dark' }, |
| 63 |
{ label: __('Light', 'blockenberg'), value: 'light' }, |
| 64 |
{ label: __('Gradient', 'blockenberg'), value: 'gradient' }, |
| 65 |
{ label: __('Banner', 'blockenberg'), value: 'banner' }, |
| 66 |
]; |
| 67 |
|
| 68 |
var layoutOptions = [ |
| 69 |
{ label: __('Centered', 'blockenberg'), value: 'centered' }, |
| 70 |
{ label: __('Split', 'blockenberg'), value: 'split' }, |
| 71 |
]; |
| 72 |
|
| 73 |
var timerStyleOptions = [ |
| 74 |
{ label: __('Box', 'blockenberg'), value: 'box' }, |
| 75 |
{ label: __('Minimal', 'blockenberg'), value: 'minimal' }, |
| 76 |
{ label: __('Outlined', 'blockenberg'), value: 'outlined' }, |
| 77 |
]; |
| 78 |
|
| 79 |
// Preview countdown — static values for editor |
| 80 |
var units = [ |
| 81 |
{ key: 'days', label: a.labelDays, show: a.showDays, val: '0' + a.daysFromNow }, |
| 82 |
{ key: 'hours', label: a.labelHours, show: a.showHours, val: '12' }, |
| 83 |
{ key: 'minutes', label: a.labelMinutes, show: a.showMinutes, val: '34' }, |
| 84 |
{ key: 'seconds', label: a.labelSeconds, show: a.showSeconds, val: '56' }, |
| 85 |
].filter(function (u) { return u.show; }); |
| 86 |
|
| 87 |
var inspector = el(InspectorControls, {}, |
| 88 |
|
| 89 |
el(PanelBody, { title: __('Content', 'blockenberg'), initialOpen: true }, |
| 90 |
el(ToggleControl, { |
| 91 |
label: __('Show Eyebrow', 'blockenberg'), checked: a.showEyebrow, __nextHasNoMarginBottom: true, |
| 92 |
onChange: function (v) { set({ showEyebrow: v }); } |
| 93 |
}), |
| 94 |
a.showEyebrow && el(TextControl, { label: __('Eyebrow Text', 'blockenberg'), value: a.eyebrow, onChange: function (v) { set({ eyebrow: v }); } }), |
| 95 |
el(ToggleControl, { |
| 96 |
label: __('Show Subheading', 'blockenberg'), checked: a.showSubheading, __nextHasNoMarginBottom: true, |
| 97 |
onChange: function (v) { set({ showSubheading: v }); } |
| 98 |
}) |
| 99 |
), |
| 100 |
|
| 101 |
el(PanelBody, { title: __('CTA Buttons', 'blockenberg'), initialOpen: false }, |
| 102 |
el(TextControl, { label: __('Primary Button Text', 'blockenberg'), value: a.ctaText, onChange: function (v) { set({ ctaText: v }); } }), |
| 103 |
el(TextControl, { label: __('Primary Button URL', 'blockenberg'), value: a.ctaUrl, onChange: function (v) { set({ ctaUrl: v }); } }), |
| 104 |
el(ToggleControl, { |
| 105 |
label: __('Show Secondary Button', 'blockenberg'), checked: a.showSecondaryCta, __nextHasNoMarginBottom: true, |
| 106 |
onChange: function (v) { set({ showSecondaryCta: v }); } |
| 107 |
}), |
| 108 |
a.showSecondaryCta && el(TextControl, { label: __('Secondary Button Text', 'blockenberg'), value: a.ctaSecondaryText, onChange: function (v) { set({ ctaSecondaryText: v }); } }), |
| 109 |
a.showSecondaryCta && el(TextControl, { label: __('Secondary Button URL', 'blockenberg'), value: a.ctaSecondaryUrl, onChange: function (v) { set({ ctaSecondaryUrl: v }); } }) |
| 110 |
), |
| 111 |
|
| 112 |
el(PanelBody, { title: __('Countdown Timer', 'blockenberg'), initialOpen: false }, |
| 113 |
el(ToggleControl, { |
| 114 |
label: __('Use Relative Time (days from now)', 'blockenberg'), checked: a.useRelative, __nextHasNoMarginBottom: true, |
| 115 |
onChange: function (v) { set({ useRelative: v }); } |
| 116 |
}), |
| 117 |
a.useRelative && el(RangeControl, { label: __('Days from Now', 'blockenberg'), value: a.daysFromNow, onChange: function (v) { set({ daysFromNow: v }); }, min: 0, max: 365 }), |
| 118 |
!a.useRelative && el(TextControl, { label: __('End Date (ISO format)', 'blockenberg'), value: a.endDate, placeholder: '2026-12-31T23:59:59', onChange: function (v) { set({ endDate: v }); } }), |
| 119 |
el('p', { style: { marginBottom: 8, fontWeight: 600, fontSize: 11, textTransform: 'uppercase' } }, __('Show Units', 'blockenberg')), |
| 120 |
el(ToggleControl, { label: __('Days', 'blockenberg'), checked: a.showDays, __nextHasNoMarginBottom: true, onChange: function (v) { set({ showDays: v }); } }), |
| 121 |
el(ToggleControl, { label: __('Hours', 'blockenberg'), checked: a.showHours, __nextHasNoMarginBottom: true, onChange: function (v) { set({ showHours: v }); } }), |
| 122 |
el(ToggleControl, { label: __('Minutes', 'blockenberg'), checked: a.showMinutes, __nextHasNoMarginBottom: true, onChange: function (v) { set({ showMinutes: v }); } }), |
| 123 |
el(ToggleControl, { label: __('Seconds', 'blockenberg'), checked: a.showSeconds, __nextHasNoMarginBottom: true, onChange: function (v) { set({ showSeconds: v }); } }), |
| 124 |
el(ToggleControl, { label: __('Show Labels', 'blockenberg'), checked: a.showLabels, __nextHasNoMarginBottom: true, onChange: function (v) { set({ showLabels: v }); } }), |
| 125 |
a.showLabels && el(TextControl, { label: __('Days Label', 'blockenberg'), value: a.labelDays, onChange: function (v) { set({ labelDays: v }); } }), |
| 126 |
a.showLabels && el(TextControl, { label: __('Hours Label', 'blockenberg'), value: a.labelHours, onChange: function (v) { set({ labelHours: v }); } }), |
| 127 |
a.showLabels && el(TextControl, { label: __('Minutes Label', 'blockenberg'), value: a.labelMinutes, onChange: function (v) { set({ labelMinutes: v }); } }), |
| 128 |
a.showLabels && el(TextControl, { label: __('Seconds Label', 'blockenberg'), value: a.labelSeconds, onChange: function (v) { set({ labelSeconds: v }); } }) |
| 129 |
), |
| 130 |
|
| 131 |
el(PanelBody, { title: __('Style & Layout', 'blockenberg'), initialOpen: false }, |
| 132 |
el(SelectControl, { label: __('Style', 'blockenberg'), value: a.style, options: styleOptions, onChange: function (v) { set({ style: v }); } }), |
| 133 |
el(SelectControl, { label: __('Layout', 'blockenberg'), value: a.layout, options: layoutOptions, onChange: function (v) { set({ layout: v }); } }), |
| 134 |
el(SelectControl, { label: __('Timer Style', 'blockenberg'), value: a.timerStyle, options: timerStyleOptions, onChange: function (v) { set({ timerStyle: v }); } }), |
| 135 |
el(RangeControl, { label: __('Border Radius', 'blockenberg'), value: a.borderRadius, onChange: function (v) { set({ borderRadius: v }); }, min: 0, max: 48 }), |
| 136 |
el(RangeControl, { label: __('Timer Gap', 'blockenberg'), value: a.timerGap, onChange: function (v) { set({ timerGap: v }); }, min: 4, max: 32 }), |
| 137 |
el(RangeControl, { label: __('Button Radius', 'blockenberg'), value: a.buttonRadius, onChange: function (v) { set({ buttonRadius: v }); }, min: 0, max: 99 }), |
| 138 |
), |
| 139 |
|
| 140 |
el(PanelBody, { title: __('Typography', 'blockenberg'), initialOpen: false }, |
| 141 |
_tc() && el(_tc(), { label: __('Heading', 'blockenberg'), value: a.typoHeading, onChange: function (v) { set({ typoHeading: v }); } }), |
| 142 |
_tc() && el(_tc(), { label: __('Subheading', 'blockenberg'), value: a.typoSub, onChange: function (v) { set({ typoSub: v }); } }), |
| 143 |
_tc() && el(_tc(), { label: __('Eyebrow', 'blockenberg'), value: a.typoEyebrow, onChange: function (v) { set({ typoEyebrow: v }); } }), |
| 144 |
_tc() && el(_tc(), { label: __('Timer Number', 'blockenberg'), value: a.typoNumber, onChange: function (v) { set({ typoNumber: v }); } }), |
| 145 |
el(RangeControl, { label: __('Timer Label Size', 'blockenberg'), value: a.labelSize, onChange: function (v) { set({ labelSize: v }); }, min: 9, max: 18 }), |
| 146 |
el(RangeControl, { label: __('Button Font Size', 'blockenberg'), value: a.buttonSize, onChange: function (v) { set({ buttonSize: v }); }, min: 12, max: 24 }) |
| 147 |
), |
| 148 |
|
| 149 |
el(PanelBody, { title: __('Spacing', 'blockenberg'), initialOpen: false }, |
| 150 |
el(RangeControl, { label: __('Padding Top', 'blockenberg'), value: a.paddingTop, onChange: function (v) { set({ paddingTop: v }); }, min: 0, max: 240 }), |
| 151 |
el(RangeControl, { label: __('Padding Bottom', 'blockenberg'), value: a.paddingBottom, onChange: function (v) { set({ paddingBottom: v }); }, min: 0, max: 240 }) |
| 152 |
), |
| 153 |
|
| 154 |
el(PanelColorSettings, { |
| 155 |
title: __('Colors', 'blockenberg'), initialOpen: false, |
| 156 |
colorSettings: [ |
| 157 |
{ value: a.bgColor, onChange: function (v) { set({ bgColor: v || '#0f172a' }); }, label: __('Background', 'blockenberg') }, |
| 158 |
{ value: a.accentColor, onChange: function (v) { set({ accentColor: v || '#6c3fb5' }); }, label: __('Accent', 'blockenberg') }, |
| 159 |
{ value: a.headingColor, onChange: function (v) { set({ headingColor: v || '#ffffff' }); }, label: __('Heading Color', 'blockenberg') }, |
| 160 |
{ value: a.subColor, onChange: function (v) { set({ subColor: v || 'rgba(255,255,255,0.7)' }); }, label: __('Subheading Color', 'blockenberg') }, |
| 161 |
{ value: a.eyebrowColor, onChange: function (v) { set({ eyebrowColor: v || '#a78bfa' }); }, label: __('Eyebrow Color', 'blockenberg') }, |
| 162 |
{ value: a.timerBg, onChange: function (v) { set({ timerBg: v || 'rgba(255,255,255,0.08)' }); }, label: __('Timer Box Background', 'blockenberg') }, |
| 163 |
{ value: a.timerBorder, onChange: function (v) { set({ timerBorder: v || 'rgba(255,255,255,0.12)' }); }, label: __('Timer Box Border', 'blockenberg') }, |
| 164 |
{ value: a.timerNumColor, onChange: function (v) { set({ timerNumColor: v || '#ffffff' }); }, label: __('Timer Number Color', 'blockenberg') }, |
| 165 |
{ value: a.timerLabelColor, onChange: function (v) { set({ timerLabelColor: v || 'rgba(255,255,255,0.5)' }); }, label: __('Timer Label Color', 'blockenberg') }, |
| 166 |
{ value: a.btnBg, onChange: function (v) { set({ btnBg: v || '#6c3fb5' }); }, label: __('Primary Button BG', 'blockenberg') }, |
| 167 |
{ value: a.btnText, onChange: function (v) { set({ btnText: v || '#ffffff' }); }, label: __('Primary Button Text', 'blockenberg') }, |
| 168 |
{ value: a.btn2Text, onChange: function (v) { set({ btn2Text: v || '#ffffff' }); }, label: __('Secondary Button Text', 'blockenberg') }, |
| 169 |
] |
| 170 |
}) |
| 171 |
); |
| 172 |
|
| 173 |
var blockProps = useBlockProps({ |
| 174 |
className: 'bkbg-ctc-wrap bkbg-ctc-style--' + a.style + ' bkbg-ctc-layout--' + a.layout, |
| 175 |
style: wrapStyle(a) |
| 176 |
}); |
| 177 |
|
| 178 |
var contentEl = el('div', { className: 'bkbg-ctc-content' }, |
| 179 |
a.showEyebrow && a.eyebrow && el('div', { className: 'bkbg-ctc-eyebrow' }, a.eyebrow), |
| 180 |
el(RichText, { |
| 181 |
tagName: 'h2', className: 'bkbg-ctc-heading', |
| 182 |
value: a.heading, placeholder: __('Your compelling headline…', 'blockenberg'), |
| 183 |
onChange: function (v) { set({ heading: v }); } |
| 184 |
}), |
| 185 |
a.showSubheading && el(RichText, { |
| 186 |
tagName: 'p', className: 'bkbg-ctc-sub', |
| 187 |
value: a.subheading, placeholder: __('Supporting text…', 'blockenberg'), |
| 188 |
onChange: function (v) { set({ subheading: v }); } |
| 189 |
}), |
| 190 |
el('div', { className: 'bkbg-ctc-buttons' }, |
| 191 |
el('a', { className: 'bkbg-ctc-btn bkbg-ctc-btn--primary', href: a.ctaUrl }, a.ctaText), |
| 192 |
a.showSecondaryCta && el('a', { className: 'bkbg-ctc-btn bkbg-ctc-btn--secondary', href: a.ctaSecondaryUrl }, a.ctaSecondaryText) |
| 193 |
) |
| 194 |
); |
| 195 |
|
| 196 |
var timerEl = el('div', { className: 'bkbg-ctc-timer bkbg-ctc-timer--' + a.timerStyle }, |
| 197 |
units.map(function (u, i) { |
| 198 |
return el('div', { key: i, className: 'bkbg-ctc-unit' }, |
| 199 |
el('div', { className: 'bkbg-ctc-unit-num' }, u.val), |
| 200 |
a.showLabels && el('div', { className: 'bkbg-ctc-unit-label' }, u.label) |
| 201 |
); |
| 202 |
}) |
| 203 |
); |
| 204 |
|
| 205 |
return el('div', blockProps, |
| 206 |
inspector, |
| 207 |
el('div', { className: 'bkbg-ctc-inner' }, |
| 208 |
a.layout === 'split' ? el('div', { className: 'bkbg-ctc-split' }, contentEl, timerEl) : |
| 209 |
el('div', { className: 'bkbg-ctc-centered' }, contentEl, timerEl) |
| 210 |
) |
| 211 |
); |
| 212 |
}, |
| 213 |
|
| 214 |
save: function (props) { |
| 215 |
var a = props.attributes; |
| 216 |
var el = wp.element.createElement; |
| 217 |
|
| 218 |
function wrapStyle(a) { |
| 219 |
return Object.assign({ |
| 220 |
'--bkbg-ctc-bg': a.bgColor, |
| 221 |
'--bkbg-ctc-text': a.textColor, |
| 222 |
'--bkbg-ctc-heading-c': a.headingColor, |
| 223 |
'--bkbg-ctc-heading-sz': a.headingSize + 'px', |
| 224 |
'--bkbg-ctc-heading-w': a.headingWeight, |
| 225 |
'--bkbg-ctc-sub-c': a.subColor, |
| 226 |
'--bkbg-ctc-sub-sz': a.subSize + 'px', |
| 227 |
'--bkbg-ctc-eyebrow-c': a.eyebrowColor, |
| 228 |
'--bkbg-ctc-eyebrow-sz': a.eyebrowSize + 'px', |
| 229 |
'--bkbg-ctc-accent': a.accentColor, |
| 230 |
'--bkbg-ctc-timer-bg': a.timerBg, |
| 231 |
'--bkbg-ctc-timer-border': a.timerBorder, |
| 232 |
'--bkbg-ctc-num-c': a.timerNumColor, |
| 233 |
'--bkbg-ctc-num-sz': a.numberSize + 'px', |
| 234 |
'--bkbg-ctc-num-w': a.numberWeight, |
| 235 |
'--bkbg-ctc-label-c': a.timerLabelColor, |
| 236 |
'--bkbg-ctc-label-sz': a.labelSize + 'px', |
| 237 |
'--bkbg-ctc-btn-bg': a.btnBg, |
| 238 |
'--bkbg-ctc-btn-text': a.btnText, |
| 239 |
'--bkbg-ctc-btn2-bg': a.btn2Bg, |
| 240 |
'--bkbg-ctc-btn2-text': a.btn2Text, |
| 241 |
'--bkbg-ctc-btn2-border': a.btn2Border, |
| 242 |
'--bkbg-ctc-btn-r': a.buttonRadius + 'px', |
| 243 |
'--bkbg-ctc-btn-sz': a.buttonSize + 'px', |
| 244 |
'--bkbg-ctc-timer-gap': a.timerGap + 'px', |
| 245 |
'--bkbg-ctc-r': a.borderRadius + 'px', |
| 246 |
'--bkbg-ctc-pt': a.paddingTop + 'px', |
| 247 |
'--bkbg-ctc-pb': a.paddingBottom + 'px', |
| 248 |
}, _tv(a.typoHeading, '--bkbg-ctc-hdg-'), _tv(a.typoSub, '--bkbg-ctc-sub-'), _tv(a.typoEyebrow, '--bkbg-ctc-eye-'), _tv(a.typoNumber, '--bkbg-ctc-num-')); |
| 249 |
} |
| 250 |
|
| 251 |
var blockProps = wp.blockEditor.useBlockProps.save({ |
| 252 |
className: 'bkbg-ctc-wrap bkbg-ctc-style--' + a.style + ' bkbg-ctc-layout--' + a.layout, |
| 253 |
style: wrapStyle(a), |
| 254 |
'data-days': a.daysFromNow, |
| 255 |
'data-end': a.endDate, |
| 256 |
'data-relative': a.useRelative ? '1' : '0', |
| 257 |
'data-show-days': a.showDays ? '1' : '0', |
| 258 |
'data-show-hours': a.showHours ? '1' : '0', |
| 259 |
'data-show-minutes': a.showMinutes ? '1' : '0', |
| 260 |
'data-show-seconds': a.showSeconds ? '1' : '0' |
| 261 |
}); |
| 262 |
|
| 263 |
var labelsMap = { days: a.labelDays, hours: a.labelHours, minutes: a.labelMinutes, seconds: a.labelSeconds }; |
| 264 |
var unitKeys = ['days', 'hours', 'minutes', 'seconds'].filter(function (k) { |
| 265 |
return (k === 'days' && a.showDays) || (k === 'hours' && a.showHours) || (k === 'minutes' && a.showMinutes) || (k === 'seconds' && a.showSeconds); |
| 266 |
}); |
| 267 |
|
| 268 |
return el('div', blockProps, |
| 269 |
el('div', { className: 'bkbg-ctc-inner' }, |
| 270 |
a.layout === 'split' ? |
| 271 |
el('div', { className: 'bkbg-ctc-split' }, |
| 272 |
el('div', { className: 'bkbg-ctc-content' }, |
| 273 |
a.showEyebrow && a.eyebrow && el('div', { className: 'bkbg-ctc-eyebrow' }, a.eyebrow), |
| 274 |
el(RichText.Content, { tagName: 'h2', className: 'bkbg-ctc-heading', value: a.heading }), |
| 275 |
a.showSubheading && el(RichText.Content, { tagName: 'p', className: 'bkbg-ctc-sub', value: a.subheading }), |
| 276 |
el('div', { className: 'bkbg-ctc-buttons' }, |
| 277 |
el('a', { className: 'bkbg-ctc-btn bkbg-ctc-btn--primary', href: a.ctaUrl }, a.ctaText), |
| 278 |
a.showSecondaryCta && el('a', { className: 'bkbg-ctc-btn bkbg-ctc-btn--secondary', href: a.ctaSecondaryUrl }, a.ctaSecondaryText) |
| 279 |
) |
| 280 |
), |
| 281 |
el('div', { className: 'bkbg-ctc-timer bkbg-ctc-timer--' + a.timerStyle }, |
| 282 |
unitKeys.map(function (k, i) { |
| 283 |
return el('div', { key: k, className: 'bkbg-ctc-unit', 'data-unit': k }, |
| 284 |
el('div', { className: 'bkbg-ctc-unit-num' }, '00'), |
| 285 |
a.showLabels && el('div', { className: 'bkbg-ctc-unit-label' }, labelsMap[k]) |
| 286 |
); |
| 287 |
}) |
| 288 |
) |
| 289 |
) : |
| 290 |
el('div', { className: 'bkbg-ctc-centered' }, |
| 291 |
el('div', { className: 'bkbg-ctc-content' }, |
| 292 |
a.showEyebrow && a.eyebrow && el('div', { className: 'bkbg-ctc-eyebrow' }, a.eyebrow), |
| 293 |
el(RichText.Content, { tagName: 'h2', className: 'bkbg-ctc-heading', value: a.heading }), |
| 294 |
a.showSubheading && el(RichText.Content, { tagName: 'p', className: 'bkbg-ctc-sub', value: a.subheading }) |
| 295 |
), |
| 296 |
el('div', { className: 'bkbg-ctc-timer bkbg-ctc-timer--' + a.timerStyle }, |
| 297 |
unitKeys.map(function (k, i) { |
| 298 |
return el('div', { key: k, className: 'bkbg-ctc-unit', 'data-unit': k }, |
| 299 |
el('div', { className: 'bkbg-ctc-unit-num' }, '00'), |
| 300 |
a.showLabels && el('div', { className: 'bkbg-ctc-unit-label' }, labelsMap[k]) |
| 301 |
); |
| 302 |
}) |
| 303 |
), |
| 304 |
el('div', { className: 'bkbg-ctc-buttons' }, |
| 305 |
el('a', { className: 'bkbg-ctc-btn bkbg-ctc-btn--primary', href: a.ctaUrl }, a.ctaText), |
| 306 |
a.showSecondaryCta && el('a', { className: 'bkbg-ctc-btn bkbg-ctc-btn--secondary', href: a.ctaSecondaryUrl }, a.ctaSecondaryText) |
| 307 |
) |
| 308 |
) |
| 309 |
) |
| 310 |
); |
| 311 |
} |
| 312 |
}); |
| 313 |
}() ); |
| 314 |
|
