| 1 |
wp.domReady(function () { |
| 2 |
document.querySelectorAll('.bkbg-ctt-app').forEach(function (app) { |
| 3 |
var opts = {}; |
| 4 |
try { opts = JSON.parse(app.getAttribute('data-opts') || '{}'); } catch (e) {} |
| 5 |
|
| 6 |
function typoCssVarsForEl(typo, prefix, el) { |
| 7 |
if (!typo) return; |
| 8 |
if (typo.family) el.style.setProperty(prefix + 'font-family', "'" + typo.family + "', sans-serif"); |
| 9 |
if (typo.weight) el.style.setProperty(prefix + 'font-weight', typo.weight); |
| 10 |
if (typo.transform) el.style.setProperty(prefix + 'text-transform', typo.transform); |
| 11 |
if (typo.style) el.style.setProperty(prefix + 'font-style', typo.style); |
| 12 |
if (typo.decoration) el.style.setProperty(prefix + 'text-decoration', typo.decoration); |
| 13 |
var su = typo.sizeUnit || 'px'; |
| 14 |
if (typo.sizeDesktop !== '' && typo.sizeDesktop != null) el.style.setProperty(prefix + 'font-size-d', typo.sizeDesktop + su); |
| 15 |
if (typo.sizeTablet !== '' && typo.sizeTablet != null) el.style.setProperty(prefix + 'font-size-t', typo.sizeTablet + su); |
| 16 |
if (typo.sizeMobile !== '' && typo.sizeMobile != null) el.style.setProperty(prefix + 'font-size-m', typo.sizeMobile + su); |
| 17 |
var lhu = typo.lineHeightUnit || ''; |
| 18 |
if (typo.lineHeightDesktop !== '' && typo.lineHeightDesktop != null) el.style.setProperty(prefix + 'line-height-d', typo.lineHeightDesktop + lhu); |
| 19 |
if (typo.lineHeightTablet !== '' && typo.lineHeightTablet != null) el.style.setProperty(prefix + 'line-height-t', typo.lineHeightTablet + lhu); |
| 20 |
if (typo.lineHeightMobile !== '' && typo.lineHeightMobile != null) el.style.setProperty(prefix + 'line-height-m', typo.lineHeightMobile + lhu); |
| 21 |
var lsu = typo.letterSpacingUnit || 'px'; |
| 22 |
if (typo.letterSpacingDesktop !== '' && typo.letterSpacingDesktop != null) el.style.setProperty(prefix + 'letter-spacing-d', typo.letterSpacingDesktop + lsu); |
| 23 |
if (typo.letterSpacingTablet !== '' && typo.letterSpacingTablet != null) el.style.setProperty(prefix + 'letter-spacing-t', typo.letterSpacingTablet + lsu); |
| 24 |
if (typo.letterSpacingMobile !== '' && typo.letterSpacingMobile != null) el.style.setProperty(prefix + 'letter-spacing-m', typo.letterSpacingMobile + lsu); |
| 25 |
var wsu = typo.wordSpacingUnit || 'px'; |
| 26 |
if (typo.wordSpacingDesktop !== '' && typo.wordSpacingDesktop != null) el.style.setProperty(prefix + 'word-spacing-d', typo.wordSpacingDesktop + wsu); |
| 27 |
if (typo.wordSpacingTablet !== '' && typo.wordSpacingTablet != null) el.style.setProperty(prefix + 'word-spacing-t', typo.wordSpacingTablet + wsu); |
| 28 |
if (typo.wordSpacingMobile !== '' && typo.wordSpacingMobile != null) el.style.setProperty(prefix + 'word-spacing-m', typo.wordSpacingMobile + wsu); |
| 29 |
} |
| 30 |
|
| 31 |
var cardStyle = opts.cardStyle || 'card'; |
| 32 |
|
| 33 |
var outerWrap = document.createElement('div'); |
| 34 |
outerWrap.className = 'bkbg-ctt-wrap'; |
| 35 |
outerWrap.style.paddingTop = (opts.paddingTop || 40) + 'px'; |
| 36 |
outerWrap.style.paddingBottom = (opts.paddingBottom || 40) + 'px'; |
| 37 |
typoCssVarsForEl(opts.typoQuote, '--bkbg-ctt-q-', outerWrap); |
| 38 |
|
| 39 |
var inner = document.createElement('div'); |
| 40 |
inner.className = 'bkbg-ctt-inner bkbg-ctt-inner--' + cardStyle; |
| 41 |
inner.style.maxWidth = (opts.maxWidth || 700) + 'px'; |
| 42 |
inner.style.setProperty('--bkbg-ctt-radius', (opts.borderRadius || 12) + 'px'); |
| 43 |
inner.style.setProperty('--bkbg-ctt-border', opts.borderColor || '#e5e7eb'); |
| 44 |
inner.style.setProperty('--bkbg-ctt-accent', opts.accentColor || '#7c3aed'); |
| 45 |
|
| 46 |
if (cardStyle === 'card') { |
| 47 |
inner.style.background = opts.bgColor || '#f9fafb'; |
| 48 |
} |
| 49 |
|
| 50 |
if (opts.showQuoteIcon) { |
| 51 |
var icon = document.createElement('div'); |
| 52 |
icon.className = 'bkbg-ctt-quote-icon'; |
| 53 |
icon.style.color = opts.accentColor || '#7c3aed'; |
| 54 |
icon.textContent = '\u201C'; // left double quotation mark |
| 55 |
inner.appendChild(icon); |
| 56 |
} |
| 57 |
|
| 58 |
var quote = document.createElement('p'); |
| 59 |
quote.className = 'bkbg-ctt-quote'; |
| 60 |
quote.style.color = opts.quoteColor || '#111827'; |
| 61 |
quote.innerHTML = opts.quote || ''; |
| 62 |
inner.appendChild(quote); |
| 63 |
|
| 64 |
if (opts.showAttribution && opts.attribution) { |
| 65 |
var attr = document.createElement('p'); |
| 66 |
attr.className = 'bkbg-ctt-attribution'; |
| 67 |
attr.style.color = opts.attributionColor || '#6b7280'; |
| 68 |
attr.textContent = '\u2014 ' + opts.attribution; |
| 69 |
inner.appendChild(attr); |
| 70 |
} |
| 71 |
|
| 72 |
// Build share URL |
| 73 |
var footer = document.createElement('div'); |
| 74 |
footer.className = 'bkbg-ctt-footer'; |
| 75 |
|
| 76 |
var btn = document.createElement('a'); |
| 77 |
btn.className = 'bkbg-ctt-btn'; |
| 78 |
btn.style.background = opts.buttonBg || '#000'; |
| 79 |
btn.style.color = opts.buttonColor || '#fff'; |
| 80 |
btn.target = '_blank'; |
| 81 |
btn.rel = 'noopener noreferrer'; |
| 82 |
|
| 83 |
var tweetText = encodeURIComponent((opts.quote || '').replace(/<[^>]*>/g, '')); |
| 84 |
var tweetUrl = opts.includeUrl !== false ? encodeURIComponent(window.location.href) : ''; |
| 85 |
btn.href = 'https://twitter.com/intent/tweet?text=' + tweetText + (tweetUrl ? '&url=' + tweetUrl : ''); |
| 86 |
|
| 87 |
// X (Twitter) logo SVG |
| 88 |
var svgNS = 'http://www.w3.org/2000/svg'; |
| 89 |
var svg = document.createElementNS(svgNS, 'svg'); |
| 90 |
svg.setAttribute('viewBox', '0 0 24 24'); |
| 91 |
svg.setAttribute('width', '16'); |
| 92 |
svg.setAttribute('height', '16'); |
| 93 |
svg.setAttribute('fill', 'currentColor'); |
| 94 |
svg.style.display = 'inline-block'; |
| 95 |
svg.style.verticalAlign = 'middle'; |
| 96 |
svg.style.flexShrink = '0'; |
| 97 |
var path = document.createElementNS(svgNS, 'path'); |
| 98 |
path.setAttribute('d', 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.258 5.63L18.244 2.25Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z'); |
| 99 |
svg.appendChild(path); |
| 100 |
btn.appendChild(svg); |
| 101 |
|
| 102 |
var btnLabel = document.createTextNode(' ' + (opts.buttonLabel || 'Share on X')); |
| 103 |
btn.appendChild(btnLabel); |
| 104 |
|
| 105 |
footer.appendChild(btn); |
| 106 |
inner.appendChild(footer); |
| 107 |
outerWrap.appendChild(inner); |
| 108 |
|
| 109 |
app.parentNode.replaceChild(outerWrap, app); |
| 110 |
}); |
| 111 |
}); |
| 112 |
|
