Jump to content

MediaWiki:Common.js: Difference between revisions

From FC1
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 11: Line 11:
     const waveDelay    = ((i / total) * 1).toFixed(2);
     const waveDelay    = ((i / total) * 1).toFixed(2);


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


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

Revision as of 16:43, 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;
  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);
});