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 isWavy = el.classList.contains('wavy');
  const isRainbow = el.classList.contains('rainbow');

  el.innerHTML = chars.map((c, i) => {
    const hue = Math.round((i / total) * 360);
    const rainbowDelay = -((i / total) * 3).toFixed(2);
    const waveDelay    = ((i / total) * 1).toFixed(2);

    let anim = '';
    if (isWavy && isRainbow) anim = `wave 1s ease-in-out ${waveDelay}s infinite, hue-cycle 3s linear ${rainbowDelay}s infinite`;
    else if (isWavy)         anim = `wave 1s ease-in-out ${waveDelay}s infinite`;
    else if (isRainbow)      anim = `hue-cycle 3s linear ${rainbowDelay}s infinite`;

    const color = isRainbow ? `color: hsl(${hue}, 100%, 70%);` : '';
    return `<span style="${color} animation: ${anim};">${c === ' ' ? '&nbsp;' : c}</span>`;
  }).join('');
}

$(document).ready(function() {
  document.querySelectorAll('.rainbow, .wavy').forEach(applyEffects);
});