|
|
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 |