diff --git a/add_to_index_html.html b/add_to_index_html.html new file mode 100644 index 0000000..9b554d5 --- /dev/null +++ b/add_to_index_html.html @@ -0,0 +1,15 @@ + + \ No newline at end of file diff --git a/halloween.css b/halloween.css new file mode 100644 index 0000000..1b64e62 --- /dev/null +++ b/halloween.css @@ -0,0 +1,152 @@ +.halloween-container { + display: block; + pointer-events: none; + z-index: 0; + overflow: hidden; +} + +.halloween { + color: #fff; + font-size: 1em; + font-family: Arial, sans-serif; + text-shadow: 0 0 5px #000; +} + +@-webkit-keyframes halloween-fall { + 0% { + bottom: -10% + } + + 100% { + bottom: 100% + } +} + +@-webkit-keyframes halloween-shake { + + 0%, + 100% { + -webkit-transform: translateX(0); + transform: translateX(0) + } + + 50% { + -webkit-transform: translateX(80px); + transform: translateX(80px) + } +} + +@keyframes halloween-fall { + 0% { + bottom: -10% + } + + 100% { + bottom: 100% + } +} + +@keyframes halloween-shake { + + 0%, + 100% { + transform: translateX(0) + } + + 50% { + transform: translateX(80px) + } +} + +.snowflake { + position: fixed; + bottom: -10%; + z-index: 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + -webkit-animation-name: halloween-fall, halloween-shake; + -webkit-animation-duration: 10s, 3s; + -webkit-animation-timing-function: linear, ease-in-out; + -webkit-animation-iteration-count: infinite, infinite; + -webkit-animation-play-state: running, running; + animation-name: halloween-fall, halloween-shake; + animation-duration: 10s, 3s; + animation-timing-function: linear, ease-in-out; + animation-iteration-count: infinite, infinite; + animation-play-state: running, running +} + +.snowflake:nth-of-type(0) { + left: 1%; + -webkit-animation-delay: 0s, 0s; + animation-delay: 0s, 0s +} + +.snowflake:nth-of-type(1) { + left: 10%; + -webkit-animation-delay: 1s, 1s; + animation-delay: 1s, 1s +} + +.snowflake:nth-of-type(2) { + left: 20%; + -webkit-animation-delay: 6s, .5s; + animation-delay: 6s, .5s +} + +.snowflake:nth-of-type(3) { + left: 30%; + -webkit-animation-delay: 4s, 2s; + animation-delay: 4s, 2s +} + +.snowflake:nth-of-type(4) { + left: 40%; + -webkit-animation-delay: 2s, 2s; + animation-delay: 2s, 2s +} + +.snowflake:nth-of-type(5) { + left: 50%; + -webkit-animation-delay: 8s, 3s; + animation-delay: 8s, 3s +} + +.snowflake:nth-of-type(6) { + left: 60%; + -webkit-animation-delay: 6s, 2s; + animation-delay: 6s, 2s +} + +.snowflake:nth-of-type(7) { + left: 70%; + -webkit-animation-delay: 2.5s, 1s; + animation-delay: 2.5s, 1s +} + +.snowflake:nth-of-type(8) { + left: 80%; + -webkit-animation-delay: 1s, 0s; + animation-delay: 1s, 0s +} + +.snowflake:nth-of-type(9) { + left: 90%; + -webkit-animation-delay: 3s, 1.5s; + animation-delay: 3s, 1.5s +} + +.snowflake:nth-of-type(10) { + left: 25%; + -webkit-animation-delay: 2s, 0s; + animation-delay: 2s, 0s +} + +.snowflake:nth-of-type(11) { + left: 65%; + -webkit-animation-delay: 4s, 2.5s; + animation-delay: 4s, 2.5s +} \ No newline at end of file diff --git a/halloween.js b/halloween.js new file mode 100644 index 0000000..65eef7c --- /dev/null +++ b/halloween.js @@ -0,0 +1,83 @@ +const halloween = true; // enable/disable halloween + +let msgPrinted = false; // flag to prevent multiple console messages + +// function to check and control the halloween +function toggleHalloween() { + const halloweenContainer = document.querySelector('.snow-container'); + if (!halloweenContainer) 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 halloween if video/trailer player is active or dashboard is visible + if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) { + halloweenContainer.style.display = 'none'; // hide halloween + if (!msgPrinted) { + console.log('Halloween hidden'); + msgPrinted = true; + } + } else { + halloweenContainer.style.display = 'block'; // show halloween + if (msgPrinted) { + console.log('Halloween visible'); + msgPrinted = false; + } + } +} + +// observe changes in the DOM +const observer = new MutationObserver(toggleHalloween); + +// 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", + "/web/seasonal/ghost_20x20.png", + "/web/seasonal/bat_20x20.png", + "/web/seasonal/pumpkin_20x20.png", + "/web/seasonal/ghost_20x20.png", + "/web/seasonal/bat_20x20.png", + "/web/seasonal/pumpkin_20x20.png", + "/web/seasonal/ghost_20x20.png", + "/web/seasonal/bat_20x20.png", + "/web/seasonal/pumpkin_20x20.png", +]; + +// create halloween objects +function createHalloween() { + const container = document.querySelector('halloween-container') || document.createElement("div"); + + if (!document.querySelector('halloween-container')) { + container.className = "halloween-container"; + container.setAttribute("aria-hidden", "true"); + document.body.appendChild(container); + } + + images.forEach(imageSrc => { + const halloweenDiv = document.createElement("div"); + halloweenDiv.className = "halloween"; + + const img = document.createElement("img"); + img.src = imageSrc; + + halloweenDiv.appendChild(img); + container.appendChild(halloweenDiv); + }); +} + + +// initialize halloween after the DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + if (!halloween) return; // exit if halloween is disabled + createHalloween(); +});