MediaWiki:Common.js: Difference between revisions
No edit summary |
No edit summary |
||
| Line 5: | Line 5: | ||
const isRainbow = el.classList.contains('rainbow'); | const isRainbow = el.classList.contains('rainbow'); | ||
const isWavy = el.classList.contains('wavy'); | const isWavy = el.classList.contains('wavy'); | ||
// Disable animation on the parent so only children move | |||
el.style.animation = 'none'; | |||
el.style.display = 'inline-block'; | |||
el.innerHTML = chars.map((c, i) => { | el.innerHTML = chars.map((c, i) => { | ||
let styles = [`display: inline-block`]; | let styles = [`display: inline-block`, `position: relative` ]; | ||
let delays = []; | let delays = []; | ||
if (isWavy) { | if (isWavy) { | ||
const waveDelay = -((i / total) * 1).toFixed(2); | const waveDelay = -((i / total) * 1).toFixed(2); | ||
| Line 18: | Line 19: | ||
} | } | ||
if (isRainbow) { | if (isRainbow) { | ||
const hue = Math.round((i / total) * 360); | const hue = Math.round((i / total) * 360); | ||
| Line 30: | Line 30: | ||
} | } | ||
return `<span style="${styles.join('; ')}">${ | // Space characters need to be non-breaking spaces to hold height | ||
const content = (c === ' ') ? ' ' : c; | |||
return `<span style="${styles.join('; ')}">${content}</span>`; | |||
}).join(''); | }).join(''); | ||
} | } | ||
Revision as of 08:22, 14 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');
// Disable animation on the parent so only children move
el.style.animation = 'none';
el.style.display = 'inline-block';
el.innerHTML = chars.map((c, i) => {
let styles = [`display: inline-block`, `position: relative` ];
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`);
}
if (delays.length > 0) {
styles.push(`animation-delay: ${delays.join(', ')}`);
}
// Space characters need to be non-breaking spaces to hold height
const content = (c === ' ') ? ' ' : c;
return `<span style="${styles.join('; ')}">${content}</span>`;
}).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);
});