| 1 |
var _typoKeys = { family:'font-family', weight:'font-weight', style:'font-style', |
| 2 |
decoration:'text-decoration', transform:'text-transform', |
| 3 |
sizeDesktop:'font-size-d', sizeTablet:'font-size-t', sizeMobile:'font-size-m', |
| 4 |
lineHeightDesktop:'line-height-d', lineHeightTablet:'line-height-t', lineHeightMobile:'line-height-m', |
| 5 |
letterSpacingDesktop:'letter-spacing-d', letterSpacingTablet:'letter-spacing-t', letterSpacingMobile:'letter-spacing-m', |
| 6 |
wordSpacingDesktop:'word-spacing-d', wordSpacingTablet:'word-spacing-t', wordSpacingMobile:'word-spacing-m' }; |
| 7 |
function typoCssVarsForEl(el, typo, prefix) { |
| 8 |
if (!typo || typeof typo !== 'object') return; |
| 9 |
Object.keys(_typoKeys).forEach(function (k) { |
| 10 |
if (typo[k] !== undefined && typo[k] !== '') el.style.setProperty(prefix + _typoKeys[k], String(typo[k])); |
| 11 |
}); |
| 12 |
} |
| 13 |
|
| 14 |
wp.domReady(function () { |
| 15 |
document.querySelectorAll('.bkbg-mdc-app').forEach(function (el) { |
| 16 |
var a = JSON.parse(el.dataset.opts || '{}'); |
| 17 |
var logos = a.logos || []; |
| 18 |
var showQuote = a.showFeaturedQuote && a.layout !== 'logos-only'; |
| 19 |
var quoteAbove = a.layout === 'quote-logos'; |
| 20 |
|
| 21 |
var wrap = document.createElement('div'); |
| 22 |
wrap.className = 'bkbg-mdc-wrap'; |
| 23 |
wrap.style.background = a.bgColor || '#ffffff'; |
| 24 |
wrap.style.paddingTop = (a.paddingTop || 64) + 'px'; |
| 25 |
wrap.style.paddingBottom = (a.paddingBottom || 64) + 'px'; |
| 26 |
|
| 27 |
typoCssVarsForEl(wrap, a.eyebrowTypo, '--bkbg-mdc-ey-'); |
| 28 |
typoCssVarsForEl(wrap, a.headingTypo, '--bkbg-mdc-hd-'); |
| 29 |
typoCssVarsForEl(wrap, a.quoteTypo, '--bkbg-mdc-qt-'); |
| 30 |
|
| 31 |
var inner = document.createElement('div'); |
| 32 |
inner.className = 'bkbg-mdc-inner'; |
| 33 |
inner.style.setProperty('--mdc-max-width', (a.maxWidth || 1100) + 'px'); |
| 34 |
inner.style.setProperty('--mdc-gap', (a.logoGap || 48) + 'px'); |
| 35 |
|
| 36 |
/* Eyebrow */ |
| 37 |
if (a.showEyebrow && a.eyebrow) { |
| 38 |
var eyebrow = document.createElement('p'); |
| 39 |
eyebrow.className = 'bkbg-mdc-eyebrow'; |
| 40 |
eyebrow.style.color = a.eyebrowColor || '#9ca3af'; |
| 41 |
eyebrow.style.marginBottom = a.showHeading ? '8px' : '28px'; |
| 42 |
eyebrow.innerHTML = a.eyebrow; |
| 43 |
inner.appendChild(eyebrow); |
| 44 |
} |
| 45 |
|
| 46 |
if (a.showHeading && a.heading) { |
| 47 |
var heading = document.createElement('p'); |
| 48 |
heading.className = 'bkbg-mdc-heading'; |
| 49 |
heading.innerHTML = a.heading; |
| 50 |
inner.appendChild(heading); |
| 51 |
} |
| 52 |
|
| 53 |
/* Quote builder */ |
| 54 |
function buildQuote() { |
| 55 |
var qWrap = document.createElement('div'); |
| 56 |
qWrap.className = 'bkbg-mdc-quote-wrap'; |
| 57 |
qWrap.style.background = a.quoteBg || '#f9fafb'; |
| 58 |
qWrap.style.borderLeftColor = a.quoteAccent || '#7c3aed'; |
| 59 |
|
| 60 |
var qText = document.createElement('p'); |
| 61 |
qText.className = 'bkbg-mdc-quote-text'; |
| 62 |
qText.style.color = a.quoteColor || '#374151'; |
| 63 |
qText.innerHTML = a.featuredQuote || ''; |
| 64 |
qWrap.appendChild(qText); |
| 65 |
|
| 66 |
var qAttr = document.createElement('div'); |
| 67 |
qAttr.className = 'bkbg-mdc-quote-attribution'; |
| 68 |
qAttr.style.color = a.quoteAccent || '#7c3aed'; |
| 69 |
if (a.featuredLink && a.featuredLink !== '#') { |
| 70 |
var qLink = document.createElement('a'); |
| 71 |
qLink.href = a.featuredLink; |
| 72 |
qLink.textContent = '— ' + (a.featuredPublication || ''); |
| 73 |
qAttr.appendChild(qLink); |
| 74 |
} else { |
| 75 |
qAttr.textContent = '— ' + (a.featuredPublication || ''); |
| 76 |
} |
| 77 |
qWrap.appendChild(qAttr); |
| 78 |
return qWrap; |
| 79 |
} |
| 80 |
|
| 81 |
if (quoteAbove && showQuote) { |
| 82 |
inner.appendChild(buildQuote()); |
| 83 |
} |
| 84 |
|
| 85 |
/* Logos */ |
| 86 |
var logosEl = document.createElement('div'); |
| 87 |
logosEl.className = 'bkbg-mdc-logos'; |
| 88 |
|
| 89 |
logos.forEach(function (logo) { |
| 90 |
var link = document.createElement('a'); |
| 91 |
link.className = 'bkbg-mdc-logo-link'; |
| 92 |
link.href = logo.url || '#'; |
| 93 |
if (logo.url && logo.url !== '#') { link.target = '_blank'; link.rel = 'noopener noreferrer'; } |
| 94 |
|
| 95 |
if (logo.imageUrl) { |
| 96 |
var img = document.createElement('img'); |
| 97 |
img.src = logo.imageUrl; |
| 98 |
img.alt = logo.name || ''; |
| 99 |
img.className = 'bkbg-mdc-logo-img'; |
| 100 |
img.style.height = (a.logoHeight || 36) + 'px'; |
| 101 |
if (a.grayscale) { |
| 102 |
img.style.filter = 'grayscale(' + (a.grayscaleAmount || 100) + '%) opacity(0.5)'; |
| 103 |
} |
| 104 |
img.addEventListener('mouseenter', function () { if (a.grayscale) img.style.filter = 'none'; }); |
| 105 |
img.addEventListener('mouseleave', function () { if (a.grayscale) img.style.filter = 'grayscale(' + (a.grayscaleAmount || 100) + '%) opacity(0.5)'; }); |
| 106 |
link.appendChild(img); |
| 107 |
} else { |
| 108 |
var logoText = document.createElement('span'); |
| 109 |
logoText.className = 'bkbg-mdc-logo-text'; |
| 110 |
logoText.style.height = (a.logoHeight || 36) + 'px'; |
| 111 |
logoText.style.lineHeight = (a.logoHeight || 36) + 'px'; |
| 112 |
logoText.style.color = a.logoColor || '#9ca3af'; |
| 113 |
if (a.grayscale) { logoText.style.opacity = '0.5'; } |
| 114 |
logoText.textContent = logo.name || ''; |
| 115 |
link.appendChild(logoText); |
| 116 |
} |
| 117 |
|
| 118 |
logosEl.appendChild(link); |
| 119 |
}); |
| 120 |
inner.appendChild(logosEl); |
| 121 |
|
| 122 |
if (!quoteAbove && showQuote) { |
| 123 |
inner.appendChild(buildQuote()); |
| 124 |
} |
| 125 |
|
| 126 |
wrap.appendChild(inner); |
| 127 |
el.replaceWith(wrap); |
| 128 |
}); |
| 129 |
}); |
| 130 |
|
