MediaWiki:Common.js - Revision history

Fedorista at 21:18, 4 October 2026

2026-10-04T21:18:15Z

Fedorista at 21:14, 4 October 2026

2026-10-04T21:14:36Z

← Older revision		Revision as of 21:14, 4 October 2026
Line 550:		Line 550:
	var RANGE = 140; // px from the button's edge where the pull starts		var RANGE = 140; // px from the button's edge where the pull starts
	var MAX_TILT = 14; // max rotation in degrees		var MAX_TILT = 14; // max rotation in degrees
	var PULL = 6; // max px ~~the button drifts~~ toward the cursor		var PULL = 6; // max px drift toward the cursor
	var EASE = 0.18; // 0-1, higher = snappier		var EASE = 0.18; // 0-1, higher = snappier
	var PERSPECTIVE = 600; // px, lower = stronger 3D		var PERSPECTIVE = 600; // px, lower = stronger 3D
Line 575:		Line 575:
	s = { rx: 0, ry: 0, tx: 0, ty: 0 };		s = { rx: 0, ry: 0, tx: 0, ty: 0 };
	states.set( el, s );		states.set( el, s );
			// Transforms don't apply to plain inline elements
			if ( getComputedStyle( el ).display === 'inline' ) {
			el.style.display = 'inline-block';
			}
			}

			// Let the click animation take over while pressed
			if ( el.matches( ':active' ) ) {
			s.rx = s.ry = s.tx = s.ty = 0;
			el.style.removeProperty( 'transform' );
			return;
	}		}

Line 587:		Line 598:
	var ex = Math.max( Math.abs( dx ) - r.width / 2, 0 );		var ex = Math.max( Math.abs( dx ) - r.width / 2, 0 );
	var ey = Math.max( Math.abs( dy ) - r.height / 2, 0 );		var ey = Math.max( Math.abs( dy ) - r.height / 2, 0 );
	var dist = Math.~~hypot~~( ex, ey );		var dist = Math.sqrt( ex * ex + ey * ey );

	if ( dist < RANGE ) {		if ( dist < RANGE ) {
	var power = 1 - dist / RANGE; ~~// stronger as the cursor gets closer~~		var power = 1 - dist / RANGE;
	var nx = clamp( dx / ( r.width / 2 + RANGE / 2 ), -1, 1 );		var nx = clamp( dx / ( r.width / 2 + RANGE / 2 ), -1, 1 );
	var ny = clamp( dy / ( r.height / 2 + RANGE / 2 ), -1, 1 );		var ny = clamp( dy / ( r.height / 2 + RANGE / 2 ), -1, 1 );

	target.ry = nx * MAX_TILT * power; ~~// face turns toward the cursor~~		target.ry = nx * MAX_TILT * power;
	target.rx = -ny * MAX_TILT * power;		target.rx = -ny * MAX_TILT * power;
	target.tx = nx * PULL * power;		target.tx = nx * PULL * power;
Line 601:		Line 612:
	}		}

	~~// Ease toward the target~~
	var moving = false;		var moving = false;
	[ 'rx', 'ry', 'tx', 'ty' ].forEach( function ( k ) {		[ 'rx', 'ry', 'tx', 'ty' ].forEach( function ( k ) {
Line 612:		Line 622:
	if ( moving \|\| target.rx \|\| target.ry ) {		if ( moving \|\| target.rx \|\| target.ry ) {
	active = true;		active = true;
	el.style.setProperty( '~~--fedo-tilt~~',		el.style.setProperty( 'transform',
	'perspective(' + PERSPECTIVE + 'px) ' +		'perspective(' + PERSPECTIVE + 'px) ' +
	'translate3d(' + s.tx.toFixed( 2 ) + 'px,' + s.ty.toFixed( 2 ) + 'px,0) ' +		'translate3d(' + s.tx.toFixed( 2 ) + 'px,' + s.ty.toFixed( 2 ) + 'px,0) ' +
	'rotateX(' + s.rx.toFixed( 2 ) + 'deg) ' +		'rotateX(' + s.rx.toFixed( 2 ) + 'deg) ' +
	'rotateY(' + s.ry.toFixed( 2 ) + 'deg)' );		'rotateY(' + s.ry.toFixed( 2 ) + 'deg)',
			'important' );
	} else {		} else {
	s.rx = s.ry = s.tx = s.ty = 0;		s.rx = s.ry = s.tx = s.ty = 0;
	el.style.removeProperty( '~~--fedo-tilt~~' );		el.style.removeProperty( 'transform' );
	}		}
	} );		} );

