| 1 |
( function () { |
| 2 |
var el = window.wp.element.createElement; |
| 3 |
var { registerBlockType } = window.wp.blocks; |
| 4 |
var { InspectorControls, PanelColorSettings } = window.wp.blockEditor; |
| 5 |
var { PanelBody, RangeControl, SelectControl, TextControl, ToggleControl } = window.wp.components; |
| 6 |
var { __ } = window.wp.i18n; |
| 7 |
|
| 8 |
var POSITIONS = [ |
| 9 |
{label:'Bottom Right',value:'bottom-right'}, |
| 10 |
{label:'Bottom Left',value:'bottom-left'}, |
| 11 |
{label:'Bottom Center',value:'bottom-center'}, |
| 12 |
]; |
| 13 |
var ICONS = [ |
| 14 |
{label:'Arrow Up',value:'arrow-up-alt2'}, |
| 15 |
{label:'Chevron Up',value:'arrow-up-alt'}, |
| 16 |
{label:'Upload',value:'upload'}, |
| 17 |
{label:'Migrate',value:'migrate'}, |
| 18 |
{label:'Sort',value:'sort'}, |
| 19 |
]; |
| 20 |
|
| 21 |
function posStyle(position, offsetX, offsetY) { |
| 22 |
var s = {position:'fixed',bottom:offsetY+'px'}; |
| 23 |
if (position==='bottom-right') s.right = offsetX+'px'; |
| 24 |
else if (position==='bottom-left') s.left = offsetX+'px'; |
| 25 |
else { s.left='50%'; s.transform='translateX(-50%)'; } |
| 26 |
return s; |
| 27 |
} |
| 28 |
|
| 29 |
function BtnPreview(a) { |
| 30 |
var btnStyle = Object.assign({ |
| 31 |
width:a.btnSize+'px', height:a.btnSize+'px', |
| 32 |
display:'inline-flex', alignItems:'center', justifyContent:'center', |
| 33 |
background:a.btnBg, color:a.btnColor, |
| 34 |
borderRadius:a.btnRadius+'px', |
| 35 |
boxShadow:a.shadow?'0 4px 16px rgba(0,0,0,0.18)':'none', |
| 36 |
cursor:'pointer', border:'none', fontFamily:'inherit', |
| 37 |
gap:'6px', fontSize:'15px', fontWeight:700, |
| 38 |
flexDirection:'column', |
| 39 |
}, a.showLabel&&a.label?{height:'auto',padding:'10px 14px',flexDirection:'column'}:{}); |
| 40 |
|
| 41 |
return el('div',{style:{padding:'24px',background:'#f3f4f6',borderRadius:'12px',minHeight:'80px',position:'relative',display:'flex',alignItems:'center',justifyContent:'center',flexDirection:'column',gap:'12px'}}, |
| 42 |
el('p',{style:{margin:0,color:'#9ca3af',fontSize:'12px',textAlign:'center'}},__('Fixed position: ')+a.position+' (+'+a.offsetY+'px from '+(a.position==='bottom-right'?'right':'left')+')'), |
| 43 |
el('button',{style:btnStyle}, |
| 44 |
el('span',{className:'dashicons dashicons-'+a.icon,style:{fontSize:Math.round(a.btnSize*0.45)+'px',width:Math.round(a.btnSize*0.45)+'px',height:Math.round(a.btnSize*0.45)+'px',lineHeight:1}}), |
| 45 |
a.showLabel&&a.label&&el('span',{style:{fontSize:a.labelFontSize+'px',fontWeight:a.labelFontWeight,lineHeight:1,letterSpacing:'0.5px'}},a.label), |
| 46 |
), |
| 47 |
a.pulsing&&el('p',{style:{margin:0,color:'#a855f7',fontSize:'12px'}},__('⚡ Pulsing ring enabled')), |
| 48 |
); |
| 49 |
} |
| 50 |
|
| 51 |
registerBlockType('blockenberg/scroll-to-top', { |
| 52 |
edit: function(props) { |
| 53 |
var a = props.attributes; |
| 54 |
var set = props.setAttributes; |
| 55 |
return el('div',null, |
| 56 |
el(InspectorControls,null, |
| 57 |
el(PanelBody,{title:__('Button'),initialOpen:true}, |
| 58 |
el(SelectControl,{label:__('Icon'),value:a.icon,options:ICONS,onChange:v=>set({icon:v})}), |
| 59 |
el(ToggleControl,{label:__('Show Label'),checked:a.showLabel,onChange:v=>set({showLabel:v}),__nextHasNoMarginBottom:true}), |
| 60 |
a.showLabel&&el(TextControl,{label:__('Label Text'),value:a.label,onChange:v=>set({label:v})}), |
| 61 |
el(RangeControl,{label:__('Button Size (px)'),value:a.btnSize,min:32,max:80,onChange:v=>set({btnSize:v})}), |
| 62 |
el(RangeControl,{label:__('Border Radius (px)'),value:a.btnRadius,min:0,max:50,onChange:v=>set({btnRadius:v})}), |
| 63 |
el(ToggleControl,{label:__('Drop Shadow'),checked:a.shadow,onChange:v=>set({shadow:v}),__nextHasNoMarginBottom:true}), |
| 64 |
el(ToggleControl,{label:__('Pulsing Ring'),checked:a.pulsing,onChange:v=>set({pulsing:v}),__nextHasNoMarginBottom:true}), |
| 65 |
), |
| 66 |
el(PanelBody,{title:__('Position & Behavior'),initialOpen:false}, |
| 67 |
el(SelectControl,{label:__('Position'),value:a.position,options:POSITIONS,onChange:v=>set({position:v})}), |
| 68 |
a.position!=='bottom-center'&&el(RangeControl,{label:__('Horizontal Offset (px)'),value:a.offsetX,min:8,max:120,onChange:v=>set({offsetX:v})}), |
| 69 |
el(RangeControl,{label:__('Vertical Offset (px)'),value:a.offsetY,min:8,max:120,onChange:v=>set({offsetY:v})}), |
| 70 |
el(RangeControl,{label:__('Scroll Trigger (px)'),value:a.scrollTrigger,min:50,max:2000,onChange:v=>set({scrollTrigger:v})}), |
| 71 |
el(ToggleControl,{label:__('Smooth Scroll'),checked:a.smooth,onChange:v=>set({smooth:v}),__nextHasNoMarginBottom:true}), |
| 72 |
el(RangeControl,{label:__('Z-Index'),value:a.zIndex,min:100,max:99999,onChange:v=>set({zIndex:v})}), |
| 73 |
), |
| 74 |
el(PanelColorSettings,{title:__('Colors'),initialOpen:false,colorSettings:[ |
| 75 |
{label:__('Button Background'),value:a.btnBg,onChange:v=>set({btnBg:v||'#6c3fb5'})}, |
| 76 |
{label:__('Button Icon / Text'),value:a.btnColor,onChange:v=>set({btnColor:v||'#ffffff'})}, |
| 77 |
]}), |
| 78 |
el(PanelBody,{title:__('Typography'),initialOpen:false}, |
| 79 |
el(RangeControl,{label:__('Label Font Size (px)'),value:a.labelFontSize,min:9,max:24,onChange:v=>set({labelFontSize:v}),__nextHasNoMarginBottom:true}), |
| 80 |
el(RangeControl,{label:__('Label Font Weight'),value:a.labelFontWeight,min:300,max:900,step:100,onChange:v=>set({labelFontWeight:v}),__nextHasNoMarginBottom:true}), |
| 81 |
), |
| 82 |
), |
| 83 |
BtnPreview(a), |
| 84 |
); |
| 85 |
}, |
| 86 |
|
| 87 |
save: function({attributes:a}) { |
| 88 |
var btnStyle = { |
| 89 |
width:a.btnSize+'px',height:a.btnSize+'px', |
| 90 |
display:'inline-flex',alignItems:'center',justifyContent:'center', |
| 91 |
background:a.btnBg,color:a.btnColor, |
| 92 |
borderRadius:a.btnRadius+'px', |
| 93 |
boxShadow:a.shadow?'0 4px 16px rgba(0,0,0,0.18)':'none', |
| 94 |
cursor:'pointer',border:'none',fontFamily:'inherit', |
| 95 |
gap:'6px',flexDirection:a.showLabel&&a.label?'column':'row', |
| 96 |
padding:a.showLabel&&a.label?'10px 14px':undefined, |
| 97 |
height:a.showLabel&&a.label?'auto':undefined, |
| 98 |
}; |
| 99 |
var posStyleObj = posStyle(a.position, a.offsetX, a.offsetY); |
| 100 |
var wrapStyle = Object.assign({},posStyleObj,{ |
| 101 |
zIndex:a.zIndex, opacity:0, transform:(posStyleObj.transform||'')+' translateY(16px)', |
| 102 |
transition:'opacity 0.3s ease, transform 0.3s ease', |
| 103 |
pointerEvents:'none', |
| 104 |
}); |
| 105 |
return el('div',{className:'bkstt-wrap', |
| 106 |
'data-trigger':a.scrollTrigger, |
| 107 |
'data-smooth':a.smooth?'1':'0', |
| 108 |
'data-position':a.position, |
| 109 |
style:wrapStyle, |
| 110 |
}, |
| 111 |
a.pulsing&&el('span',{className:'bkstt-pulse',style:{position:'absolute',inset:'-6px',borderRadius:a.btnRadius+'px',border:'2px solid '+a.btnBg,animation:'bksttPulse 1.8s ease-out infinite',opacity:0.6}}), |
| 112 |
el('button',{className:'bkstt-btn','aria-label':'Scroll to top',style:btnStyle}, |
| 113 |
el('span',{className:'dashicons dashicons-'+a.icon,style:{fontSize:Math.round(a.btnSize*0.45)+'px',width:Math.round(a.btnSize*0.45)+'px',height:Math.round(a.btnSize*0.45)+'px',lineHeight:1},"aria-hidden":"true"}), |
| 114 |
a.showLabel&&a.label&&el('span',{style:{fontSize:a.labelFontSize+'px',fontWeight:a.labelFontWeight,lineHeight:1,letterSpacing:'0.5px'}},a.label), |
| 115 |
), |
| 116 |
); |
| 117 |
} |
| 118 |
}); |
| 119 |
}() ); |
| 120 |
|
