MediaWiki:Gadget-AnimatedCursorFollower.js - Revision history

Bonez565 at 01:52, 23 May 2026

2026-05-23T01:52:16Z

← Older revision		Revision as of 01:52, 23 May 2026
Line 257:		Line 257:
	input.addEventListener('change', function () {		input.addEventListener('change', function () {
	if (!input.checked) return;		if (!input.checked) return;

	setMode(input.value);		setMode(input.value);

	const selectedSprite = chooseInitialSprite();		const selectedSprite = chooseInitialSprite();

	if (selectedSprite) {		if (selectedSprite) {
	setPetSource(selectedSprite, false);		setPetSource(selectedSprite, false);
	}		}

	~~menu.style.display = 'none';~~
	});		});
	});		});

Bonez565 at 01:50, 23 May 2026

2026-05-23T01:50:29Z

← Older revision		Revision as of 01:50, 23 May 2026
Line 195:		Line 195:

	function createSettingsPanel() {		function createSettingsPanel() {
	const ~~panel~~ = document.createElement('div');		mw.loader.using('mediawiki.util').then(function () {
	const currentMode = getMode();		const portletId = document.getElementById('p-personal')
			? 'p-personal'
	~~panel~~.className = 'animated-cursor-follower-~~settings~~';		: 'p-tb';

	Object.assign(~~panel~~.style, {		const linkNode = mw.util.addPortletLink(
	position: '~~fixed~~',		portletId,
	~~right~~: '~~12px~~',		'#',
	~~bottom~~: '~~12px~~',		'Cursor pet',
	~~zIndex: '100000',~~		't-animated-cursor-follower',
	background: '~~rgba(255, 255, 255, 0.92)~~',		'Choose cursor pet behavior'
	color: '#202122',		);
	border: '1px solid #a2a9b1',
	borderRadius: '~~6px~~',		if (!linkNode) return;
	padding: '~~6px~~ 8px',
	fontSize: '12px',		const link = linkNode.querySelector('a');
	lineHeight: '1.4',
	boxShadow: '0 2px ~~6px~~ rgba(0, 0, 0, 0.2)'		if (!link) return;
	});
			const menu = document.createElement('div');
	~~panel~~.innerHTML = `		const currentMode = getMode();
	<div style="font-weight: bold; margin-bottom: ~~3px~~;">Cursor pet</div>
	<label style="display: block; white-space: nowrap;">		menu.className = 'animated-cursor-follower-menu';
	<input type="radio" name="animated-cursor-follower-mode" value="page">
	Page sprite		Object.assign(menu.style, {
	</label>		position: 'absolute',
	<label style="display: block; white-space: nowrap;">		zIndex: '100000',
	<input type="radio" name="animated-cursor-follower-mode" value="saved">		display: 'none',
	Saved sprite		background: '#fff',
	</label>		color: '#202122',
	`;		border: '1px solid #a2a9b1',
			borderRadius: '4px',
	document.body.appendChild(~~panel~~);		padding: '8px 10px',
			fontSize: '12px',
	const inputs = ~~panel~~.querySelectorAll('input[name="animated-cursor-follower-mode"]');		lineHeight: '1.5',
			boxShadow: '0 2px 8px rgba(0, 0, 0, 0.25)',
	inputs.forEach(function (input) {		minWidth: '150px'
	input.checked = input.value === currentMode;		});

	input.addEventListener('change', function () {		menu.innerHTML = `
	if (!input.checked) return;		<div style="font-weight: bold; margin-bottom: 4px;">Cursor pet</div>
			<label style="display: block; white-space: nowrap;">
	setMode(input.value);		<input type="radio" name="animated-cursor-follower-mode" value="page">
			Page sprite
	const selectedSprite = chooseInitialSprite();		</label>
			<label style="display: block; white-space: nowrap;">
	if (selectedSprite) {		<input type="radio" name="animated-cursor-follower-mode" value="saved">
	setPetSource(selectedSprite, false);		Saved sprite
			</label>
			`;

			document.body.appendChild(menu);

			const inputs = menu.querySelectorAll(
			'input[name="animated-cursor-follower-mode"]'
			);

			inputs.forEach(function (input) {
			input.checked = input.value === currentMode;

			input.addEventListener('change', function () {
			if (!input.checked) return;

			setMode(input.value);

			const selectedSprite = chooseInitialSprite();

			if (selectedSprite) {
			setPetSource(selectedSprite, false);
			}

			menu.style.display = 'none';
			});
			});

			link.addEventListener('click', function (e) {
			e.preventDefault();

			const rect = link.getBoundingClientRect();

			menu.style.left = `${rect.left + window.scrollX}px`;
			menu.style.top = `${rect.bottom + window.scrollY + 4}px`;
			menu.style.display =
			menu.style.display === 'none' ? 'block' : 'none';
			});

			document.addEventListener('click', function (e) {
			if (
			menu.style.display === 'none' \|\|
			menu.contains(e.target) \|\|
			link.contains(e.target)
			) {
			return;
	}		}

			menu.style.display = 'none';
	});		});
	});		});

