| 1 |
( function () { |
| 2 |
const el = window.wp.element.createElement; |
| 3 |
const { registerBlockType } = window.wp.blocks; |
| 4 |
const { InspectorControls, MediaUpload, MediaUploadCheck, PanelColorSettings } = window.wp.blockEditor; |
| 5 |
const { PanelBody, RangeControl, SelectControl, TextControl, ToggleControl, Button, __experimentalInputControl: InputControl } = window.wp.components; |
| 6 |
const { __ } = window.wp.i18n; |
| 7 |
const useRef = window.wp.element.useRef; |
| 8 |
|
| 9 |
var _TypographyControl, _typoCssVars; |
| 10 |
function getTypographyControl() { return _TypographyControl || (_TypographyControl = window.bkbgTypographyControl); } |
| 11 |
function getTypoCssVars() { return _typoCssVars || (_typoCssVars = window.bkbgTypoCssVars); } |
| 12 |
|
| 13 |
registerBlockType( 'blockenberg/hover-card', { |
| 14 |
edit: function ( props ) { |
| 15 |
const { attributes: attr, setAttributes } = props; |
| 16 |
const ref = useRef(); |
| 17 |
|
| 18 |
function onSelectImage( media ) { |
| 19 |
setAttributes( { imageUrl: media.url, imageId: media.id, imageAlt: media.alt || '' } ); |
| 20 |
} |
| 21 |
function removeImage() { |
| 22 |
setAttributes( { imageUrl: '', imageId: 0, imageAlt: '' } ); |
| 23 |
} |
| 24 |
|
| 25 |
const cssVars = { |
| 26 |
'--bkhc-width': attr.cardWidth + 'px', |
| 27 |
'--bkhc-height': attr.cardHeight + 'px', |
| 28 |
'--bkhc-radius': attr.borderRadius + 'px', |
| 29 |
'--bkhc-overlay': attr.overlayBg, |
| 30 |
'--bkhc-text': attr.textColor, |
| 31 |
'--bkhc-duration': attr.duration + 'ms', |
| 32 |
'--bkhc-heading-sz': attr.headingSz + 'px', |
| 33 |
'--bkhc-heading-weight': attr.headingFontWeight || '700', |
| 34 |
'--bkhc-heading-lh': attr.headingLineHeight || 1.3, |
| 35 |
'--bkhc-text-sz': attr.textSz + 'px', |
| 36 |
'--bkhc-text-weight': attr.textFontWeight || '400', |
| 37 |
'--bkhc-text-lh': attr.textLineHeight || 1.6, |
| 38 |
'--bkhc-bg': attr.bgColor, |
| 39 |
}; |
| 40 |
|
| 41 |
const dirClass = 'bkhc-reveal-' + attr.revealDirection; |
| 42 |
|
| 43 |
return el( |
| 44 |
'div', |
| 45 |
{ className: 'bkhc-wrap', style: { display: 'inline-flex' } }, |
| 46 |
|
| 47 |
el( InspectorControls, null, |
| 48 |
|
| 49 |
el( PanelBody, { title: __( 'Image' ), initialOpen: true }, |
| 50 |
attr.imageUrl |
| 51 |
? el( 'div', { style: { marginBottom: '8px' } }, |
| 52 |
el( 'img', { src: attr.imageUrl, style: { width: '100%', borderRadius: '6px', display: 'block', marginBottom: '6px' } } ), |
| 53 |
el( Button, { isDestructive: true, isSmall: true, onClick: removeImage }, __( 'Remove Image' ) ) |
| 54 |
) |
| 55 |
: el( MediaUploadCheck, null, |
| 56 |
el( MediaUpload, { |
| 57 |
onSelect: onSelectImage, |
| 58 |
allowedTypes: ['image'], |
| 59 |
value: attr.imageId, |
| 60 |
render: ( { open } ) => el( Button, { onClick: open, variant: 'secondary' }, __( 'Upload Image' ) ) |
| 61 |
} ) |
| 62 |
) |
| 63 |
), |
| 64 |
|
| 65 |
el( PanelBody, { title: __( 'Reveal Content' ), initialOpen: true }, |
| 66 |
el( TextControl, { |
| 67 |
label: __( 'Heading' ), |
| 68 |
value: attr.heading, |
| 69 |
onChange: v => setAttributes( { heading: v } ) |
| 70 |
} ), |
| 71 |
el( TextControl, { |
| 72 |
label: __( 'Text' ), |
| 73 |
value: attr.text, |
| 74 |
onChange: v => setAttributes( { text: v } ) |
| 75 |
} ), |
| 76 |
el( ToggleControl, { |
| 77 |
label: __( 'Show Button' ), |
| 78 |
checked: attr.showBtn, |
| 79 |
onChange: v => setAttributes( { showBtn: v } ), |
| 80 |
__nextHasNoMarginBottom: true |
| 81 |
} ), |
| 82 |
attr.showBtn && el( TextControl, { |
| 83 |
label: __( 'Button Label' ), |
| 84 |
value: attr.btnLabel, |
| 85 |
onChange: v => setAttributes( { btnLabel: v } ) |
| 86 |
} ), |
| 87 |
attr.showBtn && el( TextControl, { |
| 88 |
label: __( 'Button URL' ), |
| 89 |
value: attr.btnUrl, |
| 90 |
onChange: v => setAttributes( { btnUrl: v } ) |
| 91 |
} ) |
| 92 |
), |
| 93 |
|
| 94 |
el( PanelBody, { title: __( 'Reveal Effect' ), initialOpen: false }, |
| 95 |
el( SelectControl, { |
| 96 |
label: __( 'Reveal Direction' ), |
| 97 |
value: attr.revealDirection, |
| 98 |
options: [ |
| 99 |
{ label: __( 'From Bottom' ), value: 'bottom' }, |
| 100 |
{ label: __( 'From Top' ), value: 'top' }, |
| 101 |
{ label: __( 'From Left' ), value: 'left' }, |
| 102 |
{ label: __( 'From Right' ), value: 'right' }, |
| 103 |
{ label: __( 'Fade In' ), value: 'fade' }, |
| 104 |
], |
| 105 |
onChange: v => setAttributes( { revealDirection: v } ) |
| 106 |
} ), |
| 107 |
el( RangeControl, { |
| 108 |
label: __( 'Transition Duration (ms)' ), |
| 109 |
value: attr.duration, |
| 110 |
min: 100, max: 1000, step: 50, |
| 111 |
onChange: v => setAttributes( { duration: v } ) |
| 112 |
} ) |
| 113 |
), |
| 114 |
|
| 115 |
el( PanelBody, { title: __( 'Card Size' ), initialOpen: false }, |
| 116 |
el( RangeControl, { |
| 117 |
label: __( 'Card Width (px)' ), |
| 118 |
value: attr.cardWidth, |
| 119 |
min: 160, max: 700, |
| 120 |
onChange: v => setAttributes( { cardWidth: v } ) |
| 121 |
} ), |
| 122 |
el( RangeControl, { |
| 123 |
label: __( 'Card Height (px)' ), |
| 124 |
value: attr.cardHeight, |
| 125 |
min: 120, max: 700, |
| 126 |
onChange: v => setAttributes( { cardHeight: v } ) |
| 127 |
} ), |
| 128 |
el( RangeControl, { |
| 129 |
label: __( 'Border Radius (px)' ), |
| 130 |
value: attr.borderRadius, |
| 131 |
min: 0, max: 40, |
| 132 |
onChange: v => setAttributes( { borderRadius: v } ) |
| 133 |
} ) |
| 134 |
), |
| 135 |
|
| 136 |
el( PanelBody, { title: __( 'Typography' ), initialOpen: false }, |
| 137 |
getTypographyControl() && el( getTypographyControl(), { |
| 138 |
label: __( 'Heading' ), |
| 139 |
typo: attr.headingTypo || {}, |
| 140 |
onChange: function(v){ setAttributes({ headingTypo: v }); } |
| 141 |
}), |
| 142 |
getTypographyControl() && el( getTypographyControl(), { |
| 143 |
label: __( 'Text' ), |
| 144 |
typo: attr.textTypo || {}, |
| 145 |
onChange: function(v){ setAttributes({ textTypo: v }); } |
| 146 |
}) |
| 147 |
), |
| 148 |
|
| 149 |
el( PanelColorSettings, { |
| 150 |
title: __( 'Colors' ), |
| 151 |
initialOpen: false, |
| 152 |
colorSettings: [ |
| 153 |
{ label: __( 'Card Background' ), value: attr.bgColor, onChange: v => setAttributes( { bgColor: v || '#1e0a3c' } ) }, |
| 154 |
{ label: __( 'Overlay Color' ), value: attr.overlayBg, onChange: v => setAttributes( { overlayBg: v || 'rgba(108,63,181,0.92)' } ) }, |
| 155 |
{ label: __( 'Text Color' ), value: attr.textColor, onChange: v => setAttributes( { textColor: v || '#ffffff' } ) }, |
| 156 |
] |
| 157 |
} ) |
| 158 |
), |
| 159 |
|
| 160 |
el( 'div', |
| 161 |
{ |
| 162 |
className: 'bkhc-card bkhc-preview ' + dirClass, |
| 163 |
style: cssVars, |
| 164 |
ref, |
| 165 |
}, |
| 166 |
attr.imageUrl |
| 167 |
? el( 'img', { src: attr.imageUrl, alt: attr.imageAlt, className: 'bkhc-img' } ) |
| 168 |
: el( 'div', { className: 'bkhc-img bkhc-img-placeholder' }, |
| 169 |
el( 'span', { className: 'dashicons dashicons-format-image' } ) |
| 170 |
), |
| 171 |
el( 'div', { className: 'bkhc-overlay' }, |
| 172 |
el( 'h3', { className: 'bkhc-heading' }, attr.heading ), |
| 173 |
el( 'p', { className: 'bkhc-text' }, attr.text ), |
| 174 |
attr.showBtn && el( 'span', { className: 'bkhc-btn' }, attr.btnLabel ) |
| 175 |
) |
| 176 |
) |
| 177 |
); |
| 178 |
}, |
| 179 |
|
| 180 |
save: function ( { attributes: attr } ) { |
| 181 |
const dirClass = 'bkhc-reveal-' + attr.revealDirection; |
| 182 |
const cssVars = { |
| 183 |
'--bkhc-width': attr.cardWidth + 'px', |
| 184 |
'--bkhc-height': attr.cardHeight + 'px', |
| 185 |
'--bkhc-radius': attr.borderRadius + 'px', |
| 186 |
'--bkhc-overlay': attr.overlayBg, |
| 187 |
'--bkhc-text': attr.textColor, |
| 188 |
'--bkhc-duration': attr.duration + 'ms', |
| 189 |
'--bkhc-bg': attr.bgColor, |
| 190 |
}; |
| 191 |
var _tv = getTypoCssVars(); |
| 192 |
if (_tv) { |
| 193 |
Object.assign(cssVars, _tv(attr.headingTypo || {}, '--bkhc-h-')); |
| 194 |
Object.assign(cssVars, _tv(attr.textTypo || {}, '--bkhc-t-')); |
| 195 |
} |
| 196 |
if (attr.headingSz && attr.headingSz !== 18) cssVars['--bkhc-h-sz'] = attr.headingSz + 'px'; |
| 197 |
if (attr.headingFontWeight && attr.headingFontWeight !== '700') cssVars['--bkhc-h-fw'] = attr.headingFontWeight; |
| 198 |
if (attr.headingLineHeight && attr.headingLineHeight !== 1.3) cssVars['--bkhc-h-lh'] = String(attr.headingLineHeight); |
| 199 |
if (attr.textSz && attr.textSz !== 14) cssVars['--bkhc-t-sz'] = attr.textSz + 'px'; |
| 200 |
if (attr.textFontWeight && attr.textFontWeight !== '400') cssVars['--bkhc-t-fw'] = attr.textFontWeight; |
| 201 |
if (attr.textLineHeight && attr.textLineHeight !== 1.6) cssVars['--bkhc-t-lh'] = String(attr.textLineHeight); |
| 202 |
|
| 203 |
return el( 'div', { className: 'bkhc-wrap' }, |
| 204 |
el( 'div', { className: 'bkhc-card ' + dirClass, style: cssVars }, |
| 205 |
attr.imageUrl |
| 206 |
? el( 'img', { src: attr.imageUrl, alt: attr.imageAlt, className: 'bkhc-img' } ) |
| 207 |
: null, |
| 208 |
el( 'div', { className: 'bkhc-overlay' }, |
| 209 |
el( 'h3', { className: 'bkhc-heading' }, attr.heading ), |
| 210 |
el( 'p', { className: 'bkhc-text' }, attr.text ), |
| 211 |
attr.showBtn |
| 212 |
? el( 'a', { href: attr.btnUrl, className: 'bkhc-btn' }, attr.btnLabel ) |
| 213 |
: null |
| 214 |
) |
| 215 |
) |
| 216 |
); |
| 217 |
} |
| 218 |
} ); |
| 219 |
} )(); |
| 220 |
|
