MediaWiki:Common.js: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| Line 5: | Line 5: | ||
if (!hasEffect || el.getAttribute('data-animated') === 'true') return; | if (!hasEffect || el.getAttribute('data-animated') === 'true') return; | ||
const | const text = el.textContent; | ||
const isJolt = el.classList.contains('jolt'); | |||
const isWavy = el.classList.contains('wavy'); | |||
const isRainbow = el.classList.contains('rainbow'); | const isRainbow = el.classList.contains('rainbow'); | ||
el.style.setProperty('animation', 'none', 'important'); | el.style.setProperty('animation', 'none', 'important'); | ||
const newHTML = | const newHTML = text.split('').map((c, i) => { | ||
let delays = []; | let delays = []; | ||
| Line 19: | Line 19: | ||
if (isJolt) { | if (isJolt) { | ||
// | // Random offset between 0s and -0.2s (the full duration of the buzz) | ||
delays.push((Math.random() * - | // This makes the "jolt" feel like a granular, high-energy vibration | ||
delays.push((Math.random() * -0.2).toFixed(2) + 's'); | |||
} | } | ||
Revision as of 20:25, 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 text = el.textContent;
const isJolt = el.classList.contains('jolt');
const isWavy = el.classList.contains('wavy');
const isRainbow = el.classList.contains('rainbow');
el.style.setProperty('animation', 'none', 'important');
const newHTML = text.split('').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) {
// Random offset between 0s and -0.2s (the full duration of the buzz)
// This makes the "jolt" feel like a granular, high-energy vibration
delays.push((Math.random() * -0.2).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);
});
});
})();