MediaWiki:Common.js: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Any JavaScript here will be loaded for all users on every page load. */ | /* Any JavaScript here will be loaded for all users on every page load. */ | ||
(function() { | (function() { | ||
function applyEffects(el) { | function applyEffects(el) { | ||
const hasEffect = ['wavy', 'rainbow', 'jolt', 'force-glow', 'force-shadow'].some(cls => el.classList.contains(cls)); | const hasEffect = ['wavy', 'rainbow', 'jolt', 'force-glow', 'force-shadow'].some(cls => el.classList.contains(cls)); | ||
if (!hasEffect || el.getAttribute('data-animated') === 'true') return; | if (!hasEffect || el.getAttribute('data-animated') === 'true') return; | ||
| Line 12: | Line 10: | ||
const isJolt = el.classList.contains('jolt'); | const isJolt = el.classList.contains('jolt'); | ||
el.style.setProperty('animation', 'none', 'important'); | el.style.setProperty('animation', 'none', 'important'); | ||
| Line 18: | Line 15: | ||
let delays = []; | let delays = []; | ||
if (isWavy) | if (isWavy) delays.push((i * -0.15).toFixed(2) + 's'); | ||
if (isRainbow) delays.push((i * -0.15).toFixed(2) + 's'); | |||
if (isRainbow) | |||
if (isJolt) { | if (isJolt) { | ||
// | // Increased random range to ensure letters are totally out of sync | ||
delays.push((Math.random() * -0 | delays.push((Math.random() * -1.0).toFixed(2) + 's'); | ||
} | } | ||
| Line 32: | Line 26: | ||
const delayStyle = delays.length > 0 ? `animation-delay: ${delays.join(', ')} !important;` : ''; | const delayStyle = delays.length > 0 ? `animation-delay: ${delays.join(', ')} !important;` : ''; | ||
return `<span style="${delayStyle}">${content}</span>`; | return `<span style="${delayStyle}">${content}</span>`; | ||
}).join(''); | }).join(''); | ||
el.innerHTML = newHTML; | el.innerHTML = newHTML; | ||
el.setAttribute('data-animated', 'true'); | el.setAttribute('data-animated', 'true'); | ||
} | } | ||
mw.hook('wikipage.content').add(function($content) { | mw.hook('wikipage.content').add(function($content) { | ||
$content.find('.text-animation-container').each(function() { | $content.find('.text-animation-container').each(function() { | ||
Revision as of 19:18, 17 March 2026
/* Any JavaScript here will be loaded for all users on every page load. */
(function() {
function applyEffects(el) {
const hasEffect = ['wavy', 'rainbow', 'jolt', 'force-glow', 'force-shadow'].some(cls => el.classList.contains(cls));
if (!hasEffect || el.getAttribute('data-animated') === 'true') return;
const chars = el.textContent.split('');
const isRainbow = el.classList.contains('rainbow');
const isWavy = el.classList.contains('wavy');
const isJolt = el.classList.contains('jolt');
el.style.setProperty('animation', 'none', 'important');
const newHTML = chars.map((c, i) => {
let delays = [];
if (isWavy) delays.push((i * -0.15).toFixed(2) + 's');
if (isRainbow) delays.push((i * -0.15).toFixed(2) + 's');
if (isJolt) {
// Increased random range to ensure letters are totally out of sync
delays.push((Math.random() * -1.0).toFixed(2) + 's');
}
const content = (c === ' ') ? ' ' : c;
const delayStyle = delays.length > 0 ? `animation-delay: ${delays.join(', ')} !important;` : '';
return `<span style="${delayStyle}">${content}</span>`;
}).join('');
el.innerHTML = newHTML;
el.setAttribute('data-animated', 'true');
}
mw.hook('wikipage.content').add(function($content) {
$content.find('.text-animation-container').each(function() {
applyEffects(this);
});
});
})();