Bonez565 at 01:47, 23 May 2026

2026-05-23T01:47:02Z

Show changes

Bonez565 at 01:32, 23 May 2026

2026-05-23T01:32:05Z

← Older revision		Revision as of 01:32, 23 May 2026
Line 27:		Line 27:
	const styles = window.getComputedStyle(sprite);		const styles = window.getComputedStyle(sprite);
	return parseInt(styles.getPropertyValue('--frame'), 10) \|\| 48;		return parseInt(styles.getPropertyValue('--frame'), 10) \|\| 48;
			}

			function resetSpriteFlip(sprite) {
			const transform = sprite.style.transform;

			if (!transform) return;

			sprite.style.transform = transform
			.replace(/scaleX$\s-1\s$/g, 'scaleX(1)')
			.trim();
	}		}

Line 57:		Line 67:
	function setPetSource(newSourceNode) {		function setPetSource(newSourceNode) {
	const newPet = newSourceNode.cloneNode(true);		const newPet = newSourceNode.cloneNode(true);

	newPet.classList.add('animated-cursor-follower-pet');		newPet.classList.add('animated-cursor-follower-pet');
	newPet.style.setProperty('--scale', String(CONFIG.scale));		newPet.style.setProperty('--scale', String(CONFIG.scale));

	Object.assign(newPet.style, {		Object.assign(newPet.style, {
	position: 'static',		position: 'static',
Line 66:		Line 76:
	pointerEvents: 'none'		pointerEvents: 'none'
	});		});

			resetSpriteFlip(newPet);

	wrapper.replaceChildren(newPet);		wrapper.replaceChildren(newPet);
	pet = newPet;		pet = newPet;

Bonez565 at 01:28, 23 May 2026

2026-05-23T01:28:46Z

← Older revision		Revision as of 01:28, 23 May 2026
Line 33:		Line 33:
	state.mounted = true;		state.mounted = true;

	~~const pet = sourceNode.cloneNode(true);~~
	const wrapper = document.createElement('span');		const wrapper = document.createElement('span');

	const frameSize = getFrameSize(sourceNode);		const frameSize = getFrameSize(sourceNode);
	const centerOffset = (frameSize * CONFIG.scale) / 2;		const centerOffset = (frameSize * CONFIG.scale) / 2;

			let pet = null;

	wrapper.className = 'animated-cursor-follower-wrapper';		wrapper.className = 'animated-cursor-follower-wrapper';
Line 55:		Line 55:
	});		});

	~~pet~~.classList.add('animated-cursor-follower-pet');		function setPetSource(newSourceNode) {
	~~pet~~.style.setProperty('--scale', String(CONFIG.scale));		const newPet = newSourceNode.cloneNode(true);

			newPet.classList.add('animated-cursor-follower-pet');
			newPet.style.setProperty('--scale', String(CONFIG.scale));

	~~// Keep the already-applied sprite data/style from the original clone.~~		Object.assign(newPet.style, {
	~~// Do not transform the sprite itself; transform only the wrapper.~~		position: 'static',
	Object.assign(~~pet~~.style, {		margin: '0',
	position: 'static',		pointerEvents: 'none'
	margin: '0',		});
	pointerEvents: 'none'
	});		wrapper.replaceChildren(newPet);
			pet = newPet;
			}

	~~wrapper.appendChild~~(~~pet~~);		setPetSource(sourceNode);
	document.body.appendChild(wrapper);		document.body.appendChild(wrapper);

	document.addEventListener('mousemove', function (e) {		document.addEventListener('mousemove', function (e) {

	if (!state.hasMouse) {		if (!state.hasMouse) {
	state.hasMouse = true;		state.hasMouse = true;

	state.targetX = e.clientX;		state.targetX = e.clientX;
	state.targetY = e.clientY;		state.targetY = e.clientY;

	state.currentX = e.clientX;		state.currentX = e.clientX;
	state.currentY = e.clientY;		state.currentY = e.clientY;

	wrapper.style.display = '';		wrapper.style.display = '';
	}		}

	state.targetX = e.clientX;		state.targetX = e.clientX;
	state.targetY = e.clientY;		state.targetY = e.clientY;

	}, { passive: true });		}, { passive: true });

	document.documentElement.addEventListener('mouseout', function (e) {		document.documentElement.addEventListener('mouseout', function (e) {
	if (!e.relatedTarget && !e.toElement) {		if (!e.relatedTarget && !e.toElement) {
Line 94:		Line 97:
	}		}
	});		});

			document.addEventListener('click', function (e) {
			const clickedSprite = e.target.closest('span.ws-sprite');

			if (!clickedSprite) return;

			if (clickedSprite.classList.contains('animated-cursor-follower-pet')) {
			return;
			}

			if (!clickedSprite.dataset.spriteApplied) {
			return;
			}

			setPetSource(clickedSprite);
			}, { passive: true });

	function render() {		function render() {
Line 100:		Line 119:
	return;		return;
	}		}

	state.currentX += (state.targetX - state.currentX) * CONFIG.speed;		state.currentX += (state.targetX - state.currentX) * CONFIG.speed;
	state.currentY += (state.targetY - state.currentY) * CONFIG.speed;		state.currentY += (state.targetY - state.currentY) * CONFIG.speed;

	if (state.targetX > state.currentX + 1) {		if (state.targetX > state.currentX + 1) {
	state.facingRight = true;		state.facingRight = true;
Line 109:		Line 128:
	state.facingRight = false;		state.facingRight = false;
	}		}

	const scaleX = state.facingRight ? 1 : -1;		const scaleX = state.facingRight ? 1 : -1;

	const xOffset = state.facingRight		const xOffset = state.facingRight
	? -CONFIG.offsetX		? -CONFIG.offsetX
	: CONFIG.offsetX;		: CONFIG.offsetX;

	wrapper.style.transform =		wrapper.style.transform =
	`translate3d(` +		`translate3d(` +
