CodeDevMLH/Seasonals
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

check for existing canvas

Browse Source
This commit is contained in:
MLH
2025-01-25 19:43:01 +01:00
parent 54dbf817aa
commit 7b4c6107cd
5 changed files with 127 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
seasonals/snowfall.js
View File

@@ -55,6 +55,11 @@ observer.observe(document.body, {
function initializeCanvas() { function initializeCanvas() {
if (document.getElementById('snowfallCanvas')) {
console.warn('Canvas bereits vorhanden.');
return;
}
const container = document.querySelector('.snowfall-container'); const container = document.querySelector('.snowfall-container');
if (!container) { if (!container) {
console.error('Error: No element with class "snowfall-container" found.'); console.error('Error: No element with class "snowfall-container" found.');

5
seasonals/snowstorm.js
View File

@@ -57,6 +57,11 @@ observer.observe(document.body, {
function initializeCanvas() { function initializeCanvas() {
if (document.getElementById('snowfallCanvas')) {
console.warn('Canvas bereits vorhanden.');
return;
}
const container = document.querySelector('.snowstorm-container'); const container = document.querySelector('.snowstorm-container');
if (!container) { if (!container) {
console.error('Error: No element with class "snowfall-container" found.'); console.error('Error: No element with class "snowfall-container" found.');

207
seperate single seasonals/Seasonals-Santa/santa.js
View File

@@ -10,37 +10,37 @@ let animationFrameId; // ID of the animation frame
// function to check and control the santa // function to check and control the santa
function toggleSnowfall() { function toggleSnowfall() {
const santaContainer = document.querySelector('.santa-container'); const santaContainer = document.querySelector('.santa-container');
if (!santaContainer) return; if (!santaContainer) return;
const videoPlayer = document.querySelector('.videoPlayerContainer'); const videoPlayer = document.querySelector('.videoPlayerContainer');
const trailerPlayer = document.querySelector('.youtubePlayerContainer'); const trailerPlayer = document.querySelector('.youtubePlayerContainer');
const isDashboard = document.body.classList.contains('dashboardDocument'); const isDashboard = document.body.classList.contains('dashboardDocument');
const hasUserMenu = document.querySelector('#app-user-menu'); const hasUserMenu = document.querySelector('#app-user-menu');
// hide santa if video/trailer player is active or dashboard is visible // hide santa if video/trailer player is active or dashboard is visible
if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) { if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
santaContainer.style.display = 'none'; // hide santa santaContainer.style.display = 'none'; // hide santa
removeCanvas(); removeCanvas();
if (!msgPrinted) { if (!msgPrinted) {
console.log('Snowfall hidden'); console.log('Snowfall hidden');
msgPrinted = true; msgPrinted = true;
} }
} else {
santaContainer.style.display = 'block'; // show santa
if (!animationFrameId) {
initializeCanvas();
snowflakes = createSnowflakes(santaContainer);
animateSnowfall();
} else { } else {
console.warn('could not initialize santa: animation frame is already running'); santaContainer.style.display = 'block'; // show santa
} if (!animationFrameId) {
initializeCanvas();
snowflakes = createSnowflakes(santaContainer);
animateSnowfall();
} else {
console.warn('could not initialize santa: animation frame is already running');
}
if (msgPrinted) { if (msgPrinted) {
console.log('Snowfall visible'); console.log('Snowfall visible');
msgPrinted = false; msgPrinted = false;
}
} }
}
} }
// observe changes in the DOM // observe changes in the DOM
@@ -48,116 +48,121 @@ const observer = new MutationObserver(toggleSnowfall);
// start observation // start observation
observer.observe(document.body, { observer.observe(document.body, {
childList: true, // observe adding/removing of child elements childList: true, // observe adding/removing of child elements
subtree: true, // observe all levels of the DOM tree subtree: true, // observe all levels of the DOM tree
attributes: true // observe changes to attributes (e.g. class changes) attributes: true // observe changes to attributes (e.g. class changes)
}); });
function initializeCanvas() { function initializeCanvas() {
const container = document.querySelector('.santa-container'); if (document.getElementById('snowfallCanvas')) {
if (!container) { console.warn('Canvas bereits vorhanden.');
console.error('Error: No element with class "santa-container" found.'); return;
return; }
}
canvas = document.createElement('canvas'); const container = document.querySelector('.santa-container');
canvas.id = 'snowfallCanvas'; if (!container) {
container.appendChild(canvas); console.error('Error: No element with class "santa-container" found.');
ctx = canvas.getContext('2d'); return;
}
resizeCanvas(container); canvas = document.createElement('canvas');
window.addEventListener('resize', () => resizeCanvas(container)); canvas.id = 'snowfallCanvas';
container.appendChild(canvas);
ctx = canvas.getContext('2d');
resizeCanvas(container);
window.addEventListener('resize', () => resizeCanvas(container));
} }
function removeCanvas() { function removeCanvas() {
const canvas = document.getElementById('snowfallCanvas'); const canvas = document.getElementById('snowfallCanvas');
if (canvas) { if (canvas) {
canvas.remove(); canvas.remove();
if (animationFrameId) { if (animationFrameId) {
cancelAnimationFrame(animationFrameId); cancelAnimationFrame(animationFrameId);
animationFrameId = null; animationFrameId = null;
console.log('Animation frame canceled'); console.log('Animation frame canceled');
}
console.log('Canvas removed');
} }
console.log('Canvas removed');
}
} }
function resizeCanvas(container) { function resizeCanvas(container) {
if (!canvas) return; if (!canvas) return;
const rect = container.getBoundingClientRect(); const rect = container.getBoundingClientRect();
canvas.width = rect.width; canvas.width = rect.width;
canvas.height = rect.height; canvas.height = rect.height;
} }
function createSnowflakes(container) { function createSnowflakes(container) {
return Array.from({ length: snowflakesCount }, () => ({ return Array.from({ length: snowflakesCount }, () => ({
x: Math.random() * canvas.width, x: Math.random() * canvas.width,
y: Math.random() * canvas.height, y: Math.random() * canvas.height,
radius: Math.random() * 1.2 + 1, radius: Math.random() * 1.2 + 1,
speed: Math.random() * snowFallSpeed + 1, speed: Math.random() * snowFallSpeed + 1,
swing: Math.random() * 2 - 1, swing: Math.random() * 2 - 1,
})); }));
} }
// Initialize snowflakes // Initialize snowflakes
let snowflakes = []; let snowflakes = [];
function drawSnowflakes() { function drawSnowflakes() {
if (!ctx || !canvas) { if (!ctx || !canvas) {
console.error('Error: Canvas or context not found.'); console.error('Error: Canvas or context not found.');
return; return;
} }
ctx.clearRect(0, 0, canvas.width, canvas.height); // empty canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // empty canvas
snowflakes.forEach(flake => { snowflakes.forEach(flake => {
ctx.beginPath(); ctx.beginPath();
ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2); ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
ctx.fillStyle = 'white'; // color of snowflakes ctx.fillStyle = 'white'; // color of snowflakes
ctx.fill(); ctx.fill();
}); });
} }
function updateSnowflakes() { function updateSnowflakes() {
snowflakes.forEach(flake => { snowflakes.forEach(flake => {
flake.y += flake.speed; // downwards movement flake.y += flake.speed; // downwards movement
flake.x += flake.swing; // sideways movement flake.x += flake.swing; // sideways movement
// reset snowflake if it reaches the bottom // reset snowflake if it reaches the bottom
if (flake.y > canvas.height) { if (flake.y > canvas.height) {
flake.y = 0; flake.y = 0;
flake.x = Math.random() * canvas.width; // with new random X position flake.x = Math.random() * canvas.width; // with new random X position
} }
// wrap snowflakes around the screen edges // wrap snowflakes around the screen edges
if (flake.x > canvas.width) flake.x = 0; if (flake.x > canvas.width) flake.x = 0;
if (flake.x < 0) flake.x = canvas.width; if (flake.x < 0) flake.x = canvas.width;
}); });
} }
function animateSnowfall() { function animateSnowfall() {
drawSnowflakes(); drawSnowflakes();
updateSnowflakes(); updateSnowflakes();
animationFrameId = requestAnimationFrame(animateSnowfall); animationFrameId = requestAnimationFrame(animateSnowfall);
} }
// initialize santa // initialize santa
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
if (!santa){ if (!santa) {
console.warn('Snowfall is disabled.'); console.warn('Sante is disabled.');
return; // exit if santa is disabled return; // exit if santa is disabled
}
const container = document.querySelector('.santa-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
console.log('Mobile device detected. Reducing snowflakes count.');
snowflakesCount = snowflakesCountMobile;
} }
const container = document.querySelector('.santa-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
console.log('Mobile device detected. Reducing snowflakes count.');
snowflakesCount = snowflakesCountMobile;
}
console.log('Snowfall enabled.'); console.log('Santa enabled.');
initializeCanvas(); initializeCanvas();
snowflakes = createSnowflakes(container); snowflakes = createSnowflakes(container);
animateSnowfall(); animateSnowfall();
} }
}); });

7
seperate single seasonals/Seasonals-Snowfall/snowfall.js
View File

@@ -55,6 +55,11 @@ observer.observe(document.body, {
function initializeCanvas() { function initializeCanvas() {
if (document.getElementById('snowfallCanvas')) {
console.warn('Canvas bereits vorhanden.');
return;
}
const container = document.querySelector('.snowfall-container'); const container = document.querySelector('.snowfall-container');
if (!container) { if (!container) {
console.error('Error: No element with class "snowfall-container" found.'); console.error('Error: No element with class "snowfall-container" found.');
@@ -143,7 +148,7 @@ function animateSnowfall() {
// initialize snowfall // initialize snowfall
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
if (!snowfall){ if (!snowfall) {
console.warn('Snowfall is disabled.'); console.warn('Snowfall is disabled.');
return; // exit if snowfall is disabled return; // exit if snowfall is disabled
} }

5
seperate single seasonals/Seasonals-Snowstorm/snowstorm.js
View File

@@ -57,6 +57,11 @@ observer.observe(document.body, {
function initializeCanvas() { function initializeCanvas() {
if (document.getElementById('snowfallCanvas')) {
console.warn('Canvas bereits vorhanden.');
return;
}
const container = document.querySelector('.snowstorm-container'); const container = document.querySelector('.snowstorm-container');
if (!container) { if (!container) {
console.error('Error: No element with class "snowfall-container" found.'); console.error('Error: No element with class "snowfall-container" found.');