Refactor seasonal scripts to enhance mobile detection using matchMedia for responsive behavior
This commit is contained in:
@@ -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();
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user