|
|
| Line 1: |
Line 1: |
| /* Any JavaScript here will be loaded for all users on every page load. */
| | if ( !thead || !thead.rows.length || !tbody ) { |
| | | return; |
| /* Platform filter for the PC and Console Games table.
| | } |
| Adds a combo box in a second header row, under the Platform column.
| |
| Selecting a platform hides rows that do not include it, using a
| |
| "contains" match so multi-platform games appear under every platform. */
| |
| ( function () {
| |
| var counter = 0;
| |
| | |
| mw.hook( 'wikipage.content' ).add( function ( $content ) {
| |
| $content.find( 'table.platform-filter' ).each( function () {
| |
| var table = this;
| |
| if ( table.dataset.platformFilterReady ) {
| |
| return;
| |
| }
| |
| table.dataset.platformFilterReady = '1';
| |
| | |
| var thead = table.tHead;
| |
| var tbody = table.tBodies[ 0 ];
| |
| if ( !thead || !thead.rows.length || !tbody ) {
| |
| return;
| |
| }
| |
| | |
| // Find the Platform column by its header text.
| |
| var headerCells = thead.rows[ 0 ].cells;
| |
| var platformCol = -1;
| |
| for ( var i = 0; i < headerCells.length; i++ ) {
| |
| if ( /platform/i.test( headerCells[ i ].textContent ) ) {
| |
| platformCol = i;
| |
| break;
| |
| }
| |
| }
| |
| if ( platformCol === -1 ) {
| |
| return;
| |
| }
| |
| | |
| // Platform options. Edit this list to add or rename platforms.
| |
| // "label" appears in the dropdown; "match" is tested against
| |
| // the text of the Platform cell (case-insensitive).
| |
| var platforms = [
| |
| { label: 'Windows', match: /windows/i },
| |
| { label: 'PlayStation', match: /playstation/i },
| |
| { label: 'Xbox / Game Pass', match: /xbox|game ?pass/i },
| |
| { label: 'Nintendo Switch', match: /switch/i },
| |
| { label: 'iOS', match: /\bios\b/i },
| |
| { label: 'Android', match: /android/i },
| |
| { label: 'Web', match: /\bweb\b/i },
| |
| { label: 'Linux', match: /linux/i }
| |
| ];
| |
| | |
| var selectId = 'platform-filter-select-' + ( counter++ );
| |
| | |
| // Status line, announced to screen readers on change.
| |
| var status = document.createElement( 'div' );
| |
| status.className = 'platform-filter-status';
| |
| status.setAttribute( 'role', 'status' );
| |
| status.setAttribute( 'aria-live', 'polite' );
| |
| table.parentNode.insertBefore( status, table );
| |
| | |
| // Build the second header row holding the combo box.
| |
| var filterRow = thead.insertRow( -1 );
| |
| | |
| if ( platformCol > 0 ) {
| |
| var lead = document.createElement( 'td' );
| |
| lead.colSpan = platformCol;
| |
| filterRow.appendChild( lead );
| |
| }
| |
| | |
| var pcell = document.createElement( 'td' );
| |
| | |
| var label = document.createElement( 'label' );
| |
| label.setAttribute( 'for', selectId );
| |
| label.textContent = 'Filter by platform: ';
| |
| | |
| var select = document.createElement( 'select' );
| |
| select.id = selectId;
| |
| | |
| var optAll = document.createElement( 'option' );
| |
| optAll.value = '';
| |
| optAll.textContent = 'All platforms';
| |
| select.appendChild( optAll );
| |
| | |
| platforms.forEach( function ( p, idx ) {
| |
| var opt = document.createElement( 'option' );
| |
| opt.value = String( idx );
| |
| opt.textContent = p.label;
| |
| select.appendChild( opt );
| |
| } );
| |
| | |
| // Keep dropdown clicks from reaching the sort handler.
| |
| select.addEventListener( 'click', function ( e ) {
| |
| e.stopPropagation();
| |
| } );
| |
| select.addEventListener( 'change', function () {
| |
| applyFilter( this.value );
| |
| } );
| |
| | |
| pcell.appendChild( label );
| |
| pcell.appendChild( select );
| |
| filterRow.appendChild( pcell );
| |
| | |
| var trailing = headerCells.length - platformCol - 1;
| |
| if ( trailing > 0 ) {
| |
| var tail = document.createElement( 'td' );
| |
| tail.colSpan = trailing;
| |
| filterRow.appendChild( tail );
| |
| }
| |
| | |
| function applyFilter( value ) {
| |
| var rows = tbody.rows;
| |
| var total = rows.length;
| |
| var shown = 0;
| |
| var test = ( value === '' ) ? null : platforms[ Number( value ) ].match;
| |
| | |
| for ( var r = 0; r < total; r++ ) {
| |
| var row = rows[ r ];
| |
| var pc = row.cells[ platformCol ];
| |
| var textVal = pc ? pc.textContent : '';
| |
| if ( !test || test.test( textVal ) ) {
| |
| row.style.display = '';
| |
| shown++;
| |
| } else {
| |
| row.style.display = 'none';
| |
| }
| |
| }
| |
| | |
| if ( !test ) {
| |
| status.textContent = 'Showing all ' + total + ' games.';
| |
| } else {
| |
| status.textContent = 'Showing ' + shown + ' of ' + total +
| |
| ' games available on ' + platforms[ Number( value ) ].label + '.';
| |
| }
| |
| }
| |
| } );
| |
| } );
| |
| }() );
| |
