| 1 |
(function () { |
| 2 |
function appleIcon(color) { |
| 3 |
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); |
| 4 |
svg.setAttribute('width', '28'); svg.setAttribute('height', '28'); svg.setAttribute('viewBox', '0 0 24 24'); |
| 5 |
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); |
| 6 |
path.setAttribute('fill', color); |
| 7 |
path.setAttribute('d', 'M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z'); |
| 8 |
svg.appendChild(path); |
| 9 |
return svg; |
| 10 |
} |
| 11 |
|
| 12 |
function googleIcon() { |
| 13 |
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); |
| 14 |
svg.setAttribute('width', '28'); svg.setAttribute('height', '28'); svg.setAttribute('viewBox', '0 0 24 24'); |
| 15 |
var paths = [ |
| 16 |
{ d: 'M3.18 23.76A2 2 0 0 1 2 22V2A2 2 0 0 1 3.18.24L13.26 10.3l-10.08 13.46z', fill: '#4285F4' }, |
| 17 |
{ d: 'M16.93 13.97l-3.67-3.67 3.67-3.67 4.1 2.36a2.05 2.05 0 0 1 0 2.62l-4.1 2.36z', fill: '#FBBC04' }, |
| 18 |
{ d: 'M3.18.24L13.26 10.3l3.67-3.67L4.96.3A2.1 2.1 0 0 0 3.18.24z', fill: '#34A853' }, |
| 19 |
{ d: 'M3.18 23.76L13.26 13.7l3.67 3.67-11.97 6.33c-.6.31-1.32.27-1.78-.24z', fill: '#EA4335' } |
| 20 |
]; |
| 21 |
paths.forEach(function (p) { |
| 22 |
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); |
| 23 |
path.setAttribute('d', p.d); |
| 24 |
path.setAttribute('fill', p.fill); |
| 25 |
svg.appendChild(path); |
| 26 |
}); |
| 27 |
return svg; |
| 28 |
} |
| 29 |
|
| 30 |
function buildBadge(href, icon, smallText, bigText, style) { |
| 31 |
var a = document.createElement('a'); |
| 32 |
a.href = href; |
| 33 |
a.className = 'bkbg-app-dl-badge ' + style; |
| 34 |
a.target = '_blank'; |
| 35 |
a.rel = 'noopener'; |
| 36 |
a.appendChild(icon); |
| 37 |
var textDiv = document.createElement('div'); |
| 38 |
var s = document.createElement('div'); |
| 39 |
s.className = 'bkbg-app-dl-badge-small'; |
| 40 |
s.style.color = style === 'black' ? '#fff' : '#555'; |
| 41 |
s.textContent = smallText; |
| 42 |
var b = document.createElement('div'); |
| 43 |
b.className = 'bkbg-app-dl-badge-big'; |
| 44 |
b.style.color = style === 'black' ? '#fff' : '#000'; |
| 45 |
b.textContent = bigText; |
| 46 |
textDiv.appendChild(s); |
| 47 |
textDiv.appendChild(b); |
| 48 |
a.appendChild(textDiv); |
| 49 |
return a; |
| 50 |
} |
| 51 |
|
| 52 |
function typoCssVarsForEl(typo, prefix, el) { |
| 53 |
if (!typo || typeof typo !== 'object') return; |
| 54 |
var map = { |
| 55 |
family:'font-family', weight:'font-weight', style:'font-style', |
| 56 |
decoration:'text-decoration', transform:'text-transform', |
| 57 |
sizeDesktop:'font-size-d', sizeTablet:'font-size-t', sizeMobile:'font-size-m', |
| 58 |
lineHeightDesktop:'line-height-d', lineHeightTablet:'line-height-t', lineHeightMobile:'line-height-m', |
| 59 |
letterSpacingDesktop:'letter-spacing-d', letterSpacingTablet:'letter-spacing-t', letterSpacingMobile:'letter-spacing-m', |
| 60 |
wordSpacingDesktop:'word-spacing-d', wordSpacingTablet:'word-spacing-t', wordSpacingMobile:'word-spacing-m' |
| 61 |
}; |
| 62 |
Object.keys(map).forEach(function(k) { |
| 63 |
if (typo[k] !== undefined && typo[k] !== '') { |
| 64 |
var v = typo[k]; |
| 65 |
if (['sizeDesktop','sizeTablet','sizeMobile'].indexOf(k) !== -1) v = v + (typo.sizeUnit || 'px'); |
| 66 |
else if (['lineHeightDesktop','lineHeightTablet','lineHeightMobile'].indexOf(k) !== -1) v = v + (typo.lineHeightUnit || ''); |
| 67 |
else if (['letterSpacingDesktop','letterSpacingTablet','letterSpacingMobile'].indexOf(k) !== -1) v = v + (typo.letterSpacingUnit || 'px'); |
| 68 |
else if (['wordSpacingDesktop','wordSpacingTablet','wordSpacingMobile'].indexOf(k) !== -1) v = v + (typo.wordSpacingUnit || 'px'); |
| 69 |
el.style.setProperty(prefix + map[k], String(v)); |
| 70 |
} |
| 71 |
}); |
| 72 |
} |
| 73 |
|
| 74 |
document.querySelectorAll('.bkbg-app-download-app').forEach(function (root) { |
| 75 |
var opts = {}; |
| 76 |
try { opts = JSON.parse(root.dataset.opts || '{}'); } catch (e) {} |
| 77 |
|
| 78 |
var bg = opts.bgGradient || opts.bgColor || '#0f172a'; |
| 79 |
var wrap = document.createElement('div'); |
| 80 |
wrap.className = 'bkbg-app-download-wrap'; |
| 81 |
wrap.style.cssText = 'background:' + bg + ';padding:' + (opts.paddingTop || 80) + 'px 40px ' + (opts.paddingBottom || 80) + 'px;'; |
| 82 |
typoCssVarsForEl(opts.headingTypo, '--bkbg-ad-heading-', wrap); |
| 83 |
typoCssVarsForEl(opts.bodyTypo, '--bkbg-ad-body-', wrap); |
| 84 |
if (opts.headingSize && opts.headingSize !== 44) wrap.style.setProperty('--bkbg-ad-heading-sz', opts.headingSize + 'px'); |
| 85 |
if (opts.textSize && opts.textSize !== 18) wrap.style.setProperty('--bkbg-ad-body-sz', opts.textSize + 'px'); |
| 86 |
|
| 87 |
var inner = document.createElement('div'); |
| 88 |
inner.className = 'bkbg-app-dl-inner'; |
| 89 |
inner.style.setProperty('--bkbg-ad-max-width', (opts.maxWidth || 1200) + 'px'); |
| 90 |
|
| 91 |
var grid = document.createElement('div'); |
| 92 |
grid.className = 'bkbg-app-dl-grid' + (opts.layout === 'centered' ? ' centered' : ''); |
| 93 |
|
| 94 |
// Text column |
| 95 |
var textCol = document.createElement('div'); |
| 96 |
textCol.className = 'bkbg-app-dl-text'; |
| 97 |
textCol.style.order = opts.imageLayout === 'right' ? '0' : '1'; |
| 98 |
|
| 99 |
if (opts.showTag !== false && opts.tag) { |
| 100 |
var tag = document.createElement('span'); |
| 101 |
tag.className = 'bkbg-app-dl-tag'; |
| 102 |
tag.style.cssText = 'background:' + (opts.tagBg || 'rgba(255,255,255,.1)') + ';color:' + (opts.tagColor || '#fff') + ';'; |
| 103 |
tag.textContent = opts.tag; |
| 104 |
textCol.appendChild(tag); |
| 105 |
} |
| 106 |
|
| 107 |
var h2 = document.createElement('h2'); |
| 108 |
h2.className = 'bkbg-app-dl-heading'; |
| 109 |
h2.style.color = opts.headingColor || '#fff'; |
| 110 |
h2.innerHTML = opts.heading || ''; |
| 111 |
textCol.appendChild(h2); |
| 112 |
|
| 113 |
var p = document.createElement('p'); |
| 114 |
p.className = 'bkbg-app-dl-body'; |
| 115 |
p.style.color = opts.textColor || '#94a3b8'; |
| 116 |
p.innerHTML = opts.subtext || ''; |
| 117 |
textCol.appendChild(p); |
| 118 |
|
| 119 |
if (opts.showRating) { |
| 120 |
var ratingRow = document.createElement('div'); |
| 121 |
ratingRow.className = 'bkbg-app-dl-rating'; |
| 122 |
var stars = document.createElement('div'); |
| 123 |
stars.className = 'bkbg-app-dl-stars'; |
| 124 |
stars.style.color = opts.starColor || '#f59e0b'; |
| 125 |
stars.textContent = '� |
| 126 |
� |
| 127 |
� |
| 128 |
� |
| 129 |
� |
| 130 |
'; |
| 131 |
var ratingText = document.createElement('div'); |
| 132 |
ratingText.className = 'bkbg-app-dl-rating-text'; |
| 133 |
ratingText.style.color = opts.textColor || '#94a3b8'; |
| 134 |
ratingText.textContent = (opts.rating || '4.9') + ' · ' + (opts.ratingCount || ''); |
| 135 |
ratingRow.appendChild(stars); |
| 136 |
ratingRow.appendChild(ratingText); |
| 137 |
textCol.appendChild(ratingRow); |
| 138 |
} |
| 139 |
|
| 140 |
if (opts.showApple || opts.showGoogle) { |
| 141 |
var badgeRow = document.createElement('div'); |
| 142 |
badgeRow.className = 'bkbg-app-dl-badges'; |
| 143 |
var bs = opts.badgeStyle || 'black'; |
| 144 |
if (opts.showApple) badgeRow.appendChild(buildBadge(opts.appleUrl || '#', appleIcon(bs === 'black' ? '#fff' : '#000'), 'Download on the', 'App Store', bs)); |
| 145 |
if (opts.showGoogle) badgeRow.appendChild(buildBadge(opts.googleUrl || '#', googleIcon(), 'GET IT ON', 'Google Play', bs)); |
| 146 |
textCol.appendChild(badgeRow); |
| 147 |
} |
| 148 |
|
| 149 |
grid.appendChild(textCol); |
| 150 |
|
| 151 |
// Device image column |
| 152 |
if (opts.layout !== 'centered' && opts.deviceImageUrl) { |
| 153 |
var devCol = document.createElement('div'); |
| 154 |
devCol.className = 'bkbg-app-dl-device-col'; |
| 155 |
devCol.style.order = opts.imageLayout === 'right' ? '1' : '0'; |
| 156 |
var img = document.createElement('img'); |
| 157 |
img.src = opts.deviceImageUrl; |
| 158 |
img.alt = opts.deviceAlt || ''; |
| 159 |
devCol.appendChild(img); |
| 160 |
grid.appendChild(devCol); |
| 161 |
} |
| 162 |
|
| 163 |
inner.appendChild(grid); |
| 164 |
wrap.appendChild(inner); |
| 165 |
root.parentNode.replaceChild(wrap, root); |
| 166 |
}); |
| 167 |
})(); |
| 168 |
|
