e4b3a132b1
All checks were successful
Auto Release Plugin / build-and-release (push) Successful in 45s
- Introduced new CSS and JS files for Pi Day, Pride, Rain, and Storm effects. - Updated existing seasonal styles (e.g., Halloween, Hearts, Resurrection) to improve performance with 'contain: layout paint'. - Enhanced animations for seasonal effects, including adjustments to keyframes and element creation logic. - Added configuration options for new effects in the main seasonals.js file. - Updated test-site.html to include new seasonal options in the dropdown.
106 lines
3.7 KiB
JavaScript
106 lines
3.7 KiB
JavaScript
// 1. Read Configuration
|
|
const config = window.SeasonalsPluginConfig?.Eurovision || {};
|
|
|
|
const enabled = config.EnableEurovision !== undefined ? config.EnableEurovision : true;
|
|
const elementCount = config.SymbolCount || 25;
|
|
const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true;
|
|
const enableColorfulNotes = config.EnableColorfulNotes !== undefined ? config.EnableColorfulNotes : true;
|
|
const eurovisionColorsStr = config.EurovisionColors || '#ff0026ff, #17a6ffff, #32d432ff, #FFD700, #f0821bff, #f826f8ff';
|
|
const glowSize = config.EurovisionGlowSize !== undefined ? config.EurovisionGlowSize : 2;
|
|
|
|
let msgPrinted = false;
|
|
|
|
// 2. Toggle Function
|
|
function toggleEurovision() {
|
|
const container = document.querySelector('.eurovision-container');
|
|
if (!container) 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');
|
|
|
|
if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
|
|
container.style.display = 'none';
|
|
if (!msgPrinted) {
|
|
console.log('Eurovision hidden');
|
|
msgPrinted = true;
|
|
}
|
|
} else {
|
|
container.style.display = 'block';
|
|
if (msgPrinted) {
|
|
console.log('Eurovision visible');
|
|
msgPrinted = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 3. MutationObserver
|
|
const observer = new MutationObserver(toggleEurovision);
|
|
observer.observe(document.body, {
|
|
childList: true,
|
|
subtree: true,
|
|
attributes: true
|
|
});
|
|
|
|
// 4. Element Creation
|
|
function createElements() {
|
|
const container = document.querySelector('.eurovision-container') || document.createElement('div');
|
|
|
|
if (!document.querySelector('.eurovision-container')) {
|
|
container.className = 'eurovision-container';
|
|
container.setAttribute('aria-hidden', 'true');
|
|
document.body.appendChild(container);
|
|
}
|
|
|
|
const notesSymbols = ['♪', '♫', '♬', '♭', '♮', '♯', '𝄞', '𝄢'];
|
|
const pColors = eurovisionColorsStr.split(',').map(s => s.trim()).filter(s => s);
|
|
|
|
for (let i = 0; i < elementCount; i++) {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'music-note-wrapper';
|
|
|
|
const note = document.createElement('span');
|
|
note.className = 'music-note';
|
|
note.textContent = notesSymbols[Math.floor(Math.random() * notesSymbols.length)];
|
|
wrapper.appendChild(note);
|
|
|
|
wrapper.style.top = `${Math.random() * 90}vh`;
|
|
|
|
const minMoveDur = 10;
|
|
const maxMoveDur = 25;
|
|
const moveDur = enableDifferentDuration
|
|
? minMoveDur + Math.random() * (maxMoveDur - minMoveDur)
|
|
: (minMoveDur + maxMoveDur) / 2;
|
|
wrapper.style.animationDuration = `${moveDur}s`;
|
|
wrapper.style.animationDelay = `${Math.random() * 15}s`;
|
|
|
|
const minSwayDur = 1;
|
|
const maxSwayDur = 3;
|
|
const swayDur = minSwayDur + Math.random() * (maxSwayDur - minSwayDur);
|
|
note.style.animationDuration = `${swayDur}s`;
|
|
note.style.animationDelay = `${Math.random() * 2}s`;
|
|
|
|
note.style.fontSize = `${Math.random() * 1.5 + 1.5}rem`;
|
|
|
|
if (enableColorfulNotes && pColors.length > 0) {
|
|
note.style.color = pColors[Math.floor(Math.random() * pColors.length)];
|
|
note.style.textShadow = `0 0 ${glowSize}px ${note.style.color}`;
|
|
} else {
|
|
note.style.color = `rgba(255, 255, 255, 0.9)`;
|
|
note.style.textShadow = `0 0 ${glowSize}px rgba(255, 255, 255, 0.6)`;
|
|
}
|
|
|
|
container.appendChild(wrapper);
|
|
}
|
|
}
|
|
|
|
// 5. Initialization
|
|
function initializeEurovision() {
|
|
if (!enabled) return;
|
|
createElements();
|
|
toggleEurovision();
|
|
}
|
|
|
|
initializeEurovision();
|