MediaWiki:Common.js: Difference between revisions

From Freegle Wiki
Jump to navigationJump to search
Created page with '→Any JavaScript here will be loaded for all users on every page load.:   /** Collapsible tables ********************************************************* * * Description…'
 
Update Common.js for MediaWiki 1.43 compatibility - replace deprecated hasClass/addHandler functions with modern mw-collapsible
 
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */


 
/** Collapsible tables *********************************************************
/** Collapsible tables *********************************************************
  *
  *
  *  Description: Allows tables to be collapsed, showing only the header. See
  *  Description: Modern collapsible tables using MediaWiki's built-in functionality
  *               [[Wikipedia:NavFrame]].
*  Updated for MediaWiki 1.43+ compatibility
  *  Maintainers: [[User:R. Koot]]
*
*  Note: MediaWiki 1.43 provides native collapsible table support via the
*  "mw-collapsible" class. The old custom implementation has been removed
  * as it relied on deprecated functions (hasClass, addHandler, killEvt).
  *
  *  To use collapsible tables, simply add the "mw-collapsible" class to your table:
*  {| class="wikitable mw-collapsible"
*
*  For tables that start collapsed, add "mw-collapsed":
*  {| class="wikitable mw-collapsible mw-collapsed"
  */
  */
 
 
var autoCollapse = 2;
// Initialize collapsible elements on page load
var collapseCaption = "hide";
// MediaWiki's jquery.makeCollapsible module handles this automatically
var expandCaption = "show";
// for elements with the mw-collapsible class
 
mw.hook( 'wikipage.content' ).add( function( $content ) {
function collapseTable( tableIndex )
     // Backwards compatibility: convert old "collapsible" class to "mw-collapsible"
{
    $content.find( 'table.collapsible' ).each( function() {
    var Button = document.getElementById( "collapseButton" + tableIndex );
        var $table = $( this );
    var Table = document.getElementById( "collapsibleTable" + tableIndex );
 
 
        // Add the modern class
    if ( !Table || !Button ) {
        $table.addClass( 'mw-collapsible' );
        return false;
 
    }
        // If it had the old "collapsed" class, use the modern equivalent
 
        if ( $table.hasClass( 'collapsed' ) ) {
    var Rows = Table.rows;
             $table.addClass( 'mw-collapsed' );
 
    if ( Button.firstChild.data == collapseCaption ) {
        for ( var i = 1; i < Rows.length; i++ ) {
            Rows[i].style.display = "none";
        }
        Button.firstChild.data = expandCaption;
    } else {
        for ( var i = 1; i < Rows.length; i++ ) {
            Rows[i].style.display = Rows[0].style.display;
        }
        Button.firstChild.data = collapseCaption;
    }
}
 
function createCollapseButtons()
{
     var tableIndex = 0;
    var NavigationBoxes = new Object();
    var Tables = document.getElementsByTagName( "table" );
 
    for ( var i = 0; i < Tables.length; i++ ) {
        if ( hasClass( Tables[i], "collapsible" ) ) {
 
            /* only add button and increment count if there is a header row to work with */
            var HeaderRow = Tables[i].getElementsByTagName( "tr" )[0];
            if (!HeaderRow) continue;
            var Header = HeaderRow.getElementsByTagName( "th" )[0];
            if (!Header) continue;
 
            NavigationBoxes[ tableIndex ] = Tables[i];
            Tables[i].setAttribute( "id", "collapsibleTable" + tableIndex );
 
            var Button    = document.createElement( "span" );
            var ButtonLink = document.createElement( "a" );
            var ButtonText = document.createTextNode( collapseCaption );
 
            Button.className = "collapseButton";  //Styles are declared in Common.css
 
            ButtonLink.style.color = Header.style.color;
            ButtonLink.setAttribute( "id", "collapseButton" + tableIndex );
            ButtonLink.setAttribute( "href", "#" );
            addHandler( ButtonLink,  "click", new Function( "evt", "collapseTable(" + tableIndex + " ); return killEvt( evt );") );
            ButtonLink.appendChild( ButtonText );
 
            Button.appendChild( document.createTextNode( "[" ) );
             Button.appendChild( ButtonLink );
            Button.appendChild( document.createTextNode( "]" ) );
 
            Header.insertBefore( Button, Header.childNodes[0] );
            tableIndex++;
         }
         }
    }
 
 
        // Handle autocollapse
    for ( var i = 0;  i < tableIndex; i++ ) {
         if ( $table.hasClass( 'autocollapse' ) ) {
         if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) {
             // Count how many collapsible tables exist
             collapseTable( i );
             var collapsibleCount = $content.find( 'table.mw-collapsible' ).length;
        }
             if ( collapsibleCount >= 2 ) {
        else if ( hasClass( NavigationBoxes[i], "innercollapse" ) ) {
                 $table.addClass( 'mw-collapsed' );
             var element = NavigationBoxes[i];
             while (element = element.parentNode) {
                 if ( hasClass( element, "outercollapse" ) ) {
                    collapseTable ( i );
                    break;
                }
             }
             }
         }
         }
     }
     } );
}
} );
 
addOnloadHook( createCollapseButtons );

Latest revision as of 09:29, 6 October 2025

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

/** Collapsible tables *********************************************************
 *
 *  Description: Modern collapsible tables using MediaWiki's built-in functionality
 *  Updated for MediaWiki 1.43+ compatibility
 *
 *  Note: MediaWiki 1.43 provides native collapsible table support via the
 *  "mw-collapsible" class. The old custom implementation has been removed
 *  as it relied on deprecated functions (hasClass, addHandler, killEvt).
 *
 *  To use collapsible tables, simply add the "mw-collapsible" class to your table:
 *  {| class="wikitable mw-collapsible"
 *
 *  For tables that start collapsed, add "mw-collapsed":
 *  {| class="wikitable mw-collapsible mw-collapsed"
 */

// Initialize collapsible elements on page load
// MediaWiki's jquery.makeCollapsible module handles this automatically
// for elements with the mw-collapsible class
mw.hook( 'wikipage.content' ).add( function( $content ) {
    // Backwards compatibility: convert old "collapsible" class to "mw-collapsible"
    $content.find( 'table.collapsible' ).each( function() {
        var $table = $( this );

        // Add the modern class
        $table.addClass( 'mw-collapsible' );

        // If it had the old "collapsed" class, use the modern equivalent
        if ( $table.hasClass( 'collapsed' ) ) {
            $table.addClass( 'mw-collapsed' );
        }

        // Handle autocollapse
        if ( $table.hasClass( 'autocollapse' ) ) {
            // Count how many collapsible tables exist
            var collapsibleCount = $content.find( 'table.mw-collapsible' ).length;
            if ( collapsibleCount >= 2 ) {
                $table.addClass( 'mw-collapsed' );
            }
        }
    } );
} );
Retrieved from "https://wiki.ilovefreegle.org/index.php?title=MediaWiki:Common.js&oldid=55479"