MediaWiki:Mobile.js: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Mobile.js (view source)

Revision as of 20:39, 26 August 2025

3,051 bytes added ,  20:39, 26 August 2025
no edit summary
No edit summary
No edit summary
Line 1: Line 1:
/* All JavaScript here will be loaded for users of the mobile site */
/* All JavaScript here will be loaded for users of the mobile site */


// Define table sorting function outside the main block
// Simple custom table sorting that doesn't rely on MediaWiki modules
function initMobileSorting() {
function initMobileSorting() {
     console.log('Initializing mobile sorting...');
     console.log('Initializing simple mobile sorting...');
    console.log('Current skin:', mw.config.get('skin'));
      
      
     if (mw.config.get('skin') === 'minerva') {
     // Check if we're on mobile (Minerva skin or small screen)
         console.log('Minerva detected, looking for tables...');
    var isMobile = (typeof mw !== 'undefined' && mw.config && mw.config.get('skin') === 'minerva') ||
                  window.matchMedia("(max-width: 768px)").matches;
   
    if (isMobile) {
         console.log('Mobile detected, applying custom table sorting');
          
          
         var tables = document.querySelectorAll('.wikitable, table.sortable');
         var tables = document.querySelectorAll('.wikitable, table.sortable');
         console.log('Found tables:', tables.length);
         console.log('Found tables:', tables.length);
          
          
         if (tables.length > 0) {
         $(tables).each(function(index, table) {
            if (typeof mw !== 'undefined' && mw.loader) {
            var $table = $(table);
                 mw.loader.using('jquery.tablesorter').then(function() {
            var $headers = $table.find('th');
                     console.log('Tablesorter module loaded');
           
            if ($headers.length > 0) {
                console.log('Processing table', index, 'with', $headers.length, 'headers');
               
                // Style headers to look clickable
                $headers.css({
                    'cursor': 'pointer',
                    'user-select': 'none',
                    'background-color': '#f8f9fa',
                    'border-bottom': '2px solid #a2a9b1'
                });
               
                // Add sort indicators
                $headers.each(function() {
                    var $header = $(this);
                    if (!$header.find('.sort-arrow').length) {
                        $header.append('<span class="sort-arrow" style="margin-left: 5px; color: #666;">⇅</span>');
                    }
                });
               
                 // Add click handlers
                $headers.off('click.tablesort').on('click.tablesort', function() {
                    var $header = $(this);
                    var columnIndex = $header.index();
                    var $rows = $table.find('tbody tr');
                   
                    // If no tbody, get all rows except the header row
                    if ($rows.length === 0) {
                        $rows = $table.find('tr:not(:first)');
                    }
                   
                    if ($rows.length === 0) return;
                   
                     console.log('Sorting column', columnIndex, 'with', $rows.length, 'rows');
                   
                    // Determine sort direction
                    var isAscending = !$header.hasClass('sort-desc');
                   
                    // Reset all headers
                    $headers.removeClass('sort-asc sort-desc');
                    $headers.find('.sort-arrow').text('⇅').css('color', '#666');
                   
                    // Mark current header
                    $header.addClass(isAscending ? 'sort-asc' : 'sort-desc');
                    $header.find('.sort-arrow').text(isAscending ? '⇑' : '⇓').css('color', '#000');
                      
                      
                     $(tables).each(function(index, table) {
                     // Sort rows
                         var $table = $(table);
                    var sortedRows = Array.from($rows).sort(function(a, b) {
                         console.log('Processing table', index);
                         var aText = $(a).find('td').eq(columnIndex).text().trim();
                        var bText = $(b).find('td').eq(columnIndex).text().trim();
                          
                        // Try numeric comparison first
                        var aNum = parseFloat(aText.replace(/[,$%]/g, ''));
                        var bNum = parseFloat(bText.replace(/[,$%]/g, ''));
                          
                          
                         if (!$table.hasClass('sortable')) {
                         if (!isNaN(aNum) && !isNaN(bNum)) {
                             $table.addClass('sortable');
                             return isAscending ? aNum - bNum : bNum - aNum;
                         }
                         }
                          
                          
                         try {
                         // String comparison
                            $table.tablesorter();
                        if (isAscending) {
                             console.log('Tablesorter applied to table', index);
                             return aText.localeCompare(bText);
                         } catch (e) {
                         } else {
                             console.error('Error applying tablesorter:', e);
                             return bText.localeCompare(aText);
                         }
                         }
                     });
                     });
                }).catch(function(e) {
                   
                     console.error('Failed to load tablesorter:', e);
                    // Re-append sorted rows
                    var $tbody = $table.find('tbody');
                    if ($tbody.length > 0) {
                        $tbody.empty().append(sortedRows);
                    } else {
                        // If no tbody, append after first row (header)
                        $table.find('tr:not(:first)').remove();
                        $table.append(sortedRows);
                    }
                   
                     console.log('Sorting completed');
                 });
                 });
               
                console.log('Table', index, 'sorting initialized');
             }
             }
         }
         });
     }
     }
}
}
Retrieved from "https://ekatrastaging.mbdev.mbstaging.net/wiki/Special:MobileDiff/89568"

Navigation menu