MediaWiki:Common.js: Difference between revisions

Latest revision as of 22:29, 17 March 2026

/* 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');

        // Note: Pulse is handled by the container CSS now
        el.style.setProperty('animation-delay', '0s', 'important'); 
        
        let lastVariant = -1;

        const newHTML = text.split('').map((c, i) => {
            let delays = [];
            let classes = [];
            
            if (isWavy) delays.push((i * -0.15).toFixed(2) + 's');
            if (isRainbow) delays.push((i * -0.15).toFixed(2) + 's');
            
            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');
            }

            const content = (c === ' ') ? '&nbsp;' : 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);
        });
    });
})();

@@ Line 1: / Line 1: @@
 /* Any JavaScript here will be loaded for all users on every page load. */
-document.querySelectorAll('.text-animation-container').forEach(applyEffects);
+(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;
-function applyEffects(el) {
+        const text = el.textContent;
-    const hasEffect = ['wavy', 'rainbow', 'force-glow', 'force-shadow'].some(cls => el.classList.contains(cls));
+        const isJolt = el.classList.contains('jolt');
-    if (!hasEffect) return;
+        const isWavy = el.classList.contains('wavy');
+        const isRainbow = el.classList.contains('rainbow');
-    const chars = el.textContent.split('');
+        // Note: Pulse is handled by the container CSS now
-    const total = chars.length;
+        el.style.setProperty('animation-delay', '0s', 'important');
-    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) {
+         let lastVariant = -1;
-            // 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 === ' ') ? '&nbsp;' : c;
+         const newHTML = text.split('').map((c, i) => {
-        const span = document.createElement('span');
+            let delays = [];
-        span.innerHTML = content;
+            let classes = [];
-        styles.forEach(s => {
+            if (isWavy) delays.push((i * -0.15).toFixed(2) + 's');
-            const [prop, val] = s.split(': ');
+            if (isRainbow) delays.push((i * -0.15).toFixed(2) + 's');
-            span.style.setProperty(prop, val, 'important');
-        });
+            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');
+            }
-        if (delays.length > 0) {
+            const content = (c === ' ') ? '&nbsp;' : c;
-            span.style.setProperty('animation-delay', delays.join(', '), 'important');
+            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('');
-         return span.outerHTML;
+         el.innerHTML = newHTML;
-    }).join('');
+        el.setAttribute('data-animated', 'true');
-}
+    }
-$(document).ready(function() {
+    mw.hook('wikipage.content').add(function($content) {
-    // UPDATED: Added glow and shadow to the trigger list
+         $content.find('.text-animation-container').each(function() {
-    setTimeout(function() {
+             applyEffects(this);
-         $('.rainbow, .wavy, .force-glow, .force-shadow').each(function() {
-             applyEffects(this);
          });
-     }, 200);
+     });
-});
+})();