MediaWiki:Common.js: Difference between revisions
DansFriend (talk | contribs) mNo edit summary |
DansFriend (talk | contribs) No edit summary |
||
Line 12: | Line 12: | ||
// each operation is a two element array, the first being the type, the second a class name or array of elements | // 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 | // operation types are strings like "_reset" or "" for the default toggle operation | ||
var togglers = []; | var togglers = []; | ||
var togglerStates = []; | |||
var allClasses = {}; // associative map of class names to page elements | var allClasses = {}; // associative map of class names to page elements | ||
Line 53: | Line 54: | ||
// Toggle | // Toggle | ||
for (j = 0; j < toggles.length; j++) | for (j = 0; j < toggles.length; j++) | ||
togglerStates[id] = !togglerStates[id]; | |||
if (togglerStates[id] || !togglerStates[id] && areAllTogglersOff(toggles[j])) | |||
toggles[j].style.display = (togglerStates[id] ? '' : 'none'); | |||
break; | break; | ||
} | } | ||
} | } | ||
} | |||
function areAllTogglersOff(elem) | |||
{ | |||
for (var i = 0; i < allClasses.length; i++) | |||
{ | |||
if (allClasses[toggles[i]].includes(elem) && togglerStates[i] === true) | |||
{ | |||
return false; | |||
} | |||
} | |||
return true; | |||
} | } | ||
Line 76: | Line 91: | ||
// initialize/clear any old information | // initialize/clear any old information | ||
togglers = []; | togglers = []; | ||
togglerStates = []; | |||
allClasses = {}; | allClasses = {}; | ||
Line 89: | Line 105: | ||
elem._toggle_original_display = elem.style.display; | elem._toggle_original_display = elem.style.display; | ||
var togglerID = -1; | var togglerID = -1; | ||
var togglerState = true; | |||
var elemClasses = elem.className.split(' '); // get list of classes | var elemClasses = elem.className.split(' '); // get list of classes | ||
for (var j = 0; j < elemClasses.length; j++) | for (var j = 0; j < elemClasses.length; j++) | ||
Line 94: | Line 111: | ||
var elemClass = elemClasses[j]; | var elemClass = elemClasses[j]; | ||
// all the special classes begin with _toggle | |||
if (elemClass.substring(0, 7) != "_toggle") | if (elemClass.substring(0, 7) != "_toggle") | ||
continue; | continue; | ||
Line 136: | Line 153: | ||
togglers[togglerID].push(new Array(op, toBeToggled)); | togglers[togglerID].push(new Array(op, toBeToggled)); | ||
togglerStates[togglerID].push(togglerState); | |||
} | } | ||
} | } |
Revision as of 17:04, 9 December 2023
/* Any JavaScript here will be loaded for all users on every page load. */ // <syntax type="javascript"> /** Toggles the display of elements on a page Author/contact: Austin Che http://openwetware.org/wiki/User:Austin_J._Che See http://openwetware.org/wiki/OpenWetWare:Toggle for examples and documentation */ // 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 = []; var togglerStates = []; var allClasses = {}; // 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 = toBeToggled[i][1]; if (typeof(toggles) == "string") { toggles = allClasses[toggles]; } if (!toggles || !toggles.length) continue; var op = toBeToggled[i][0]; // what the operation will be switch (op) { case "_reset": for (var j = 0; j < toggles.length; j++) toggles[j].style.display = toggles[j]._toggle_original_display; break; case "_show": for (j = 0; j < toggles.length; j++) toggles[j].style.display = ''; break; case "_hide": for (j = 0; j < toggles.length; j++) toggles[j].style.display = 'none'; break; case "": default: // Toggle for (j = 0; j < toggles.length; j++) togglerStates[id] = !togglerStates[id]; if (togglerStates[id] || !togglerStates[id] && areAllTogglersOff(toggles[j])) toggles[j].style.display = (togglerStates[id] ? '' : 'none'); break; } } } function areAllTogglersOff(elem) { for (var i = 0; i < allClasses.length; i++) { if (allClasses[toggles[i]].includes(elem) && togglerStates[i] === true) { return false; } } return true; } 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 = []; // initialize/clear any old information togglers = []; togglerStates = []; allClasses = {}; // make list of all document classes var elems = document.getElementsByTagName("*"); 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 togglerState = true; var elemClasses = elem.className.split(' '); // get list of classes for (var j = 0; j < elemClasses.length; j++) { var elemClass = elemClasses[j]; // all the special classes begin with _toggle if (elemClass.substring(0, 7) != "_toggle") continue; 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] = []; 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); var op = elemClass.substring(8, hyphen); var collection = document.getElementsByClassName(toBeToggled); for (var a=[], k=collection.length; k;) a[--k] = collection[k]; if (! allClasses[toBeToggled]) allClasses[toBeToggled] = a; togglers[togglerID].push(new Array(op, toBeToggled)); togglerStates[togglerID].push(togglerState); } } } // add javascript links to all toggler elements for (i = 0; i < togglerElems.length; i++) createTogglerLink(togglerElems[i], i); } $( toggleInit ); // </syntax>