MediaWiki:Common.js - Revision history

DB at 20:29, 17 March 2026

2026-03-17T20:29:26Z

← Older revision		Revision as of 22:29, 17 March 2026
Line 9:		Line 9:
	const isWavy = el.classList.contains('wavy');		const isWavy = el.classList.contains('wavy');
	const isRainbow = el.classList.contains('rainbow');		const isRainbow = el.classList.contains('rainbow');
	~~const isPulse = el.classList.contains('pulse');~~

	el.style.setProperty('animation', '~~none~~', 'important');		// Note: Pulse is handled by the container CSS now
			el.style.setProperty('animation-delay', '0s', 'important');

	let lastVariant = -1;		let lastVariant = -1;

Line 18:		Line 19:
	let classes = [];		let classes = [];

	~~// 1. Independent Letter Movements (Wavy/Rainbow)~~
	if (isWavy) delays.push((i * -0.15).toFixed(2) + 's');		if (isWavy) delays.push((i * -0.15).toFixed(2) + 's');
	if (isRainbow) delays.push((i * -0.15).toFixed(2) + 's');		if (isRainbow) delays.push((i * -0.15).toFixed(2) + 's');

	~~// 2. Chaotic Jolt Logic (remains letter-specific)~~
	if (isJolt) {		if (isJolt) {
	let variant;		let variant;
Line 29:		Line 28:
	classes.push(`jolt-v${variant}`);		classes.push(`jolt-v${variant}`);
	delays.push((Math.random() * -0.35).toFixed(2) + 's');		delays.push((Math.random() * -0.35).toFixed(2) + 's');
	}

	~~// 3. Global Pulse Logic (Synchronized)~~
	~~if (isPulse) {~~
	~~// By giving everyone a 0s delay, they pulse as one block~~
	~~delays.push('0s');~~
	}		}

DB at 20:23, 17 March 2026

2026-03-17T20:23:14Z

