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. */
document.querySelectorAll('.text-animation-container').forEach(applyEffects);
function applyEffects(el) {
  const isWavy = el.classList.contains('wavy');
  const isRainbow = el.classList.contains('rainbow');
  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
  if (!isWavy && !isRainbow && !isGlow && !isShadow) return;

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

  // Kill animation on the parent so it doesn't move as a block
  el.style.setProperty('animation', 'none', 'important');

	el.innerHTML = chars.map((c, i) => {
	    let styles = [
	      `display: inline-block`, 
	      `position: relative`,
	      `color: inherit` // Keeps the Color and Glow working
	    ];
	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 === ' ') ? ' ' : 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
    if (delays.length > 0) {
      span.style.setProperty('animation-delay', delays.join(', '), 'important');
    }

    return span.outerHTML;
  }).join('');
}

$(document).ready(function() {
    // 200ms gives the wiki a bit more breathing room to load CSS
    setTimeout(function() {
        $('.rainbow, .wavy').each(function() { 
            applyEffects(this); 
        });
    }, 200); 
});