Jump to content

MediaWiki:Common.js: Difference between revisions

From FC1
← Older edit
DB (talk | contribs)
Bureaucrats, Interface administrators, Administrators
3,721 edits
No edit summary
No edit summary
 
(12 intermediate revisions by the same user not shown)
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 applyEffects(el) {
    function applyEffects(el) {
  const isWavy = el.classList.contains('wavy');
        const hasEffect = ['wavy', 'rainbow', 'jolt', 'pulse', 'force-glow', 'force-shadow'].some(cls => el.classList.contains(cls));
  const isRainbow = el.classList.contains('rainbow');
        if (!hasEffect || el.getAttribute('data-animated') === 'true') return;
  const isGlow = el.classList.contains('force-glow');
  const isShadow = el.classList.contains('force-shadow');


  // If none of these are active, don't waste resources splitting text
        const text = el.textContent;
  if (!isWavy && !isRainbow && !isGlow && !isShadow) return;
        const isJolt = el.classList.contains('jolt');
        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');
        let lastVariant = -1;


  // Kill animation on the parent so it doesn't move as a block
        const newHTML = text.split('').map((c, i) => {
  el.style.setProperty('animation', 'none', 'important');
            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');
            }


el.innerHTML = chars.map((c, i) => {
            const content = (c === ' ') ? ' ' : c;
    let styles = [
            const delayStyle = delays.length > 0 ? `style="animation-delay: ${delays.join(', ')} !important;"` : '';
      `display: inline-block`,
            const classAttr = classes.length > 0 ? `class="${classes.join(' ')}"` : '';
      `position: relative`,
           
      `color: inherit` // Keeps the Color and Glow working
            return `<span ${classAttr} ${delayStyle}>${content}</span>`;
    ];
        }).join('');
let delays = [];
   
    if (isWavy) {
      const waveDelay = -((i / total) * 1).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 span = document.createElement('span');
    span.innerHTML = content;
   
    // Apply display and position
    styles.forEach(s => {
      const [prop, val] = s.split(': ');
      span.style.setProperty(prop, val, 'important');
    });


    // Apply the crucial animation-delay with !important
        el.innerHTML = newHTML;
    if (delays.length > 0) {
        el.setAttribute('data-animated', 'true');
      span.style.setProperty('animation-delay', delays.join(', '), 'important');
     }
     }


     return span.outerHTML;
     mw.hook('wikipage.content').add(function($content) {
  }).join('');
         $content.find('.text-animation-container').each(function() {
}
             applyEffects(this);
 
$(document).ready(function() {
    // 200ms gives the wiki a bit more breathing room to load CSS
    setTimeout(function() {
         $('.rainbow, .wavy').each(function() {  
             applyEffects(this);  
         });
         });
     }, 200);  
     });
});
})();

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);
        });
    });
})();
Retrieved from "https://dick.vdbunt.net/fc1/index.php?title=MediaWiki:Common.js&oldid=4069"