diff --git a/add_to_index_html.html b/add_to_index_html.html index 84c45e1..a8c5744 100644 --- a/add_to_index_html.html +++ b/add_to_index_html.html @@ -1,3 +1,3 @@ - - -
\ No newline at end of file + + +
\ No newline at end of file diff --git a/autum.js b/autum.js deleted file mode 100644 index 4eff271..0000000 --- a/autum.js +++ /dev/null @@ -1,111 +0,0 @@ -const snowflakes = true; // enable/disable snowflakes -const randomSnowflakes = true; // enable random Snowflakes -const randomSnowflakesMobile = false; // enable random Snowflakes on mobile devices -const enableColoredSnowflakes = true; // enable colored snowflakes on mobile devices -const snowflakeCount = 25; // count of random extra snowflakes - - -let msgPrinted = false; // flag to prevent multiple console messages - -// function to check and control the snowflakes -function toggleSnowflakes() { - const snowflakeContainer = document.querySelector('.snowflakes'); - if (!snowflakeContainer) 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'); - - // hide snowflakes if video/trailer player is active or dashboard is visible - if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) { - snowflakeContainer.style.display = 'none'; // hide snowflakes - if (!msgPrinted) { - console.log('Snowflakes hidden'); - msgPrinted = true; - } - } else { - snowflakeContainer.style.display = 'block'; // show snowflakes - if (msgPrinted) { - console.log('Snowflakes visible'); - msgPrinted = false; - } - } -} - -// observe changes in the DOM -const observer = new MutationObserver(toggleSnowflakes); - -// 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 - - console.log('Adding random snowflakes'); - - const snowflakeSymbols = ['❅', '❆']; // some snowflake symbols - const snowflakeSymbolsMobile = ['❅', '❆', '❄']; // some snowflake symbols mobile version - - for (let i = 0; i < count; i++) { - // create a new snowflake element - const snowflake = document.createElement('div'); - snowflake.classList.add('snowflake'); - - // pick a random snowflake symbol - if (enableColoredSnowflakes) { - snowflake.textContent = snowflakeSymbolsMobile[Math.floor(Math.random() * snowflakeSymbolsMobile.length)]; - } else { - snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)]; - } - - // set random horizontal position, animation delay and size(uncomment lines to enable) - const randomLeft = Math.random() * 100; // position (0% to 100%) - //const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //uncomment to enable random size - const randomAnimationDelay = Math.random() * 8; // delay (0s to 8s) - const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s) - - // apply styles - snowflake.style.left = `${randomLeft}%`; - //snowflake.style.fontSize = `${randomSize}em`; //uncomment to enable random size - snowflake.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`; - - // add the snowflake to the container - snowflakeContainer.appendChild(snowflake); - } - console.log('Random snowflakes added'); -} - -// initialize standard snowflakes -function initSnowflakes() { - const snowflakesContainer = document.querySelector('.snowflakes'); - - // Array of snowflake characters - const snowflakeSymbols = ['❅', '❆']; - - // create the 12 standard snowflakes - for (let i = 0; i < 12; i++) { - const snowflake = document.createElement('div'); - snowflake.className = 'snowflake'; - snowflake.textContent = snowflakeSymbols[i % 2]; // change between ❅ and ❆ - - snowflakesContainer.appendChild(snowflake); - } -} - -// initialize snowflakes and add random snowflakes after the DOM is loaded -document.addEventListener('DOMContentLoaded', () => { - if (!snowflakes) return; // exit if snowflakes are disabled - initSnowflakes(); - toggleSnowflakes(); - - const screenWidth = window.innerWidth; // get the screen width to detect mobile devices - if (randomSnowflakes && (screenWidth > 768 || randomSnowflakesMobile)) { // add random snowflakes only on larger screens, unless enabled for mobile devices - addRandomSnowflakes(snowflakeCount); - } -}); \ No newline at end of file diff --git a/autum.css b/autumn.css similarity index 70% rename from autum.css rename to autumn.css index 71a3eed..eec6826 100644 --- a/autum.css +++ b/autumn.css @@ -1,11 +1,11 @@ -.snowflakes { +.autumn-container { display: block; pointer-events: none; z-index: 0; overflow: hidden; } -.snowflake { +.leaf { position: fixed; top: -10%; font-size: 1em; @@ -15,13 +15,13 @@ user-select: none; -webkit-user-select: none; cursor: default; - animation-name: snowflakes-fall, snowflakes-shake; + animation-name: leaf-fall, leaf-shake; animation-duration: 10s, 3s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; } -@-webkit-keyframes snowflakes-fall { +@-webkit-keyframes leaf-fall { 0% { top: -10%; } @@ -31,7 +31,7 @@ } } -@-webkit-keyframes snowflakes-shake { +@-webkit-keyframes leaf-shake { 0%, 100% { @@ -45,7 +45,7 @@ } } -@keyframes snowflakes-fall { +@keyframes leaf-fall { 0% { top: -10%; } @@ -55,7 +55,7 @@ } } -@keyframes snowflakes-shake { +@keyframes leaf-shake { 0%, 100% { @@ -67,62 +67,62 @@ } } -.snowflake:nth-of-type(0) { +.leaf:nth-of-type(0) { left: 0%; animation-delay: 0s, 0s; } -.snowflake:nth-of-type(1) { +.leaf:nth-of-type(1) { left: 10%; animation-delay: 1s, 1s; } -.snowflake:nth-of-type(2) { +.leaf:nth-of-type(2) { left: 20%; animation-delay: 6s, 0.5s; } -.snowflake:nth-of-type(3) { +.leaf:nth-of-type(3) { left: 30%; animation-delay: 4s, 2s; } -.snowflake:nth-of-type(4) { +.leaf:nth-of-type(4) { left: 40%; animation-delay: 2s, 2s; } -.snowflake:nth-of-type(5) { +.leaf:nth-of-type(5) { left: 50%; animation-delay: 8s, 3s; } -.snowflake:nth-of-type(6) { +.leaf:nth-of-type(6) { left: 60%; animation-delay: 6s, 2s; } -.snowflake:nth-of-type(7) { +.leaf:nth-of-type(7) { left: 70%; animation-delay: 2.5s, 1s; } -.snowflake:nth-of-type(8) { +.leaf:nth-of-type(8) { left: 80%; animation-delay: 1s, 0s; } -.snowflake:nth-of-type(9) { +.leaf:nth-of-type(9) { left: 90%; animation-delay: 3s, 1.5s; } -.snowflake:nth-of-type(10) { +.leaf:nth-of-type(10) { left: 25%; animation-delay: 2s, 0s; } -.snowflake:nth-of-type(11) { +.leaf:nth-of-type(11) { left: 65%; animation-delay: 4s, 2.5s; } \ No newline at end of file diff --git a/autumn.js b/autumn.js new file mode 100644 index 0000000..9434200 --- /dev/null +++ b/autumn.js @@ -0,0 +1,129 @@ +const leaves = true; // enable/disable leaves +const randomLeaves = true; // enable random leaves +const randomLeavesMobile = false; // enable random leaves on mobile devices +const leafCount = 25; // count of random extra leaves + + +let msgPrinted = false; // flag to prevent multiple console messages + +// function to check and control the leaves +function toggleAutumn() { + const autumnContainer = document.querySelector('.autumn-container'); + if (!autumnContainer) 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'); + + // hide leaves if video/trailer player is active or dashboard is visible + if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) { + autumnContainer.style.display = 'none'; // hide leaves + if (!msgPrinted) { + console.log('Autumn hidden'); + msgPrinted = true; + } + } else { + autumnContainer.style.display = 'block'; // show leaves + if (msgPrinted) { + console.log('Autumn visible'); + msgPrinted = false; + } + } +} + +// observe changes in the DOM +const observer = new MutationObserver(toggleSnowflakes); + +// 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) +}); + + +/* +const images = [ + "/web/seasonal/ghost_20x20.png", + "/web/seasonal/bat_20x20.png", + "/web/seasonal/pumpkin_20x20.png", +];*/ +const images = [ + "./images/ghost_20x20.png", + "./images/bat_20x20.png", + "./images/pumpkin_20x20.png", +]; + + +function addRandomLeaves(count) { + const autumnContainer = document.querySelector('.autumn-container'); // get the leave container + if (!autumnContainer) return; // exit if leave container is not found + + console.log('Adding random leaves'); + + // Array of leave characters + for (let i = 0; i < count; i++) { + // create a new leave element + const leave = document.createElement('div'); + leave.classList.add('leave'); + + // pick a random leave symbol + if (enableColoredSnowflakes) { + leave.textContent = autumnSymbolsMobile[Math.floor(Math.random() * autumnSymbolsMobile.length)]; + } else { + leave.textContent = autumnSymbols[Math.floor(Math.random() * autumnSymbols.length)]; + } + + // set random horizontal position, animation delay and size(uncomment lines to enable) + const randomLeft = Math.random() * 100; // position (0% to 100%) + //const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //uncomment to enable random size + const randomAnimationDelay = Math.random() * 8; // delay (0s to 8s) + const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s) + + // apply styles + leave.style.left = `${randomLeft}%`; + //leave.style.fontSize = `${randomSize}em`; //uncomment to enable random size + leave.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`; + + // add the leave to the container + autumnContainer.appendChild(leave); + } + console.log('Random leaves added'); +} + +// initialize standard leaves +function initSnowflakes() { + const container = document.querySelector('.autumn-container') || document.createElement("div"); + + if (!document.querySelector('.autumn-container')) { + container.className = "autumn-container"; + container.setAttribute("aria-hidden", "true"); + document.body.appendChild(container); + } + + for (let i = 0; i < 1; i++) { + images.forEach(imageSrc => { + const leafDiv = document.createElement("div"); + leafDiv.className = "leaf"; + + const img = document.createElement("img"); + img.src = imageSrc; + + leafDiv.appendChild(img); + container.appendChild(leafDiv); + }); + } +} + +// initialize leaves and add random leaves after the DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + if (!leaves) return; // exit if leaves are disabled + initSnowflakes(); + toggleSnowflakes(); + + const screenWidth = window.innerWidth; // get the screen width to detect mobile devices + if (randomSnowflakes && (screenWidth > 768 || randomSnowflakesMobile)) { // add random leaves only on larger screens, unless enabled for mobile devices + addRandomSnowflakes(snowflakeCount); + } +}); \ No newline at end of file diff --git a/test-site.html b/test-site.html index 4c618c6..b859b17 100644 --- a/test-site.html +++ b/test-site.html @@ -3,7 +3,7 @@ - Snowflakes Display + Autumn Display