| 1 |
wp.domReady(function () { |
| 2 |
document.querySelectorAll('.bkbg-lt-app').forEach(function (app) { |
| 3 |
var opts = {}; |
| 4 |
try { opts = JSON.parse(app.getAttribute('data-opts') || '{}'); } catch (e) {} |
| 5 |
|
| 6 |
var logos = opts.logos || []; |
| 7 |
var speed = opts.speed || 30; |
| 8 |
var direction = opts.direction || 'left'; |
| 9 |
var pauseOnHover = opts.pauseOnHover !== false; |
| 10 |
var gap = opts.gap || 48; |
| 11 |
var height = opts.height || 48; |
| 12 |
var logoFilter = opts.logoFilter || 'grayscale-hover'; |
| 13 |
|
| 14 |
var validLogos = logos.filter(function (l) { return l.imageUrl; }); |
| 15 |
if (validLogos.length === 0) { |
| 16 |
app.parentNode.removeChild(app); |
| 17 |
return; |
| 18 |
} |
| 19 |
|
| 20 |
// Build wrapper |
| 21 |
var wrap = document.createElement('div'); |
| 22 |
wrap.className = 'bkbg-lt-wrap bkbg-lt-wrap--filter-' + logoFilter; |
| 23 |
if (opts.bgColor) { |
| 24 |
wrap.style.setProperty('--bkbg-lt-bg', opts.bgColor); |
| 25 |
wrap.style.background = opts.bgColor; |
| 26 |
} |
| 27 |
if (opts.borderTop) wrap.style.borderTop = '1px solid ' + (opts.borderColor || '#e5e7eb'); |
| 28 |
if (opts.borderBottom) wrap.style.borderBottom = '1px solid ' + (opts.borderColor || '#e5e7eb'); |
| 29 |
wrap.style.paddingTop = (opts.paddingTop || 40) + 'px'; |
| 30 |
wrap.style.paddingBottom = (opts.paddingBottom || 40) + 'px'; |
| 31 |
wrap.style.setProperty('--bkbg-lt-speed', speed + 's'); |
| 32 |
|
| 33 |
// Track (duplicated for seamless loop) |
| 34 |
var trackClass = 'bkbg-lt-track bkbg-lt-track--' + direction; |
| 35 |
if (pauseOnHover) trackClass += ' bkbg-lt-track--pause'; |
| 36 |
var track = document.createElement('div'); |
| 37 |
track.className = trackClass; |
| 38 |
|
| 39 |
function buildItem(logo) { |
| 40 |
var item = document.createElement('div'); |
| 41 |
item.className = 'bkbg-lt-item'; |
| 42 |
item.style.marginRight = gap + 'px'; |
| 43 |
|
| 44 |
var img = document.createElement('img'); |
| 45 |
img.src = logo.imageUrl; |
| 46 |
img.alt = logo.imageAlt || ''; |
| 47 |
img.height = height; |
| 48 |
img.style.height = height + 'px'; |
| 49 |
img.loading = 'lazy'; |
| 50 |
|
| 51 |
if (logo.linkUrl) { |
| 52 |
var a = document.createElement('a'); |
| 53 |
a.href = logo.linkUrl; |
| 54 |
a.target = '_blank'; |
| 55 |
a.rel = 'noopener noreferrer'; |
| 56 |
a.appendChild(img); |
| 57 |
item.appendChild(a); |
| 58 |
} else { |
| 59 |
item.appendChild(img); |
| 60 |
} |
| 61 |
|
| 62 |
return item; |
| 63 |
} |
| 64 |
|
| 65 |
// Build items × 2 for seamless loop |
| 66 |
validLogos.forEach(function (logo) { track.appendChild(buildItem(logo)); }); |
| 67 |
validLogos.forEach(function (logo) { track.appendChild(buildItem(logo)); }); |
| 68 |
|
| 69 |
wrap.appendChild(track); |
| 70 |
app.parentNode.replaceChild(wrap, app); |
| 71 |
}); |
| 72 |
}); |
| 73 |
|
