| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
function typoCssVarsForEl(typo, prefix, el) { |
| 5 |
if (!typo || typeof typo !== 'object') return; |
| 6 |
var map = { |
| 7 |
family:'font-family', weight:'font-weight', style:'font-style', |
| 8 |
decoration:'text-decoration', transform:'text-transform', |
| 9 |
sizeDesktop:'font-size-d', sizeTablet:'font-size-t', sizeMobile:'font-size-m', |
| 10 |
lineHeightDesktop:'line-height-d', lineHeightTablet:'line-height-t', lineHeightMobile:'line-height-m', |
| 11 |
letterSpacingDesktop:'letter-spacing-d', letterSpacingTablet:'letter-spacing-t', letterSpacingMobile:'letter-spacing-m', |
| 12 |
wordSpacingDesktop:'word-spacing-d', wordSpacingTablet:'word-spacing-t', wordSpacingMobile:'word-spacing-m' |
| 13 |
}; |
| 14 |
Object.keys(map).forEach(function(k) { |
| 15 |
if (typo[k] !== undefined && typo[k] !== '') { |
| 16 |
var v = typo[k]; |
| 17 |
if (['sizeDesktop','sizeTablet','sizeMobile'].indexOf(k) !== -1) v = v + (typo.sizeUnit || 'px'); |
| 18 |
else if (['lineHeightDesktop','lineHeightTablet','lineHeightMobile'].indexOf(k) !== -1) v = v + (typo.lineHeightUnit || ''); |
| 19 |
else if (['letterSpacingDesktop','letterSpacingTablet','letterSpacingMobile'].indexOf(k) !== -1) v = v + (typo.letterSpacingUnit || 'px'); |
| 20 |
else if (['wordSpacingDesktop','wordSpacingTablet','wordSpacingMobile'].indexOf(k) !== -1) v = v + (typo.wordSpacingUnit || 'px'); |
| 21 |
el.style.setProperty(prefix + map[k], String(v)); |
| 22 |
} |
| 23 |
}); |
| 24 |
} |
| 25 |
|
| 26 |
var TYPE_ICONS = { |
| 27 |
address: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 019.5 9 2.5 2.5 0 0112 6.5 2.5 2.5 0 0114.5 9 2.5 2.5 0 0112 11.5z"/></svg>', |
| 28 |
phone: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.4 11.4 0 003.57.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.4 11.4 0 00.57 3.57 1 1 0 01-.25 1.01l-2.2 2.21z"/></svg>', |
| 29 |
email: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>', |
| 30 |
website: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54A1.99 1.99 0 0016 14h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V5.07c3.95.49 7 3.85 7 7.93 0 2.08-.8 3.97-2.1 5.39z"/></svg>', |
| 31 |
hours: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/></svg>', |
| 32 |
fax: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 2H7c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 18H7V4h10v16zM9 7h6v2H9zm0 4h6v2H9zm0 4h4v2H9z"/></svg>', |
| 33 |
custom: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>', |
| 34 |
}; |
| 35 |
|
| 36 |
function getLinkHref(item) { |
| 37 |
if (item.type === 'phone') return 'tel:' + item.value.replace(/\s/g, ''); |
| 38 |
if (item.type === 'email') return 'mailto:' + item.value; |
| 39 |
if (item.type === 'website') return item.value; |
| 40 |
return item.value; |
| 41 |
} |
| 42 |
|
| 43 |
function makeIconEl(type, iconStyle) { |
| 44 |
var svg = TYPE_ICONS[type] || TYPE_ICONS.custom; |
| 45 |
var span = document.createElement('span'); |
| 46 |
span.className = 'bkbg-cti-icon bkbg-cti-icon--' + (iconStyle === 'none' ? 'plain' : iconStyle === 'outline' ? 'box bkbg-cti-icon--outline' : 'box'); |
| 47 |
span.innerHTML = svg; |
| 48 |
return span; |
| 49 |
} |
| 50 |
|
| 51 |
function initContactInfo(wrap) { |
| 52 |
var d = wrap.dataset; |
| 53 |
var items = JSON.parse(d.items || '[]'); |
| 54 |
var iconStyle = d.iconStyle || 'filled'; |
| 55 |
var showLabel = d.showLabel !== '0'; |
| 56 |
var withSchema= d.schema !== '0'; |
| 57 |
|
| 58 |
items.forEach(function (item) { |
| 59 |
var row = document.createElement('div'); |
| 60 |
row.className = 'bkbg-cti-item'; |
| 61 |
|
| 62 |
row.appendChild(makeIconEl(item.type, iconStyle)); |
| 63 |
|
| 64 |
var body = document.createElement('div'); |
| 65 |
body.className = 'bkbg-cti-body'; |
| 66 |
|
| 67 |
if (showLabel && item.label) { |
| 68 |
var lbl = document.createElement('span'); |
| 69 |
lbl.className = 'bkbg-cti-label'; |
| 70 |
lbl.textContent = item.label; |
| 71 |
body.appendChild(lbl); |
| 72 |
} |
| 73 |
|
| 74 |
if (item.linkEnabled) { |
| 75 |
var a = document.createElement('a'); |
| 76 |
a.className = 'bkbg-cti-link'; |
| 77 |
a.href = getLinkHref(item); |
| 78 |
a.textContent = item.value; |
| 79 |
if (item.type === 'website') { a.target = '_blank'; a.rel = 'noopener noreferrer'; } |
| 80 |
body.appendChild(a); |
| 81 |
} else { |
| 82 |
var val = document.createElement('span'); |
| 83 |
val.className = 'bkbg-cti-value'; |
| 84 |
val.textContent = item.value; |
| 85 |
body.appendChild(val); |
| 86 |
} |
| 87 |
|
| 88 |
row.appendChild(body); |
| 89 |
wrap.appendChild(row); |
| 90 |
}); |
| 91 |
|
| 92 |
/* Schema injection */ |
| 93 |
if (withSchema && items.length) { |
| 94 |
var address = items.find(function (i) { return i.type === 'address'; }); |
| 95 |
var phone = items.find(function (i) { return i.type === 'phone'; }); |
| 96 |
var email = items.find(function (i) { return i.type === 'email'; }); |
| 97 |
|
| 98 |
if (address || phone || email) { |
| 99 |
var schema = { '@context': 'https://schema.org', '@type': 'LocalBusiness' }; |
| 100 |
if (address) schema['address'] = { '@type': 'PostalAddress', 'streetAddress': address.value }; |
| 101 |
if (phone) schema['telephone'] = phone.value; |
| 102 |
if (email) schema['email'] = email.value; |
| 103 |
|
| 104 |
var script = document.createElement('script'); |
| 105 |
script.type = 'application/ld+json'; |
| 106 |
script.textContent = JSON.stringify(schema); |
| 107 |
document.head.appendChild(script); |
| 108 |
} |
| 109 |
} |
| 110 |
} |
| 111 |
|
| 112 |
document.addEventListener('DOMContentLoaded', function () { |
| 113 |
document.querySelectorAll('.bkbg-cti-wrap[data-items]').forEach(initContactInfo); |
| 114 |
}); |
| 115 |
})(); |
| 116 |
|
