Jump to content

MediaWiki:Common.js: Difference between revisions

From FC1
← Older editNewer edit →
DB (talk | contribs)
Bureaucrats, Interface administrators, Administrators
3,721 edits
No edit summary
No edit summary
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */
document.querySelectorAll('.text-animation-container').forEach(applyEffects);
(function () {
    function applyTextEffects($content) {
        $content.find('.text-animation-container').each(function () {
            const $el = $(this);
            if ($el.data('animated')) return;  


function applyEffects(el) {
            const text = $el.text();
    const hasEffect = ['wavy', 'rainbow', 'force-glow', 'force-shadow'].some(cls => el.classList.contains(cls));
            const chars = text.split('');
    if (!hasEffect) return;
            const isWavy = $el.hasClass('wavy');
            const isRainbow = $el.hasClass('rainbow');
            const isJolt = $el.hasClass('jolt'); // Added Jolt check


    const chars = el.textContent.split('');
            const nodes = chars.map((char, i) => {
    const total = chars.length;
                const $span = $('<span>').text(char === ' ' ? '\u00A0' : char);
    const isRainbow = el.classList.contains('rainbow');
                let delays = [];
    const isWavy = el.classList.contains('wavy');


    el.style.setProperty('animation', 'none', 'important');
                if (isWavy) delays.push((i * -0.15).toFixed(2) + 's');
                if (isRainbow) delays.push((i * -0.15).toFixed(2) + 's');
               
                // Randomized delay for Jolt to make it look "glitchy"
                if (isJolt) {
                    delays.push((Math.random() * -0.5).toFixed(2) + 's');
                }


    el.innerHTML = chars.map((c, i) => {
                if (delays.length) {
        let styles = [
                    $span.css('animation-delay', delays.join(', '));
            `display: inline-block`,
                }
            `position: relative`,
                return $span;
            `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 === ' ') ? '&nbsp;' : c;
            $el.empty().append(nodes).data('animated', true);
        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) {
    mw.hook('wikipage.content').add(applyTextEffects);
            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);
});

Revision as of 19:08, 17 March 2026

/* Any JavaScript here will be loaded for all users on every page load. */
(function () {
    function applyTextEffects($content) {
        $content.find('.text-animation-container').each(function () {
            const $el = $(this);
            if ($el.data('animated')) return; 

            const text = $el.text();
            const chars = text.split('');
            const isWavy = $el.hasClass('wavy');
            const isRainbow = $el.hasClass('rainbow');
            const isJolt = $el.hasClass('jolt'); // Added Jolt check

            const nodes = chars.map((char, i) => {
                const $span = $('<span>').text(char === ' ' ? '\u00A0' : char);
                let delays = [];

                if (isWavy) delays.push((i * -0.15).toFixed(2) + 's');
                if (isRainbow) delays.push((i * -0.15).toFixed(2) + 's');
                
                // Randomized delay for Jolt to make it look "glitchy"
                if (isJolt) {
                    delays.push((Math.random() * -0.5).toFixed(2) + 's');
                }

                if (delays.length) {
                    $span.css('animation-delay', delays.join(', '));
                }
                return $span;
            });

            $el.empty().append(nodes).data('animated', true);
        });
    }

    mw.hook('wikipage.content').add(applyTextEffects);
}());
Retrieved from "https://dick.vdbunt.net/fc1/index.php?title=MediaWiki:Common.js&oldid=4043"