random snowflakes and observer

snowflakes.js

@@ -1,47 +1,65 @@
-// Beobachte Änderungen an den Attributen des Videoplayer-Containers
-observer.observe(videoPlayer, { attributes: true });
+let randomSnowflakes = flase; // enable random Snowflakes
+const snowflakeCount = 50; // count of random extra snowflakes
 
-// Funktion, um die Sichtbarkeit der Schneeflocken zu steuern
+
+// function to check and control the snowflakes
 function toggleSnowflakes() {
-  const snowflakes = document.querySelector('.snowflakes');
+  const body = document.body;
   const videoPlayer = document.querySelector('.videoPlayerContainer');
-  const isDashboard = document.body.classList.contains('dashboardDocument');
+  const isDashboard = body.classList.contains('dashboardDocument');
   const hasUserMenu = document.querySelector('#app-user-menu');
 
+  // hide snowflakes if video player is active or dashboard is visible
   if (videoPlayer || isDashboard || hasUserMenu) {
-    // Ausblenden, wenn Videoplayer, Dashboard oder User-Menü aktiv sind
-    snowflakes.style.visibility = 'hidden';
+      body.classList.add('hide-snowflakes');
   } else {
-    // Anzeigen, wenn keine der Bedingungen erfüllt ist
-    snowflakes.style.visibility = 'visible';
+      body.classList.remove('hide-snowflakes');
   }
 }
 
-// Beim Laden der Seite ausführen
-document.addEventListener('DOMContentLoaded', toggleSnowflakes);
-
-// Änderungen im DOM überwachen (z. B. Videoplayer hinzugefügt/entfernt)
+// observe changes in the DOM
 const observer = new MutationObserver(toggleSnowflakes);
-observer.observe(document.body, { childList: true, subtree: true, attributes: true });
 
+// 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)
+});
 
+function addRandomSnowflakes(count) {
+  const snowflakeContainer = document.querySelector('.snowflakes'); // get the snowflake container
+  if (!snowflakeContainer) return; // exit if snowflake container is not found
 
+  const snowflakeSymbols = ['❅', '❆', '❄']; // some snowflake symbols
 
+  for (let i = 0; i < count; i++) {
+      // create a new snowflake element
+      const snowflake = document.createElement('div');
+      snowflake.classList.add('snowflake');
 
-// Anzahl der Schneeflocken
-const snowflakeCount = 50;
+      // pick a random snowflake symbol
+      snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)];
 
-// Container für Schneeflocken
-const snowflakeContainer = document.querySelector('.snowflakes');
+      // set random horizontal position, size and animation delay
+      const randomLeft = Math.random() * 100; // position (0% to 100%)
+      const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em)
+      const randomAnimationDelay = Math.random() * 5; // delay (0s to 5s)
 
-// Schneeflocken erstellen
-for (let i = 0; i < snowflakeCount; i++) {
-  const snowflake = document.createElement('div');
-  snowflake.classList.add('snowflake');
-  snowflake.textContent = ['❅', '❆', '❄'][Math.floor(Math.random() * 3)]; // Zufällige Schneeflocke
-  snowflake.style.left = Math.random() * 100 + '%'; // Zufällige horizontale Position
-  snowflake.style.animationDelay = Math.random() * 5 + 's'; // Zufällige Verzögerung
-  snowflake.style.animationDuration = Math.random() * 5 + 5 + 's'; // Zufällige Dauer
-  snowflake.style.fontSize = Math.random() * 1.5 + 1 + 'em'; // Zufällige Größe
-  snowflakeContainer.appendChild(snowflake);
-}
+      // apply styles
+      snowflake.style.left = `${randomLeft}%`;
+      snowflake.style.fontSize = `${randomSize}em`;
+      snowflake.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay / 2}s`;
+
+      // add the snowflake to the container
+      snowflakeContainer.appendChild(snowflake);
+  }
+}
+
+// initialize snowflakes
+document.addEventListener('DOMContentLoaded', () => {
+  toggleSnowflakes(); //check if snowflakes should be hidden
+  if (randomSnowflakes) {
+      addRandomSnowflakes(snowflakeCount); //add random snowflakes
+  }
+});