MediaWiki:Common.js - Revision history

Mvuijlst at 19:19, 2 October 2025

2025-10-02T19:19:50Z

← Older revision		Revision as of 19:19, 2 October 2025
Line 1:		Line 1:
	/* ~~Promote infobox~~ image ~~to a 10:7 hero~~ above the title (touch devices only) */		/* Hero image above the title, cloned from infobox (touch devices only) */
	(function () {		(function () {
	if (!window.matchMedia \|\| !matchMedia('(pointer: coarse)').matches) return;		if (!window.matchMedia \|\| !matchMedia('(pointer: coarse)').matches) return;
	if (document.querySelector('.article-hero')) return;		if (document.querySelector('.article-hero')) return;

			function bestSrc(img) {
			// prefer the largest srcset candidate if present
			var ss = img.getAttribute('srcset');
			if (!ss) return img.currentSrc \|\| img.src \|\| '';
			var last = ss.split(',').pop().trim().split(/\s+/)[0];
			return last \|\| img.currentSrc \|\| img.src \|\| '';
			}

	function run() {		function run() {
	~~// Find the infobox image cell~~
	var imgCell = document.querySelector('table.infobox .infobox-image-cell');		var imgCell = document.querySelector('table.infobox .infobox-image-cell');
	if (!imgCell) return;		if (!imgCell) return;

	// ~~What we'll move: prefer~~ a wrapper ~~(span/a/figure)~~ so ~~we keep the~~ link		// Prefer cloning a wrapper so link/captions survive if present
	var ~~moveNode~~ =		var wrapper = imgCell.querySelector('a, span, figure, picture') \|\| imgCell.querySelector('img');
	imgCell.querySelector('span, figure~~, a~~, picture~~, img~~') \|\| imgCell.~~firstElementChild~~;		if (!wrapper) return;
	if (!~~moveNode~~) return;

	~~// Where to put the hero~~
	var header = document.querySelector('.mw-body-header') \|\| document.getElementById('firstHeading');		var header = document.querySelector('.mw-body-header') \|\| document.getElementById('firstHeading');
	if (!header) return;		if (!header) return;

	// ~~Create the~~ hero first so space ~~is reserved immediately~~		// Build hero before header (reserves space up-front)
	var hero = document.createElement('div');		var hero = document.createElement('div');
	hero.className = 'article-hero';		hero.className = 'article-hero';
	header.parentNode.insertBefore(hero, header);		header.parentNode.insertBefore(hero, header);

	// ~~Batch DOM mutation~~ in the next frame ~~to avoid extra reflows~~		// Clone the wrapper; if we only have <img>, create a fresh <img> with best candidate
			var cloneNode;
			if (wrapper.tagName.toLowerCase() === 'img') {
			cloneNode = document.createElement('img');
			cloneNode.src = bestSrc(wrapper);
			cloneNode.alt = ''; // decorative hero; alt remains in infobox
			cloneNode.decoding = 'async';
			cloneNode.loading = 'eager';
			cloneNode.fetchPriority = 'high';
			cloneNode.sizes = '100vw';
			} else {
			cloneNode = wrapper.cloneNode(true);
			// Ensure nested <img> uses a high-res candidate
			var heroImg = cloneNode.querySelector('img');
			if (heroImg) {
			heroImg.src = bestSrc(heroImg);
			heroImg.alt = '';
			heroImg.decoding = 'async';
			heroImg.loading = 'eager';
			heroImg.fetchPriority = 'high';
			heroImg.sizes = '100vw';
			}
			}

			hero.appendChild(cloneNode);

			// Reveal smoothly on the next frame
	requestAnimationFrame(function () {		requestAnimationFrame(function () {
	~~// Move (not clone) the existing node — avoids a second download/decoding~~		hero.classList.add('is-ready');
	hero~~.appendChild(moveNode);~~

	~~// Optional: mark infobox for any extra styling you might want later~~
	~~var infobox = imgCell.closest('table.infobox');~~
	~~if (infobox) infobox~~.classList.add('~~infobox--image~~-~~promoted~~');
	});		});
	}		}

Mvuijlst at 19:15, 2 October 2025

2025-10-02T19:15:34Z

← Older revision		Revision as of 19:15, 2 October 2025
Line 1:		Line 1:
	/* Promote infobox image to a 10:7 hero ~~ABOVE~~ the ~~.mw-body-header~~ (touch only) */		/* Promote infobox image to a 10:7 hero above the title (touch devices only) */
	~~mw.hook('wikipage.content').add~~(function (~~$content~~) {		(function () {
	if (!window.matchMedia \|\| !~~window.~~matchMedia('(pointer: coarse)').matches) return;		if (!window.matchMedia \|\| !matchMedia('(pointer: coarse)').matches) return;
	if (document.querySelector('.article-hero')) return;		if (document.querySelector('.article-hero')) return;

	// ~~First~~ infobox image		function run() {
	var ~~$img~~ = ~~$content~~.~~find~~('table.infobox .infobox-image-cell ~~img~~'~~).first(~~);		// Find the infobox image cell
	if (!~~$img.length~~) return;		var imgCell = document.querySelector('table.infobox .infobox-image-cell');
			if (!imgCell) return;

	// ~~Prefer~~ the ~~largest candidate from srcset~~		// What we'll move: prefer a wrapper (span/a/figure) so we keep the link
	var ~~src~~ = ~~$img~~.~~attr~~('~~src~~') \|\| '';		var moveNode =
	var ~~srcset~~ = ~~$img~~.~~attr~~('~~srcset~~') \|\| '';		imgCell.querySelector('span, figure, a, picture, img') \|\| imgCell.firstElementChild;
	if (~~srcset~~) {		if (!moveNode) return;
	var ~~last~~ = ~~srcset~~.~~split~~(',').~~pop~~()~~.trim~~().~~split~~(/~~\s+~~/)~~[0]~~;
	if (~~last~~) ~~src = last~~;		// Where to put the hero
			var header = document.querySelector('.mw-body-header') \|\| document.getElementById('firstHeading');
			if (!header) return;

			// Create the hero first so space is reserved immediately
			var hero = document.createElement('div');
			hero.className = 'article-hero';
			header.parentNode.insertBefore(hero, header);

			// Batch DOM mutation in the next frame to avoid extra reflows
			requestAnimationFrame(function () {
			// Move (not clone) the existing node — avoids a second download/decoding
			hero.appendChild(moveNode);

			// Optional: mark infobox for any extra styling you might want later
			var infobox = imgCell.closest('table.infobox');
			if (infobox) infobox.classList.add('infobox--image-promoted');
			});
	}		}

	~~// Build hero and image~~		if (document.readyState === 'loading') {
	~~var $hero~~ = $('~~<div>', {~~ '~~class': 'article-hero', 'aria-hidden': 'true' }~~);		document.addEventListener('DOMContentLoaded', run, { once: true });
	~~var $clone = $('<img>',~~ {
	~~src: src,~~
	~~alt:~~ '', ~~// decorative hero; keep real alt on the infobox image~~
	~~decoding: 'async'~~,
	~~loading~~: ~~'eager',~~
	~~fetchpriority: 'high',~~
	~~sizes: '100vw'~~
	});
	~~$hero.append($clone);~~

	~~// Insert hero just before the .mw-body-header (Vector 2022)~~
	~~var $header = $('.mw-body-header').first();~~
	~~if ($header.length) {~~
	~~$hero.insertBefore($header~~);
	} else {		} else {
	~~// Fallback: before firstHeading if header not found~~		run();
	$(~~'#firstHeading').first().before($hero~~);
	}		}
			})();
	~~// Hide the original infobox image when promoted~~
	~~$img.closest('table.infobox'~~)~~.addClass~~(~~'infobox--image-promoted');~~
	});

Mvuijlst at 19:07, 2 October 2025

2025-10-02T19:07:37Z

← Older revision		Revision as of 19:07, 2 October 2025
Line 1:		Line 1:
	/* Promote infobox image to a 10:7 hero ~~above~~ the ~~title~~ (touch ~~devices~~ only) */		/* Promote infobox image to a 10:7 hero ABOVE the .mw-body-header (touch only) */
	mw.hook('wikipage.content').add(function ($content) {		mw.hook('wikipage.content').add(function ($content) {
	~~// Only on touch devices~~
	if (!window.matchMedia \|\| !window.matchMedia('(pointer: coarse)').matches) return;		if (!window.matchMedia \|\| !window.matchMedia('(pointer: coarse)').matches) return;

	~~// Avoid duplicates~~
	if (document.querySelector('.article-hero')) return;		if (document.querySelector('.article-hero')) return;

Line 11:		Line 8:
	if (!$img.length) return;		if (!$img.length) return;

	// ~~Page title~~ (~~Vector 2022 still uses #firstHeading~~)		// Prefer the largest candidate from srcset
	var ~~$heading~~ = $('~~#firstHeading~~');		var src = $img.attr('src') \|\| '';
	if (~~!$heading~~.~~length~~) ~~return~~;		var srcset = $img.attr('srcset') \|\| '';
			if (srcset) {
			var last = srcset.split(',').pop().trim().split(/\s+/)[0];
			if (last) src = last;
			}

	// Build hero ~~container~~ and ~~clone the~~ image		// Build hero and image
	var $hero = $('<div>', { 'class': 'article-hero', 'aria-hidden': 'true' });		var $hero = $('<div>', { 'class': 'article-hero', 'aria-hidden': 'true' });
	var $clone = $('<img>', {		var $clone = $('<img>', {
	src: ~~$img.attr('~~src~~'),~~		src: src,
	~~srcset: $img.attr('srcset') \|\| '',~~		alt: '', // decorative hero; keep real alt on the infobox image
	~~sizes: '100vw'~~,		decoding: 'async',
	alt: '', // decorative hero; real alt ~~stays in~~ infobox
	loading: 'eager',		loading: 'eager',
	~~decoding~~: '~~async~~',		fetchpriority: 'high',
	~~fetchpriority~~: '~~high~~'		sizes: '100vw'
	});		});
			$hero.append($clone);

	$hero.~~append~~($~~clone~~);		// Insert hero just before the .mw-body-header (Vector 2022)
	$hero.insertBefore($~~heading~~);		var $header = $('.mw-body-header').first();
			if ($header.length) {
			$hero.insertBefore($header);
			} else {
			// Fallback: before firstHeading if header not found
			$('#firstHeading').first().before($hero);
			}

	// Hide the original infobox image ~~on touch devices (via CSS class)~~		// Hide the original infobox image when promoted
	$img.closest('table.infobox').addClass('infobox--image-promoted');		$img.closest('table.infobox').addClass('infobox--image-promoted');
	});		});


	/* Quick facts: collapse infobox under first paragraph on touch devices */		/* Quick facts: collapse infobox under first paragraph on touch devices */

Mvuijlst at 19:02, 2 October 2025

2025-10-02T19:02:28Z

← Older revision		Revision as of 19:02, 2 October 2025
Line 1:		Line 1:
			/* Promote infobox image to a 10:7 hero above the title (touch devices only) */
			mw.hook('wikipage.content').add(function ($content) {
			// Only on touch devices
			if (!window.matchMedia \|\| !window.matchMedia('(pointer: coarse)').matches) return;

			// Avoid duplicates
			if (document.querySelector('.article-hero')) return;

			// First infobox image
			var $img = $content.find('table.infobox .infobox-image-cell img').first();
			if (!$img.length) return;

			// Page title (Vector 2022 still uses #firstHeading)
			var $heading = $('#firstHeading');
			if (!$heading.length) return;

			// Build hero container and clone the image
			var $hero = $('<div>', { 'class': 'article-hero', 'aria-hidden': 'true' });
			var $clone = $('<img>', {
			src: $img.attr('src'),
			srcset: $img.attr('srcset') \|\| '',
			sizes: '100vw',
			alt: '', // decorative hero; real alt stays in infobox
			loading: 'eager',
			decoding: 'async',
			fetchpriority: 'high'
			});

			$hero.append($clone);
			$hero.insertBefore($heading);

			// Hide the original infobox image on touch devices (via CSS class)
			$img.closest('table.infobox').addClass('infobox--image-promoted');
			});

	/* Quick facts: collapse infobox under first paragraph on touch devices */		/* Quick facts: collapse infobox under first paragraph on touch devices */
	mw.hook('wikipage.content').add(function ($content) {		mw.hook('wikipage.content').add(function ($content) {

Mvuijlst: Created page with "/* Quick facts: collapse infobox under first paragraph on touch devices */ mw.hook('wikipage.content').add(function ($content) { // Only on touch devices if (!window.matchMedia || !window.matchMedia('(pointer: coarse)').matches) return; var $ibox = $content.find('table.infobox').first(); if (!$ibox.length) return; // First real paragraph in article content var $firstP = $content .find('.mw-parser-output > p') .filter(function () { return $(this).tex..."

2025-10-02T18:28:00Z

Created page with "Quick facts: collapse infobox under first paragraph on touch devices: mw.hook('wikipage.content').add(function ($content) { // Only on touch devices if (!window.matchMedia || !window.matchMedia('(pointer: coarse)').matches) return; var $ibox = $content.find('table.infobox').first(); if (!$ibox.length) return; // First real paragraph in article content var $firstP = $content .find('.mw-parser-output > p') .filter(function () { return $(this).tex..."

New page

/* Quick facts: collapse infobox under first paragraph on touch devices */
mw.hook('wikipage.content').add(function ($content) {
// Only on touch devices
if (!window.matchMedia || !window.matchMedia('(pointer: coarse)').matches) return;

var $ibox = $content.find('table.infobox').first();
if (!$ibox.length) return;

// First real paragraph in article content
var $firstP = $content
.find('.mw-parser-output > p')
.filter(function () { return $(this).text().trim().length > 0; })
.first();
if (!$firstP.length) return;

// Build <details> wrapper
var $details = $('<details>', { 'class': 'quickfacts', 'aria-label': 'Quick facts' });
var $summary = $('<summary>', { 'class': 'quickfacts-summary', text: 'Quick facts' });

$details.append($summary);

// Mark infobox so CSS can remove float/width inside quickfacts
$ibox.addClass('infobox--in-quickfacts');

// Move the infobox inside the details (not cloning; avoids duplicate content for SR)
$details.append($ibox);

// Insert directly after the first paragraph
$details.insertAfter($firstP);
});