Fedorista at 21:11, 4 October 2026

2026-10-04T21:11:29Z

← Older revision		Revision as of 21:11, 4 October 2026
Line 554:		Line 554:
	var PERSPECTIVE = 600; // px, lower = stronger 3D		var PERSPECTIVE = 600; // px, lower = stronger 3D

	// Skip on touch devices ~~and for people who prefer reduced motion~~		// Skip only on touch-only devices (no mouse to follow)
	if ( window.matchMedia( '(~~prefers~~-~~reduced-motion: reduce)' ).matches \|\|~~		if ( window.matchMedia( '(any-hover: none)' ).matches ) {
	~~!window.matchMedia( '(~~hover: ~~hover~~)' ).matches ) {
	return;		return;
	}		}

Fedorista at 21:10, 4 October 2026

2026-10-04T21:10:14Z

← Older revision		Revision as of 21:10, 4 October 2026
Line 543:		Line 543:
	el.removeEventListener( 'animationend', done );		el.removeEventListener( 'animationend', done );
	} );		} );

			/* Magnetic tilt for .fedo-btn */
			( function () {
			'use strict';

			var RANGE = 140; // px from the button's edge where the pull starts
			var MAX_TILT = 14; // max rotation in degrees
			var PULL = 6; // max px the button drifts toward the cursor
			var EASE = 0.18; // 0-1, higher = snappier
			var PERSPECTIVE = 600; // px, lower = stronger 3D

			// Skip on touch devices and for people who prefer reduced motion
			if ( window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches \|\|
			!window.matchMedia( '(hover: hover)' ).matches ) {
			return;
			}

			var mouse = null;
			var running = false;
			var states = new WeakMap();

			function clamp( v, min, max ) {
			return Math.max( min, Math.min( max, v ) );
			}

			function step() {
			var active = !!mouse;

			document.querySelectorAll( '.fedo-btn' ).forEach( function ( el ) {
			var s = states.get( el );
			if ( !s ) {
			s = { rx: 0, ry: 0, tx: 0, ty: 0 };
			states.set( el, s );
			}

			var target = { rx: 0, ry: 0, tx: 0, ty: 0 };

			if ( mouse ) {
			var r = el.getBoundingClientRect();
			var dx = mouse.x - ( r.left + r.width / 2 );
			var dy = mouse.y - ( r.top + r.height / 2 );

			// Distance from the cursor to the button's edge (0 when over it)
			var ex = Math.max( Math.abs( dx ) - r.width / 2, 0 );
			var ey = Math.max( Math.abs( dy ) - r.height / 2, 0 );
			var dist = Math.hypot( ex, ey );

			if ( dist < RANGE ) {
			var power = 1 - dist / RANGE; // stronger as the cursor gets closer
			var nx = clamp( dx / ( r.width / 2 + RANGE / 2 ), -1, 1 );
			var ny = clamp( dy / ( r.height / 2 + RANGE / 2 ), -1, 1 );

			target.ry = nx * MAX_TILT * power; // face turns toward the cursor
			target.rx = -ny * MAX_TILT * power;
			target.tx = nx * PULL * power;
			target.ty = ny * PULL * power;
			}
			}

			// Ease toward the target
			var moving = false;
			[ 'rx', 'ry', 'tx', 'ty' ].forEach( function ( k ) {
			s[ k ] += ( target[ k ] - s[ k ] ) * EASE;
			if ( Math.abs( target[ k ] - s[ k ] ) > 0.01 ) {
			moving = true;
			}
			} );

			if ( moving \|\| target.rx \|\| target.ry ) {
			active = true;
			el.style.setProperty( '--fedo-tilt',
			'perspective(' + PERSPECTIVE + 'px) ' +
			'translate3d(' + s.tx.toFixed( 2 ) + 'px,' + s.ty.toFixed( 2 ) + 'px,0) ' +
			'rotateX(' + s.rx.toFixed( 2 ) + 'deg) ' +
			'rotateY(' + s.ry.toFixed( 2 ) + 'deg)' );
			} else {
			s.rx = s.ry = s.tx = s.ty = 0;
			el.style.removeProperty( '--fedo-tilt' );
			}
			} );

			if ( active ) {
			requestAnimationFrame( step );
			} else {
			running = false;
			}
			}

			function start() {
			if ( !running ) {
			running = true;
			requestAnimationFrame( step );
			}
			}

			document.addEventListener( 'mousemove', function ( e ) {
			mouse = { x: e.clientX, y: e.clientY };
			start();
			}, { passive: true } );

			document.documentElement.addEventListener( 'mouseleave', function () {
			mouse = null;
			start();
			} );
			}() );

