| 1 |
( function () { |
| 2 |
var el = window.wp.element.createElement; |
| 3 |
var { registerBlockType } = window.wp.blocks; |
| 4 |
var { InspectorControls, PanelColorSettings, useBlockProps } = window.wp.blockEditor; |
| 5 |
var { PanelBody, RangeControl, SelectControl, TextControl, TextareaControl, ToggleControl } = window.wp.components; |
| 6 |
var { __ } = window.wp.i18n; |
| 7 |
|
| 8 |
var _tc, _tv; |
| 9 |
function getTypoControl() { return _tc || (_tc = window.bkbgTypographyControl); } |
| 10 |
function getTypoCssVars() { return _tv || (_tv = window.bkbgTypoCssVars); } |
| 11 |
|
| 12 |
var POSITIONS = [{label:'Right',value:'right'},{label:'Left',value:'left'}]; |
| 13 |
|
| 14 |
var ICONS = [ |
| 15 |
{label:'Menu (hamburger)',value:'menu'}, |
| 16 |
{label:'Arrow right',value:'arrow-right-alt'}, |
| 17 |
{label:'Plus',value:'plus'}, |
| 18 |
{label:'Settings',value:'admin-settings'}, |
| 19 |
{label:'Info',value:'info'}, |
| 20 |
{label:'Cart',value:'cart'}, |
| 21 |
{label:'List',value:'list-view'}, |
| 22 |
{label:'Share',value:'share'}, |
| 23 |
]; |
| 24 |
|
| 25 |
function TriggerBtn(a) { |
| 26 |
return el('div',{className:'bkoc-trigger',style:{display:'inline-flex',alignItems:'center',gap:'8px',background:a.triggerBg,color:a.triggerColor,borderRadius:a.triggerRadius+'px',padding:a.triggerPadding+'px '+(a.triggerPadding*1.6)+'px',cursor:'pointer'}}, |
| 27 |
a.showIcon&&el('span',{className:'dashicons dashicons-'+a.triggerIcon,style:{fontSize:'18px',width:'18px',height:'18px',lineHeight:1}}), |
| 28 |
a.triggerLabel |
| 29 |
); |
| 30 |
} |
| 31 |
|
| 32 |
function EditorPreview(a) { |
| 33 |
var isRight = a.position === 'right'; |
| 34 |
return el('div',{style:{fontFamily:'inherit'}}, |
| 35 |
el('div',{style:{marginBottom:'12px'}}, TriggerBtn(a)), |
| 36 |
el('div',{style:{position:'relative',overflow:'hidden',border:'1px dashed #c084fc',borderRadius:'8px',padding:'0'}}, |
| 37 |
el('div',{style:{ |
| 38 |
width:a.width+'px',maxWidth:'100%',background:a.drawerBg, |
| 39 |
border:'1px solid '+a.drawerBorder, |
| 40 |
borderRadius:'8px', |
| 41 |
padding:'24px', |
| 42 |
boxSizing:'border-box', |
| 43 |
}}, |
| 44 |
el('div',{style:{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'16px',borderBottom:'1px solid '+a.drawerBorder,paddingBottom:'12px'}}, |
| 45 |
a.showDrawerTitle&&el('h3',{className:'bkoc-drawer-title',style:{margin:0,color:a.titleColor}},a.drawerTitle), |
| 46 |
el('span',{className:'dashicons dashicons-no-alt',style:{color:a.closeIconColor,fontSize:'22px',width:'22px',height:'22px',lineHeight:1,cursor:'pointer'}}), |
| 47 |
), |
| 48 |
el('div',{className:'bkoc-content',style:{color:a.contentColor}},a.content), |
| 49 |
), |
| 50 |
el('p',{style:{textAlign:'center',color:'#9ca3af',fontSize:'12px',margin:'8px 0 4px'}}, |
| 51 |
'← Preview: Drawer opens from '+a.position), |
| 52 |
), |
| 53 |
); |
| 54 |
} |
| 55 |
|
| 56 |
registerBlockType('blockenberg/off-canvas', { |
| 57 |
edit: function(props) { |
| 58 |
var a = props.attributes; |
| 59 |
var set = props.setAttributes; |
| 60 |
return el('div',(function(){ |
| 61 |
var bp = useBlockProps(); |
| 62 |
var _tvf = getTypoCssVars(); |
| 63 |
var s = {}; |
| 64 |
if (_tvf) { |
| 65 |
Object.assign(s, _tvf(a.triggerTypo, '--bkoc-trg-')); |
| 66 |
Object.assign(s, _tvf(a.titleTypo, '--bkoc-tt-')); |
| 67 |
Object.assign(s, _tvf(a.contentTypo, '--bkoc-ct-')); |
| 68 |
} |
| 69 |
bp.style = Object.assign(s, bp.style || {}); |
| 70 |
bp.className = ((bp.className || '') + ' bkoc-wrap').trim(); |
| 71 |
return bp; |
| 72 |
}()), |
| 73 |
el(InspectorControls,null, |
| 74 |
el(PanelBody,{title:__('Trigger Button'),initialOpen:true}, |
| 75 |
el(TextControl,{label:__('Button Label'),value:a.triggerLabel,onChange:v=>set({triggerLabel:v})}), |
| 76 |
el(ToggleControl,{label:__('Show Icon'),checked:a.showIcon,onChange:v=>set({showIcon:v}),__nextHasNoMarginBottom:true}), |
| 77 |
a.showIcon&&el(SelectControl,{label:__('Icon'),value:a.triggerIcon,options:ICONS,onChange:v=>set({triggerIcon:v})}), |
| 78 |
el(RangeControl,{label:__('Button Radius (px)'),value:a.triggerRadius,min:0,max:50,onChange:v=>set({triggerRadius:v})}), |
| 79 |
el(RangeControl,{label:__('Button Padding (px)'),value:a.triggerPadding,min:4,max:30,onChange:v=>set({triggerPadding:v})}), |
| 80 |
), |
| 81 |
el(PanelBody,{title:__('Drawer Content'),initialOpen:false}, |
| 82 |
el(SelectControl,{label:__('Position'),value:a.position,options:POSITIONS,onChange:v=>set({position:v})}), |
| 83 |
el(RangeControl,{label:__('Drawer Width (px)'),value:a.width,min:200,max:700,onChange:v=>set({width:v})}), |
| 84 |
el(ToggleControl,{label:__('Show Drawer Title'),checked:a.showDrawerTitle,onChange:v=>set({showDrawerTitle:v}),__nextHasNoMarginBottom:true}), |
| 85 |
el(TextControl,{label:__('Drawer Title'),value:a.drawerTitle,onChange:v=>set({drawerTitle:v})}), |
| 86 |
el(TextareaControl,{label:__('Drawer Content (HTML supported)'),value:a.content,rows:6,onChange:v=>set({content:v})}), |
| 87 |
), |
| 88 |
el(PanelBody,{title:__('Behavior'),initialOpen:false}, |
| 89 |
el(ToggleControl,{label:__('Overlay'),checked:a.overlayEnabled,onChange:v=>set({overlayEnabled:v}),__nextHasNoMarginBottom:true}), |
| 90 |
a.overlayEnabled&&el(ToggleControl,{label:__('Close on Overlay Click'),checked:a.closeOnOverlay,onChange:v=>set({closeOnOverlay:v}),__nextHasNoMarginBottom:true}), |
| 91 |
el(ToggleControl,{label:__('Close on Escape Key'),checked:a.closeOnEscape,onChange:v=>set({closeOnEscape:v}),__nextHasNoMarginBottom:true}), |
| 92 |
el(RangeControl,{label:__('Animation Speed (ms)'),value:a.animationSpeed,min:100,max:800,onChange:v=>set({animationSpeed:v})}), |
| 93 |
a.overlayEnabled&&el(RangeControl,{label:__('Overlay Opacity %'),value:a.overlayOpacity,min:10,max:90,onChange:v=>set({overlayOpacity:v})}), |
| 94 |
), |
| 95 |
el(PanelColorSettings,{title:__('Colors'),initialOpen:false,colorSettings:[ |
| 96 |
{label:__('Button Background'),value:a.triggerBg,onChange:v=>set({triggerBg:v||'#6c3fb5'})}, |
| 97 |
{label:__('Button Text'),value:a.triggerColor,onChange:v=>set({triggerColor:v||'#ffffff'})}, |
| 98 |
{label:__('Drawer Background'),value:a.drawerBg,onChange:v=>set({drawerBg:v||'#ffffff'})}, |
| 99 |
{label:__('Drawer Border'),value:a.drawerBorder,onChange:v=>set({drawerBorder:v||'#e5e7eb'})}, |
| 100 |
{label:__('Title Color'),value:a.titleColor,onChange:v=>set({titleColor:v||'#1f2937'})}, |
| 101 |
{label:__('Content Color'),value:a.contentColor,onChange:v=>set({contentColor:v||'#374151'})}, |
| 102 |
{label:__('Close Icon'),value:a.closeIconColor,onChange:v=>set({closeIconColor:v||'#6b7280'})}, |
| 103 |
{label:__('Overlay Color'),value:a.overlayColor,onChange:v=>set({overlayColor:v||'#000000'})}, |
| 104 |
]}), |
| 105 |
el(PanelBody,{title:__('Typography'),initialOpen:false}, |
| 106 |
el(getTypoControl(),{label:__('Trigger Button'),value:a.triggerTypo,onChange:function(v){set({triggerTypo:v});}}), |
| 107 |
el(getTypoControl(),{label:__('Drawer Title'),value:a.titleTypo,onChange:function(v){set({titleTypo:v});}}), |
| 108 |
el(getTypoControl(),{label:__('Drawer Content'),value:a.contentTypo,onChange:function(v){set({contentTypo:v});}}) |
| 109 |
), |
| 110 |
), |
| 111 |
EditorPreview(a), |
| 112 |
); |
| 113 |
}, |
| 114 |
|
| 115 |
save: function({attributes:a}) { |
| 116 |
var triggerStyle = { |
| 117 |
display:'inline-flex',alignItems:'center',gap:'8px', |
| 118 |
background:a.triggerBg,color:a.triggerColor, |
| 119 |
borderRadius:a.triggerRadius+'px', |
| 120 |
padding:a.triggerPadding+'px '+(a.triggerPadding*1.6)+'px', |
| 121 |
cursor:'pointer',border:'none', |
| 122 |
fontFamily:'inherit', |
| 123 |
}; |
| 124 |
var overlayHex = (a.overlayColor||'#000').replace('#',''); |
| 125 |
if (overlayHex.length===3) overlayHex=overlayHex[0]+overlayHex[0]+overlayHex[1]+overlayHex[1]+overlayHex[2]+overlayHex[2]; |
| 126 |
var r=parseInt(overlayHex.substring(0,2),16),g=parseInt(overlayHex.substring(2,4),16),b=parseInt(overlayHex.substring(4,6),16); |
| 127 |
var overlayRgba = 'rgba('+r+','+g+','+b+','+(a.overlayOpacity/100).toFixed(2)+')'; |
| 128 |
|
| 129 |
var isRight = a.position === 'right'; |
| 130 |
var drawerStyle = { |
| 131 |
position:'fixed',top:0,height:'100%',width:a.width+'px',maxWidth:'90vw', |
| 132 |
background:a.drawerBg, |
| 133 |
boxShadow:(isRight?'-4px':'4px')+' 0 32px rgba(0,0,0,0.15)', |
| 134 |
zIndex:9999, |
| 135 |
transform:'translateX('+(isRight?'100%':'-100%')+')', |
| 136 |
transition:'transform '+a.animationSpeed+'ms cubic-bezier(0.4,0,0.2,1)', |
| 137 |
overflowY:'auto',boxSizing:'border-box', |
| 138 |
}; |
| 139 |
if (isRight) { drawerStyle.right = 0; } else { drawerStyle.left = 0; } |
| 140 |
|
| 141 |
var wrapStyle = {fontFamily:'inherit'}; |
| 142 |
var _tvf = getTypoCssVars(); |
| 143 |
if (_tvf) { |
| 144 |
Object.assign(wrapStyle, _tvf(a.triggerTypo, '--bkoc-trg-')); |
| 145 |
Object.assign(wrapStyle, _tvf(a.titleTypo, '--bkoc-tt-')); |
| 146 |
Object.assign(wrapStyle, _tvf(a.contentTypo, '--bkoc-ct-')); |
| 147 |
} |
| 148 |
|
| 149 |
return el('div',{className:'bkoc-wrap', |
| 150 |
'data-position':a.position, |
| 151 |
'data-width':a.width, |
| 152 |
'data-overlay':a.overlayEnabled?'1':'0', |
| 153 |
'data-close-overlay':a.closeOnOverlay?'1':'0', |
| 154 |
'data-close-escape':a.closeOnEscape?'1':'0', |
| 155 |
'data-speed':a.animationSpeed, |
| 156 |
'data-overlay-color':overlayRgba, |
| 157 |
style:wrapStyle, |
| 158 |
}, |
| 159 |
el('button',{className:'bkoc-trigger','aria-expanded':'false','aria-controls':'bkoc-drawer',style:triggerStyle}, |
| 160 |
a.showIcon&&el('span',{className:'dashicons dashicons-'+a.triggerIcon,style:{fontSize:'18px',width:'18px',height:'18px',lineHeight:1},"aria-hidden":"true"}), |
| 161 |
a.triggerLabel |
| 162 |
), |
| 163 |
|
| 164 |
a.overlayEnabled&&el('div',{className:'bkoc-overlay',style:{position:'fixed',inset:0,background:overlayRgba,zIndex:9998,opacity:0,pointerEvents:'none',transition:'opacity '+a.animationSpeed+'ms ease'}}), |
| 165 |
|
| 166 |
el('div',{className:'bkoc-drawer',id:'bkoc-drawer',role:'dialog','aria-modal':'true','aria-label':a.drawerTitle,style:drawerStyle}, |
| 167 |
el('div',{style:{padding:'24px'}}, |
| 168 |
el('div',{style:{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'16px',borderBottom:'1px solid '+a.drawerBorder,paddingBottom:'12px'}}, |
| 169 |
a.showDrawerTitle&&el('h3',{className:'bkoc-drawer-title',style:{margin:0,color:a.titleColor}},a.drawerTitle), |
| 170 |
el('button',{className:'bkoc-close','aria-label':'Close drawer',style:{background:'none',border:'none',cursor:'pointer',padding:'4px',lineHeight:1}}, |
| 171 |
el('span',{className:'dashicons dashicons-no-alt',style:{color:a.closeIconColor,fontSize:'24px',width:'24px',height:'24px',lineHeight:1},"aria-hidden":"true"}), |
| 172 |
), |
| 173 |
), |
| 174 |
el('div',{className:'bkoc-content',style:{color:a.contentColor}},a.content), |
| 175 |
), |
| 176 |
), |
| 177 |
); |
| 178 |
}, |
| 179 |
|
| 180 |
deprecated: [{ |
| 181 |
save: function({attributes:a}) { |
| 182 |
var triggerStyle = { |
| 183 |
display:'inline-flex',alignItems:'center',gap:'8px', |
| 184 |
background:a.triggerBg,color:a.triggerColor, |
| 185 |
borderRadius:a.triggerRadius+'px', |
| 186 |
padding:a.triggerPadding+'px '+(a.triggerPadding*1.6)+'px', |
| 187 |
cursor:'pointer',fontWeight:700,fontSize:'15px',border:'none', |
| 188 |
fontFamily:'inherit', |
| 189 |
}; |
| 190 |
var overlayHex = (a.overlayColor||'#000').replace('#',''); |
| 191 |
if (overlayHex.length===3) overlayHex=overlayHex[0]+overlayHex[0]+overlayHex[1]+overlayHex[1]+overlayHex[2]+overlayHex[2]; |
| 192 |
var r=parseInt(overlayHex.substring(0,2),16),g=parseInt(overlayHex.substring(2,4),16),b=parseInt(overlayHex.substring(4,6),16); |
| 193 |
var overlayRgba = 'rgba('+r+','+g+','+b+','+(a.overlayOpacity/100).toFixed(2)+')'; |
| 194 |
var isRight = a.position === 'right'; |
| 195 |
var drawerStyle = { |
| 196 |
position:'fixed',top:0,height:'100%',width:a.width+'px',maxWidth:'90vw', |
| 197 |
background:a.drawerBg, |
| 198 |
boxShadow:(isRight?'-4px':'4px')+' 0 32px rgba(0,0,0,0.15)', |
| 199 |
zIndex:9999, |
| 200 |
transform:'translateX('+(isRight?'100%':'-100%')+')', |
| 201 |
transition:'transform '+a.animationSpeed+'ms cubic-bezier(0.4,0,0.2,1)', |
| 202 |
overflowY:'auto',boxSizing:'border-box', |
| 203 |
}; |
| 204 |
if (isRight) { drawerStyle.right = 0; } else { drawerStyle.left = 0; } |
| 205 |
return el('div',{className:'bkoc-wrap', |
| 206 |
'data-position':a.position, |
| 207 |
'data-width':a.width, |
| 208 |
'data-overlay':a.overlayEnabled?'1':'0', |
| 209 |
'data-close-overlay':a.closeOnOverlay?'1':'0', |
| 210 |
'data-close-escape':a.closeOnEscape?'1':'0', |
| 211 |
'data-speed':a.animationSpeed, |
| 212 |
'data-overlay-color':overlayRgba, |
| 213 |
style:{fontFamily:'inherit'}, |
| 214 |
}, |
| 215 |
el('button',{className:'bkoc-trigger','aria-expanded':'false','aria-controls':'bkoc-drawer',style:triggerStyle}, |
| 216 |
a.showIcon&&el('span',{className:'dashicons dashicons-'+a.triggerIcon,style:{fontSize:'18px',width:'18px',height:'18px',lineHeight:1},"aria-hidden":"true"}), |
| 217 |
a.triggerLabel |
| 218 |
), |
| 219 |
a.overlayEnabled&&el('div',{className:'bkoc-overlay',style:{position:'fixed',inset:0,background:overlayRgba,zIndex:9998,opacity:0,pointerEvents:'none',transition:'opacity '+a.animationSpeed+'ms ease'}}), |
| 220 |
el('div',{className:'bkoc-drawer',id:'bkoc-drawer',role:'dialog','aria-modal':'true','aria-label':a.drawerTitle,style:drawerStyle}, |
| 221 |
el('div',{style:{padding:'24px'}}, |
| 222 |
el('div',{style:{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'16px',borderBottom:'1px solid '+a.drawerBorder,paddingBottom:'12px'}}, |
| 223 |
a.showDrawerTitle&&el('h3',{style:{margin:0,fontSize:'18px',fontWeight:700,color:a.titleColor}},a.drawerTitle), |
| 224 |
el('button',{className:'bkoc-close','aria-label':'Close drawer',style:{background:'none',border:'none',cursor:'pointer',padding:'4px',lineHeight:1}}, |
| 225 |
el('span',{className:'dashicons dashicons-no-alt',style:{color:a.closeIconColor,fontSize:'24px',width:'24px',height:'24px',lineHeight:1},"aria-hidden":"true"}), |
| 226 |
), |
| 227 |
), |
| 228 |
el('div',{className:'bkoc-content',style:{color:a.contentColor,fontSize:'15px',lineHeight:1.7}},a.content), |
| 229 |
), |
| 230 |
), |
| 231 |
); |
| 232 |
} |
| 233 |
}] |
| 234 |
}); |
| 235 |
}() ); |
| 236 |
|
