| 1 |
( function () { |
| 2 |
var el = window.wp.element.createElement; |
| 3 |
var Fragment = window.wp.element.Fragment; |
| 4 |
var { registerBlockType } = window.wp.blocks; |
| 5 |
var { InspectorControls, MediaUpload, MediaUploadCheck, PanelColorSettings, useBlockProps } = window.wp.blockEditor; |
| 6 |
var { PanelBody, RangeControl, SelectControl, TextControl, ToggleControl, Button } = window.wp.components; |
| 7 |
var { __ } = window.wp.i18n; |
| 8 |
|
| 9 |
var _tc, _tv; |
| 10 |
function getTypoControl() { return _tc || (_tc = window.bkbgTypographyControl); } |
| 11 |
function getTypoCssVars() { return _tv || (_tv = window.bkbgTypoCssVars); } |
| 12 |
|
| 13 |
var HOVER_EFFECTS = [ |
| 14 |
{label:'Zoom',value:'zoom'}, |
| 15 |
{label:'Fade',value:'fade'}, |
| 16 |
{label:'Lift (shadow)',value:'lift'}, |
| 17 |
{label:'None',value:'none'}, |
| 18 |
]; |
| 19 |
|
| 20 |
function parseHex(hex, alpha) { |
| 21 |
hex = (hex||'#6c3fb5').replace('#',''); |
| 22 |
if (hex.length===3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]; |
| 23 |
var r=parseInt(hex.substring(0,2),16),g=parseInt(hex.substring(2,4),16),b=parseInt(hex.substring(4,6),16); |
| 24 |
return 'rgba('+r+','+g+','+b+','+(alpha/100).toFixed(2)+')'; |
| 25 |
} |
| 26 |
|
| 27 |
function GridPreview(a) { |
| 28 |
var items = a.items || []; |
| 29 |
var overlayRgba = parseHex(a.overlayColor, a.overlayOpacity); |
| 30 |
return el('div',{className:'bkmg-grid',style:{columnCount:a.columns,columnGap:a.gap+'px'}}, |
| 31 |
items.map(function(item, i) { |
| 32 |
var wrapStyle = { |
| 33 |
breakInside:'avoid',marginBottom:a.gap+'px', |
| 34 |
borderRadius:a.imageRadius+'px',overflow:'hidden', |
| 35 |
position:'relative',display:'block', |
| 36 |
background:'#f3f4f6',cursor:'pointer', |
| 37 |
}; |
| 38 |
return el('div',{key:i,className:'bkmg-item',style:wrapStyle}, |
| 39 |
item.url |
| 40 |
? el('img',{src:item.url,alt:item.alt||'',style:{width:'100%',display:'block',borderRadius:a.imageRadius+'px'}}) |
| 41 |
: el('div',{style:{height:'160px',background:'linear-gradient(135deg,#e5e7eb 0%,#d1d5db 100%)',display:'flex',alignItems:'center',justifyContent:'center',borderRadius:a.imageRadius+'px'}}, |
| 42 |
el('span',{className:'dashicons dashicons-format-image',style:{fontSize:'48px',width:'48px',height:'48px',color:'#9ca3af',lineHeight:1}})), |
| 43 |
a.showOverlay&&el('div',{className:'bkmg-overlay',style:{position:'absolute',inset:0,background:overlayRgba,opacity:0,transition:'opacity 0.3s',borderRadius:a.imageRadius+'px',display:'flex',alignItems:'flex-end',justifyContent:'flex-start',padding:'16px'}}, |
| 44 |
a.showCaption&&item.caption&&el('span',{className:'bkmg-caption',style:{color:a.captionColor,textShadow:'0 1px 4px rgba(0,0,0,0.3)'}},item.caption), |
| 45 |
), |
| 46 |
); |
| 47 |
}) |
| 48 |
); |
| 49 |
} |
| 50 |
|
| 51 |
function ItemsList(a, set) { |
| 52 |
var items = a.items || []; |
| 53 |
function setItems(newItems) { set({items: newItems}); } |
| 54 |
return el('div',null, |
| 55 |
items.map(function(item,i) { |
| 56 |
return el('div',{key:i,style:{border:'1px solid #e5e7eb',borderRadius:'8px',padding:'10px',marginBottom:'10px',background:'#fafafa'}}, |
| 57 |
el('div',{style:{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'8px'}}, |
| 58 |
el('strong',{style:{fontSize:'12px'}},__('Item ')+(i+1)), |
| 59 |
el(Button,{isDestructive:true,isSmall:true,onClick:function(){var d=[...items];d.splice(i,1);setItems(d);}},__('Remove')) |
| 60 |
), |
| 61 |
el(MediaUploadCheck,null, |
| 62 |
el(MediaUpload,{onSelect:function(m){var d=[...items];d[i]={...d[i],url:m.url,id:m.id,alt:m.alt||''};setItems(d);}, |
| 63 |
allowedTypes:['image'],value:item.id||0, |
| 64 |
render:function(ref){var open=ref.open;return el(Button,{onClick:open,variant:'secondary',isSmall:true,style:{width:'100%',justifyContent:'center',marginBottom:'6px'}}, |
| 65 |
item.url?__('Change Image'):__('Select Image')); |
| 66 |
} |
| 67 |
}) |
| 68 |
), |
| 69 |
el(TextControl,{label:__('Caption'),value:item.caption||'',onChange:function(v){var d=[...items];d[i]={...d[i],caption:v};setItems(d);}}), |
| 70 |
el(TextControl,{label:__('Link URL'),value:item.link||'',onChange:function(v){var d=[...items];d[i]={...d[i],link:v};setItems(d);}}), |
| 71 |
); |
| 72 |
}), |
| 73 |
el(Button,{variant:'secondary',style:{width:'100%',justifyContent:'center'},onClick:function(){setItems([...items,{id:0,url:'',alt:'',caption:'New Item',link:''}]);}},__('+ Add Item')), |
| 74 |
); |
| 75 |
} |
| 76 |
|
| 77 |
registerBlockType('blockenberg/masonry-grid', { |
| 78 |
edit: function(props) { |
| 79 |
var a = props.attributes; |
| 80 |
var set = props.setAttributes; |
| 81 |
var blockProps = useBlockProps((function () { |
| 82 |
var tv = getTypoCssVars(); |
| 83 |
var s = {}; |
| 84 |
Object.assign(s, tv(a.captionTypo, '--bkmg-cp-')); |
| 85 |
return { className: 'bkmg-wrap bkmg-effect-' + a.hoverEffect, style: s }; |
| 86 |
})()); |
| 87 |
return el(Fragment,null, |
| 88 |
el(InspectorControls,null, |
| 89 |
el(PanelBody,{title:__('Items'),initialOpen:true}, |
| 90 |
ItemsList(a, set), |
| 91 |
), |
| 92 |
el(PanelBody,{title:__('Grid Layout'),initialOpen:false}, |
| 93 |
el(RangeControl,{label:__('Columns'),value:a.columns,min:1,max:6,onChange:v=>set({columns:v})}), |
| 94 |
el(RangeControl,{label:__('Gap (px)'),value:a.gap,min:0,max:60,onChange:v=>set({gap:v})}), |
| 95 |
el(RangeControl,{label:__('Image Radius (px)'),value:a.imageRadius,min:0,max:32,onChange:v=>set({imageRadius:v})}), |
| 96 |
el(SelectControl,{label:__('Hover Effect'),value:a.hoverEffect,options:HOVER_EFFECTS,onChange:v=>set({hoverEffect:v})}), |
| 97 |
), |
| 98 |
el(PanelBody,{title:__('Overlay & Caption'),initialOpen:false}, |
| 99 |
el(ToggleControl,{label:__('Show Overlay on Hover'),checked:a.showOverlay,onChange:v=>set({showOverlay:v}),__nextHasNoMarginBottom:true}), |
| 100 |
el(ToggleControl,{label:__('Show Caption'),checked:a.showCaption,onChange:v=>set({showCaption:v}),__nextHasNoMarginBottom:true}), |
| 101 |
a.showOverlay&&el(RangeControl,{label:__('Overlay Opacity %'),value:a.overlayOpacity,min:10,max:100,onChange:v=>set({overlayOpacity:v})}), |
| 102 |
el(ToggleControl,{label:__('Lightbox on Click'),checked:a.lightbox,onChange:v=>set({lightbox:v}),__nextHasNoMarginBottom:true}), |
| 103 |
), |
| 104 |
el(PanelColorSettings,{title:__('Colors'),initialOpen:false,colorSettings:[ |
| 105 |
{label:__('Overlay Color'),value:a.overlayColor,onChange:v=>set({overlayColor:v||'#6c3fb5'})}, |
| 106 |
{label:__('Caption Color'),value:a.captionColor,onChange:v=>set({captionColor:v||'#ffffff'})}, |
| 107 |
{label:__('Accent Color'),value:a.accentColor,onChange:v=>set({accentColor:v||'#6c3fb5'})}, |
| 108 |
]}), |
| 109 |
el(PanelBody,{title:__('Typography'),initialOpen:false}, |
| 110 |
getTypoControl() && el(getTypoControl(),{label:__('Caption'),value:a.captionTypo||{},onChange:function(v){set({captionTypo:v});}}), |
| 111 |
), |
| 112 |
), |
| 113 |
el('div',blockProps,GridPreview(a)), |
| 114 |
); |
| 115 |
}, |
| 116 |
|
| 117 |
save: function({attributes:a}) { |
| 118 |
var items = a.items || []; |
| 119 |
var overlayRgba = parseHex(a.overlayColor, a.overlayOpacity); |
| 120 |
var _tv = getTypoCssVars(); |
| 121 |
var wrapStyle = { |
| 122 |
'--bkmg-overlay':overlayRgba, |
| 123 |
'--bkmg-radius':a.imageRadius+'px', |
| 124 |
'--bkmg-gap':a.gap+'px', |
| 125 |
'--bkmg-cols':a.columns, |
| 126 |
'--bkmg-accent':a.accentColor, |
| 127 |
}; |
| 128 |
Object.assign(wrapStyle, _tv(a.captionTypo, '--bkmg-cp-')); |
| 129 |
return el('div',{className:'bkmg-wrap bkmg-effect-'+a.hoverEffect, |
| 130 |
'data-lightbox':a.lightbox?'1':'0', |
| 131 |
style: wrapStyle}, |
| 132 |
el('div',{className:'bkmg-grid',style:{columnCount:a.columns,columnGap:a.gap+'px'}}, |
| 133 |
items.map(function(item,i) { |
| 134 |
var inner = el('div',{key:i,className:'bkmg-item',style:{breakInside:'avoid',marginBottom:a.gap+'px',borderRadius:a.imageRadius+'px',overflow:'hidden',position:'relative',display:'block',background:'#f3f4f6'}}, |
| 135 |
item.url&&el('img',{src:item.url,alt:item.alt||'',loading:'lazy',style:{width:'100%',display:'block'}}), |
| 136 |
a.showOverlay&&el('div',{className:'bkmg-overlay',style:{position:'absolute',inset:0,background:overlayRgba,opacity:0,transition:'opacity 0.3s',display:'flex',alignItems:'flex-end',padding:'16px'}}, |
| 137 |
a.showCaption&&item.caption&&el('span',{className:'bkmg-caption',style:{color:a.captionColor,textShadow:'0 1px 4px rgba(0,0,0,0.3)'}},item.caption), |
| 138 |
), |
| 139 |
); |
| 140 |
return item.link |
| 141 |
? el('a',{key:i,href:item.link,className:'bkmg-link',style:{display:'block',textDecoration:'none'}},inner) |
| 142 |
: inner; |
| 143 |
}) |
| 144 |
), |
| 145 |
); |
| 146 |
} |
| 147 |
}); |
| 148 |
|
| 149 |
function parseHex(hex, alpha) { |
| 150 |
hex = (hex||'#6c3fb5').replace('#',''); |
| 151 |
if (hex.length===3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]; |
| 152 |
var r=parseInt(hex.substring(0,2),16),g=parseInt(hex.substring(2,4),16),b=parseInt(hex.substring(4,6),16); |
| 153 |
return 'rgba('+r+','+g+','+b+','+(alpha/100).toFixed(2)+')'; |
| 154 |
} |
| 155 |
}() ); |
| 156 |
|
