MediaWiki:Common.js

De DIOD Wiki
Version datée du 2 juillet 2026 à 18:40 par Babar (discussion | contributions) (Page créée avec « Tout JavaScript présent ici sera exécuté par tous les utilisateurs à chaque chargement de page. : $( function () { $( 'table.filtrable' ).each( function () { var $table = $( this ); var $th = $table.find( 'thead th' ); var selectCols = [ 3, 4 ]; // 3 = Attribution, 4 = Cible var $bar = $( '<div>' ).css( { margin: '0 0 .6em', display: 'flex', gap: '.5em', flexWrap: 'wrap' } ); var $search = $( '<input>' ).attr( { type: 'search', placeholder: '... »)
(diff) ← Version précédente | Version actuelle (diff) | Version suivante → (diff)
Aller à la navigation Aller à la recherche

Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

  • Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
  • Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
  •  Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
/* Tout JavaScript présent ici sera exécuté par tous les utilisateurs à chaque chargement de page. */

$( function () {
	$( 'table.filtrable' ).each( function () {
		var $table = $( this );
		var $th = $table.find( 'thead th' );
		var selectCols = [ 3, 4 ]; // 3 = Attribution, 4 = Cible

		var $bar = $( '<div>' ).css( { margin: '0 0 .6em', display: 'flex', gap: '.5em', flexWrap: 'wrap' } );
		var $search = $( '<input>' ).attr( { type: 'search', placeholder: 'Rechercher…' } )
			.css( { padding: '.3em .5em', minWidth: '16em' } );
		$bar.append( $search );

		var selects = {};
		selectCols.forEach( function ( c ) {
			var label = $th.eq( c ).text().trim(), vals = {};
			$table.find( 'tbody tr' ).each( function () {
				var v = $( this ).find( 'td' ).eq( c ).text().trim();
				if ( v ) { vals[ v ] = true; }
			} );
			var $sel = $( '<select>' ).css( { padding: '.3em' } );
			$sel.append( $( '<option>' ).val( '' ).text( label + ' : tous' ) );
			Object.keys( vals ).sort().forEach( function ( v ) {
				$sel.append( $( '<option>' ).val( v ).text( v ) );
			} );
			selects[ c ] = $sel;
			$bar.append( $sel );
		} );
		$table.before( $bar );

		function apply() {
			var q = $search.val().toLowerCase();
			$table.find( 'tbody tr' ).each( function () {
				var $row = $( this ), ok = $row.text().toLowerCase().indexOf( q ) !== -1;
				selectCols.forEach( function ( c ) {
					var want = selects[ c ].val();
					if ( ok && want ) { ok = $row.find( 'td' ).eq( c ).text().trim() === want; }
				} );
				$row.toggle( ok );
			} );
		}
		$search.on( 'input', apply );
		selectCols.forEach( function ( c ) { selects[ c ].on( 'change', apply ); } );
	} );
} );