Refactor halloween.js and halloween.css to streamline symbol initialization and remove random symbol functionality
This commit is contained in:
@@ -1,12 +1,11 @@
|
||||
const config = window.SeasonalsPluginConfig?.Halloween || {};
|
||||
|
||||
const halloween = config.EnableHalloween !== undefined ? config.EnableHalloween : true; // enable/disable halloween
|
||||
const randomSymbols = config.EnableRandomSymbols !== undefined ? config.EnableRandomSymbols : true; // enable random symbols
|
||||
const randomSymbolsMobile = config.EnableRandomSymbolsMobile !== undefined ? config.EnableRandomSymbolsMobile : false; // enable random symbols on mobile
|
||||
const enableDiffrentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different durations
|
||||
const enableSpiders = config.EnableSpiders !== undefined ? config.EnableSpiders : true; // enable/disable spiders
|
||||
const enableMice = config.EnableMice !== undefined ? config.EnableMice : true; // enable/disable mice
|
||||
const halloweenCount = config.SymbolCount !== undefined ? config.SymbolCount : 25; // count of symbols
|
||||
const halloweenCountMobile = config.SymbolCountMobile !== undefined ? config.SymbolCountMobile : 10; // count of symbols on mobile
|
||||
|
||||
const images = [
|
||||
"../Seasonals/Resources/halloween_images/ghost_20x20.png",
|
||||
@@ -50,12 +49,16 @@ observer.observe(document.body, {
|
||||
});
|
||||
|
||||
|
||||
function addRandomSymbols(count) {
|
||||
const halloweenContainer = document.querySelector('.halloween-container');
|
||||
if (!halloweenContainer) return;
|
||||
|
||||
console.log('Adding random halloween symbols');
|
||||
function initHalloween(count) {
|
||||
let halloweenContainer = document.querySelector('.halloween-container');
|
||||
if (!halloweenContainer) {
|
||||
halloweenContainer = document.createElement("div");
|
||||
halloweenContainer.className = "halloween-container";
|
||||
halloweenContainer.setAttribute("aria-hidden", "true");
|
||||
document.body.appendChild(halloweenContainer);
|
||||
}
|
||||
|
||||
console.log('Adding halloween symbols');
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const halloweenDiv = document.createElement("div");
|
||||
@@ -84,37 +87,7 @@ function addRandomSymbols(count) {
|
||||
|
||||
halloweenContainer.appendChild(halloweenDiv);
|
||||
}
|
||||
console.log('Random halloween symbols added');
|
||||
}
|
||||
|
||||
function createHalloween() {
|
||||
const container = document.querySelector('.halloween-container') || document.createElement("div");
|
||||
|
||||
if (!document.querySelector('.halloween-container')) {
|
||||
container.className = "halloween-container";
|
||||
container.setAttribute("aria-hidden", "true");
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
for (let i = 0; i < 4; i++) {
|
||||
images.forEach(imageSrc => {
|
||||
const halloweenDiv = document.createElement("div");
|
||||
halloweenDiv.className = "halloween";
|
||||
|
||||
const img = document.createElement("img");
|
||||
img.src = imageSrc;
|
||||
|
||||
// set random animation duration
|
||||
if (enableDiffrentDuration) {
|
||||
const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
|
||||
const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
|
||||
halloweenDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
|
||||
}
|
||||
|
||||
halloweenDiv.appendChild(img);
|
||||
container.appendChild(halloweenDiv);
|
||||
});
|
||||
}
|
||||
console.log('Halloween symbols added');
|
||||
}
|
||||
|
||||
// create fog layer
|
||||
@@ -230,7 +203,11 @@ function createMouse(container) {
|
||||
|
||||
function initializeHalloween() {
|
||||
if (!halloween) return;
|
||||
createHalloween();
|
||||
|
||||
const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
|
||||
const count = !isMobile ? halloweenCount : halloweenCountMobile;
|
||||
|
||||
initHalloween(count);
|
||||
toggleHalloween();
|
||||
|
||||
const container = document.querySelector('.halloween-container');
|
||||
@@ -252,11 +229,6 @@ function initializeHalloween() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
|
||||
if (randomSymbols && (screenWidth > 768 || randomSymbolsMobile)) {
|
||||
addRandomSymbols(halloweenCount);
|
||||
}
|
||||
}
|
||||
|
||||
initializeHalloween();
|
||||
Reference in New Issue
Block a user