84 lines
2.5 KiB
JavaScript
84 lines
2.5 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const grid = document.getElementById('reviewsGrid');
|
|
const ratingEl = document.getElementById('reviewsRatingValue');
|
|
const countEl = document.getElementById('reviewsCountValue');
|
|
const reviews = Array.isArray(window.REVIEW_ROTATION_DATA)
|
|
? window.REVIEW_ROTATION_DATA.filter(item => item && item.text)
|
|
: [];
|
|
|
|
if (!grid || reviews.length === 0) {
|
|
return;
|
|
}
|
|
|
|
const buildCard = (review) => {
|
|
const article = document.createElement('article');
|
|
article.className = 'review-card';
|
|
const text = document.createElement('p');
|
|
text.textContent = `"${review.text}"`;
|
|
const author = document.createElement('p');
|
|
author.className = 'review-author';
|
|
author.textContent = `— ${review.author || 'Happy Client'}`;
|
|
article.appendChild(text);
|
|
article.appendChild(author);
|
|
return article;
|
|
};
|
|
|
|
const fadeSwap = (cards) => {
|
|
grid.classList.add('is-fading');
|
|
setTimeout(() => {
|
|
grid.innerHTML = '';
|
|
cards.forEach(card => grid.appendChild(card));
|
|
requestAnimationFrame(() => {
|
|
grid.classList.remove('is-fading');
|
|
});
|
|
}, 350);
|
|
};
|
|
|
|
const startRotation = () => {
|
|
let index = 0;
|
|
let expandedCard = null;
|
|
let rotationTimer = null;
|
|
const rotationIntervalMs = 8000;
|
|
const expandedHoldMs = 15000;
|
|
|
|
const showNext = () => {
|
|
const slice = reviews.slice(index, index + 3);
|
|
const display = slice.length < 3
|
|
? slice.concat(reviews.slice(0, Math.max(0, 3 - slice.length)))
|
|
: slice;
|
|
fadeSwap(display.map(buildCard));
|
|
index = (index + 3) % reviews.length;
|
|
};
|
|
|
|
const scheduleNext = (delay) => {
|
|
if (rotationTimer) {
|
|
clearTimeout(rotationTimer);
|
|
}
|
|
rotationTimer = setTimeout(showNext, delay);
|
|
};
|
|
|
|
grid.addEventListener('click', (event) => {
|
|
const card = event.target.closest('.review-card');
|
|
if (!card) return;
|
|
if (expandedCard && expandedCard !== card) {
|
|
expandedCard.classList.remove('is-expanded');
|
|
}
|
|
card.classList.toggle('is-expanded');
|
|
expandedCard = card.classList.contains('is-expanded') ? card : null;
|
|
scheduleNext(expandedCard ? expandedHoldMs : rotationIntervalMs);
|
|
});
|
|
|
|
showNext();
|
|
scheduleNext(rotationIntervalMs);
|
|
};
|
|
|
|
if (ratingEl && window.REVIEW_ROTATION_RATING) {
|
|
ratingEl.textContent = window.REVIEW_ROTATION_RATING;
|
|
}
|
|
if (countEl && window.REVIEW_ROTATION_COUNT) {
|
|
countEl.textContent = window.REVIEW_ROTATION_COUNT;
|
|
}
|
|
|
|
startRotation();
|
|
});
|