| 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, TextareaControl, ToggleControl, Button, __experimentalGradientPicker: GradientPicker } = window.wp.components; |
| 6 |
const { __ } = window.wp.i18n; |
| 7 |
const useState = window.wp.element.useState; |
| 8 |
|
| 9 |
var _bkbgCSLgetTC, _bkbgCSLgetTV; |
| 10 |
function getTC() { return _bkbgCSLgetTC || (_bkbgCSLgetTC = window.bkbgTypographyControl); } |
| 11 |
function getTV() { return _bkbgCSLgetTV || (_bkbgCSLgetTV = window.bkbgTypoCssVars); } |
| 12 |
function tv(obj, prefix) { var fn = getTV(); return fn ? fn(obj, prefix) : {}; } |
| 13 |
|
| 14 |
function slideBg(slide) { |
| 15 |
if (slide.bgType==='image'&&slide.bgImageUrl) return {backgroundImage:`url(${slide.bgImageUrl})`,backgroundSize:'cover',backgroundPosition:'center'}; |
| 16 |
if (slide.bgType==='gradient') return {backgroundImage:slide.bgGradient}; |
| 17 |
return {backgroundColor:slide.bgColor}; |
| 18 |
} |
| 19 |
|
| 20 |
function SlideEditor({ slide, index, onChange, onRemove }) { |
| 21 |
function upd(k,v){ onChange(index,Object.assign({},slide,{[k]:v})); } |
| 22 |
return el('div',{style:{border:'1px solid #ddd',borderRadius:'8px',padding:'12px',marginBottom:'10px',background:'#fafafa'}}, |
| 23 |
el('strong',{style:{display:'block',marginBottom:'8px'}},__('Slide ') + (index+1)), |
| 24 |
el(SelectControl,{label:__('Background Type'),value:slide.bgType, |
| 25 |
options:[{label:'Solid Color',value:'color'},{label:'Gradient',value:'gradient'},{label:'Image',value:'image'}], |
| 26 |
onChange:v=>upd('bgType',v)}), |
| 27 |
slide.bgType==='color' && el('div',null, |
| 28 |
el('label',{style:{fontSize:'11px',fontWeight:600,display:'block',marginBottom:'4px'}},__('BG Color')), |
| 29 |
el('input',{type:'color',value:slide.bgColor,onChange:e=>upd('bgColor',e.target.value),style:{width:'100%',height:'36px',border:'1px solid #ccc',borderRadius:'4px',cursor:'pointer'}}) |
| 30 |
), |
| 31 |
slide.bgType==='gradient' && el('div',{style:{marginBottom:'8px'}}, |
| 32 |
el('p',{style:{fontSize:'11px',fontWeight:600,margin:'0 0 6px',textTransform:'uppercase',color:'#757575'}},__('Gradient')), |
| 33 |
el(GradientPicker,{value:slide.bgGradient,onChange:v=>upd('bgGradient',v)}) |
| 34 |
), |
| 35 |
slide.bgType==='image' && ( |
| 36 |
slide.bgImageUrl |
| 37 |
? el('div',{style:{marginBottom:'6px'}}, |
| 38 |
el('img',{src:slide.bgImageUrl,style:{width:'100%',height:'80px',objectFit:'cover',borderRadius:'6px'}}), |
| 39 |
el(Button,{isDestructive:true,isSmall:true,onClick:()=>{upd('bgImageUrl','');upd('bgImageId',0);}},__('Remove')) |
| 40 |
) |
| 41 |
: el(MediaUploadCheck,null, |
| 42 |
el(MediaUpload,{onSelect:m=>{upd('bgImageUrl',m.url);upd('bgImageId',m.id);},allowedTypes:['image'],value:slide.bgImageId, |
| 43 |
render:({open})=>el(Button,{onClick:open,isSmall:true,variant:'secondary'},__('Upload BG Image'))}) |
| 44 |
) |
| 45 |
), |
| 46 |
slide.bgType==='image' && el(RangeControl,{label:__('Overlay Opacity'),value:slide.overlayOpacity,min:0,max:90,step:5,onChange:v=>upd('overlayOpacity',v)}), |
| 47 |
el(TextControl,{label:__('Heading'),value:slide.heading,onChange:v=>upd('heading',v)}), |
| 48 |
el(TextareaControl,{label:__('Subtext'),value:slide.subtext,onChange:v=>upd('subtext',v),rows:2}), |
| 49 |
el(ToggleControl,{label:__('Show Button'),checked:slide.btnShow,onChange:v=>upd('btnShow',v),__nextHasNoMarginBottom:true}), |
| 50 |
slide.btnShow && el(TextControl,{label:__('Button Label'),value:slide.btnLabel,onChange:v=>upd('btnLabel',v)}), |
| 51 |
slide.btnShow && el(TextControl,{label:__('Button URL'),value:slide.btnUrl,onChange:v=>upd('btnUrl',v)}), |
| 52 |
el(SelectControl,{label:__('Content Alignment'),value:slide.contentAlign, |
| 53 |
options:[{label:'Left',value:'left'},{label:'Center',value:'center'},{label:'Right',value:'right'}], |
| 54 |
onChange:v=>upd('contentAlign',v)}), |
| 55 |
el('label',{style:{fontSize:'11px',fontWeight:600,display:'block',marginTop:'8px',marginBottom:'4px'}},__('Text Color')), |
| 56 |
el('input',{type:'color',value:slide.textColor,onChange:e=>upd('textColor',e.target.value),style:{width:'100%',height:'36px',border:'1px solid #ccc',borderRadius:'4px',cursor:'pointer'}}), |
| 57 |
el(Button,{isDestructive:true,isSmall:true,onClick:()=>onRemove(index),style:{marginTop:'8px'}},__('Remove Slide')) |
| 58 |
); |
| 59 |
} |
| 60 |
|
| 61 |
registerBlockType('blockenberg/content-slider',{ |
| 62 |
edit: function(props){ |
| 63 |
const {attributes:attr,setAttributes}=props; |
| 64 |
const [activeIdx,setActiveIdx]=useState(0); |
| 65 |
|
| 66 |
function updateSlide(idx,next){const s=attr.slides.slice();s[idx]=next;setAttributes({slides:s});} |
| 67 |
function removeSlide(idx){const s=attr.slides.filter((_,i)=>i!==idx);setAttributes({slides:s});setActiveIdx(Math.min(activeIdx,s.length-1));} |
| 68 |
|
| 69 |
const current=attr.slides[activeIdx]||attr.slides[0]||{}; |
| 70 |
const bg=slideBg(current); |
| 71 |
|
| 72 |
const wrapStyle=Object.assign({ |
| 73 |
'--bkcs-height': attr.height+'px', |
| 74 |
'--bkcs-radius': attr.borderRadius+'px', |
| 75 |
borderRadius: attr.borderRadius+'px', |
| 76 |
overflow: 'hidden', |
| 77 |
}, tv(attr.typoHeading, '--bkcs-head-'), tv(attr.typoSubtext, '--bkcs-sub-'), tv(attr.typoButton, '--bkcs-btn-')); |
| 78 |
|
| 79 |
const slideStyle={ |
| 80 |
...bg, |
| 81 |
height: attr.height+'px', |
| 82 |
display:'flex',alignItems:'center',justifyContent:'center', |
| 83 |
position:'relative', |
| 84 |
}; |
| 85 |
|
| 86 |
const alignMap={center:'center',right:'flex-end',left:'flex-start'}; |
| 87 |
|
| 88 |
return el('div',{className:'bkcs-wrap',style:wrapStyle}, |
| 89 |
|
| 90 |
el(InspectorControls,null, |
| 91 |
el(PanelBody,{title:__('Slides'),initialOpen:true}, |
| 92 |
attr.slides.map((slide,i)=>el(SlideEditor,{key:i,slide,index:i,onChange:updateSlide,onRemove:removeSlide})), |
| 93 |
el(Button,{variant:'secondary',onClick:()=>setAttributes({slides:[...attr.slides,{bgType:'color',bgColor:'#6c3fb5',bgGradient:'linear-gradient(135deg,#6c3fb5,#e040fb)',bgImageUrl:'',bgImageId:0,overlayOpacity:0,heading:'New Slide',subtext:'',btnLabel:'Learn More',btnUrl:'#',btnShow:true,textColor:'#ffffff',contentAlign:'center'}]}), |
| 94 |
style:{width:'100%',justifyContent:'center',marginTop:'8px'}},__('+ Add Slide')) |
| 95 |
), |
| 96 |
el(PanelBody,{title:__('Slider Settings'),initialOpen:false}, |
| 97 |
el(RangeControl,{label:__('Height (px)'),value:attr.height,min:200,max:900,onChange:v=>setAttributes({height:v})}), |
| 98 |
el(RangeControl,{label:__('Border Radius (px)'),value:attr.borderRadius,min:0,max:40,onChange:v=>setAttributes({borderRadius:v})}), |
| 99 |
el(SelectControl,{label:__('Transition'),value:attr.transition,options:[{label:'Fade',value:'fade'},{label:'Slide',value:'slide'}],onChange:v=>setAttributes({transition:v})}), |
| 100 |
el(ToggleControl,{label:__('Autoplay'),checked:attr.autoplay,onChange:v=>setAttributes({autoplay:v}),__nextHasNoMarginBottom:true}), |
| 101 |
attr.autoplay&&el(RangeControl,{label:__('Speed (ms)'),value:attr.speed,min:1500,max:9000,step:500,onChange:v=>setAttributes({speed:v})}), |
| 102 |
el(ToggleControl,{label:__('Show Arrows'),checked:attr.showArrows,onChange:v=>setAttributes({showArrows:v}),__nextHasNoMarginBottom:true}), |
| 103 |
el(ToggleControl,{label:__('Show Dots'),checked:attr.showDots,onChange:v=>setAttributes({showDots:v}),__nextHasNoMarginBottom:true}) |
| 104 |
), |
| 105 |
el(PanelBody,{title:__('Typography'),initialOpen:false}, |
| 106 |
getTC() && el(getTC(),{label:__('Heading'),value:attr.typoHeading,onChange:function(v){setAttributes({typoHeading:v});}}), |
| 107 |
getTC() && el(getTC(),{label:__('Subtext'),value:attr.typoSubtext,onChange:function(v){setAttributes({typoSubtext:v});}}), |
| 108 |
getTC() && el(getTC(),{label:__('Button'),value:attr.typoButton,onChange:function(v){setAttributes({typoButton:v});}}) |
| 109 |
) |
| 110 |
), |
| 111 |
|
| 112 |
/* Editor preview */ |
| 113 |
el('div',{style:slideStyle}, |
| 114 |
current.bgType==='image'&¤t.bgImageUrl&¤t.overlayOpacity>0&& |
| 115 |
el('div',{style:{position:'absolute',inset:0,background:'rgba(0,0,0,'+(current.overlayOpacity/100)+')'}}), |
| 116 |
el('div',{className:'bkcs-caption',style:{color:current.textColor||'#fff',textAlign:current.contentAlign,alignItems:alignMap[current.contentAlign]||'center',zIndex:2}}, |
| 117 |
el('h2',{className:'bkcs-heading',style:{color:current.textColor||'#fff'}},current.heading), |
| 118 |
current.subtext&&el('p',{className:'bkcs-subtext',style:{color:current.textColor||'#fff'}},current.subtext), |
| 119 |
current.btnShow&¤t.btnLabel&&el('span',{className:'bkcs-btn'},current.btnLabel) |
| 120 |
) |
| 121 |
), |
| 122 |
attr.showArrows&&el('div',{className:'bkcs-arrows'}, |
| 123 |
el('button',{className:'bkcs-arrow bkcs-prev',onClick:()=>setActiveIdx((activeIdx-1+attr.slides.length)%attr.slides.length)},'‹'), |
| 124 |
el('button',{className:'bkcs-arrow bkcs-next',onClick:()=>setActiveIdx((activeIdx+1)%attr.slides.length)},'›') |
| 125 |
), |
| 126 |
attr.showDots&&el('div',{className:'bkcs-dots'}, |
| 127 |
attr.slides.map((_,i)=>el('button',{key:i,className:'bkcs-dot'+(i===activeIdx?' bkcs-dot-active':''),onClick:()=>setActiveIdx(i)})) |
| 128 |
) |
| 129 |
); |
| 130 |
}, |
| 131 |
|
| 132 |
save: function({attributes:attr}){ |
| 133 |
const wrapStyle=Object.assign({ |
| 134 |
'--bkcs-height': attr.height+'px', |
| 135 |
'--bkcs-radius': attr.borderRadius+'px', |
| 136 |
}, tv(attr.typoHeading, '--bkcs-head-'), tv(attr.typoSubtext, '--bkcs-sub-'), tv(attr.typoButton, '--bkcs-btn-')); |
| 137 |
return el('div',{ |
| 138 |
className:'bkcs-wrap bkcs-transition-'+attr.transition, |
| 139 |
style:wrapStyle, |
| 140 |
'data-autoplay':attr.autoplay?'1':'0', |
| 141 |
'data-speed':attr.speed, |
| 142 |
}, |
| 143 |
el('div',{className:'bkcs-track'}, |
| 144 |
attr.slides.map((slide,i)=>{ |
| 145 |
const bg=slideBg(slide); |
| 146 |
const alignMap={center:'center',right:'flex-end',left:'flex-start'}; |
| 147 |
return el('div',{key:i,className:'bkcs-slide'+(i===0?' bkcs-active':''),style:bg}, |
| 148 |
slide.bgType==='image'&&slide.bgImageUrl&&slide.overlayOpacity>0&& |
| 149 |
el('div',{style:{position:'absolute',inset:0,background:'rgba(0,0,0,'+(slide.overlayOpacity/100)+')'}}), |
| 150 |
el('div',{className:'bkcs-caption',style:{color:slide.textColor||'#fff',textAlign:slide.contentAlign,alignItems:alignMap[slide.contentAlign]||'center'}}, |
| 151 |
el('h2',{className:'bkcs-heading',style:{color:slide.textColor||'#fff'}},slide.heading), |
| 152 |
slide.subtext&&el('p',{className:'bkcs-subtext',style:{color:slide.textColor||'#fff'}},slide.subtext), |
| 153 |
slide.btnShow&&slide.btnLabel&&el('a',{href:slide.btnUrl,className:'bkcs-btn'},slide.btnLabel) |
| 154 |
) |
| 155 |
); |
| 156 |
}) |
| 157 |
), |
| 158 |
attr.showArrows&&el('div',{className:'bkcs-arrows'}, |
| 159 |
el('button',{className:'bkcs-arrow bkcs-prev','aria-label':'Previous'},'‹'), |
| 160 |
el('button',{className:'bkcs-arrow bkcs-next','aria-label':'Next'},'›') |
| 161 |
), |
| 162 |
attr.showDots&&el('div',{className:'bkcs-dots'}) |
| 163 |
); |
| 164 |
} |
| 165 |
}); |
| 166 |
}() ); |
| 167 |
|
