forked from vyla-entertainment/home-frontend
36 lines
1.4 KiB
JavaScript
36 lines
1.4 KiB
JavaScript
import { getExecutors } from '../services/executors-service.js';
|
|
import { createElement } from '../utils/dom.js';
|
|
import { createMarqueeLoop, populateLoopedTrack } from '../animations/marquee-loop.js';
|
|
|
|
const EXECUTOR_ITEM_WIDTH_PX = 180;
|
|
const BASE_SPEED = 0.35;
|
|
const BOOSTED_SPEED = 2.2;
|
|
|
|
function createExecutorItem(executor) {
|
|
const el = createElement('div', 'executor-item');
|
|
const avatar = executor.image
|
|
? `<img src="${executor.image}" alt="" onerror="this.parentElement.innerHTML=''" width="28" height="28" loading="lazy" decoding="async">`
|
|
: '';
|
|
el.innerHTML = `
|
|
<span class="executor-avatar">${avatar}</span>
|
|
<span class="executor-name">${executor.name}</span>
|
|
`;
|
|
return el;
|
|
}
|
|
|
|
export async function initExecutorsSection() {
|
|
const track = document.getElementById('executors-track');
|
|
if (!track) return;
|
|
|
|
try {
|
|
const executors = await getExecutors();
|
|
populateLoopedTrack(track, executors, createExecutorItem, EXECUTOR_ITEM_WIDTH_PX);
|
|
createMarqueeLoop(track, '--marquee-x', { baseSpeed: BASE_SPEED, boostedSpeed: BOOSTED_SPEED });
|
|
} catch (error) {
|
|
const wrap = document.querySelector('.executors-marquee-wrap');
|
|
if (wrap) {
|
|
wrap.innerHTML = '<p style="color: var(--color-muted); text-align:center; width:100%">executors unavailable.</p>';
|
|
}
|
|
}
|
|
}
|