Line 121:		Line 140:
	`${state.currentY + CONFIG.offsetY - centerOffset}px, 0)` +		`${state.currentY + CONFIG.offsetY - centerOffset}px, 0)` +
	` scaleX(${scaleX})`;		` scaleX(${scaleX})`;

	state.reqId = requestAnimationFrame(render);		state.reqId = requestAnimationFrame(render);
	}		}

Bonez565 at 01:25, 23 May 2026

2026-05-23T01:25:39Z

← Older revision		Revision as of 01:25, 23 May 2026
Line 88:		Line 88:
	}, { passive: true });		}, { passive: true });

	document.addEventListener('~~mouseleave~~', function () {		document.documentElement.addEventListener('mouseout', function (e) {
	state.hasMouse = false;		if (!e.relatedTarget && !e.toElement) {
	wrapper.style.display = 'none';		state.hasMouse = false;
			wrapper.style.display = 'none';
			}
	});		});

Bonez565 at 01:23, 23 May 2026

2026-05-23T01:23:49Z

← Older revision		Revision as of 01:23, 23 May 2026
Line 14:		Line 14:

	const state = {		const state = {
	targetX: ~~window.innerWidth / 2~~,		targetX: 0,
	targetY: ~~window.innerHeight / 2~~,		targetY: 0,
	currentX: ~~window.innerWidth / 2~~,		currentX: 0,
	currentY: ~~window.innerHeight / 2~~,		currentY: 0,
	facingRight: true,		facingRight: true,
	reqId: null,		reqId: null,
	mounted: false		mounted: false,
			hasMouse: false
	};		};

Line 50:		Line 51:
	width: `${frameSize * CONFIG.scale}px`,		width: `${frameSize * CONFIG.scale}px`,
	height: `${frameSize * CONFIG.scale}px`,		height: `${frameSize * CONFIG.scale}px`,
	willChange: 'transform'		willChange: 'transform',
			display: 'none'
	});		});

