MediaWiki:Common.js: Difference between revisions

Revision as of 19:15, 17 March 2026

/* Any JavaScript here will be loaded for all users on every page load. */
/* Animation script for MediaWiki templates */
(function() {
    function applyEffects(el) {
        // Only process if it has one of our target classes
        const hasEffect = ['wavy', 'rainbow', 'jolt', 'force-glow', 'force-shadow'].some(cls => el.classList.contains(cls));
        if (!hasEffect || el.getAttribute('data-animated') === 'true') return;

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

        // Prevent the container itself from moving
        el.style.setProperty('animation', 'none', 'important');

        const newHTML = chars.map((c, i) => {
            let delays = [];
            
            if (isWavy) {
                delays.push((i * -0.15).toFixed(2) + 's');
            }
            if (isRainbow) {
                delays.push((i * -0.15).toFixed(2) + 's');
            }
            if (isJolt) {
                // Random delay makes the "jolt" look chaotic rather than a uniform slide
                delays.push((Math.random() * -0.5).toFixed(2) + 's');
            }

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

        el.innerHTML = newHTML;
        el.setAttribute('data-animated', 'true'); // Mark as done to prevent double-processing
    }

    // This hook ensures it runs on initial load AND when clicking "Preview" or "Show changes"
    mw.hook('wikipage.content').add(function($content) {
        $content.find('.text-animation-container').each(function() {
            applyEffects(this);
        });
    });
})();