Jump to content

MediaWiki:Common.js: Difference between revisions

From FC1
No edit summary
Tag: Reverted
No edit summary
Tag: Manual revert
 
Line 3: Line 3:
   const chars = el.textContent.split('');
   const chars = el.textContent.split('');
   const total = chars.length;
   const total = chars.length;
  const isWavy = el.classList.contains('wavy');
  const isRainbow = el.classList.contains('rainbow');
   el.innerHTML = chars.map((c, i) => {
   el.innerHTML = chars.map((c, i) => {
     const hue = Math.round((i / total) * 360);
     const hue = Math.round((i / total) * 360);
     const rainbowDelay = -((i / total) * 3).toFixed(2);
     const rainbowDelay = -((i / total) * 3).toFixed(2);
     const waveDelay    = ((i / total) * 1).toFixed(2);
     const waveDelay    = ((i / total) * 1).toFixed(2);
 
     return `<span style="--hue:${hue}; --delay:${rainbowDelay}s; --wave-delay:${waveDelay}s">${c === ' ' ? '&nbsp;' : c}</span>`;
     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('');
   }).join('');
}
}

Latest revision as of 17:26, 9 March 2026

/* 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;
  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);
    return `<span style="--hue:${hue}; --delay:${rainbowDelay}s; --wave-delay:${waveDelay}s">${c === ' ' ? '&nbsp;' : c}</span>`;
  }).join('');
}

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