Line 67:		Line 69:
	document.body.appendChild(wrapper);		document.body.appendChild(wrapper);

	document.addEventListener('mousemove', function(e) {		document.addEventListener('mousemove', function (e) {

			if (!state.hasMouse) {
			state.hasMouse = true;

			state.targetX = e.clientX;
			state.targetY = e.clientY;

			state.currentX = e.clientX;
			state.currentY = e.clientY;

			wrapper.style.display = '';
			}

	state.targetX = e.clientX;		state.targetX = e.clientX;
	state.targetY = e.clientY;		state.targetY = e.clientY;

	}, { passive: true });		}, { passive: true });

			document.addEventListener('mouseleave', function () {
			state.hasMouse = false;
			wrapper.style.display = 'none';
			});

	function render() {		function render() {
			if (!state.hasMouse) {
			state.reqId = requestAnimationFrame(render);
			return;
			}

	state.currentX += (state.targetX - state.currentX) * CONFIG.speed;		state.currentX += (state.targetX - state.currentX) * CONFIG.speed;
	state.currentY += (state.targetY - state.currentY) * CONFIG.speed;		state.currentY += (state.targetY - state.currentY) * CONFIG.speed;
Line 84:		Line 110:
	const scaleX = state.facingRight ? 1 : -1;		const scaleX = state.facingRight ? 1 : -1;

	~~// Pet trails behind movement direction~~
	const xOffset = state.facingRight		const xOffset = state.facingRight
	? -CONFIG.offsetX ~~// moving right → pet on left~~		? -CONFIG.offsetX
	: CONFIG.offsetX; ~~// moving left → pet on right~~		: CONFIG.offsetX;

	wrapper.style.transform =		wrapper.style.transform =
	`translate3d(` +		`translate3d(` +
	`${state.currentX + xOffset - centerOffset}px, ` +		`${state.currentX + xOffset - centerOffset}px, ` +
	`${state.currentY + CONFIG.offsetY - centerOffset}px,0)` +		`${state.currentY + CONFIG.offsetY - centerOffset}px, 0)` +
	` scaleX(${scaleX})`;		` scaleX(${scaleX})`;

Bonez565 at 01:19, 23 May 2026

2026-05-23T01:19:52Z

← Older revision		Revision as of 01:19, 23 May 2026
Line 67:		Line 67:
	document.body.appendChild(wrapper);		document.body.appendChild(wrapper);

	document.addEventListener('mousemove', function (e) {		document.addEventListener('mousemove', function(e) {
	state.targetX = e.clientX ~~+ CONFIG.offsetX~~;		state.targetX = e.clientX;
	state.targetY = e.clientY ~~+ CONFIG.offsetY~~;		state.targetY = e.clientY;
	}, { passive: true });		}, { passive: true });

Line 75:		Line 75:
	state.currentX += (state.targetX - state.currentX) * CONFIG.speed;		state.currentX += (state.targetX - state.currentX) * CONFIG.speed;
	state.currentY += (state.targetY - state.currentY) * CONFIG.speed;		state.currentY += (state.targetY - state.currentY) * CONFIG.speed;

	if (state.targetX > state.currentX + 1) {		if (state.targetX > state.currentX + 1) {
	state.facingRight = true;		state.facingRight = true;
Line 81:		Line 81:
	state.facingRight = false;		state.facingRight = false;
	}		}

	const scaleX = state.facingRight ? 1 : -1;		const scaleX = state.facingRight ? 1 : -1;

			// Pet trails behind movement direction
			const xOffset = state.facingRight
			? -CONFIG.offsetX // moving right → pet on left
			: CONFIG.offsetX; // moving left → pet on right

	wrapper.style.transform =		wrapper.style.transform =
	`translate3d(${state.currentX - centerOffset}px, ` +		`translate3d(` +
	`${state.currentY - centerOffset}px, 0) scaleX(${scaleX})`;		`${state.currentX + xOffset - centerOffset}px, ` +
			`${state.currentY + CONFIG.offsetY - centerOffset}px,0)` +
			` scaleX(${scaleX})`;

	state.reqId = requestAnimationFrame(render);		state.reqId = requestAnimationFrame(render);
	}		}

Bonez565 at 01:17, 23 May 2026

2026-05-23T01:17:50Z

Show changes

Bonez565 at 01:13, 23 May 2026

2026-05-23T01:13:54Z

Show changes