| 1 |
( function () { |
| 2 |
var el = React.createElement; |
| 3 |
var registerBlockType = wp.blocks.registerBlockType; |
| 4 |
var useBlockProps = wp.blockEditor.useBlockProps; |
| 5 |
var InspectorControls = wp.blockEditor.InspectorControls; |
| 6 |
var PanelBody = wp.components.PanelBody; |
| 7 |
var RangeControl = wp.components.RangeControl; |
| 8 |
var SelectControl = wp.components.SelectControl; |
| 9 |
var TextControl = wp.components.TextControl; |
| 10 |
var TextareaControl = wp.components.TextareaControl; |
| 11 |
var ToggleControl = wp.components.ToggleControl; |
| 12 |
var PanelColorSettings = wp.blockEditor.PanelColorSettings; |
| 13 |
|
| 14 |
var _tc; function getTypoControl() { return _tc || (_tc = window.bkbgTypographyControl); } |
| 15 |
var _tv; function getTypoCssVars() { return _tv || (_tv = window.bkbgTypoCssVars); } |
| 16 |
var _tvf = function (typo, prefix) { var fn = getTypoCssVars(); return fn ? fn(typo, prefix) : {}; }; |
| 17 |
|
| 18 |
var UNIT_OPTS = [ |
| 19 |
{ value: 'word', label: 'Word by word' }, |
| 20 |
{ value: 'char', label: 'Character by character' }, |
| 21 |
{ value: 'line', label: 'Line by line' } |
| 22 |
]; |
| 23 |
var ANIM_OPTS = [ |
| 24 |
{ value: 'slide-up', label: 'Slide Up' }, |
| 25 |
{ value: 'fade', label: 'Fade In' }, |
| 26 |
{ value: 'blur', label: 'Blur In' }, |
| 27 |
{ value: 'clip', label: 'Clip (curtain)' }, |
| 28 |
{ value: 'scale', label: 'Scale Up' } |
| 29 |
]; |
| 30 |
var TAG_OPTS = ['h1','h2','h3','h4','p'].map(function(t){return{value:t,label:t.toUpperCase()};}); |
| 31 |
var ALIGN_OPTS = [ |
| 32 |
{value:'left', label:'Left'}, |
| 33 |
{value:'center', label:'Center'}, |
| 34 |
{value:'right', label:'Right'} |
| 35 |
]; |
| 36 |
|
| 37 |
/* Split text into chunks for preview */ |
| 38 |
function renderPreview(a, revealed) { |
| 39 |
var text = a.text || ''; |
| 40 |
var units = a.revealUnit === 'char' ? text.split('') : text.split(/\s+/); |
| 41 |
var accentSet = {}; |
| 42 |
(a.accentWords||'').split(',').forEach(function(w){ accentSet[w.trim().toLowerCase()] = true; }); |
| 43 |
|
| 44 |
var spans = units.map(function(unit, i) { |
| 45 |
var pct = Math.min(1, i / Math.max(units.length - 1, 1)); |
| 46 |
var isAccent = accentSet[unit.toLowerCase()]; |
| 47 |
var color = isAccent |
| 48 |
? (a.useGradient ? 'transparent' : a.accentColor) |
| 49 |
: a.textColor; |
| 50 |
var style = { |
| 51 |
opacity: revealed ? 1 : 0.08, |
| 52 |
transition: 'all '+(a.duration||600)+'ms ease '+(i*(a.stagger||60))+'ms', |
| 53 |
color: color, |
| 54 |
display: 'inline-block', |
| 55 |
marginRight: a.revealUnit === 'char' ? '0' : '0.25em' |
| 56 |
}; |
| 57 |
if (isAccent && a.useGradient) { |
| 58 |
style.background = 'linear-gradient(90deg, '+(a.gradFrom||'#7c3aed')+', '+(a.gradTo||'#ec4899')+')'; |
| 59 |
style.WebkitBackgroundClip = 'text'; |
| 60 |
style.backgroundClip = 'text'; |
| 61 |
style.WebkitTextFillColor = 'transparent'; |
| 62 |
} |
| 63 |
return el('span', {key:i, style:style}, unit + (a.revealUnit === 'char' ? '' : ' ')); |
| 64 |
}); |
| 65 |
|
| 66 |
return el(a.tag||'h2', { |
| 67 |
className: 'bkbg-trs-heading', |
| 68 |
style: { |
| 69 |
textAlign:a.textAlign||'center', |
| 70 |
color:a.textColor||'#0f172a', |
| 71 |
margin:0 |
| 72 |
} |
| 73 |
}, spans); |
| 74 |
} |
| 75 |
|
| 76 |
registerBlockType('blockenberg/text-reveal-scroll', { |
| 77 |
title: 'Text Reveal on Scroll', |
| 78 |
icon: 'editor-paragraph', |
| 79 |
category: 'bkbg-effects', |
| 80 |
|
| 81 |
edit: function (props) { |
| 82 |
var attr = props.attributes; var setAttr = props.setAttributes; |
| 83 |
var revealed = true; /* always shown in editor */ |
| 84 |
|
| 85 |
return el(React.Fragment, null, |
| 86 |
el(InspectorControls, null, |
| 87 |
el(PanelBody, {title:'Content', initialOpen:true}, |
| 88 |
el(TextareaControl,{__nextHasNoMarginBottom:true,label:'Main Text',value:attr.text,onChange:function(v){setAttr({text:v});}}), |
| 89 |
el(TextControl,{__nextHasNoMarginBottom:true,label:'Subtext (optional)',value:attr.subtext,onChange:function(v){setAttr({subtext:v});}}), |
| 90 |
el(SelectControl,{__nextHasNoMarginBottom:true,label:'Heading Tag',value:attr.tag,options:TAG_OPTS,onChange:function(v){setAttr({tag:v});}}), |
| 91 |
el(TextControl,{__nextHasNoMarginBottom:true,label:'Accent Words (comma-separated)',help:'These words get the accent color.',value:attr.accentWords,onChange:function(v){setAttr({accentWords:v});}}) |
| 92 |
), |
| 93 |
el(PanelBody, {title:'Reveal Animation', initialOpen:true}, |
| 94 |
el(SelectControl,{__nextHasNoMarginBottom:true,label:'Reveal Unit',value:attr.revealUnit,options:UNIT_OPTS,onChange:function(v){setAttr({revealUnit:v});}}), |
| 95 |
el(SelectControl,{__nextHasNoMarginBottom:true,label:'Animation Style',value:attr.revealAnim,options:ANIM_OPTS,onChange:function(v){setAttr({revealAnim:v});}}), |
| 96 |
el(RangeControl,{__nextHasNoMarginBottom:true,label:'Stagger Delay (ms)',value:attr.stagger,min:0,max:300,onChange:function(v){setAttr({stagger:v});}}), |
| 97 |
el(RangeControl,{__nextHasNoMarginBottom:true,label:'Transition Duration (ms)',value:attr.duration,min:100,max:2000,step:50,onChange:function(v){setAttr({duration:v});}}), |
| 98 |
el(RangeControl,{__nextHasNoMarginBottom:true,label:'Trigger Offset (%)',value:attr.triggerOffset,min:0,max:50,onChange:function(v){setAttr({triggerOffset:v});}}), |
| 99 |
el(ToggleControl,{__nextHasNoMarginBottom:true,label:'Animate Once',checked:attr.once,onChange:function(v){setAttr({once:v});}}) |
| 100 |
), |
| 101 |
el(PanelBody, {title:'Typography', initialOpen:false}, |
| 102 |
getTypoControl() && getTypoControl()({ |
| 103 |
label: 'Title', |
| 104 |
value: attr.titleTypo || {}, |
| 105 |
onChange: function (v) { setAttr({ titleTypo: v }); } |
| 106 |
}), |
| 107 |
getTypoControl() && getTypoControl()({ |
| 108 |
label: 'Subtext', |
| 109 |
value: attr.subtextTypo || {}, |
| 110 |
onChange: function (v) { setAttr({ subtextTypo: v }); } |
| 111 |
}), |
| 112 |
el(SelectControl,{__nextHasNoMarginBottom:true,label:'Text Align',value:attr.textAlign,options:ALIGN_OPTS,onChange:function(v){setAttr({textAlign:v});}}), |
| 113 |
el(RangeControl,{__nextHasNoMarginBottom:true,label:'Max Width (px)',value:attr.maxWidth,min:400,max:1600,onChange:function(v){setAttr({maxWidth:v});}}) |
| 114 |
), |
| 115 |
el(PanelBody, {title:'Spacing', initialOpen:false}, |
| 116 |
el(RangeControl,{__nextHasNoMarginBottom:true,label:'Padding Top (px)',value:attr.paddingTop,min:0,max:200,onChange:function(v){setAttr({paddingTop:v});}}), |
| 117 |
el(RangeControl,{__nextHasNoMarginBottom:true,label:'Padding Bottom (px)',value:attr.paddingBottom,min:0,max:200,onChange:function(v){setAttr({paddingBottom:v});}}) |
| 118 |
), |
| 119 |
el(PanelBody, {title:'Accent Color', initialOpen:false}, |
| 120 |
el(ToggleControl,{__nextHasNoMarginBottom:true,label:'Gradient Accent',checked:attr.useGradient,onChange:function(v){setAttr({useGradient:v});}}) |
| 121 |
), |
| 122 |
el(PanelColorSettings, { |
| 123 |
title:'Colors',initialOpen:false, |
| 124 |
colorSettings:[ |
| 125 |
{value:attr.bgColor, onChange:function(v){setAttr({bgColor:v||''});}, label:'Background'}, |
| 126 |
{value:attr.textColor, onChange:function(v){setAttr({textColor:v||'#0f172a'});},label:'Text'}, |
| 127 |
{value:attr.accentColor, onChange:function(v){setAttr({accentColor:v||'#7c3aed'});},label:'Accent Words'}, |
| 128 |
{value:attr.subtextColor, onChange:function(v){setAttr({subtextColor:v||'#64748b'});},label:'Subtext'}, |
| 129 |
attr.useGradient && {value:attr.gradFrom,onChange:function(v){setAttr({gradFrom:v||'#7c3aed'});},label:'Gradient From'}, |
| 130 |
attr.useGradient && {value:attr.gradTo, onChange:function(v){setAttr({gradTo: v||'#ec4899'});},label:'Gradient To'} |
| 131 |
].filter(Boolean) |
| 132 |
}) |
| 133 |
), |
| 134 |
el('div', useBlockProps((function () { |
| 135 |
var s = {}; |
| 136 |
Object.assign(s, _tvf(attr.titleTypo, '--bktrs-tt-')); |
| 137 |
Object.assign(s, _tvf(attr.subtextTypo, '--bktrs-st-')); |
| 138 |
return { className: 'bkbg-trs-section', style: s }; |
| 139 |
})()), |
| 140 |
el('div', { |
| 141 |
style: { |
| 142 |
background:attr.bgColor||'transparent', |
| 143 |
padding:(attr.paddingTop||80)+'px clamp(20px,5vw,60px) '+(attr.paddingBottom||80)+'px', |
| 144 |
textAlign:attr.textAlign||'center' |
| 145 |
} |
| 146 |
}, |
| 147 |
el('div', {style:{maxWidth:(attr.maxWidth||900)+'px', margin:'0 auto'}}, |
| 148 |
renderPreview(attr, revealed), |
| 149 |
attr.subtext && el('p', { |
| 150 |
className: 'bkbg-trs-subtext', |
| 151 |
style: { |
| 152 |
color:attr.subtextColor||'#64748b', |
| 153 |
marginTop:24 |
| 154 |
} |
| 155 |
}, attr.subtext) |
| 156 |
) |
| 157 |
) |
| 158 |
) |
| 159 |
); |
| 160 |
}, |
| 161 |
|
| 162 |
save: function (props) { |
| 163 |
return el('div', useBlockProps.save((function () { |
| 164 |
var s = {}; |
| 165 |
Object.assign(s, _tvf(props.attributes.titleTypo, '--bktrs-tt-')); |
| 166 |
Object.assign(s, _tvf(props.attributes.subtextTypo, '--bktrs-st-')); |
| 167 |
return { style: s }; |
| 168 |
})()), |
| 169 |
el('div', { className:'bkbg-trs-app', 'data-opts':JSON.stringify(props.attributes) }) |
| 170 |
); |
| 171 |
} |
| 172 |
}); |
| 173 |
}() ); |
| 174 |
|
