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. */
(function() {
    function applyEffects(el) {
        const hasEffect = ['wavy', 'rainbow', 'jolt', 'pulse', 'force-glow', 'force-shadow'].some(cls => el.classList.contains(cls));
        if (!hasEffect || el.getAttribute('data-animated') === 'true') return;

        const text = el.textContent;
        const isJolt = el.classList.contains('jolt');
        const isWavy = el.classList.contains('wavy');
        const isRainbow = el.classList.contains('rainbow');
        const isPulse = el.classList.contains('pulse');

        el.style.setProperty('animation', 'none', 'important');
        let lastVariant = -1;

        const newHTML = text.split('').map((c, i) => {
            let delays = [];
            let classes = [];
            
            // 1. Independent Letter Movements (Wavy/Rainbow)
            if (isWavy) delays.push((i * -0.15).toFixed(2) + 's');
            if (isRainbow) delays.push((i * -0.15).toFixed(2) + 's');
            
            // 2. Chaotic Jolt Logic (remains letter-specific)
            if (isJolt) {
                let variant;
                do { variant = Math.floor(Math.random() * 3) + 1; } while (variant === lastVariant);
                lastVariant = variant;
                classes.push(`jolt-v${variant}`);
                delays.push((Math.random() * -0.35).toFixed(2) + 's');
            }

            // 3. Global Pulse Logic (Synchronized)
            if (isPulse) {
                // By giving everyone a 0s delay, they pulse as one block
                delays.push('0s');
            }

            const content = (c === ' ') ? ' ' : c;
            const delayStyle = delays.length > 0 ? `style="animation-delay: ${delays.join(', ')} !important;"` : '';
            const classAttr = classes.length > 0 ? `class="${classes.join(' ')}"` : '';
            
            return `<span ${classAttr} ${delayStyle}>${content}</span>`;
        }).join('');

        el.innerHTML = newHTML;
        el.setAttribute('data-animated', 'true');
    }

    mw.hook('wikipage.content').add(function($content) {
        $content.find('.text-animation-container').each(function() {
            applyEffects(this);
        });
    });
})();