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("", ').replace("", '); 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 );