MediaWiki:Common.js: Difference between revisions

Revision as of 17:00, 16 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 isRainbow = el.classList.contains('rainbow');
  const isWavy = el.classList.contains('wavy');

  // Kill animation on the parent so it doesn't move as a block
  el.style.setProperty('animation', 'none', 'important');

	el.innerHTML = chars.map((c, i) => {
    // Add font-weight and font-style inheritance here
	let styles = [
	  `display: inline-block`, 
	  `position: relative`,
	  `color: inherit`,      // Crucial for the 'Color' param to work
	  `background: inherit`  // Crucial for the 'Background' param to work
	];
let delays = [];
    
    if (isWavy) {
      const waveDelay = -((i / total) * 1).toFixed(2);
      delays.push(`${waveDelay}s`);
    }
    
    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`);
    }

    const content = (c === ' ') ? ' ' : c;
    const span = document.createElement('span');
    span.innerHTML = content;
    
    // Apply display and position
    styles.forEach(s => {
      const [prop, val] = s.split(': ');
      span.style.setProperty(prop, val, 'important');
    });

    // Apply the crucial animation-delay with !important
    if (delays.length > 0) {
      span.style.setProperty('animation-delay', delays.join(', '), 'important');
    }

    return span.outerHTML;
  }).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); 
});