← Older revision		Revision as of 22:23, 17 March 2026
Line 2:		Line 2:
	(function() {		(function() {
	function applyEffects(el) {		function applyEffects(el) {
	const hasEffect = ['wavy', 'rainbow', 'jolt', 'pulse', 'force-glow'].some(cls => el.classList.contains(cls));		const hasEffect = ['wavy', 'rainbow', 'jolt', 'pulse', '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 18:		Line 18:
	let classes = [];		let classes = [];

			// 1. Independent Letter Movements (Wavy/Rainbow)
	if (isWavy) delays.push((i * -0.15).toFixed(2) + 's');		if (isWavy) delays.push((i * -0.15).toFixed(2) + 's');
	if (isRainbow) delays.push((i * -0.15).toFixed(2) + 's');		if (isRainbow) delays.push((i * -0.15).toFixed(2) + 's');

			// 2. Chaotic Jolt Logic (remains letter-specific)
	if (isJolt) {		if (isJolt) {
	let variant;		let variant;
Line 29:		Line 31:
	}		}

			// 3. Global Pulse Logic (Synchronized)
	if (isPulse) {		if (isPulse) {
	// ~~Slight 0.1s offset per letter for~~ a ~~"rolling" heartbeat~~		// By giving everyone a 0s delay, they pulse as one block
	delays.push(~~(i * -0.1).toFixed(2) +~~ 's');		delays.push('0s');
	}		}

DB at 20:14, 17 March 2026

2026-03-17T20:14:46Z

← Older revision		Revision as of 22:14, 17 March 2026
Line 2:		Line 2:
	(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', 'pulse', 'force-glow'].some(cls => el.classList.contains(cls));
	if (!hasEffect \|\| el.getAttribute('data-animated') === 'true') return;		if (!hasEffect \|\| el.getAttribute('data-animated') === 'true') return;

Line 9:		Line 9:
	const isWavy = el.classList.contains('wavy');		const isWavy = el.classList.contains('wavy');
	const isRainbow = el.classList.contains('rainbow');		const isRainbow = el.classList.contains('rainbow');
			const isPulse = el.classList.contains('pulse');

	el.style.setProperty('animation', 'none', 'important');		el.style.setProperty('animation', 'none', 'important');

	let lastVariant = -1;		let lastVariant = -1;

Line 22:		Line 22:

	if (isJolt) {		if (isJolt) {
	~~// 1. Pick a variant (1-3) different from the previous neighbor~~
	let variant;		let variant;
	do {		do { variant = Math.floor(Math.random() * 3) + 1; } while (variant === lastVariant);
	variant = Math.floor(Math.random() * 3) + 1;
	} while (variant === lastVariant);
	lastVariant = variant;		lastVariant = variant;

	classes.push(`jolt-v${variant}`);		classes.push(`jolt-v${variant}`);

	~~// 2. Add random delay (0-0.35s) to further break synchronization~~
	delays.push((Math.random() * -0.35).toFixed(2) + 's');		delays.push((Math.random() * -0.35).toFixed(2) + 's');
			}

			if (isPulse) {
			// Slight 0.1s offset per letter for a "rolling" heartbeat
			delays.push((i * -0.1).toFixed(2) + 's');
	}		}

DB at 20:05, 17 March 2026

2026-03-17T20:05:00Z

← Older revision		Revision as of 22:05, 17 March 2026
Line 11:		Line 11:

	el.style.setProperty('animation', 'none', 'important');		el.style.setProperty('animation', 'none', 'important');

			let lastVariant = -1;

	const newHTML = text.split('').map((c, i) => {		const newHTML = text.split('').map((c, i) => {
	let delays = [];		let delays = [];
			let classes = [];

	if (isWavy) delays.push((i * -0.15).toFixed(2) + 's');		if (isWavy) delays.push((i * -0.15).toFixed(2) + 's');
Line 19:		Line 22:

	if (isJolt) {		if (isJolt) {
	// ~~Matches~~ the ~~new~~ 0.~~3s CSS duration for perfect desync~~		// 1. Pick a variant (1-3) different from the previous neighbor
	delays.push((Math.random() * -0.3).toFixed(2) + 's');		let variant;
			do {
			variant = Math.floor(Math.random() * 3) + 1;
			} while (variant === lastVariant);
			lastVariant = variant;

			classes.push(`jolt-v${variant}`);

			// 2. Add random delay (0-0.35s) to further break synchronization
			delays.push((Math.random() * -0.35).toFixed(2) + 's');
	}		}

	const content = (c === ' ') ? ' ' : c;		const content = (c === ' ') ? ' ' : c;
	const delayStyle = delays.length > 0 ? `animation-delay: ${delays.join(', ')} !important;` : '';		const delayStyle = delays.length > 0 ? `style="animation-delay: ${delays.join(', ')} !important;"` : '';
			const classAttr = classes.length > 0 ? `class="${classes.join(' ')}"` : '';

	return `<span ~~style="~~${delayStyle}">${content}</span>`;		return `<span ${classAttr} ${delayStyle}>${content}</span>`;
	}).join('');		}).join('');

DB at 18:29, 17 March 2026

2026-03-17T18:29:54Z

← Older revision		Revision as of 20:29, 17 March 2026
Line 19:		Line 19:

	if (isJolt) {		if (isJolt) {
	// ~~Random offset between 0s and -~~0.~~2s (the full~~ duration ~~of the buzz)~~		// Matches the new 0.3s CSS duration for perfect desync
	~~// This makes the "jolt" feel like a granular, high-energy vibration~~		delays.push((Math.random() * -0.3).toFixed(2) + 's');
	delays.push((Math.random() * -0.2).toFixed(2) + 's');
	}		}

DB at 18:25, 17 March 2026

2026-03-17T18:25:27Z

← Older revision		Revision as of 20:25, 17 March 2026
Line 5:		Line 5:
	if (!hasEffect \|\| el.getAttribute('data-animated') === 'true') return;		if (!hasEffect \|\| el.getAttribute('data-animated') === 'true') return;

	const ~~chars~~ = el.textContent.~~split~~('');		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');
	~~const isWavy = el.classList.contains('wavy');~~
	~~const isJolt = el.classList.contains('jolt');~~

	el.style.setProperty('animation', 'none', 'important');		el.style.setProperty('animation', 'none', 'important');

	const newHTML = ~~chars~~.map((c, i) => {		const newHTML = text.split('').map((c, i) => {
	let delays = [];		let delays = [];

Line 19:		Line 19:

	if (isJolt) {		if (isJolt) {
	// ~~Increased random range to ensure letters are totally out~~ of ~~sync~~		// Random offset between 0s and -0.2s (the full duration of the buzz)
	delays.push((Math.random() * -1.0).toFixed(2) + 's');		// This makes the "jolt" feel like a granular, high-energy vibration
			delays.push((Math.random() * -0.2).toFixed(2) + 's');
	}		}

DB at 17:18, 17 March 2026

2026-03-17T17:18:22Z

← Older revision		Revision as of 19:18, 17 March 2026
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. */
	~~/* Animation script for MediaWiki templates */~~
	(function() {		(function() {
	function applyEffects(el) {		function applyEffects(el) {
	~~// Only process if it has one of our target classes~~
	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');

	~~// Prevent the container itself from moving~~
	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');
	delays.push((i * -0.15).toFixed(2) + 's');		if (isRainbow) delays.push((i * -0.15).toFixed(2) + 's');
	}
	if (isRainbow) {
	delays.push((i * -0.15).toFixed(2) + 's');
	}
	if (isJolt) {		if (isJolt) {
	// ~~Random delay makes the "jolt" look chaotic rather than a uniform slide~~		// Increased random range to ensure letters are totally out of sync
	delays.push((Math.random() * -0.5).toFixed(2) + 's');		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 the span as a string~~
	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'); ~~// Mark as done to prevent double-processing~~		el.setAttribute('data-animated', 'true');
	}		}

	~~// This hook ensures it runs on initial load AND when clicking "Preview" or "Show changes"~~
	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() {

DB at 17:15, 17 March 2026

2026-03-17T17:15:26Z

← Older revision		Revision as of 19:15, 17 March 2026
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 () {		/* Animation script for MediaWiki templates */
	function ~~applyTextEffects~~(~~$content~~) {		(function() {
	~~$content.find(~~'~~.text~~-~~animation~~-~~container~~').~~each~~(~~function~~ () {		function applyEffects(el) {
	~~const $el = $(this~~);		// Only process if it has one of our target classes
	if ($el.~~data~~('animated')) return;		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.~~text();~~		const chars = el.textContent.split('');
	~~const chars = text~~.split('');		const isRainbow = el.classList.contains('rainbow');
	const ~~isWavy~~ = $el.~~hasClass~~('~~wavy~~');		const isWavy = el.classList.contains('wavy');
	const ~~isRainbow~~ = $el.~~hasClass~~('~~rainbow~~');		const isJolt = el.classList.contains('jolt');
	const isJolt = $el.~~hasClass~~('jolt'); ~~// Added Jolt check~~

	~~const nodes = chars~~.~~map((char, i) => {~~		// Prevent the container itself from moving
	~~const $span = $~~('~~<span>~~'~~).text(char ===~~ ' ' ? '~~\u00A0~~' ~~: char~~);		el.style.setProperty('animation', 'none', 'important');
	~~let delays = []~~;

	if (isWavy) delays.push((i * -0.15).toFixed(2) + 's');		const newHTML = chars.map((c, i) => {
	if (isRainbow) delays.push((i * -0.15).toFixed(2) + 's');		let delays = [];

	// ~~Randomized~~ delay ~~for Jolt to make it look~~ "~~glitchy~~"		if (isWavy) {
	~~if (isJolt) {~~		delays.push((i * -0.15).toFixed(2) + 's');
	delays.push((Math.random() * -0.5).toFixed(2) + 's');		}
	}		if (isRainbow) {
			delays.push((i * -0.15).toFixed(2) + 's');
			}
			if (isJolt) {
			// Random delay makes the "jolt" look chaotic rather than a uniform slide
			delays.push((Math.random() * -0.5).toFixed(2) + 's');
			}

	if (delays.length~~) {~~		const content = (c === ' ') ? ' ' : c;
	~~$span.css('~~animation-delay', delays.join(', '));		const delayStyle = delays.length > 0 ? `animation-delay: ${delays.join(', ')} !important;` : '';
	}
	return $span;		// Return the span as a string
	});		return `<span style="${delayStyle}">${content}</span>`;
			}).join('');

	$el.~~empty()~~.~~append~~(~~nodes).~~data('animated', true);		el.innerHTML = newHTML;
	~~});~~		el.setAttribute('data-animated', 'true'); // Mark as done to prevent double-processing
	}		}

	mw.hook('wikipage.content').add(~~applyTextEffects~~);		// This hook ensures it runs on initial load AND when clicking "Preview" or "Show changes"
	}());		mw.hook('wikipage.content').add(function($content) {
			$content.find('.text-animation-container').each(function() {
			applyEffects(this);
			});
			});
			})();

DB at 17:08, 17 March 2026

2026-03-17T17:08:58Z

@@ Line 1: / Line 1: @@
 /* Any JavaScript here will be loaded for all users on every page load. */
-document.querySelectorAll('.text-animation-container').forEach(applyEffects);
+(function () {
-function applyEffects(el) {
+            const text = $el.text();
-    const hasEffect = ['wavy', 'rainbow', 'force-glow', 'force-shadow'].some(cls => el.classList.contains(cls));
+            const chars = text.split('');
-    if (!hasEffect) return;
+            const isWavy = $el.hasClass('wavy');
-    const chars = el.textContent.split('');
+            const nodes = chars.map((char, i) => {
-    const total = chars.length;
+                const $span = $('<span>').text(char === ' ' ? '\u00A0' : char);
-    const isRainbow = el.classList.contains('rainbow');
+                let delays = [];
-    el.style.setProperty('animation', 'none', 'important');
+                if (isWavy) delays.push((i * -0.15).toFixed(2) + 's');
-    el.innerHTML = chars.map((c, i) => {
+                if (delays.length) {
-        let styles = [
+                    $span.css('animation-delay', delays.join(', '));
-            `display: inline-block`,
-            `position: relative`,
+                return $span;
-            `color: inherit`
+            });
-        const content = (c === ' ') ? '&nbsp;' : c;
+            $el.empty().append(nodes).data('animated', true);
          });
-        if (delays.length > 0) {
+    mw.hook('wikipage.content').add(applyTextEffects);
-            span.style.setProperty('animation-delay', delays.join(', '), 'important');
+}());

DB at 17:31, 16 March 2026

2026-03-16T17:31:33Z

← Older revision		Revision as of 19:31, 16 March 2026
Line 29:		Line 29:

	if (isRainbow) {		if (isRainbow) {
	// ~~FIXED: Uses a fixed multiplier (-0~~.~~15) so~~ the ~~rainbow 'flows'~~		// 1. The delay creates the "flow" across the words
	~~// left-to-right at a consistent width~~ across the ~~text.~~
	const rainbowDelay = (i * -0.15).toFixed(2);		const rainbowDelay = (i * -0.15).toFixed(2);

	~~// We remove the static HSL calculation here because the~~
	~~// 'hue-cycle' animation in your CSS handles the color shifting.~~
	delays.push(`${rainbowDelay}s`);		delays.push(`${rainbowDelay}s`);

			// 2. We MUST provide a base color (Red) for hue-rotate to work.
			// This will overwrite 'color: inherit' for rainbow text.
			styles.push(`color: #ff0000`);
	}		}