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 = [];
    
    if (isRainbow) {
      const hue = Math.round((i / total) * 360);
      const rainbowDelay = -((i / total) * 3).toFixed(2);
      styles.push(`color: hsl(${hue}, 100%, 60%)`, `animation-delay: ${rainbowDelay}s`);
    }
    
    if (isWavy) {
      const waveDelay = ((i / total) * 1).toFixed(2);
      // If rainbow is also present, we append the wave delay to the animation-delay list
      if (isRainbow) {
        styles[1] += `, ${waveDelay}s`;
      } else {
        styles.push(`animation-delay: ${waveDelay}s`);
      }
    }

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

$(document).ready(function() {
  $('.rainbow, .wavy').each(function() { applyEffects(this); });
});