Fedorista at 21:07, 4 October 2026

2026-10-04T21:07:27Z

← Older revision		Revision as of 21:07, 4 October 2026
Line 543:		Line 543:
	el.removeEventListener( 'animationend', done );		el.removeEventListener( 'animationend', done );
	} );		} );

	~~/* Fedo button: 3D cursor tilt + press animation */~~
	~~( function () {~~
	~~var SEL = '.fedo-btn.your-button-class';~~
	~~var MAX_TILT = 14; // degrees at the very edge~~
	~~var HOLD_MS = 450; // wait for the press animation before following the link~~
	~~var reduce = window.matchMedia( '(prefers-reduced-motion: reduce)' );~~

	~~// let the animation play before following the link~~
	~~var a = el.closest( 'a' );~~
	~~if ( !a \|\| e.button !== 0 \|\| e.ctrlKey \|\| e.metaKey \|\| e.shiftKey \|\| e.altKey \|\| a.target === '_blank' ) {~~
	~~return;~~
	}
	~~e.preventDefault();~~
	~~setTimeout( function () { window.location.href = a.href; }, HOLD_MS );~~
	~~} );~~
	~~}() );~~

Fedorista at 21:06, 4 October 2026

2026-10-04T21:06:09Z

← Older revision		Revision as of 21:06, 4 October 2026
Line 511:		Line 511:
	});		});

			document.addEventListener( 'pointermove', function ( e ) {
			if ( e.pointerType !== 'mouse' \|\| reduce.matches ) { return; }
			var el = e.target.closest && e.target.closest( SEL );
			if ( !el ) { return; }
			var r = el.getBoundingClientRect();
			var x = ( e.clientX - r.left ) / r.width - 0.5; // -0.5 .. 0.5
			var y = ( e.clientY - r.top ) / r.height - 0.5;
			el.classList.add( 'is-hovering' );
			el.style.setProperty( '--ry', ( x * MAX_TILT * 2 ) + 'deg' );
			el.style.setProperty( '--rx', ( -y * MAX_TILT * 2 ) + 'deg' );
			} );

			document.addEventListener( 'pointerout', function ( e ) {
			var el = e.target.closest && e.target.closest( SEL );
			if ( !el \|\| el.contains( e.relatedTarget ) ) { return; }
			el.classList.remove( 'is-hovering' );
			el.style.setProperty( '--rx', '0deg' );
			el.style.setProperty( '--ry', '0deg' );
			} );

			document.addEventListener( 'click', function ( e ) {
			var el = e.target.closest && e.target.closest( SEL );
			if ( !el \|\| reduce.matches ) { return; }

			// restart the animation even on rapid repeat clicks
			el.classList.remove( 'is-pressed' );
			void el.offsetWidth;
			el.classList.add( 'is-pressed' );
			el.addEventListener( 'animationend', function done() {
			el.classList.remove( 'is-pressed' );
			el.removeEventListener( 'animationend', done );
			} );

	/* Fedo button: 3D cursor tilt + press animation */		/* Fedo button: 3D cursor tilt + press animation */

Fedorista at 21:05, 4 October 2026

2026-10-04T21:05:55Z

@@ Line 518: / Line 518: @@
      var HOLD_MS = 450; // wait for the press animation before following the link
      var reduce = window.matchMedia( '(prefers-reduced-motion: reduce)' );
          // let the animation play before following the link

Fedorista at 20:58, 4 October 2026

2026-10-04T20:58:52Z

← Older revision		Revision as of 20:58, 4 October 2026
Line 510:		Line 510:
	});		});
	});		});


			/* Fedo button: 3D cursor tilt + press animation */
			( function () {
			var SEL = '.fedo-btn.your-button-class';
			var MAX_TILT = 14; // degrees at the very edge
			var HOLD_MS = 450; // wait for the press animation before following the link
			var reduce = window.matchMedia( '(prefers-reduced-motion: reduce)' );

			document.addEventListener( 'pointermove', function ( e ) {
			if ( e.pointerType !== 'mouse' \|\| reduce.matches ) { return; }
			var el = e.target.closest && e.target.closest( SEL );
			if ( !el ) { return; }
			var r = el.getBoundingClientRect();
			var x = ( e.clientX - r.left ) / r.width - 0.5; // -0.5 .. 0.5
			var y = ( e.clientY - r.top ) / r.height - 0.5;
			el.classList.add( 'is-hovering' );
			el.style.setProperty( '--ry', ( x * MAX_TILT * 2 ) + 'deg' );
			el.style.setProperty( '--rx', ( -y * MAX_TILT * 2 ) + 'deg' );
			} );

			document.addEventListener( 'pointerout', function ( e ) {
			var el = e.target.closest && e.target.closest( SEL );
			if ( !el \|\| el.contains( e.relatedTarget ) ) { return; }
			el.classList.remove( 'is-hovering' );
			el.style.setProperty( '--rx', '0deg' );
			el.style.setProperty( '--ry', '0deg' );
			} );

			document.addEventListener( 'click', function ( e ) {
			var el = e.target.closest && e.target.closest( SEL );
			if ( !el \|\| reduce.matches ) { return; }

			// restart the animation even on rapid repeat clicks
			el.classList.remove( 'is-pressed' );
			void el.offsetWidth;
			el.classList.add( 'is-pressed' );
			el.addEventListener( 'animationend', function done() {
			el.classList.remove( 'is-pressed' );
			el.removeEventListener( 'animationend', done );
			} );

			// let the animation play before following the link
			var a = el.closest( 'a' );
			if ( !a \|\| e.button !== 0 \|\| e.ctrlKey \|\| e.metaKey \|\| e.shiftKey \|\| e.altKey \|\| a.target === '_blank' ) {
			return;
			}
			e.preventDefault();
			setTimeout( function () { window.location.href = a.href; }, HOLD_MS );
			} );
			}() );

Fedorista at 14:58, 4 October 2026

2026-10-04T14:58:19Z

Show changes

Fedorista at 12:59, 4 October 2026

2026-10-04T12:59:00Z

@@ Line 238: / Line 238: @@
 mw.hook('wikipage.content').add(function ($content) {
      $content.find('.infobox-native-audio').each(function () {
-         const container = this;
+        if (this.dataset.audioInitialized === '1') {
-         if (container.dataset.audioInitialized) {
+         if (!src) {
              return;
+         }
          const audio = document.createElement('audio');
-         audio.controls = true;
+         volumeButton.addEventListener('click', function () {
-        audio.preload = 'metadata';
+            audio.muted = !audio.muted;
-         audio.src = container.dataset.src;
+            volumeButton.textContent = audio.muted ? '🔇' : '🔊';
-         container.replaceChildren(audio);
+         this.replaceChildren(audio, player);
-         container.dataset.audioInitialized = 'true';
+         this.dataset.audioInitialized = '1';
      });
 });