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

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

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