Jump to content

User:Ucucha/collapse.js

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
 
var autoCollapse = 2;
var collapseCaption = "hide";
var expandCaption = "show";

function collapseRow( rowIndex )
{
    var Button = document.getElementById( "id-row-collapsebutton" + rowIndex );
    var Row = document.getElementById( "id-row-collapsible" + rowIndex );

    if ( !Row || !Button ) {
        return false;
    }

    if ( Button.firstChild.data == collapseCaption ) {
        Row.style.display = "none";
        Button.firstChild.data = expandCaption;
    } else {
        Row.style.display = "table-row";
        Button.firstChild.data = collapseCaption;
    }
}

function createCollapseButtons()
{
    var rowIndex = 0;
    var Collbuttons = new Object();
    var Collrows = new Object();
    var Rows = document.getElementsByTagName( "tr" );

    for ( var i = 0; i < Rows.length; i++ ) {
        if ( hasClass( Rows[i], "row-collapsebutton" ) ) {

            /* only add button and increment count if there is a header row to work with */
            var Collbutton = Rows[i];
            var Header = Collbutton.getElementsByTagName( "th" )[0];
            if (!Header) continue;

            Collbuttons[ rowIndex ] = Collbutton;
            /* get accompanying row to be collapsed */
            for ( ; i < Rows.length ; i++ ) {
                if ( hasClass( Rows[i], "row-collapsible" ) ) {
                    var Collrow = Rows[i];
                    break;
                }
            }
            if (!Collrow) break;
           
            Collrows[ rowIndex ] = Collrow;
           
            Collrow.setAttribute( "id", "id-row-collapsible" + rowIndex );

            /* create hide/show button */
            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", "id-row-collapsebutton" + rowIndex );
            ButtonLink.setAttribute( "href", "#" );
            addHandler( ButtonLink,  "click", new Function( "evt", "collapseRow(" + rowIndex + " ); return killEvt( evt );") );
            ButtonLink.appendChild( ButtonText );

            Button.appendChild( document.createTextNode( "[" ) );
            Button.appendChild( ButtonLink );
            Button.appendChild( document.createTextNode( "]" ) );

            Header.insertBefore( Button, Header.childNodes[0] );
            rowIndex++;
        }
    }

    for ( var i = 0;  i < rowIndex; i++ ) {
        if ( hasClass( Collrows[i], "collapsed" ) ) {
            collapseRow( i );
        }
    }
}

addOnloadHook( createCollapseButtons );