Refactor seasonal scripts to enhance mobile detection using matchMedia for responsive behavior

This commit is contained in:
CodeDevMLH
2026-02-28 01:16:01 +01:00
parent cbf5d73629
commit 89ce903e8a
7 changed files with 12 additions and 12 deletions

View File

@@ -167,8 +167,8 @@ function initCarnivalObjects(count) {
function initializeCarnival() {
if (!carnival) return;
const screenWidth = window.innerWidth;
const count = screenWidth > 768 ? carnivalCount : carnivalCountMobile;
const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
const count = !isMobile ? carnivalCount : carnivalCountMobile;
initCarnivalObjects(count);
toggleCarnival();

View File

@@ -84,8 +84,8 @@ function initObjects(count) {
function initializeCherryBlossom() {
if (!cherryBlossom) return;
const screenWidth = window.innerWidth;
const count = screenWidth > 768 ? petalCount : petalCountMobile;
const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
const count = !isMobile ? petalCount : petalCountMobile;
initObjects(count);
toggleCherryBlossom();

View File

@@ -67,8 +67,8 @@ function initializeOktoberfest() {
document.body.appendChild(container);
}
const screenWidth = window.innerWidth;
const count = screenWidth > 768 ? symbolCount : symbolCountMobile;
const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
const count = !isMobile ? symbolCount : symbolCountMobile;
createOktoberfest(container, count);
}

View File

@@ -1,7 +1,7 @@
const config = window.SeasonalsPluginConfig?.Rain || {};
const enabled = config.EnableRain !== undefined ? config.EnableRain : true; // enable/disable rain
const isMobile = window.innerWidth <= 768;
const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
const elementCount = isMobile ? (config.RaindropCountMobile || 150) : (config.RaindropCount || 300); // count of raindrops
const rainSpeed = config.RainSpeed !== undefined ? config.RainSpeed : 1.0; // speed of rain

View File

@@ -181,8 +181,8 @@ function initializeSnowfall() {
}
const container = document.querySelector('.snowfall-container');
if (container) {
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
if (screenWidth < 768) { // lower count of snowflakes on mobile devices
const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches; // check if mobile device
if (isMobile) { // lower count of snowflakes on mobile devices
console.log('Mobile device detected. Reducing snowflakes count.');
snowflakesCount = snowflakesCountMobile;
}

View File

@@ -184,8 +184,8 @@ function initializeSnowstorm() {
}
const container = document.querySelector('.snowstorm-container');
if (container) {
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
if (screenWidth < 768) { // lower count of snowflakes on mobile devices
const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
if (isMobile) { // lower count of snowflakes on mobile devices
console.log('Mobile device detected. Reducing snowflakes count.');
snowflakesCount = snowflakesCountMobile;
}

View File

@@ -1,7 +1,7 @@
const config = window.SeasonalsPluginConfig?.Storm || {};
const enabled = config.EnableStorm !== undefined ? config.EnableStorm : true; // enable/disable storm
const isMobile = window.innerWidth <= 768;
const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
const elementCount = isMobile ? (config.RaindropCountMobile || 150) : (config.RaindropCount || 300); // count of raindrops
const enableLightning = config.EnableLightning !== undefined ? config.EnableLightning : true; // enable/disable lightning
const rainSpeed = config.RainSpeed !== undefined ? config.RainSpeed : 1.0; // speed of rain