MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */

/* 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 + '.';
                }
            }
        } );
    } );
}() );