129 lines
4.4 KiB
JavaScript
129 lines
4.4 KiB
JavaScript
const leaves = true; // enable/disable leaves
|
|
const randomLeaves = true; // enable random leaves
|
|
const randomLeavesMobile = false; // enable random leaves on mobile devices
|
|
const leafCount = 25; // count of random extra leaves
|
|
|
|
|
|
let msgPrinted = false; // flag to prevent multiple console messages
|
|
|
|
// function to check and control the leaves
|
|
function toggleAutumn() {
|
|
const autumnContainer = document.querySelector('.autumn-container');
|
|
if (!autumnContainer) return;
|
|
|
|
const videoPlayer = document.querySelector('.videoPlayerContainer');
|
|
const trailerPlayer = document.querySelector('.youtubePlayerContainer');
|
|
const isDashboard = document.body.classList.contains('dashboardDocument');
|
|
const hasUserMenu = document.querySelector('#app-user-menu');
|
|
|
|
// hide leaves if video/trailer player is active or dashboard is visible
|
|
if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
|
|
autumnContainer.style.display = 'none'; // hide leaves
|
|
if (!msgPrinted) {
|
|
console.log('Autumn hidden');
|
|
msgPrinted = true;
|
|
}
|
|
} else {
|
|
autumnContainer.style.display = 'block'; // show leaves
|
|
if (msgPrinted) {
|
|
console.log('Autumn visible');
|
|
msgPrinted = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
// observe changes in the DOM
|
|
const observer = new MutationObserver(toggleSnowflakes);
|
|
|
|
// start observation
|
|
observer.observe(document.body, {
|
|
childList: true, // observe adding/removing of child elements
|
|
subtree: true, // observe all levels of the DOM tree
|
|
attributes: true // observe changes to attributes (e.g. class changes)
|
|
});
|
|
|
|
|
|
/*
|
|
const images = [
|
|
"/web/seasonal/ghost_20x20.png",
|
|
"/web/seasonal/bat_20x20.png",
|
|
"/web/seasonal/pumpkin_20x20.png",
|
|
];*/
|
|
const images = [
|
|
"./images/ghost_20x20.png",
|
|
"./images/bat_20x20.png",
|
|
"./images/pumpkin_20x20.png",
|
|
];
|
|
|
|
|
|
function addRandomLeaves(count) {
|
|
const autumnContainer = document.querySelector('.autumn-container'); // get the leave container
|
|
if (!autumnContainer) return; // exit if leave container is not found
|
|
|
|
console.log('Adding random leaves');
|
|
|
|
// Array of leave characters
|
|
for (let i = 0; i < count; i++) {
|
|
// create a new leave element
|
|
const leave = document.createElement('div');
|
|
leave.classList.add('leave');
|
|
|
|
// pick a random leave symbol
|
|
if (enableColoredSnowflakes) {
|
|
leave.textContent = autumnSymbolsMobile[Math.floor(Math.random() * autumnSymbolsMobile.length)];
|
|
} else {
|
|
leave.textContent = autumnSymbols[Math.floor(Math.random() * autumnSymbols.length)];
|
|
}
|
|
|
|
// set random horizontal position, animation delay and size(uncomment lines to enable)
|
|
const randomLeft = Math.random() * 100; // position (0% to 100%)
|
|
//const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //uncomment to enable random size
|
|
const randomAnimationDelay = Math.random() * 8; // delay (0s to 8s)
|
|
const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
|
|
|
|
// apply styles
|
|
leave.style.left = `${randomLeft}%`;
|
|
//leave.style.fontSize = `${randomSize}em`; //uncomment to enable random size
|
|
leave.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
|
|
|
|
// add the leave to the container
|
|
autumnContainer.appendChild(leave);
|
|
}
|
|
console.log('Random leaves added');
|
|
}
|
|
|
|
// initialize standard leaves
|
|
function initSnowflakes() {
|
|
const container = document.querySelector('.autumn-container') || document.createElement("div");
|
|
|
|
if (!document.querySelector('.autumn-container')) {
|
|
container.className = "autumn-container";
|
|
container.setAttribute("aria-hidden", "true");
|
|
document.body.appendChild(container);
|
|
}
|
|
|
|
for (let i = 0; i < 1; i++) {
|
|
images.forEach(imageSrc => {
|
|
const leafDiv = document.createElement("div");
|
|
leafDiv.className = "leaf";
|
|
|
|
const img = document.createElement("img");
|
|
img.src = imageSrc;
|
|
|
|
leafDiv.appendChild(img);
|
|
container.appendChild(leafDiv);
|
|
});
|
|
}
|
|
}
|
|
|
|
// initialize leaves and add random leaves after the DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
if (!leaves) return; // exit if leaves are disabled
|
|
initSnowflakes();
|
|
toggleSnowflakes();
|
|
|
|
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
|
|
if (randomSnowflakes && (screenWidth > 768 || randomSnowflakesMobile)) { // add random leaves only on larger screens, unless enabled for mobile devices
|
|
addRandomSnowflakes(snowflakeCount);
|
|
}
|
|
}); |