MediaWiki:Common.js: Difference between revisions

Revision as of 19:31, 16 March 2026

/* Any JavaScript here will be loaded for all users on every page load. */
document.querySelectorAll('.text-animation-container').forEach(applyEffects);

function applyEffects(el) {
    const hasEffect = ['wavy', 'rainbow', 'force-glow', 'force-shadow'].some(cls => el.classList.contains(cls));
    if (!hasEffect) return;

    const chars = el.textContent.split('');
    const total = chars.length;
    const isRainbow = el.classList.contains('rainbow');
    const isWavy = el.classList.contains('wavy');

    el.style.setProperty('animation', 'none', 'important');

    el.innerHTML = chars.map((c, i) => {
        let styles = [
            `display: inline-block`, 
            `position: relative`,
            `color: inherit`
        ];
        let delays = [];
        
        if (isWavy) {
            // FIXED: Using -0.15 creates a broad wave that flows through phrases 
            // instead of stretching one wave over the whole length.
            const waveDelay = (i * -0.15).toFixed(2);
            delays.push(`${waveDelay}s`);
        }
        
		if (isRainbow) {
	      // 1. The delay creates the "flow" across the words
	      const rainbowDelay = (i * -0.15).toFixed(2);
	      delays.push(`${rainbowDelay}s`);
	
	      // 2. We MUST provide a base color (Red) for hue-rotate to work.
	      // This will overwrite 'color: inherit' for rainbow text.
	      styles.push(`color: #ff0000`); 
	    }

        const content = (c === ' ') ? ' ' : c;
        const span = document.createElement('span');
        span.innerHTML = content;
        
        styles.forEach(s => {
            const [prop, val] = s.split(': ');
            span.style.setProperty(prop, val, 'important');
        });

        if (delays.length > 0) {
            span.style.setProperty('animation-delay', delays.join(', '), 'important');
        }

        return span.outerHTML;
    }).join('');
}

$(document).ready(function() {
    // UPDATED: Added glow and shadow to the trigger list
    setTimeout(function() {
        $('.rainbow, .wavy, .force-glow, .force-shadow').each(function() { 
            applyEffects(this); 
        });
    }, 200); 
});