Candidate:Gadget-pickipedia-show.js - Revision history

Magent: v6: wrap poster image in anchor to File: page (uses same href as infobox)

2026-06-02T21:01:28Z

v6: wrap poster image in anchor to File: page (uses same href as infobox)

← Older revision		Revision as of 21:01, 2 June 2026
Line 125:		Line 125:

	// Upgrade the poster thumbnail: Template:Show renders [[File:foo\|220px]]		// Upgrade the poster thumbnail: Template:Show renders [[File:foo\|220px]]
	// which gives us /images/thumb/.../220px-foo.png. We ~~replace~~ the ~~220px~~		// which gives us /images/thumb/.../220px-foo.png inside an <a> linking
	// ~~segment with~~ 800px ~~to request~~ a ~~larger thumbnail~~; CSS ~~scales it to~~		// to the File: page. We grab that anchor's href so clicking the big
	// fit the card. ~~If the URL doesn't match the thumb pattern (e.g. SVG,~~		// hero poster takes the user to the File: page (where the upload
	// ~~or non-thumbnailed file), we just use the~~ original src.		// history, full-res download, and license info live). The thumbnail
			// URL gets upsized from /220px-/ to /800px- for a sharper render; CSS
			// scales it to fit the card. SVGs and other non-thumbnailed files
			// keep their original src.
	var imageHtml = '';		var imageHtml = '';
	if (imageImg) {		if (imageImg) {
	var bigSrc = imageImg.src.replace(/\/(\d+)px-/, '/800px-');		var bigSrc = imageImg.src.replace(/\/(\d+)px-/, '/800px-');
	~~imageHtml~~ = '~~<div class~~=~~"pp-image">~~<img src="' + bigSrc +		var imageAnchor = imageImg.closest('a');
	'" alt="' + escapeHtml(imageImg.alt \|\| '') + '">' +		var imageHref = imageAnchor ? imageAnchor.getAttribute('href') : '';
			var imgTag = '<img src="' + bigSrc + '" alt="' +
			escapeHtml(imageImg.alt \|\| '') + '">';
			var wrapped = imageHref
			? '<a class="pp-image-link" href="' + imageHref +
			'" title="View file details">' + imgTag + '</a>'
			: imgTag;
			imageHtml = '<div class="pp-image">' + wrapped +
	(posterArtist		(posterArtist
	? '<p class="pp-poster-credit"><span class="pp-poster-credit-label">Poster art by</span> ' +		? '<p class="pp-poster-credit"><span class="pp-poster-credit-label">Poster art by</span> ' +

Magent: v5: stop absorbing {{Ensemble}} — let it render in source position

2026-06-02T20:53:19Z

v5: stop absorbing {{Ensemble}} — let it render in source position

@@ Line 106: / Line 106: @@
    var venueHtml = venue ? '<p class="pp-venue">at ' + venue + '</p>' : '';
-   // Ensembles: find every Template:Ensemble block on the page. Each renders
+   // Ensembles ({{Ensemble|...}} blocks) are intentionally NOT absorbed into
-  // as a .ensemble-infobox with a colored header div (the band title) and
+   // the hero — they render in their source position on the page so the
-   // a body div with one musician per line (via Template:m, which inlines
+   // wikitext author controls placement. The CSS in this gadget restyles
-  // a tiny instrument icon next to the linked musician name).
+   // the existing .ensemble-infobox to fit the takeover aesthetic (right-
-  //
+   // floating, paper-themed, mono-caps title, instrument icons inline).
    var ensembleHtml = '';
    var metaBits = [];
@@ Line 201: / Line 169: @@
      '<h1 class="pp-title">' + titleHtml + '</h1>' +
      venueHtml +
      metaHtml +
      imageHtml +

Magent: v4: date kicker; preserve ensemble HTML (icons + links); two-tier ensemble layout (band title + member list)

2026-06-02T20:43:03Z

v4: date kicker; preserve ensemble HTML (icons + links); two-tier ensemble layout (band title + member list)

← Older revision		Revision as of 20:43, 2 June 2026
Line 52:		Line 52:
	var artists = fieldValue('Artists');		var artists = fieldValue('Artists');
	var venue = fieldValue('Venue');		var venue = fieldValue('Venue');
			var date = fieldValue('Date');
	var showtime = fieldValue('Showtime');		var showtime = fieldValue('Showtime');
	var doors = fieldValue('Doors');		var doors = fieldValue('Doors');
Line 86:		Line 87:
	return 'Block ' + formatted;		return 'Block ' + formatted;
	}		}

			// Big date kicker (human-readable) on its own line, above the smaller
			// technical kicker with block/doors/show.
			var dateKickerHtml = date
			? '<div class="pp-date-kicker">' + escapeHtml(date) + '</div>'
			: '';

	var kickerBits = [];		var kickerBits = [];
Line 101:		Line 108:
	// Ensembles: find every Template:Ensemble block on the page. Each renders		// Ensembles: find every Template:Ensemble block on the page. Each renders
	// as a .ensemble-infobox with a colored header div (the band title) and		// as a .ensemble-infobox with a colored header div (the band title) and
	// a body div with one musician per line (via Template:m). ~~Multiple~~		// a body div with one musician per line (via Template:m, which inlines
	// ~~ensembles per page are common — headliner + opener~~(s) ~~+ sit~~-~~ins~~.		// a tiny instrument icon next to the linked musician name).
			//
			// We split on <br> and keep HTML chunks intact so the instrument icons
			// and User: links survive the absorb. Each ensemble renders as two
			// tiers: the band title on its own line (mono caps, accent), then the
			// member list below in serif italic with rule-dot separators.
	var ensembleBlocks = content.querySelectorAll('.ensemble-infobox');		var ensembleBlocks = content.querySelectorAll('.ensemble-infobox');
	var ensembleHtml = '';		var ensembleHtml = '';
	ensembleBlocks.forEach(function (eb) {		ensembleBlocks.forEach(function (eb) {
	~~// Header div carries the band name (or default "Ensemble").~~
	var bandName = '';		var bandName = '';
	var headerEl = eb.querySelector('div:first-child');		var headerEl = eb.querySelector('div:first-child');
	if (headerEl) bandName = headerEl.textContent.trim();		if (headerEl) bandName = headerEl.textContent.trim();

	~~// Member list: the second-child div has musicians separated by <br>.~~
	var listEl = eb.querySelector('div:nth-child(2)');		var listEl = eb.querySelector('div:nth-child(2)');
	if (!listEl) return;		if (!listEl) return;
	~~// Each "row" is text between <br>s; pull text content and split.~~
	var ~~raw~~ = listEl.innerHTML		var members = listEl.innerHTML
	.split(/<br\s*\/?>/i)		.split(/<br\s*\/?>/i)
	.map(function (chunk) {		.map(function (chunk) { return chunk.trim(); })
	~~var tmp = document.createElement('div');~~
	~~tmp.innerHTML =~~ chunk;
	~~return tmp.textContent~~.trim();
	})
	.filter(Boolean);		.filter(Boolean);
	if (!~~raw~~.length) return;		if (!members.length) return;

	var ~~labelHtml~~ = bandName && bandName.toLowerCase() !== 'ensemble'		var titleText = (bandName && bandName.toLowerCase() !== 'ensemble')
	? '<~~span~~ class="pp-ensemble~~-label~~">' + ~~escapeHtml(bandName) + '</span>'~~		? bandName : 'Featuring';
	: '<~~span~~ class="pp-ensemble-~~label~~">~~Featuring~~</~~span~~>';
	~~ensembleHtml +=~~ '<p class="pp-ensemble">~~' + labelHtml + '~~ ' +		ensembleHtml +=
	~~raw.map(escapeHtml)~~.join(' <span class="pp-sep">·</span> ') + '</p>';		'<div class="pp-ensemble">' +
			'<p class="pp-ensemble-title">' + escapeHtml(titleText) + '</p>' +
			'<p class="pp-ensemble-members">' +
			members.join(' <span class="pp-sep">·</span> ') +
			'</p>' +
			'</div>';

	eb.classList.add('is-absorbed');		eb.classList.add('is-absorbed');
Line 186:		Line 197:
	hero.innerHTML =		hero.innerHTML =
	statusHtml +		statusHtml +
			dateKickerHtml +
	kickerHtml +		kickerHtml +
	'<h1 class="pp-title">' + titleHtml + '</h1>' +		'<h1 class="pp-title">' + titleHtml + '</h1>' +

Magent: v3: absorb {{Ensemble|...}} blocks (not ensemble= field); upgrade poster thumb to 800px; render poster_artist credit

2026-06-02T20:18:16Z

v3: absorb {{Ensemble|...}} blocks (not ensemble= field); upgrade poster thumb to 800px; render poster_artist credit

← Older revision		Revision as of 20:18, 2 June 2026
Line 50:		Line 50:
	}		}

	var artists = fieldValue('Artists');		var artists = fieldValue('Artists');
	var venue = fieldValue('Venue');		var venue = fieldValue('Venue');
	var showtime = fieldValue('Showtime');		var showtime = fieldValue('Showtime');
	var doors = fieldValue('Doors');		var doors = fieldValue('Doors');
	var show = fieldValue('Show');		var show = fieldValue('Show');
	var ~~ensemble~~ = fieldValue('~~Ensemble~~');		var posterArtist = fieldValue('Poster art');
	var tickets = fieldValue('Tickets');		var tickets = fieldValue('Tickets');
	var price = fieldValue('Price');		var price = fieldValue('Price');
	var ages = fieldValue('Ages');		var ages = fieldValue('Ages');

	var imageImg = infobox.querySelector('img');		var imageImg = infobox.querySelector('img');
Line 99:		Line 99:
	var venueHtml = venue ? '<p class="pp-venue">at ' + venue + '</p>' : '';		var venueHtml = venue ? '<p class="pp-venue">at ' + venue + '</p>' : '';

	// ~~Ensemble~~: ~~comma-separated list from~~ Template:~~Show~~. ~~Split on commas to~~		// Ensembles: find every Template:Ensemble block on the page. Each renders
	// ~~render each name~~ with ~~an interpunct separator, matching~~ the ~~kicker style~~.		// as a .ensemble-infobox with a colored header div (the band title) and
			// a body div with one musician per line (via Template:m). Multiple
			// ensembles per page are common — headliner + opener(s) + sit-ins.
			var ensembleBlocks = content.querySelectorAll('.ensemble-infobox');
	var ensembleHtml = '';		var ensembleHtml = '';
	if (~~ensemble~~) {		ensembleBlocks.forEach(function (eb) {
	var ~~names~~ = ~~ensemble~~.split(/\s,\s/).filter(Boolean);		// Header div carries the band name (or default "Ensemble").
	if (~~names~~.length) {		var bandName = '';
	~~ensembleHtml =~~ '<p class="pp-ensemble"><span class="pp-ensemble-label">Featuring</span> ' +		var headerEl = eb.querySelector('div:first-child');
	~~names~~.join(' <span class="pp-sep">·</span> ') + '</p>';		if (headerEl) bandName = headerEl.textContent.trim();
	}
	}		// Member list: the second-child div has musicians separated by <br>.
			var listEl = eb.querySelector('div:nth-child(2)');
			if (!listEl) return;
			// Each "row" is text between <br>s; pull text content and split.
			var raw = listEl.innerHTML
			.split(/<br\s*\/?>/i)
			.map(function (chunk) {
			var tmp = document.createElement('div');
			tmp.innerHTML = chunk;
			return tmp.textContent.trim();
			})
			.filter(Boolean);
			if (!raw.length) return;

			var labelHtml = bandName && bandName.toLowerCase() !== 'ensemble'
			? '<span class="pp-ensemble-label">' + escapeHtml(bandName) + '</span>'
			: '<span class="pp-ensemble-label">Featuring</span>';
			ensembleHtml += '<p class="pp-ensemble">' + labelHtml + ' ' +
			raw.map(escapeHtml).join(' <span class="pp-sep">·</span> ') + '</p>';

			eb.classList.add('is-absorbed');
			});

	var metaBits = [];		var metaBits = [];
Line 121:		Line 145:
	: '';		: '';

			// Upgrade the poster thumbnail: Template:Show renders [[File:foo\|220px]]
			// which gives us /images/thumb/.../220px-foo.png. We replace the 220px
			// segment with 800px to request a larger thumbnail; CSS scales it to
			// fit the card. If the URL doesn't match the thumb pattern (e.g. SVG,
			// or non-thumbnailed file), we just use the original src.
	var imageHtml = '';		var imageHtml = '';
	if (imageImg) {		if (imageImg) {
	imageHtml = '<div class="pp-image"><img src="' + ~~imageImg.src~~ +		var bigSrc = imageImg.src.replace(/\/(\d+)px-/, '/800px-');
	'" alt="' + escapeHtml(imageImg.alt \|\| '') + '"></div>';		imageHtml = '<div class="pp-image"><img src="' + bigSrc +
			'" alt="' + escapeHtml(imageImg.alt \|\| '') + '">' +
			(posterArtist
			? '<p class="pp-poster-credit"><span class="pp-poster-credit-label">Poster art by</span> ' +
			escapeHtml(posterArtist) + '</p>'
			: '') +
			'</div>';
	}		}

Magent: Full-takeover mode: insert corner logo + slim topbar (edit/history/talk/← All shows)

2026-06-02T20:05:54Z

Full-takeover mode: insert corner logo + slim topbar (edit/history/talk/← All shows)

@@ Line 16: / Line 16: @@
    var nsNumber = mw.config.get('wgNamespaceNumber');
    var title    = mw.config.get('wgTitle') || '';
    var action   = mw.config.get('wgAction') || 'view';
@@ Line 161: / Line 162: @@
    infobox.classList.add('is-absorbed');
    body.classList.add('has-show-hero');
    function escapeHtml(s) {

Magent: Surface Doors/Show/Ensemble in the poster hero

2026-06-02T19:47:34Z

Surface Doors/Show/Ensemble in the poster hero

← Older revision		Revision as of 19:47, 2 June 2026
Line 52:		Line 52:
	var venue = fieldValue('Venue');		var venue = fieldValue('Venue');
	var showtime = fieldValue('Showtime');		var showtime = fieldValue('Showtime');
			var doors = fieldValue('Doors');
			var show = fieldValue('Show');
			var ensemble = fieldValue('Ensemble');
	var tickets = fieldValue('Tickets');		var tickets = fieldValue('Tickets');
	var price = fieldValue('Price');		var price = fieldValue('Price');
Line 86:		Line 89:
	var showtimeHtml = formatShowtime(showtime);		var showtimeHtml = formatShowtime(showtime);
	if (showtimeHtml) kickerBits.push(showtimeHtml);		if (showtimeHtml) kickerBits.push(showtimeHtml);
			if (doors) kickerBits.push('Doors ' + doors);
			if (show) kickerBits.push('Show ' + show);

	var kickerHtml = kickerBits.length		var kickerHtml = kickerBits.length
Line 92:		Line 97:

	var venueHtml = venue ? '<p class="pp-venue">at ' + venue + '</p>' : '';		var venueHtml = venue ? '<p class="pp-venue">at ' + venue + '</p>' : '';

			// Ensemble: comma-separated list from Template:Show. Split on commas to
			// render each name with an interpunct separator, matching the kicker style.
			var ensembleHtml = '';
			if (ensemble) {
			var names = ensemble.split(/\s,\s/).filter(Boolean);
			if (names.length) {
			ensembleHtml = '<p class="pp-ensemble"><span class="pp-ensemble-label">Featuring</span> ' +
			names.join(' <span class="pp-sep">·</span> ') + '</p>';
			}
			}

	var metaBits = [];		var metaBits = [];
Line 137:		Line 153:
	'<h1 class="pp-title">' + titleHtml + '</h1>' +		'<h1 class="pp-title">' + titleHtml + '</h1>' +
	venueHtml +		venueHtml +
			ensembleHtml +
	metaHtml +		metaHtml +
	imageHtml +		imageHtml +

Magent: Show: page hero builder extracted into its own gadget (not Common.js)

2026-06-02T19:13:28Z

Show: page hero builder extracted into its own gadget (not Common.js)

New page

// |status=proposed -- bot-staged; remove this line when promoting.
/**
* Pickipedia — Show: page hero.
*
* For mainspace pages whose title starts with "Show:" (the legacy
* mainspace convention used pre-namespace), adds .pickipedia-show
* to body and absorbs Template:Show's infobox into a poster-style
* hero. If the page does not use Template:Show only the body class
* is added — the setlist typography in Common.css still applies.
*/
(function () {
'use strict';

if (typeof mw === 'undefined' || !mw.config) return;

var nsNumber = mw.config.get('wgNamespaceNumber');
var title = mw.config.get('wgTitle') || '';
var action = mw.config.get('wgAction') || 'view';

if (nsNumber !== 0) return;
if (action !== 'view') return;
if (title.indexOf('Show:') !== 0) return;

var body = document.body;
body.classList.add('pickipedia-show');

var content = document.querySelector('.mw-parser-output');
if (!content) return;

var infobox = content.querySelector('.show-infobox');
if (!infobox) return; // Bare show page — body class only.

// ---------- Pull fields out of the existing infobox ----------
// Template:Show emits rows of <div><strong>Label:</strong> value</div>
// plus a top banner with "Artists at Venue" and optional image.
function fieldValue(label) {
var rows = infobox.querySelectorAll('div');
for (var i = 0; i < rows.length; i++) {
var s = rows[i].querySelector('strong');
if (!s) continue;
var labelText = s.textContent.replace(/[:\s]*$/, '').trim();
if (labelText !== label) continue;
var clone = rows[i].cloneNode(true);
var strong = clone.querySelector('strong');
if (strong) strong.remove();
return clone.innerHTML.trim().replace(/^[\s:]+/, '');
}
return '';
}

var artists = fieldValue('Artists');
var venue = fieldValue('Venue');
var showtime = fieldValue('Showtime');
var tickets = fieldValue('Tickets');
var price = fieldValue('Price');
var ages = fieldValue('Ages');

var imageImg = infobox.querySelector('img');

var status = '';
if (infobox.classList.contains('show-verified')) status = 'verified';
else if (infobox.classList.contains('bot-proposal')) status = 'proposed';
else if (infobox.classList.contains('show-unverified')) status = 'unverified';

// ---------- Build the poster hero ----------
// Showtime is rendered by Template:Show as
// [https://etherscan.io/block/N N] — pull the block number out and
// format it with commas so the kicker reads "BLOCK 24,144,194".
function formatShowtime(htmlIn) {
if (!htmlIn) return '';
var tmp = document.createElement('div');
tmp.innerHTML = htmlIn;
var anchor = tmp.querySelector('a');
var blockNum = (anchor ? anchor.textContent : tmp.textContent).trim();
var asInt = parseInt(blockNum.replace(/[^\d]/g, ''), 10);
if (isNaN(asInt)) return blockNum;
var formatted = asInt.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
var href = anchor ? anchor.href : '';
if (href) {
return '<a href="' + href + '" target="_blank" rel="noopener">Block ' + formatted + '</a>';
}
return 'Block ' + formatted;
}

var kickerBits = [];
var showtimeHtml = formatShowtime(showtime);
if (showtimeHtml) kickerBits.push(showtimeHtml);

var kickerHtml = kickerBits.length
? '<div class="pp-kicker">' + kickerBits.join('<span class="pp-sep">·</span>') + '</div>'
: '';

var venueHtml = venue ? '<p class="pp-venue">at ' + venue + '</p>' : '';

var metaBits = [];
if (price)
metaBits.push('<span><span class="pp-meta-label">Price</span><span class="pp-meta-value">$' +
escapeHtml(price.replace(/^\$/, '')) + '</span></span>');
if (ages)
metaBits.push('<span><span class="pp-meta-label">Ages</span><span class="pp-meta-value">' +
ages + '</span></span>');
var metaHtml = metaBits.length
? '<div class="pp-meta">' + metaBits.join('') + '</div>'
: '';

var imageHtml = '';
if (imageImg) {
imageHtml = '<div class="pp-image"><img src="' + imageImg.src +
'" alt="' + escapeHtml(imageImg.alt || '') + '"></div>';
}

// Tickets field is an anchor; surface its href as a poster action.
var actionBits = [];
if (tickets) {
var tmp = document.createElement('div'); tmp.innerHTML = tickets;
var ticketAnchor = tmp.querySelector('a');
if (ticketAnchor && ticketAnchor.href) {
actionBits.push('<a href="' + ticketAnchor.href +
'" target="_blank" rel="noopener">Tickets</a>');
}
}
var actionsHtml = actionBits.length
? '<div class="pp-actions">' + actionBits.join('') + '</div>'
: '';

var statusHtml = status
? '<div class="pp-status is-' + status + '">' + status + '</div>'
: '';

var titleHtml = artists || escapeHtml(title.replace(/^Show:\s*/, ''));

var hero = document.createElement('header');
hero.className = 'show-poster';
hero.innerHTML =
statusHtml +
kickerHtml +
'<h1 class="pp-title">' + titleHtml + '</h1>' +
venueHtml +
metaHtml +
imageHtml +
actionsHtml;

content.insertBefore(hero, content.firstChild);
infobox.classList.add('is-absorbed');
body.classList.add('has-show-hero');

function escapeHtml(s) {
return String(s == null ? '' : s)
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
}
}());