MediaWiki:Common.js: Difference between revisions

m
This part is old for collapsible & collapsed. It is in the built-in mw code. Use mw-collapsible & mw-collapsed instead.
mNo edit summary
m (This part is old for collapsible & collapsed. It is in the built-in mw code. Use mw-collapsible & mw-collapsed instead.)
Line 44: Line 44:
     }
     }
}(jQuery));
}(jQuery));
/** Collapsible tables code *****************************************************
*  Description: Allows tables to be collapsed, showing only the header
*  Author: User:Bigfoot Lover @ BionicWiki.com
*  Added: 24 September 2007
*/
/* Add a hook to make buttons, where need be, on every pageload */
addOnloadHook(createTableButtons);
/* Define global variables:
* autoShrink is the number of tables that must exist on the page for usage of "class=collapsible autocollapse"
* minimizeSymbol can be either a symbol such as a minus sign or a word such as hide or disappear
* maximizeSymbol can be either a symbol such as a plus sign or a word such as show or appear */
var autoShrink = 2;
var minimizeSymbol = "hide";
var maximizeSymbol = "show";
/* Define functions that do-the-work */
/* Function toggleTableView() toggles a specified table's view from minimized to maximized, or vice versa */
function toggleTableView(tableIndex, tableShrink) {
    var Table = document.getElementById("collapsibleTable" + tableIndex);
    /* If there is no collapsible tables on the page, no need to do any shrinking */
    if (!Table) {
        return false;
    }
    var Button = document.getElementById("collapseButton" + tableIndex);
    /* If no collapsible buttons, no need to do any shrinking */
    if (!Button) {
        return false;
    }
    /* Grab the rows of the specified table */
    var Rows = Table.getElementsByTagName("tr");
    /* Do the hiding/unhiding */
    if (Button.firstChild.data == minimizeSymbol || tableShrink == 1) {
        /* if the button is set to minimize its contents,
        * then loop through the rows and mark them hidden */
        var count = 1;
        while (Rows.length > count) {
            if (Rows[count].parentNode.parentNode.id == ("collapsibleTable" + tableIndex)) {
                Rows[count].style.display = "none";
            }
            count++;
        }
        /* After marking, change the table to show the maximize symbol */
        Button.firstChild.data = maximizeSymbol;
    } else {
        /* if the button is set to maximize its contents,
        * then loop through the rows and mark them visible */
        var count = 1;
        while (Rows.length > count) {
            if (Rows[count].parentNode.parentNode.id == ("collapsibleTable" + tableIndex)) {
                Rows[count].style.display = Rows[0].style.display;
            }
            count++;
        }
        /* After marking, change the table to show the minimize symbol */
        Button.firstChild.data = minimizeSymbol;
    }
}
/* Funtion createTableButtons() creates the plus or minus symbol and alignment text
* to be applied on collapsible tables */
function createTableButtons() {
    /* Define local variables */
    var tableIndex = 0;
    var NavBoxes = new Object();
    var Tables = document.getElementsByTagName("table");
    /* Use two count variables to handle cases where continue is used */
    var loopcount = 0;
    var count = 0;
    while (Tables.length > loopcount) {
        /* For all collapsible table on the page, this code goes through
        * them and makes a button for each one individually */
        count = loopcount;
        loopcount++;
        if (usesClass(Tables[count], "collapsible")) {
            /* Proceed only if a header row and header exist */
            var HeaderRow = Tables[count].getElementsByTagName("tr")[0];
            if (!HeaderRow) continue;
            var Header = HeaderRow.getElementsByTagName("th")[0];
            if (!Header) continue;
            /* Log where you are in the looping */
            NavBoxes[tableIndex] = Tables[count];
            /* Set the identifier of the table being edited in this iteration */
            Tables[count].setAttribute("id", "collapsibleTable" + tableIndex);
            /* Create the button assuming it is a minimized table
            * to do the initial creation. */
            var Button = document.createElement("span");
            var ButtonLink = document.createElement("a");
            var ButtonText = document.createTextNode(maximizeSymbol);
            /* Define where the button floats and its font and size.
            * The width should be set to the max character count of
            * the mininizeSymbol and maximizeSymbol + 2. ie. min and max
            * are 3 letters each + 2 = 5em */
            Button.style.styleFloat = "right";
            Button.style.cssFloat = "right";
            Button.style.fontWeight = "normal";
            Button.style.textAlign = "right";
            Button.style.width = "5em";
            Button.style.color = "white";
            /* Set the link color and identifier */
            ButtonLink.style.color = Header.style.color;
            ButtonLink.style.color = "white";
            ButtonLink.setAttribute("id", "collapseButton" + tableIndex);
            /* Set the destination of the button */
            ButtonLink.setAttribute("href", "javascript:toggleTableView(" + tableIndex + ");");
            ButtonLink.appendChild(ButtonText);
            Button.appendChild(document.createTextNode("["));
            Button.appendChild(ButtonLink);
            Button.appendChild(document.createTextNode("]"));
            /* Load the next header and table for the next iteration */
            Header.insertBefore(Button, Header.childNodes[0]);
            tableIndex++;
        }
    }
    /* Earlier in this function, assumed all tables are minimized to do the initial creation.
    * Now, loop again through the tables and set those to maximized that need setting,
    * and set the rows of those that don't as hidden */
    loopcount = 0;
    while (tableIndex > loopcount) {
        /* If autocollapse or collapse is not invalid, maximize; otherwise, minimize */
        if (((autoShrink > tableIndex) && usesClass(NavBoxes[loopcount], "autocollapse")) || !usesClass(NavBoxes[loopcount], "collapsed")) {
            toggleTableView(loopcount, 0);
        } else {
            toggleTableView(loopcount, 1);
        }
        loopcount++;
    }
}


/* JavaScript for rounding borders
/* JavaScript for rounding borders