MediaWiki:Gadget-Toggle.js

/** 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 Modified partly for use as a Gadget (replaced calling javascript from href with a click event)

var ToggleObject = { //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 togglers  : [], allClasses : {}, //associative map of class names to page elements toggleInit : function { var togglerElems = []; var toggleGroup = []; //Initialize/clear any old information ToggleObject.togglers = []; ToggleObject.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; //Skip to next element if this element has no class //For each element, get its classes and elem._toggle_original_display = elem.style.display; var togglerIndex = -1; var elemClasses = elem.className.split(' '); // get list of classes for (var j = 0; j < elemClasses.length; j++) { var elemClass = elemClasses[j]; //If class isn't in allClasses yet if ( !(ToggleObject.allClasses[elemClass]) ) ToggleObject.allClasses[elemClass] = []; ToggleObject.allClasses[elemClass].push(elem); //Add elem to the array for this class // all the special classes begin with _toggle if (elemClass.substring(0, 7) !== "_toggle") continue; //Skip to next class if irrelevant class //(I think the ordering of page's elements work outward in/top down) if (elemClass == "_togglegroup") //_togglegroup toggleGroup = []; else if (elemClass == "_toggle") //_toggle toggleGroup.push(elem); else if (elemClass.substring(0, 12) == "_toggle_init") { //_toggle_init* //Set initial display state (ignoring the original/no-javascript CSS state) //Recognises _toggle_initshow and _toggle_inithide var disp = elemClass.substring(12); //The part after _toggle_init (i.e. show or hide) 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") { //_toggler* if (togglerIndex == -1) { //First _toggler* class of it's kind that's appeared togglerIndex = ToggleObject.togglers.length; ToggleObject.togglers[togglerIndex] = []; togglerElems[togglerIndex] = elem; }					//All classes are of form: _toggler-CLASS or _toggler_OPERATION-CLASS //Figure out what CLASS we're toggling (toBeToggled) //If none is specified, then we use the current toggle group var toBeToggled , hyphenIndex = elemClass.indexOf('-'); if (hyphenIndex > -1) toBeToggled = elemClass.substring(hyphenIndex+1); //Text after the hyphen (the class) else { //No CLASS specified toBeToggled = toggleGroup; hyphenIndex = elemClass.length; }					var operation = elemClass.substring(8, hyphenIndex); ToggleObject.togglers[togglerIndex].push([operation, toBeToggled]); }			}		}		//Add click events to all toggler elements for (var i = 0; i < togglerElems.length; i++) ToggleObject.createTogglerLink(togglerElems[i], i); },	//Toggles according to the class identified by the index toggler : function( togglerIndex ) { var toBeToggled = ToggleObject.togglers[togglerIndex]; if (!toBeToggled) return; //Stop if no such element for some reason //(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 toggle var toggles = toBeToggled[i][1]; 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 = [ toggles ]; } else { toggles = ToggleObject.allClasses[toggles]; }			}			if (!toggles || !toggles.length) continue; var operation = toBeToggled[i][0]; // what the operation will be			switch (operation) { case "_reset": for (var j = 0; j < toggles.length; j++) toggles[j].style.display = toggles[j]._toggle_original_display; break; case "_show": for (var j = 0; j < toggles.length; j++) toggles[j].style.display = ''; break; case "_hide": for (var j = 0; j < toggles.length; j++) toggles[j].style.display = 'none'; break; case "": default: // Toggle for (var j = 0; j < toggles.length; j++) toggles[j].style.display = ((toggles[j].style.display == 'none') ? '' : 'none'); break; }		}	},	//Puts the toggler element in a link that calls the toggler javascript //(no need the link now we're using click event? Or leave in as a container?) createTogglerLink : function( toggler, togglerIndex ) { var toggle = document.createElement("a"); toggle.className = 'toggler-link'; toggle.setAttribute('id', 'toggler' + togglerIndex); toggle.setAttribute('href', '#'); $( toggle ).click( function(e){			e.preventDefault;			ToggleObject.toggler(togglerIndex);		} ); var child = toggler.firstChild; toggler.removeChild(child); toggle.appendChild(child); toggler.insertBefore(toggle, toggler.firstChild); } };

function owwsitesearch( f ) { f.q.value = 'site:http://openwetware.org/wiki/' + f.base.value + '++' + f.qfront.value; }

$(ToggleObject.toggleInit);