MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* 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) {
            const hue = Math.round((i / total) * 360);
            const rainbowDelay = -((i / total) * 3).toFixed(2);
            styles.push(`color: hsl(${hue}, 100%, 60%)`);
            delays.push(`${rainbowDelay}s`);
        }

        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); 
});