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() { function initializeCarnival() {
if (!carnival) return; if (!carnival) return;
const screenWidth = window.innerWidth; const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches;
const count = screenWidth > 768 ? carnivalCount : carnivalCountMobile; const count = !isMobile ? carnivalCount : carnivalCountMobile;
initCarnivalObjects(count); initCarnivalObjects(count);
toggleCarnival(); toggleCarnival();

View File

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

View File

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

View File

@@ -1,7 +1,7 @@
const config = window.SeasonalsPluginConfig?.Rain || {}; const config = window.SeasonalsPluginConfig?.Rain || {};
const enabled = config.EnableRain !== undefined ? config.EnableRain : true; // enable/disable 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 elementCount = isMobile ? (config.RaindropCountMobile || 150) : (config.RaindropCount || 300); // count of raindrops
const rainSpeed = config.RainSpeed !== undefined ? config.RainSpeed : 1.0; // speed of rain 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'); const container = document.querySelector('.snowfall-container');
if (container) { if (container) {
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches; // check if mobile device
if (screenWidth < 768) { // lower count of snowflakes on mobile devices if (isMobile) { // lower count of snowflakes on mobile devices
console.log('Mobile device detected. Reducing snowflakes count.'); console.log('Mobile device detected. Reducing snowflakes count.');
snowflakesCount = snowflakesCountMobile; snowflakesCount = snowflakesCountMobile;
} }

View File

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

View File

@@ -1,7 +1,7 @@
const config = window.SeasonalsPluginConfig?.Storm || {}; const config = window.SeasonalsPluginConfig?.Storm || {};
const enabled = config.EnableStorm !== undefined ? config.EnableStorm : true; // enable/disable 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 elementCount = isMobile ? (config.RaindropCountMobile || 150) : (config.RaindropCount || 300); // count of raindrops
const enableLightning = config.EnableLightning !== undefined ? config.EnableLightning : true; // enable/disable lightning const enableLightning = config.EnableLightning !== undefined ? config.EnableLightning : true; // enable/disable lightning
const rainSpeed = config.RainSpeed !== undefined ? config.RainSpeed : 1.0; // speed of rain const rainSpeed = config.RainSpeed !== undefined ? config.RainSpeed : 1.0; // speed of rain