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. */
function applyEffects(el) {
  const chars = el.textContent.split('');
  const total = chars.length;
  const isRainbow = el.classList.contains('rainbow');
  const isWavy = el.classList.contains('wavy');

  el.innerHTML = chars.map((c, i) => {
    let styles = [`display: inline-block`];
    let delays = [];
    
    // Order matters! Matches the order in CSS 'animation' property
    
    // 1. Wavy Delay
    if (isWavy) {
      const waveDelay = -((i / total) * 1).toFixed(2);
      delays.push(`${waveDelay}s`);
    }
    
    // 2. Rainbow Delay
    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`);
    }

    if (delays.length > 0) {
      styles.push(`animation-delay: ${delays.join(', ')}`);
    }

    return `<span style="${styles.join('; ')}">${c === ' ' ? '&nbsp;' : c}</span>`;
  }).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); 
});