| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
var _typoKeys = { |
| 5 |
family:'font-family', weight:'font-weight', style:'font-style', |
| 6 |
decoration:'text-decoration', transform:'text-transform', |
| 7 |
sizeDesktop:'font-size-d', sizeTablet:'font-size-t', sizeMobile:'font-size-m', |
| 8 |
lineHeightDesktop:'line-height-d', lineHeightTablet:'line-height-t', lineHeightMobile:'line-height-m', |
| 9 |
letterSpacingDesktop:'letter-spacing-d', letterSpacingTablet:'letter-spacing-t', letterSpacingMobile:'letter-spacing-m', |
| 10 |
wordSpacingDesktop:'word-spacing-d', wordSpacingTablet:'word-spacing-t', wordSpacingMobile:'word-spacing-m' |
| 11 |
}; |
| 12 |
function typoCssVarsForEl(el, obj, prefix) { |
| 13 |
if (!obj || typeof obj !== 'object') return; |
| 14 |
Object.keys(_typoKeys).forEach(function(k) { |
| 15 |
var v = obj[k]; |
| 16 |
if (v === undefined || v === '' || v === null) return; |
| 17 |
if (k === 'sizeDesktop' || k === 'sizeTablet' || k === 'sizeMobile') v = v + (obj.sizeUnit || 'px'); |
| 18 |
else if (k === 'lineHeightDesktop' || k === 'lineHeightTablet' || k === 'lineHeightMobile') v = v + (obj.lineHeightUnit || ''); |
| 19 |
else if (k === 'letterSpacingDesktop' || k === 'letterSpacingTablet' || k === 'letterSpacingMobile') v = v + (obj.letterSpacingUnit || 'px'); |
| 20 |
else if (k === 'wordSpacingDesktop' || k === 'wordSpacingTablet' || k === 'wordSpacingMobile') v = v + (obj.wordSpacingUnit || 'px'); |
| 21 |
el.style.setProperty(prefix + _typoKeys[k], String(v)); |
| 22 |
}); |
| 23 |
} |
| 24 |
|
| 25 |
document.addEventListener('DOMContentLoaded', function () { |
| 26 |
var anchors = document.querySelectorAll('.bkbg-rp-anchor[data-position]'); |
| 27 |
if (!anchors.length) return; |
| 28 |
|
| 29 |
anchors.forEach(function (anchor) { |
| 30 |
var d = anchor.dataset; |
| 31 |
var height = parseInt(d.height, 10) || 4; |
| 32 |
var position = d.position || 'top'; |
| 33 |
var color = d.color || '#2563eb'; |
| 34 |
var bgColor = d.bg || '#e5e7eb'; |
| 35 |
var showPct = d.pct === '1'; |
| 36 |
var zIndex = parseInt(d.zindex, 10) || 9999; |
| 37 |
var smooth = d.animation !== 'none'; |
| 38 |
var gradient = d.gradient || ''; |
| 39 |
|
| 40 |
var labelTypo; |
| 41 |
try { labelTypo = JSON.parse(anchor.getAttribute('data-label-typo') || '{}'); } catch(e) { labelTypo = {}; } |
| 42 |
|
| 43 |
var barBg = gradient |
| 44 |
? 'linear-gradient(90deg,' + color + ',' + gradient + ')' |
| 45 |
: color; |
| 46 |
|
| 47 |
/* Create bar wrapper */ |
| 48 |
var wrap = document.createElement('div'); |
| 49 |
wrap.className = 'bkbg-rp-bar-wrap bkbg-rp-' + position; |
| 50 |
wrap.style.cssText = [ |
| 51 |
'--bkbg-rp-h:' + height + 'px', |
| 52 |
'--bkbg-rp-bg:' + bgColor, |
| 53 |
'--bkbg-rp-color:' + color, |
| 54 |
'--bkbg-rp-z:' + zIndex, |
| 55 |
].join(';'); |
| 56 |
|
| 57 |
typoCssVarsForEl(wrap, labelTypo, '--bkrp-lt-'); |
| 58 |
|
| 59 |
var bar = document.createElement('div'); |
| 60 |
bar.className = 'bkbg-rp-bar' + (smooth ? ' bkbg-rp-smooth' : ''); |
| 61 |
bar.style.background = barBg; |
| 62 |
wrap.appendChild(bar); |
| 63 |
|
| 64 |
var pctEl; |
| 65 |
if (showPct) { |
| 66 |
pctEl = document.createElement('span'); |
| 67 |
pctEl.className = 'bkbg-rp-pct'; |
| 68 |
pctEl.textContent = '0%'; |
| 69 |
wrap.appendChild(pctEl); |
| 70 |
} |
| 71 |
|
| 72 |
document.body.appendChild(wrap); |
| 73 |
|
| 74 |
/* Scroll handler */ |
| 75 |
var ticking = false; |
| 76 |
function update() { |
| 77 |
var scrollTop = window.scrollY || document.documentElement.scrollTop; |
| 78 |
var docHeight = document.documentElement.scrollHeight - window.innerHeight; |
| 79 |
var pct = docHeight > 0 ? Math.min(100, Math.round((scrollTop / docHeight) * 100)) : 0; |
| 80 |
bar.style.width = pct + '%'; |
| 81 |
if (pctEl) pctEl.textContent = pct + '%'; |
| 82 |
ticking = false; |
| 83 |
} |
| 84 |
|
| 85 |
window.addEventListener('scroll', function () { |
| 86 |
if (!ticking) { |
| 87 |
window.requestAnimationFrame(update); |
| 88 |
ticking = true; |
| 89 |
} |
| 90 |
}, { passive: true }); |
| 91 |
|
| 92 |
/* Initial render */ |
| 93 |
update(); |
| 94 |
}); |
| 95 |
}); |
| 96 |
})(); |
| 97 |
|
