MediaWiki:Mobile.js

/* All JavaScript here will be loaded for users of the mobile site */

// Simple custom table sorting that doesn't rely on MediaWiki modules
function initMobileSorting() {
    console.log('Initializing simple mobile sorting...');
    
    // Check if we're on mobile (Minerva skin or small screen)
    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');
        console.log('Found tables:', tables.length);
        
        $(tables).each(function(index, table) {
            var $table = $(table);
            var $headers = $table.find('th');
            
            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>');
                    }
                });
                
                // Use event delegation to ensure handlers persist after DOM changes
                $table.off('click.tablesort', 'th').on('click.tablesort', 'th', function() {
                    var $header = $(this);
                    var $currentTable = $header.closest('table');
                    var columnIndex = $header.index();
                    
                    // Get all headers from the current table
                    var $allHeaders = $currentTable.find('th');
                    
                    // Get rows to sort
                    var $rows = $currentTable.find('tbody tr');
                    if ($rows.length === 0) {
                        $rows = $currentTable.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 in this table
                    $allHeaders.removeClass('sort-asc sort-desc');
                    $allHeaders.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');
                    
                    // Sort rows array
                    var rowsArray = Array.from($rows);
                    rowsArray.sort(function(a, b) {
                        var $aCells = $(a).find('td');
                        var $bCells = $(b).find('td');
                        
                        if ($aCells.length <= columnIndex || $bCells.length <= columnIndex) {
                            return 0;
                        }
                        
                        var aText = $aCells.eq(columnIndex).text().trim();
                        var bText = $bCells.eq(columnIndex).text().trim();
                        
                        // Try numeric comparison first
                        var aNum = parseFloat(aText.replace(/[,$%]/g, ''));
                        var bNum = parseFloat(bText.replace(/[,$%]/g, ''));
                        
                        if (!isNaN(aNum) && !isNaN(bNum)) {
                            return isAscending ? aNum - bNum : bNum - aNum;
                        }
                        
                        // String comparison
                        if (isAscending) {
                            return aText.localeCompare(bText);
                        } else {
                            return bText.localeCompare(aText);
                        }
                    });
                    
                    // Re-append sorted rows while preserving structure
                    var $tbody = $currentTable.find('tbody');
                    if ($tbody.length > 0) {
                        $tbody.empty();
                        $(rowsArray).each(function() {
                            $tbody.append(this);
                        });
                    } else {
                        // Remove existing data rows but keep header
                        $currentTable.find('tr:not(:first)').remove();
                        // Append sorted rows
                        $(rowsArray).each(function() {
                            $currentTable.append(this);
                        });
                    }
                    
                    console.log('Sorting completed - table should remain sortable');
                });
                
                console.log('Table', index, 'sorting initialized');
            }
        });
    }
}

// Main initialization function
$( function(){
    
    // Mobile/Desktop view switching logic
    if (window.matchMedia("(max-width: 768px)").matches) {
        if( mw.config.get("skin") !== "minerva" ){
            const currWikiUrl = new URL(window.location.href);
            currWikiUrl.searchParams.set('mobileaction', 'toggle_view_mobile');
            
            window.location.replace(currWikiUrl);
        }
        $("#footer-places-desktop-toggle").remove();
    } else {
        if(  mw.config.get("skin") !== "vector" ){
            const currWikiUrl = new URL(window.location.href);
            currWikiUrl.searchParams.set('mobileaction', 'toggle_view_desktop');
            window.location.replace(currWikiUrl);
        }
    }
    
    // Poem formatting code
    var countPoem2 = $(".Poem2-Ekatra");
    
    if( countPoem2.length > 0 ){
        var Poem2lenghtArray = [];
        for (var k = 0; k <= countPoem2.length; k++) {
           Poem2lenghtArray.push(k);
        }
        
        Poem2lenghtArray.forEach(function(j) {
            var poemElement = $(".Poem2-Ekatra").eq(j);
                        
            if( poemElement.length ){
                var poemText = poemElement.html();
                var poemArray = poemText.split("\n");
                
                poemElement.text("");
            
                // First measure
                poemArray.forEach( function(i) {
                    poemElement.append( '<p style="text-indent: 2em;">' + i + '</p>' );
                });
                
                // Second measure
                poemElement.children('p').each(function () {
                    $(this).css('text-indent', '2em');
                });
            }
        });
    }
    
    // Initialize table sorting
    initMobileSorting();
    
    // Also reinitialize when new content loads (like after editing)
    mw.hook('wikipage.content').add(function() {
        initMobileSorting();
    });
    
});