MediaWiki:Gadget-tutorials.js - Revision history

Anthony at 02:48, 2 April 2026

2026-04-02T02:48:46Z

← Older revision		Revision as of 02:48, 2 April 2026
Line 252:		Line 252:
	'<div class="tutorial-card-wrap">',		'<div class="tutorial-card-wrap">',
	'<div class="tutorial-card">',		'<div class="tutorial-card">',
	'<div class="tutorial-card-image">', img, '</div>',		'<div class="tutorial-card-inner">',
	'<div class="tutorial-card-body">',		'<div class="tutorial-card-front">',
	'<div class="tutorial-card-title"><a href="', url, '">', esc( name ), '</a></div>',		'<div class="tutorial-card-image">', img, '</div>',
	tags ? '<div class="tutorial-card-meta">' + tags + '</div>' : '',		'<div class="tutorial-card-body">',
	'<div class="tutorial-card-stats">',		'<div class="tutorial-card-title"><a href="', url, '">', esc( name ), '</a></div>',
	'<span class="tutorial-card-contributors">~~\u2014~~</span>',		tags ? '<div class="tutorial-card-meta">' + tags + '</div>' : '',
	'<span class="tutorial-card-~~updated~~">~~\u2014~~</span>',		'<div class="tutorial-card-stats">',
			'<span class="tutorial-card-contributors">—</span>',
			'<span class="tutorial-card-updated">—</span>',
			'<button class="js-flip-btn tutorial-card-flip-btn">Read more</button>',
			'</div>',
			'</div>',
			'</div>',
			'<div class="tutorial-card-back">',
			'<div class="tutorial-card-back-header">',
			'<span class="tutorial-card-back-title">About</span>',
			'<button class="js-flip-btn tutorial-card-flip-btn">Close</button>',
			'</div>',
			'<div class="tutorial-card-back-content">',
			row.description ? esc( row.description ) : 'No description provided.',
			'</div>',
	'</div>',		'</div>',
	'</div>',		'</div>',
	~~row.description~~
	~~? '<div class="tutorial-card-description">' + esc( row.description ) + '</div>'~~
	~~: '',~~
	'</div>',		'</div>',
	'</div>'		'</div>'

Anthony at 02:36, 2 April 2026

2026-04-02T02:36:48Z

← Older revision		Revision as of 02:36, 2 April 2026
Line 104:		Line 104:
	parts.push(		parts.push(
	"( name LIKE '%" + q + "%'" +		"( name LIKE '%" + q + "%'" +
	" OR description ~~LIKE '%" + q + "%'" +~~		" OR description LIKE '%" + q + "%' )"
	~~" OR tags~~ LIKE '%" + q + "%' )"
	);		);
	}		}

Anthony at 01:32, 2 April 2026

2026-04-02T01:32:04Z

Show changes

Anthony at 00:42, 2 April 2026

2026-04-02T00:42:43Z

Show changes

Anthony: Removed protection from "MediaWiki:Gadget-tutorials.js"

2026-03-14T05:07:04Z

Removed protection from "MediaWiki:Gadget-tutorials.js"

New page

/* =============================================================================
Gadget-tutorials.js — collapse/expand + per-section search + hub metadata
============================================================================= */
( function () {
if ( mw.config.get( 'wgPageName' ) !== 'Tutorials' ) return;

$( function () {
$( '.tutorial-section' ).each( function () {
var $section = $( this );
var $header = $section.find( '.tutorial-section-header' );
var $grid = $section.find( '.tutorial-section-grid' );
var $count = $section.find( '.tutorial-section-count' );
var $wrap = $section.find( '.tutorial-section-search-wrap' );
var $cards = $grid.find( '.tutorial-card-wrap' );
var total = $cards.length;

$count.text( total + ( total === 1 ? ' tutorial' : ' tutorials' ) );

// Per-section search
var $search = $( '<input>' ).attr( {
type : 'text',
placeholder : 'Filter...',
'class' : 'tutorial-section-search'
} );
$wrap.append( $search );

$search.on( 'input', function ( e ) {
e.stopPropagation();
var q = $( this ).val().toLowerCase().trim();
var visible = 0;
$cards.each( function () {
var $c = $( this );
var hay = [
$c.data( 'title' ) || '',
$c.data( 'tags' ) || '',
$c.data( 'difficulty' ) || ''
].join( ' ' ).toLowerCase();
var show = !q || hay.indexOf( q ) !== -1;
$c.toggle( show );
if ( show ) visible++;
} );
$count.text( ( q ? visible + ' / ' : '' ) + total + ( total === 1 ? ' tutorial' : ' tutorials' ) );
$section.find( '.tutorial-section-empty' ).toggle( visible === 0 && total > 0 );
} );

$search.on( 'click', function ( e ) { e.stopPropagation(); } );

$header.on( 'click', function ( e ) {
if ( $( e.target ).closest( '.tutorial-section-more, .tutorial-section-search-wrap' ).length ) return;
var isOpen = $section.hasClass( 'is-open' );
$( '.tutorial-section.is-open' ).each( function () {
$( this ).find( '.tutorial-section-grid' ).slideUp( 180 );
$( this ).removeClass( 'is-open' );
} );
if ( !isOpen ) {
$grid.slideDown( 180 );
$section.addClass( 'is-open' );
}
} );
} );

// Hub metadata
mw.loader.using( 'mediawiki.api' ).then( function () {
var api = new mw.Api();
api.get( {
action : 'query',
list : 'categorymembers',
cmtitle : 'Category:Tutorials',
cmsort : 'timestamp',
cmdir : 'desc',
cmlimit : 1,
cmtype : 'page',
cmprop : 'ids|title|timestamp',
format : 'json'
} ).done( function ( data ) {
var members = data.query && data.query.categorymembers;
if ( !members || !members.length ) return;
var name = members[0].title.replace( /^.*\//, '' );
var date = members[0].timestamp
? new Date( members[0].timestamp ).toLocaleDateString( 'en-GB', { day: 'numeric', month: 'short', year: 'numeric' } )
: '—';
var str = name + ' — ' + date;
$( '#hub-meta-last-submission' ).text( str );
$( '#hub-meta-last-edit' ).text( str );
} );
} );

} );
}() );