Difference between revisions of "MediaWiki:Common.js"
Line 165: | Line 165: | ||
for (var i = 0; i < togglerElems.length; i++) | for (var i = 0; i < togglerElems.length; i++) | ||
createTogglerLink(togglerElems[i], i); | createTogglerLink(togglerElems[i], i); | ||
− | } | + | }\ |
− | + | $( toggleInit ); | |
/** Collapsible tables | /** Collapsible tables |
Revision as of 16:36, 10 August 2018
/* Any JavaScript here will be loaded for all users on every page load. */
/* Test if an element has a certain class **************************************
*
* Description: Uses regular expressions and caching for better performance.
* Maintainers: [[User:Mike Dillon]], [[User:R. Koot]], [[User:SG]]
*/
var hasClass = (function () {
var reCache = {};
return function (element, className) {
return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);
};
})();
/**
Toggles the display of elements on a page
Author/contact: Austin Che http://openwetware.org/wiki/User:Austin
*/
// indexed array of toggler ids to array of associated toggle operations
// each operation is a two element array, the first being the type, the second a class name or array of elements
// operation types are strings like "_reset" or "" for the default toggle operation
var togglers = new Array();
var allClasses = new Object(); // associative map of class names to page elements
function toggler(id)
{
var toBeToggled = togglers[id];
if (!toBeToggled)
return;
// if some element is in list more than once, it will be toggled multiple times
for (var i = 0; i < toBeToggled.length; i++)
{
// get array of elements to operate on
var toggles = toBeToggled1;
if (typeof(toggles) == "string")
{
if (toggles.charAt(0) == '-')
{
// treat as an element ID, not as class
toggles = document.getElementById(toggles.substring(1));
if (toggles)
toggles = new Array(toggles);
}
else
toggles = allClasses[toggles];
}
if (!toggles || !toggles.length)
continue;
var op = toBeToggled0; // what the operation will be
switch (op)
{
case "_reset":
for (var j in toggles)
toggles[j].style.display = toggles[j]._toggle_original_display;
break;
case "_show":
for (var j in toggles)
toggles[j].style.display = '';
break;
case "_hide":
for (var j in toggles)
toggles[j].style.display = 'none';
break;
case "":
default:
// Toggle
for (var j in toggles)
toggles[j].style.display = ((toggles[j].style.display == 'none') ? '' : 'none');
break;
}
}
}
function createTogglerLink(toggler, id)
{
var toggle = document.createElement("a");
toggle.className = 'toggler-link';
toggle.setAttribute('id', 'toggler' + id);
toggle.setAttribute('href', 'javascript:toggler("' + id + '");');
var child = toggler.firstChild;
toggler.removeChild(child);
toggle.appendChild(child);
toggler.insertBefore(toggle, toggler.firstChild);
}
function toggleInit()
{
var togglerElems = new Array();
var toggleGroup = new Array();
// make list of all document classes
var elems = document.getElementsByTagName("*");
var numelems = elems.length;
for (var i = 0; i < elems.length; i++)
{
var elem = elems[i];
if (!elem.className)
continue;
elem._toggle_original_display = elem.style.display;
var togglerID = -1;
var elemClasses = elem.className.split(' '); // get list of classes
for (var j = 0; j < elemClasses.length; j++)
{
var elemClass = elemClasses[j];
if (! allClasses[elemClass])
allClasses[elemClass] = new Array();
allClasses[elemClass].push(elem);
// all the special classes begin with _toggle
if (elemClass.substring(0, 7) != "_toggle")
continue;
if (elemClass == "_togglegroup")
toggleGroup = new Array();
else if (elemClass == "_toggle")
toggleGroup.push(elem);
else if (elemClass.substring(0, 12) == "_toggle_init")
{
// set initial value for display (ignore the original CSS set value)
// understands _toggle_initshow and _toggle_inithide
var disp = elemClass.substring(12);
if (disp == "show")
elem.style.display = '';
else if (disp == "hide")
elem.style.display = 'none';
elem._toggle_original_display = disp;
}
else if (elemClass.substring(0, 8) == "_toggler")
{
if (togglerID == -1)
{
togglerID = togglers.length;
togglers[togglerID] = new Array();
togglerElems[togglerID] = elem;
}
// all classes are of form _toggler_op-CLASS
// figure out what class we're toggling
// if none is specified, then we use the current toggle group
var toBeToggled;
var hyphen = elemClass.indexOf('-');
if (hyphen != -1)
toBeToggled = elemClass.substring(hyphen+1);
else
{
toBeToggled = toggleGroup;
hyphen = elemClass.length;
}
var op = elemClass.substring(8, hyphen);
togglers[togglerID].push(new Array(op, toBeToggled));
}
}
}
// add javascript links to all toggler elements
for (var i = 0; i < togglerElems.length; i++)
createTogglerLink(togglerElems[i], i);
}\
$( toggleInit );
/** Collapsible tables
*
* Description: Allows tables to be collapsed, showing only the header. See
* [[Wikipedia:NavFrame]].
* Maintainers: [[User:R. Koot]]
*/
var autoCollapse = 2;
var collapseCaption = "hide";
var expandCaption = "show";
function collapseTable( tableIndex )
{
var Button = document.getElementById( "collapseButton" + tableIndex );
var Table = document.getElementById( "collapsibleTable" + tableIndex );
if ( !Table || !Button ) {
return false;
}
var Rows = Table.rows;
if ( Button.firstChild.data == collapseCaption ) {
for ( var i = 1; i < Rows.length; i++ ) {
Rows[i].style.display = "none";
}
Button.firstChild.data = expandCaption;
} else {
for ( var i = 1; i < Rows.length; i++ ) {
Rows[i].style.display = Rows[0].style.display;
}
Button.firstChild.data = collapseCaption;
}
}
function createCollapseButtons()
{
var tableIndex = 0;
var NavigationBoxes = new Object();
var Tables = document.getElementsByTagName( "table" );
for ( var i = 0; i < Tables.length; i++ ) {
if ( hasClass( Tables[i], "collapsible" ) ) {
/* only add button and increment count if there is a header row to work with */
var HeaderRow = Tables[i].getElementsByTagName( "tr" )[0];
if (!HeaderRow) continue;
var Header = HeaderRow.getElementsByTagName( "th" )[0];
if (!Header) continue;
NavigationBoxes[ tableIndex ] = Tables[i];
Tables[i].setAttribute( "id", "collapsibleTable" + tableIndex );
var Button = document.createElement( "span" );
var ButtonLink = document.createElement( "a" );
var ButtonText = document.createTextNode( collapseCaption );
Button.style.styleFloat = "right";
Button.style.cssFloat = "right";
Button.style.fontWeight = "normal";
Button.style.textAlign = "right";
Button.style.width = "6em";
ButtonLink.style.color = Header.style.color;
ButtonLink.setAttribute( "id", "collapseButton" + tableIndex );
ButtonLink.setAttribute( "href", "javascript:collapseTable(" + tableIndex + ");" );
ButtonLink.appendChild( ButtonText );
Button.appendChild( document.createTextNode( "(" ) );
Button.appendChild( ButtonLink );
Button.appendChild( document.createTextNode( ")" ) );
Header.insertBefore( Button, Header.childNodes[0] );
tableIndex++;
}
}
for ( var i = 0; i < tableIndex; i++ ) {
if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) )
{
collapseTable( i );
}
}
}
addOnloadHook( createCollapseButtons );
//