| 1 |
function typoCssVarsForEl(typo, prefix, el) { |
| 2 |
if (!typo || typeof typo !== 'object') return; |
| 3 |
var map = { |
| 4 |
family: 'font-family', weight: 'font-weight', style: 'font-style', |
| 5 |
transform: 'text-transform', decoration: 'text-decoration', |
| 6 |
sizeDesktop: 'font-size-d', sizeTablet: 'font-size-t', sizeMobile: 'font-size-m', |
| 7 |
sizeUnit: null, |
| 8 |
lineHeightDesktop: 'line-height-d', lineHeightTablet: 'line-height-t', lineHeightMobile: 'line-height-m', |
| 9 |
lineHeightUnit: null, |
| 10 |
letterSpacingDesktop: 'letter-spacing-d', letterSpacingTablet: 'letter-spacing-t', letterSpacingMobile: 'letter-spacing-m', |
| 11 |
letterSpacingUnit: null, |
| 12 |
wordSpacingDesktop: 'word-spacing-d', wordSpacingTablet: 'word-spacing-t', wordSpacingMobile: 'word-spacing-m', |
| 13 |
wordSpacingUnit: null |
| 14 |
}; |
| 15 |
var sizeU = typo.sizeUnit || 'px'; |
| 16 |
var lhU = typo.lineHeightUnit || ''; |
| 17 |
var lsU = typo.letterSpacingUnit || 'px'; |
| 18 |
var wsU = typo.wordSpacingUnit || 'px'; |
| 19 |
Object.keys(map).forEach(function (k) { |
| 20 |
var css = map[k]; if (!css) return; |
| 21 |
var v = typo[k]; if (v === undefined || v === '' || v === null) return; |
| 22 |
if (/size|spacing/i.test(k)) { |
| 23 |
var u = /letterSpacing/.test(k) ? lsU : /wordSpacing/.test(k) ? wsU : /lineHeight/.test(k) ? lhU : sizeU; |
| 24 |
v = v + u; |
| 25 |
} |
| 26 |
el.style.setProperty(prefix + css, v); |
| 27 |
}); |
| 28 |
} |
| 29 |
|
| 30 |
wp.domReady(function () { |
| 31 |
document.querySelectorAll('.bkbg-creative-button-app').forEach(function (app) { |
| 32 |
var opts = {}; |
| 33 |
try { opts = JSON.parse(app.getAttribute('data-opts') || '{}'); } catch (e) {} |
| 34 |
|
| 35 |
var label = opts.label || 'Get Started'; |
| 36 |
var url = opts.url || '#'; |
| 37 |
var openNewTab = opts.openNewTab === true; |
| 38 |
var effect = opts.hoverEffect || 'slide'; |
| 39 |
var btnStyle = opts.buttonStyle || 'filled'; |
| 40 |
var corners = opts.corners || 'rounded'; |
| 41 |
var bgColor = opts.bgColor || '#7c3aed'; |
| 42 |
var textColor = opts.textColor || '#ffffff'; |
| 43 |
var hoverBg = opts.hoverBg || '#4f46e5'; |
| 44 |
var hoverColor = opts.hoverColor || '#ffffff'; |
| 45 |
var borderCol = opts.borderColor || '#7c3aed'; |
| 46 |
var borderWidth = opts.borderWidth !== undefined ? opts.borderWidth : 2; |
| 47 |
var gFrom = opts.gradientFrom || '#7c3aed'; |
| 48 |
var gTo = opts.gradientTo || '#2563eb'; |
| 49 |
var fontSize = opts.fontSize || 16; |
| 50 |
var paddingH = opts.paddingH || 32; |
| 51 |
var paddingV = opts.paddingV || 14; |
| 52 |
var iconSize = opts.iconSize || 16; |
| 53 |
var showIcon = opts.showIcon !== false; |
| 54 |
var icon = opts.icon || '→'; |
| 55 |
var iconType = opts.iconType || 'custom-char'; |
| 56 |
var iconDash = opts.iconDashicon || ''; |
| 57 |
var iconImg = opts.iconImageUrl || ''; |
| 58 |
var iconPos = opts.iconPosition || 'right'; |
| 59 |
var centered = opts.centered !== false; |
| 60 |
var fullWidth = opts.fullWidth === true; |
| 61 |
|
| 62 |
var radius = corners === 'pill' ? '999px' : corners === 'rounded' ? '8px' : '0'; |
| 63 |
|
| 64 |
/* Wrapper */ |
| 65 |
var wrap = document.createElement('div'); |
| 66 |
wrap.className = 'bkbg-cb2-wrap'; |
| 67 |
wrap.style.textAlign = centered ? 'center' : 'left'; |
| 68 |
wrap.style.padding = '4px 0'; |
| 69 |
|
| 70 |
/* Button */ |
| 71 |
var btn = document.createElement('a'); |
| 72 |
btn.className = 'bkbg-cb2-btn bkbg-cb2-btn--' + effect + (fullWidth ? ' bkbg-cb2-full-width' : ''); |
| 73 |
btn.href = url; |
| 74 |
if (openNewTab) { btn.target = '_blank'; btn.rel = 'noopener noreferrer'; } |
| 75 |
|
| 76 |
/* Apply CSS custom props for hover effects */ |
| 77 |
btn.style.setProperty('--bkbg-cb2-hover-bg', hoverBg); |
| 78 |
btn.style.setProperty('--bkbg-cb2-hover-color', hoverColor); |
| 79 |
btn.style.setProperty('--bkbg-cb2-ph', paddingH + 'px'); |
| 80 |
btn.style.padding = paddingV + 'px ' + paddingH + 'px'; |
| 81 |
btn.style.borderRadius = radius; |
| 82 |
btn.style.border = borderWidth + 'px solid ' + borderCol; |
| 83 |
|
| 84 |
/* Background / color based on button style */ |
| 85 |
if (btnStyle === 'outline') { |
| 86 |
btn.style.background = 'transparent'; |
| 87 |
btn.style.color = bgColor; |
| 88 |
} else if (btnStyle === 'ghost') { |
| 89 |
btn.style.background = 'transparent'; |
| 90 |
btn.style.color = bgColor; |
| 91 |
btn.style.border = 'none'; |
| 92 |
} else if (btnStyle === 'gradient') { |
| 93 |
btn.style.background = 'linear-gradient(to right, ' + gFrom + ', ' + gTo + ')'; |
| 94 |
btn.style.color = textColor; |
| 95 |
btn.style.border = 'none'; |
| 96 |
} else { |
| 97 |
btn.style.background = bgColor; |
| 98 |
btn.style.color = textColor; |
| 99 |
} |
| 100 |
|
| 101 |
/* Icon left */ |
| 102 |
if (showIcon && iconPos === 'left') { |
| 103 |
var iLeft = document.createElement('span'); |
| 104 |
iLeft.className = 'bkbg-cb2-icon'; |
| 105 |
iLeft.style.fontSize = iconSize + 'px'; |
| 106 |
if (iconType !== 'custom-char' && window.bkbgIconPicker) { |
| 107 |
iLeft.appendChild(window.bkbgIconPicker.buildFrontendIcon(iconType, icon, iconDash, iconImg, iconDashColor)); |
| 108 |
} else { |
| 109 |
iLeft.textContent = icon; |
| 110 |
} |
| 111 |
btn.appendChild(iLeft); |
| 112 |
} |
| 113 |
|
| 114 |
/* Label */ |
| 115 |
var lbl = document.createElement('span'); |
| 116 |
lbl.className = 'bkbg-cb2-label'; |
| 117 |
lbl.innerHTML = label; |
| 118 |
btn.appendChild(lbl); |
| 119 |
|
| 120 |
/* Icon right / arrow effect */ |
| 121 |
if (showIcon && iconPos === 'right') { |
| 122 |
var iRight = document.createElement('span'); |
| 123 |
iRight.className = 'bkbg-cb2-icon' + (effect === 'arrow' ? ' bkbg-cb2-arrow-icon' : ''); |
| 124 |
iRight.style.fontSize = iconSize + 'px'; |
| 125 |
if (iconType !== 'custom-char' && window.bkbgIconPicker) { |
| 126 |
iRight.appendChild(window.bkbgIconPicker.buildFrontendIcon(iconType, icon, iconDash, iconImg, iconDashColor)); |
| 127 |
} else { |
| 128 |
iRight.textContent = icon; |
| 129 |
} |
| 130 |
btn.appendChild(iRight); |
| 131 |
} |
| 132 |
|
| 133 |
/* Ripple effect - click handler */ |
| 134 |
if (effect === 'ripple') { |
| 135 |
btn.addEventListener('click', function (e) { |
| 136 |
var rect = btn.getBoundingClientRect(); |
| 137 |
var size = Math.max(btn.offsetWidth, btn.offsetHeight) * 2; |
| 138 |
var x = e.clientX - rect.left - size / 2; |
| 139 |
var y = e.clientY - rect.top - size / 2; |
| 140 |
var circle = document.createElement('span'); |
| 141 |
circle.className = 'bkbg-cb2-ripple-circle'; |
| 142 |
circle.style.width = size + 'px'; |
| 143 |
circle.style.height = size + 'px'; |
| 144 |
circle.style.left = x + 'px'; |
| 145 |
circle.style.top = y + 'px'; |
| 146 |
btn.appendChild(circle); |
| 147 |
setTimeout(function () { if (circle.parentNode) circle.parentNode.removeChild(circle); }, 600); |
| 148 |
}); |
| 149 |
} |
| 150 |
|
| 151 |
wrap.appendChild(btn); |
| 152 |
typoCssVarsForEl(opts.typoBtn, '--bkbg-cb2-btn-', wrap); |
| 153 |
app.parentNode.replaceChild(wrap, app); |
| 154 |
}); |
| 155 |
}); |
| 156 |
|
