MediaWiki:Common.js: Difference between revisions
From Elwiki
mNo edit summary |
m (TabDiv deleted due to aliased to "Tabber") |
||
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. */ | ||
/* | /****************************** Cache Used Classes for Better Performance ******************************/ | ||
var usesClass = (function(){ | |||
var reCache = {}; | |||
return function(element, className){ | |||
return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className); | |||
}; | |||
})(); | |||
/* | /****************************** Collapsible Tables ******************************/ | ||
/* Add Show/Hide Buttons */ | |||
addOnloadHook(createTableButtons); | |||
/** @global autoShrink: # tables that must exist on the page for usage of "class=collapsible autocollapse" | |||
** @global minimizeSymbol: a symbol / word | |||
** @global maximizeSymbol: a symbol / word | |||
var autoShrink = 2; | var autoShrink = 2; | ||
var minimizeSymbol = "hide"; | var minimizeSymbol = "hide"; | ||
var maximizeSymbol = "show"; | var maximizeSymbol = "show"; | ||
/* | /* Function that Toggles a Tabble */ | ||
function toggleTableView(tableIndex, tableShrink){ | |||
function toggleTableView( tableIndex, tableShrink ) | var Table = document.getElementById("collapsibleTable" + tableIndex); | ||
{ | if(!Table){ // Do Nothing if there's No Table | ||
var Table = document.getElementById( "collapsibleTable" + tableIndex ); | return false; | ||
if (!Table) { | |||
} | } | ||
var Button = document.getElementById("collapseButton" + tableIndex); | |||
var Button = document.getElementById( "collapseButton" + tableIndex ); | if(!Button){ // Do Nothing if there's No Collapse Button | ||
if (!Button ) { | |||
return false; | return false; | ||
} | } | ||
var Rows = Table.getElementsByTagName("tr"); // Grab the rows | |||
if ( Button.firstChild.data == minimizeSymbol || tableShrink == 1 ) { // Do Collapse | |||
var Rows = Table.getElementsByTagName( "tr" ); | /* if the button is set to minimize its contents, then loop through the rows and mark them hidden */ | ||
if ( Button.firstChild.data == minimizeSymbol || tableShrink == 1 ) { | |||
/* if the button is set to minimize its contents, | |||
var count = 1; | var count = 1; | ||
while (Rows.length > count) { | 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 */ | /* After marking, change the table to show the maximize symbol */ | ||
Button.firstChild.data = maximizeSymbol; | Button.firstChild.data = maximizeSymbol; | ||
} else { | } | ||
/* if the button is set to maximize its contents, | else{ | ||
/* if the button is set to maximize its contents, then loop through the rows and mark them visible */ | |||
var count = 1; | var count = 1; | ||
while (Rows.length > count) { | 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 */ | /* After marking, change the table to show the minimize symbol */ | ||
Line 105: | Line 57: | ||
} | } | ||
/* Funtion | /* Funtion that Creates Text And Alignments on Collapsible Tables */ | ||
function createTableButtons(){ | |||
function createTableButtons() | |||
{ | |||
/* Define local variables */ | /* Define local variables */ | ||
var tableIndex = 0; | var tableIndex = 0; | ||
var NavBoxes = new Object(); | var NavBoxes = new Object(); | ||
var Tables = document.getElementsByTagName( "table" ); | var Tables = document.getElementsByTagName("table"); | ||
/* Use two count variables to handle cases where continue is used */ | /* Use two count variables to handle cases where continue is used */ | ||
var loopcount = 0; | var loopcount = 0; | ||
var count = 0; | var count = 0; | ||
while (Tables.length > loopcount) { | while(Tables.length > loopcount){ | ||
/* For all collapsible table on the page, this code goes through | /* For all collapsible table on the page, this code goes through them and makes a button for each one individually */ | ||
count = loopcount; | count = loopcount; | ||
loopcount++; | loopcount++; | ||
if ( usesClass( Tables[count], "collapsible" ) ) { | if(usesClass(Tables[count], "collapsible")){ | ||
/* Proceed only if a header row and header exist */ | /* Proceed only if a header row and header exist */ | ||
var HeaderRow = Tables[count].getElementsByTagName( "tr" )[0]; | var HeaderRow = Tables[count].getElementsByTagName("tr")[0]; | ||
if (!HeaderRow) continue; | if(!HeaderRow) continue; | ||
var Header = HeaderRow.getElementsByTagName( "th" )[0]; | var Header = HeaderRow.getElementsByTagName("th")[0]; | ||
if (!Header) continue; | if(!Header) continue; | ||
/* Log where you are in the looping */ | /* Log where you are in the looping */ | ||
NavBoxes[ tableIndex ] = Tables[count]; | NavBoxes[tableIndex] = Tables[count]; | ||
/* Set the identifier of the table being edited in this iteration */ | /* Set the identifier of the table being edited in this iteration */ | ||
Tables[count].setAttribute( "id", "collapsibleTable" + tableIndex ); | Tables[count].setAttribute("id", "collapsibleTable" + tableIndex); | ||
/* Create the button assuming it is a minimized table | /* Create the button assuming it is a minimized table | ||
* to do the initial creation. */ | * to do the initial creation. */ | ||
var Button = document.createElement( "span" ); | var Button = document.createElement("span"); | ||
var ButtonLink = document.createElement( "a" ); | var ButtonLink = document.createElement("a"); | ||
var ButtonText = document.createTextNode( maximizeSymbol ); | var ButtonText = document.createTextNode(maximizeSymbol); | ||
/* Define where the button floats and its font and size. | /* Define where the button floats and its font and size. | ||
* The width should be set to the max character count of | * The width should be set to the max character count of | ||
Line 151: | Line 94: | ||
Button.style.textAlign = "right"; | Button.style.textAlign = "right"; | ||
Button.style.width = "5em"; | Button.style.width = "5em"; | ||
Button.style.color = "white"; | Button.style.color = "white"; | ||
/* Set the link color and identifier */ | /* Set the link color and identifier */ | ||
ButtonLink.style.color = Header.style.color; | ButtonLink.style.color = Header.style.color; | ||
ButtonLink.style.color = "white"; | ButtonLink.style.color = "white"; | ||
ButtonLink.setAttribute( "id", "collapseButton" + tableIndex ); | ButtonLink.setAttribute("id", "collapseButton" + tableIndex); | ||
/* Set the destination of the button */ | /* Set the destination of the button */ | ||
ButtonLink.setAttribute( "href", "javascript:toggleTableView(" + tableIndex + ");" ); | ButtonLink.setAttribute("href", "javascript:toggleTableView(" + tableIndex + ");"); | ||
ButtonLink.appendChild( ButtonText ); | ButtonLink.appendChild(ButtonText); | ||
Button.appendChild( document.createTextNode( "[" ) ); | Button.appendChild(document.createTextNode("[")); | ||
Button.appendChild( ButtonLink ); | Button.appendChild(ButtonLink); | ||
Button.appendChild( document.createTextNode( "]" ) ); | Button.appendChild(document.createTextNode("]")); | ||
/* Load the next header and table for the next iteration */ | /* Load the next header and table for the next iteration */ | ||
Header.insertBefore( Button, Header.childNodes[0] ); | Header.insertBefore(Button, Header.childNodes[0]); | ||
tableIndex++; | tableIndex++; | ||
} | } | ||
} | } | ||
/* Earlier in this function, assumed all tables are minimized to do the initial creation. | /* 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, | * 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 */ | * and set the rows of those that don't as hidden */ | ||
loopcount = 0; | loopcount = 0; | ||
while (tableIndex > loopcount) { | while(tableIndex > loopcount){ | ||
/* If autocollapse or collapse is not invalid, maximize; otherwise, minimize */ | /* If autocollapse or collapse is not invalid, maximize; otherwise, minimize */ | ||
if (((autoShrink > tableIndex) && usesClass( NavBoxes[loopcount], "autocollapse" )) || !usesClass( NavBoxes[loopcount], "collapsed" ) ) { | if(((autoShrink > tableIndex) && usesClass(NavBoxes[loopcount], "autocollapse")) || !usesClass(NavBoxes[loopcount], "collapsed")){ | ||
toggleTableView( loopcount, 0 ); | toggleTableView(loopcount, 0); | ||
} | } | ||
else { | else { | ||
toggleTableView( loopcount, 1 ); | toggleTableView(loopcount, 1); | ||
} | } | ||
loopcount++; | loopcount++; | ||
Line 438: | Line 375: | ||
} | } | ||
genSetRandDARTNumber(); | genSetRandDARTNumber(); | ||