forked from MinhQuan/PresentCorpo
122 lines
3.4 KiB
JavaScript
122 lines
3.4 KiB
JavaScript
// views/homePages/homeMain.js
|
|
|
|
// MANUAL BANNER SLIDESHOW FUNCTIONALITY
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const bannerContainer = document.querySelector(".banner-container");
|
|
const bannerItems = document.querySelectorAll(".banner-item");
|
|
const dots = document.querySelectorAll(".banner-dot");
|
|
const prevBtn = document.querySelector(".banner-prev");
|
|
const nextBtn = document.querySelector(".banner-next");
|
|
const vimeoIframe = document.querySelector(".video-container iframe");
|
|
|
|
let currentSlide = 0;
|
|
const totalSlides = bannerItems.length;
|
|
let vimeoPlayer = null;
|
|
|
|
// Initialize Vimeo Player
|
|
function initializeVimeoPlayer() {
|
|
if (typeof Vimeo !== "undefined" && vimeoIframe) {
|
|
vimeoPlayer = new Vimeo.Player(vimeoIframe);
|
|
|
|
// Set volume to 100% when video is ready
|
|
vimeoPlayer.on("loaded", function () {
|
|
vimeoPlayer.setVolume(1).catch((e) => {
|
|
console.log("Volume setting failed:", e);
|
|
});
|
|
});
|
|
|
|
// Play video when it becomes the active slide
|
|
vimeoPlayer.on("play", function () {
|
|
console.log("Video is playing with sound");
|
|
});
|
|
}
|
|
}
|
|
|
|
// Function to update slide position
|
|
function updateSlide() {
|
|
bannerContainer.style.transform = `translateX(-${currentSlide * 20}%)`;
|
|
|
|
// Update active dot
|
|
dots.forEach((dot, index) => {
|
|
dot.classList.toggle("active", index === currentSlide);
|
|
});
|
|
|
|
// Handle video playback
|
|
if (vimeoPlayer) {
|
|
if (currentSlide === 0) {
|
|
// If video slide is active, play the video with sound
|
|
vimeoPlayer.play().catch((e) => {
|
|
console.log("Vimeo play failed:", e);
|
|
});
|
|
} else {
|
|
// If not on video slide, pause the video
|
|
vimeoPlayer.pause().catch((e) => {
|
|
console.log("Vimeo pause failed:", e);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// Next slide function
|
|
function nextSlide() {
|
|
currentSlide = (currentSlide + 1) % totalSlides;
|
|
updateSlide();
|
|
}
|
|
|
|
// Previous slide function
|
|
function prevSlide() {
|
|
currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
|
|
updateSlide();
|
|
}
|
|
|
|
// Go to specific slide
|
|
function goToSlide(slideIndex) {
|
|
currentSlide = slideIndex;
|
|
updateSlide();
|
|
}
|
|
|
|
// Event listeners for navigation buttons
|
|
prevBtn.addEventListener("click", prevSlide);
|
|
nextBtn.addEventListener("click", nextSlide);
|
|
|
|
// Event listeners for dot indicators
|
|
dots.forEach((dot, index) => {
|
|
dot.addEventListener("click", () => {
|
|
goToSlide(index);
|
|
});
|
|
});
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "ArrowLeft") {
|
|
prevSlide();
|
|
} else if (e.key === "ArrowRight") {
|
|
nextSlide();
|
|
}
|
|
});
|
|
|
|
// Load Vimeo Player API
|
|
const vimeoScript = document.createElement("script");
|
|
vimeoScript.src = "https://player.vimeo.com/api/player.js";
|
|
vimeoScript.onload = initializeVimeoPlayer;
|
|
document.head.appendChild(vimeoScript);
|
|
|
|
// Initialize first slide
|
|
updateSlide();
|
|
});
|
|
|
|
// NEWS BULLETIN SECTION JS
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const newsItems = document.querySelectorAll(".news-item");
|
|
|
|
// Add click event to navigate to article page for each news item
|
|
newsItems.forEach((newsItem) => {
|
|
newsItem.addEventListener("click", () => {
|
|
const articleUrl = newsItem.getAttribute("data-article-url");
|
|
if (articleUrl) {
|
|
window.location.href = articleUrl;
|
|
}
|
|
});
|
|
});
|
|
});
|