MediaWiki:Gadget-Switchable.js

/* Content tabber, version 1.0.5 by Greenpickle (GPL3) */

var switchableAnchorPrefix = '';
var switchableClass = 'switchable';
var switchableSectionClass = 'switch';
var switchableTabsClass = 'switchabletabs';
var switchableSectionTitleAttr = 'data-switchable-title';

// I'd extend Node.prototype, but apparently IE fails...
function myGetElementsByClassName (node, cls) {
	var result = [];
	var pool = node.getElementsByTagName("*");
	var re = new RegExp('\\b' + cls + '\\b');
	for (var i = 0; i < pool.length; i++)
		if (re.test(pool[i].className)) result.push(pool[i]);
	return result;
}

function initialiseSwitchable () {
	// get the elements we care about
	switchable = myGetElementsByClassName(document, switchableClass);

	// some functions
	switchable.createTab = function (label, isAnchor, i, j) {
		var tab = document.createElement('li');
		var child;
		if (isAnchor) {
			child = document.createElement('a');
			child.href = 'javascript:switchable.setVisible(' + i + ', ' + j + ');';
		} else child = document.createElement('strong');
		child.innerHTML = label.replace("''", '<i>').replace("''", '</i>');
		tab.appendChild(child);
		return tab;
	};

	switchable.getVisible = function (i) {
		var visible = this[i].getAttribute('visiblesection');
		if (visible) visible = parseInt(visible);
		if (visible === null || isNaN(visible)) {
			visible = 0;
			this[i].setAttribute('visiblesection', visible.toString());
		}
		return Math.max(0, Math.min(visible, this[i].sections.length - 1));
	};

	switchable.updateVisible = function (i) {
		if (isNaN(parseInt(i))) {
			// update all switchables if no valid number given
			for (i = 0; i < this.length; i++)
				this.updateVisible(i);
		} else {
			var visible = this.getVisible(i);
			var sections = this[i].sections;
			var tc = this[i].tabContainer;
			var currentTab;
			for (var j = 0; j < sections.length; j++) {
				if (j == visible) {
					// change 'show' link
					currentTab = this.createTab(sections[j].sectionName, false);
					currentTab.j = j;
					tc.replaceChild(currentTab, tc.tabs[j]);
					// show section
					sections[j].style.display = 'unset';
					$(window).scroll();
				} else {
					// change 'show' link
					if (tc.currentTab !== undefined && tc.currentTab.j == j)
						tc.replaceChild(tc.tabs[j], tc.currentTab);
					// hide section
					sections[j].style.display = 'none';
				}
			}
			if (currentTab !== undefined) tc.currentTab = currentTab;
		}
	};

	switchable.setVisible = function (i, j) {
		this[i].setAttribute('visiblesection', j);
		this.updateVisible(i);
	};

	// initialise
	for (var i = 0; i < switchable.length; i++) {
		var sections = myGetElementsByClassName(switchable[i], switchableSectionClass);
		switchable[i].sections = sections;
		// create show/hide anchors
		var tabContainer = document.createElement('ul');
		tabContainer.className = switchableTabsClass;
		switchable[i].appendChild(tabContainer);
		switchable[i].tabContainer = tabContainer;
		tabContainer.tabs = [];
		for (var j = 0; j < sections.length; j++) {
			// re-append section to place it after links
			switchable[i].appendChild(sections[j]);
			// use section's name if it has one
			var sectionName = sections[j].getAttribute(switchableSectionTitleAttr);
			if (!sectionName) sectionName = j.toString();
			sections[j].sectionName = sectionName;
			// create anchor
			var tab = switchable.createTab(switchableAnchorPrefix + sectionName, true, i, j);
			tabContainer.appendChild(tab);
			tabContainer.tabs.push(tab);
		}
	}
	this.switchable = switchable;
	// initial show/hide
	switchable.updateVisible();
}

$( initialiseSwitchable );