User:Sledged/sledged.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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

if ( !Array.prototype.indexOf )
{
    Array.prototype.indexOf = function( elt /*, from*/ )
    {
        var len = this.length;
        var from = Number( arguments[1] ) || 0;
        from = from < 0 ? Math.ceil( from ) : Math.floor( from );

        if ( from < 0 )
            from += len;

        for ( ; from < len; from++ )
        {
            if ( from in this && this[from] === elt )

            return from;
        }

        return -1;
    };
}

function Map()
{
    // private members
    var mKeyArray = new Array(); // Keys
    var mValueArray = new Array(); // Values

    // methods
    this.clear = function()
    {
        mKeyArray.length = 0;
        mValueArray.length = 0;
    };

    this.containsKey = function( key )
    {
        return mKeyArray.indexOf( key ) == -1 ? false : true;
    };

    this.containsValue = function( value )
    {
        return mValueArray.indexOf( value ) == -1 ? false : true;
    };

    this.entrySet = function()
    {
        set = new Array();

        for ( i = 0; i < mKeyArray.length; i++ )
        {
            entry = new Object();
            entry.key = mKeyArray[i];
            entry.value = valArray[i];
            set.push( entry );
        }

        return set;
    };

    this.get = function( key )
    {
        var index = mKeyArray.indexOf( key );

        return index == -1 ? null : mValueArray[index];
    };

    this.isEmpty = function()
    {
        return mKeyArray.length == 0 ? true : false;
    }

    this.keySet = function()
    {
        // return a copy of the key set array
        return mKeyArray.slice(0);
    };

    this.put = function( key, val )
    {
        var index = mKeyArray.indexOf( key );

        if ( index == -1 )
        {
            mKeyArray.push( key );
            mValueArray.push( val );
            return null;
        }

        var old = mValueArray[index];
        mValueArray[index] = val;

        return old;
    };

    this.putAll = function( map )
    {
        if ( !Map.prototype.isPrototypeOf( map ) )
            throw new TypeError( "Argument is not of class 'Map'." );

        var keys = map.keySet();

        for ( i = 0; i < keys.length; i++ )
        {
            key = keys[i];
            this.put( key, map.get( key ) );
        }
    };

    this.remove = function( key )
    {
        var index = mKeyArray.indexOf( key );

        if ( index == -1 )
            return null;

        var old = mValueArray[index];
        mKeyArray = mKeyArray.splice( index, 1 );
        mValueArray = mValueArray.splice( index, 1 );
        return old;
    };

    this.size = function()
    {
        return mKeyArray.length;
    };

    this.toString = function()
    {
        var result = "{";

        for( var i = 0; i < mKeyArray.length; i++ )
        {
            if ( i != 0 )
                result += ", ";

            result += mKeyArray[i].valueOf() + "=" + mValueArray[i].valueOf();
        }

        result = "}";

        return result;
    };   // returns a string with all keys and values in map.

    this.values = function()
    {
        // return a copy of the value set array
        return mValueArray.slice(0);
    };
}

var gTableMap;
var gaCollapseCaption = "hide";
var gExpandCaption = "show";

function aCollapsibleTable( table, span )
{
    this.domTable = table;
    this.domTextSpan = span;
    this.rowDisplayMap = new Map();
    this.acollapsed = false;
}

aCollapsibleTable.prototype.COLLAPSE_TEXT = "hide";
aCollapsibleTable.prototype.EXPAND_TEXT = "show";

function initaCollapsibleTables()
{
    // get all the table elements
    var tables = document.getElementsByTagName( "table" );
    gTableMap = new Map();

    // sort out the table elements with the class name "acollapsible"
    for ( i = 0; i < tables.length; i++ )
    {
        var table = tables[i];

        // multiple class names are separated by white space
        var classes = table.className.split( /\s+/ );

        // "acollapsible"? Are you there?
        if ( classes.indexOf( "acollapsible" ) != -1 )
        {
            // create a collapse button for each
            // get the existing caption element or create a new one
            var caption = table.createCaption();
            // create span element...
            var spanButton = document.createElement( "span" );
            // create span element...
            var spanText = document.createElement( "span" );
            // ... of the class showHideButton
            spanButton.className = "showHideButton";
            // create onclick attribute with a value of
            // "tableaCollapseExpand(this);"
            spanButton.setAttribute( "onclick", "tableaCollapseExpand(this);" );
            // create text node with a value of "hide"
            var text = document.createTextNode( gaCollapseCaption );
            // nest the text in the span tag
            spanText.appendChild( text );
            spanButton.appendChild( document.createTextNode( "[" ) );
            spanButton.appendChild( spanText );
            spanButton.appendChild( document.createTextNode( "]" ) );
            // append span element to caption element
            caption.insertBefore( spanButton, caption.firstChild );
            // map the span element to the table
            gTableMap.put( spanButton,
                new aCollapsibleTable( table, spanText ) );

            // see if it should initially start collapsed
            if ( classes.indexOf( "hidden" ) != -1 || classes.indexOf( "acollapsed" ) != -1 )
            {
                tableaCollapseExpand( spanButton );
            }
        }
    }
}

/*

{| class="{{d20}} acollapsible acollapsed"
|+ style="width: 100%" | Table: Caption
|-
! What
|-
| I feel happy!
|}

{| class="{{d20}} acollapsible acollapsed"
|+ style="width: 100%" | Table: Caption
|-
! What
|-
| I feel happy!
|}

{| class="{{d20}} acollapsible acollapsed"
|+ style="width: 100%" | Table: Caption
|-
! What
|-
| I feel happy!
|}

{| class="{{d20}} acollapsible acollapsed"
|+ style="width: 100%" | Table: Caption
|-
! What
|-
| I feel happy!
|}

*/

function tableaCollapseExpand( elem )
{
    // get the table mapped to this HTML element
    var table = gTableMap.get( elem );
    var domTable = table.domTable;

    if ( table.acollapsed )
    {
        for ( var i = 0; i < domTable.rows.length; i++ )
        {
            var row = domTable.rows[i];

            // if the display value was changed while
            // it was hidden, preserve tbe new value
            if ( row.style.display == "none" )
                row.style.display = table.rowDisplayMap.get( row );
        }

        table.acollapsed = false;
        table.domTextSpan.firstChild.data = table.COLLAPSE_TEXT;
        return;
    }

    for ( var i = 0; i < domTable.rows.length; i++ )
    {
        var row = domTable.rows[i];
        table.rowDisplayMap.put( row, row.style.display );
        row.style.display = "none";
    }

    table.acollapsed = true;
    table.domTextSpan.firstChild.data = table.EXPAND_TEXT;
}

addOnloadHook( initaCollapsibleTables );