| 1 |
( function () { |
| 2 |
var el = window.wp.element.createElement; |
| 3 |
var { registerBlockType } = window.wp.blocks; |
| 4 |
var { InspectorControls, MediaUpload, MediaUploadCheck, PanelColorSettings } = window.wp.blockEditor; |
| 5 |
var { PanelBody, RangeControl, TextControl, ToggleControl, Button } = window.wp.components; |
| 6 |
var { __ } = window.wp.i18n; |
| 7 |
var useBlockProps = window.wp.blockEditor.useBlockProps; |
| 8 |
|
| 9 |
var _tc; function getTypoControl() { return _tc || (_tc = window.bkbgTypographyControl); } |
| 10 |
var _tv; function getTypoCssVars() { return _tv || (_tv = window.bkbgTypoCssVars); } |
| 11 |
var _tvf = function (typo, prefix) { var fn = getTypoCssVars(); return fn ? fn(typo, prefix) : {}; }; |
| 12 |
|
| 13 |
var DASHICONS = ['star-filled','heart','yes','smiley','wordpress-alt','admin-generic','format-image','portfolio','admin-site-alt3','welcome-widgets-menus','palmtree','awards','megaphone','lightbulb','shield-alt']; |
| 14 |
|
| 15 |
function TiltCardPreview(a) { |
| 16 |
var cardStyle = { |
| 17 |
background:a.cardBg, border:'1px solid '+a.cardBorder, |
| 18 |
borderRadius:a.cardRadius+'px', |
| 19 |
boxShadow:a.cardShadow?'0 20px 60px rgba(0,0,0,0.15)':'none', |
| 20 |
overflow:'hidden', |
| 21 |
width:a.cardWidth+'px', maxWidth:'100%', |
| 22 |
transform:'perspective('+a.perspective+'px) rotateX(0deg) rotateY(0deg)', |
| 23 |
transition:'transform 0.4s ease, box-shadow 0.4s ease', |
| 24 |
margin:'0 auto', |
| 25 |
}; |
| 26 |
return el('div',{className:'bktc2-outer',style:{display:'flex',justifyContent:'center',padding:'32px 16px'}}, |
| 27 |
el('div',{className:'bktc2-card',style:cardStyle, |
| 28 |
'data-tilt-max':a.tiltMax,'data-tilt-scale':a.tiltScale/100, |
| 29 |
'data-glare':a.glareEffect?'1':'0','data-glare-opacity':a.glareOpacity/100, |
| 30 |
'data-perspective':a.perspective, |
| 31 |
}, |
| 32 |
a.imageUrl&&el('div',{className:'bktc2-img',style:{height:a.imgHeight+'px',background:'url('+a.imageUrl+') center/cover no-repeat',flexShrink:0}}), |
| 33 |
el('div',{className:'bktc2-body',style:{padding:a.cardPadding+'px'}}, |
| 34 |
a.showIcon&&el('div',{style:{marginBottom:'12px'}}, |
| 35 |
el('span',{className:'dashicons dashicons-'+a.icon,style:{fontSize:a.iconSize+'px',width:a.iconSize+'px',height:a.iconSize+'px',color:a.iconColor,lineHeight:1}}), |
| 36 |
), |
| 37 |
el('h3',{className:'bktc2-heading',style:{margin:'0 0 10px',color:a.headingColor}},a.heading), |
| 38 |
a.text&&el('p',{className:'bktc2-text',style:{margin:'0 0 16px',color:a.textColor}},a.text), |
| 39 |
a.showLink&&el('a',{href:a.linkUrl,className:'bktc2-link',style:{color:a.linkColor,textDecoration:'none'}},a.linkLabel), |
| 40 |
), |
| 41 |
a.glareEffect&&el('div',{className:'bktc2-glare',style:{position:'absolute',inset:0,borderRadius:a.cardRadius+'px',pointerEvents:'none',background:'linear-gradient(135deg,rgba(255,255,255,0.15) 0%,transparent 60%)'}}), |
| 42 |
) |
| 43 |
); |
| 44 |
} |
| 45 |
|
| 46 |
registerBlockType('blockenberg/tilt-card', { |
| 47 |
edit: function(props) { |
| 48 |
var a = props.attributes; |
| 49 |
var set = props.setAttributes; |
| 50 |
var blockProps = useBlockProps((function () { |
| 51 |
var tv = Object.assign({}, _tvf(a.headingTypo, '--bktc2-ht-'), _tvf(a.bodyTypo, '--bktc2-bt-')); |
| 52 |
return { style: tv }; |
| 53 |
})()); |
| 54 |
return el(wp.element.Fragment, null, |
| 55 |
el(InspectorControls,null, |
| 56 |
el(PanelBody,{title:__('Content'),initialOpen:true}, |
| 57 |
el(TextControl,{label:__('Heading'),value:a.heading,onChange:v=>set({heading:v})}), |
| 58 |
el(TextControl,{label:__('Body Text'),value:a.text,onChange:v=>set({text:v})}), |
| 59 |
el(ToggleControl,{label:__('Show Link'),checked:a.showLink,onChange:v=>set({showLink:v}),__nextHasNoMarginBottom:true}), |
| 60 |
a.showLink&&el(TextControl,{label:__('Link Label'),value:a.linkLabel,onChange:v=>set({linkLabel:v})}), |
| 61 |
a.showLink&&el(TextControl,{label:__('Link URL'),value:a.linkUrl,onChange:v=>set({linkUrl:v})}), |
| 62 |
), |
| 63 |
el(PanelBody,{title:__('Image & Icon'),initialOpen:false}, |
| 64 |
el(MediaUploadCheck,null, |
| 65 |
el(MediaUpload,{onSelect:m=>set({imageUrl:m.url,imageId:m.id}),allowedTypes:['image'],value:a.imageId, |
| 66 |
render:({open})=>el(Button,{onClick:open,variant:'secondary',style:{width:'100%',justifyContent:'center',marginBottom:'8px'}}, |
| 67 |
a.imageUrl?__('Change Image'):__('Select Image')) |
| 68 |
}) |
| 69 |
), |
| 70 |
a.imageUrl&&el('div',null, |
| 71 |
el(RangeControl,{label:__('Image Height (px)'),value:a.imgHeight,min:80,max:400,onChange:v=>set({imgHeight:v})}), |
| 72 |
el(Button,{isDestructive:true,isSmall:true,onClick:()=>set({imageUrl:'',imageId:0})},__('Remove Image')), |
| 73 |
), |
| 74 |
el(ToggleControl,{label:__('Show Icon'),checked:a.showIcon,onChange:v=>set({showIcon:v}),__nextHasNoMarginBottom:true}), |
| 75 |
a.showIcon && el('select',{value:a.icon,onChange:e=>set({icon:e.target.value}),style:{width:'100%',marginBottom:'8px'}}, |
| 76 |
DASHICONS.map(i=>el('option',{key:i,value:i},i)) |
| 77 |
), |
| 78 |
a.showIcon&&el(RangeControl,{label:__('Icon Size (px)'),value:a.iconSize,min:20,max:80,onChange:v=>set({iconSize:v})}), |
| 79 |
), |
| 80 |
el(PanelBody,{title:__('3D Tilt Effect'),initialOpen:false}, |
| 81 |
el(RangeControl,{label:__('Max Tilt Angle (deg)'),value:a.tiltMax,min:2,max:30,onChange:v=>set({tiltMax:v})}), |
| 82 |
el(RangeControl,{label:__('Scale on Hover (%)'),value:a.tiltScale,min:100,max:120,onChange:v=>set({tiltScale:v})}), |
| 83 |
el(RangeControl,{label:__('Perspective (px)'),value:a.perspective,min:300,max:2000,onChange:v=>set({perspective:v})}), |
| 84 |
el(ToggleControl,{label:__('Glare Effect'),checked:a.glareEffect,onChange:v=>set({glareEffect:v}),__nextHasNoMarginBottom:true}), |
| 85 |
a.glareEffect&&el(RangeControl,{label:__('Glare Opacity (%)'),value:a.glareOpacity,min:5,max:80,onChange:v=>set({glareOpacity:v})}), |
| 86 |
), |
| 87 |
el(PanelBody,{title:__('Card Style'),initialOpen:false}, |
| 88 |
el(RangeControl,{label:__('Card Width (px)'),value:a.cardWidth,min:200,max:600,onChange:v=>set({cardWidth:v})}), |
| 89 |
el(RangeControl,{label:__('Card Padding (px)'),value:a.cardPadding,min:12,max:60,onChange:v=>set({cardPadding:v})}), |
| 90 |
el(RangeControl,{label:__('Border Radius (px)'),value:a.cardRadius,min:0,max:40,onChange:v=>set({cardRadius:v})}), |
| 91 |
el(ToggleControl,{label:__('Card Shadow'),checked:a.cardShadow,onChange:v=>set({cardShadow:v}),__nextHasNoMarginBottom:true}), |
| 92 |
), |
| 93 |
el(PanelBody,{title:__('Typography'),initialOpen:false}, |
| 94 |
getTypoControl() && el(getTypoControl(), { |
| 95 |
label: __('Heading Typography', 'blockenberg'), |
| 96 |
value: a.headingTypo || {}, |
| 97 |
onChange: function (v) { set({ headingTypo: v }); } |
| 98 |
}), |
| 99 |
getTypoControl() && el(getTypoControl(), { |
| 100 |
label: __('Body Typography', 'blockenberg'), |
| 101 |
value: a.bodyTypo || {}, |
| 102 |
onChange: function (v) { set({ bodyTypo: v }); } |
| 103 |
}) |
| 104 |
), |
| 105 |
el(PanelColorSettings,{title:__('Colors'),initialOpen:false,colorSettings:[ |
| 106 |
{label:__('Card Background'),value:a.cardBg,onChange:v=>set({cardBg:v||'#ffffff'})}, |
| 107 |
{label:__('Card Border'),value:a.cardBorder,onChange:v=>set({cardBorder:v||'#e5e7eb'})}, |
| 108 |
{label:__('Heading Color'),value:a.headingColor,onChange:v=>set({headingColor:v||'#1f2937'})}, |
| 109 |
{label:__('Text Color'),value:a.textColor,onChange:v=>set({textColor:v||'#6b7280'})}, |
| 110 |
{label:__('Link Color'),value:a.linkColor,onChange:v=>set({linkColor:v||'#6c3fb5'})}, |
| 111 |
{label:__('Icon Color'),value:a.iconColor,onChange:v=>set({iconColor:v||'#6c3fb5'})}, |
| 112 |
]}), |
| 113 |
), |
| 114 |
el('div', blockProps, TiltCardPreview(a)), |
| 115 |
); |
| 116 |
}, |
| 117 |
|
| 118 |
save: function({attributes:a}) { |
| 119 |
var bp = useBlockProps.save((function () { |
| 120 |
var tv = Object.assign({}, _tvf(a.headingTypo, '--bktc2-ht-'), _tvf(a.bodyTypo, '--bktc2-bt-')); |
| 121 |
return { style: tv }; |
| 122 |
})()); |
| 123 |
var cardStyle = { |
| 124 |
background:a.cardBg, border:'1px solid '+a.cardBorder, |
| 125 |
borderRadius:a.cardRadius+'px', |
| 126 |
boxShadow:a.cardShadow?'0 20px 60px rgba(0,0,0,0.15)':'none', |
| 127 |
overflow:'hidden', width:a.cardWidth+'px', maxWidth:'100%', |
| 128 |
position:'relative', transformStyle:'preserve-3d', |
| 129 |
transition:'transform 0.15s ease, box-shadow 0.15s ease', |
| 130 |
}; |
| 131 |
return el('div', bp, |
| 132 |
el('div',{className:'bktc2-outer',style:{display:'flex',justifyContent:'center',padding:'32px 16px'}}, |
| 133 |
el('div',{className:'bktc2-card',style:cardStyle, |
| 134 |
'data-tilt-max':a.tiltMax, |
| 135 |
'data-tilt-scale':a.tiltScale/100, |
| 136 |
'data-glare':a.glareEffect?'1':'0', |
| 137 |
'data-glare-opacity':a.glareOpacity/100, |
| 138 |
'data-perspective':a.perspective, |
| 139 |
}, |
| 140 |
a.imageUrl&&el('div',{className:'bktc2-img',style:{height:a.imgHeight+'px',background:'url('+a.imageUrl+') center/cover no-repeat'}}), |
| 141 |
el('div',{className:'bktc2-body',style:{padding:a.cardPadding+'px'}}, |
| 142 |
a.showIcon&&el('div',{style:{marginBottom:'12px'}}, |
| 143 |
el('span',{className:'dashicons dashicons-'+a.icon,style:{fontSize:a.iconSize+'px',width:a.iconSize+'px',height:a.iconSize+'px',color:a.iconColor,lineHeight:1}}), |
| 144 |
), |
| 145 |
el('h3',{className:'bktc2-heading',style:{margin:'0 0 10px',color:a.headingColor}},a.heading), |
| 146 |
a.text&&el('p',{className:'bktc2-text',style:{margin:'0 0 16px',color:a.textColor}},a.text), |
| 147 |
a.showLink&&el('a',{href:a.linkUrl,className:'bktc2-link',style:{color:a.linkColor,textDecoration:'none'}},a.linkLabel), |
| 148 |
), |
| 149 |
a.glareEffect&&el('div',{className:'bktc2-glare',style:{position:'absolute',inset:0,borderRadius:a.cardRadius+'px',pointerEvents:'none',opacity:0,transition:'opacity 0.15s'}}), |
| 150 |
) |
| 151 |
) |
| 152 |
); |
| 153 |
}, |
| 154 |
}); |
| 155 |
}() ); |
| 156 |
|
