MediaWiki:Gadget-langs.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

"use strict"

class LanguageTab {
	constructor(element) {
		this.element = element;
		this.lang = element.lang;
		let nameElement = element.querySelector(".langs-language-name");
		this.langName = nameElement.innerText;
		nameElement.remove();
	}
	select() {
		let p = this.element.parentElement;
		for (let i = 0; i < p.children.length; i++) {
			if (p.children[i] == this.element) {
				p.children[i].style.display = "block";
			} else if (p.children[i].classList.contains("langs-in")) {
				p.children[i].style.display = "none";
			}
		}
	}
}

let hideElements = document.createElement("style");
hideElements.innerHTML = ".langs {display: none;}"
document.head.appendChild(hideElements);
window.onload = () => {
	document.querySelectorAll(".langs").forEach(langs => {
		let tabs = [];
		for (let i = 0; i < langs.children.length; i++) {
			tabs.push(new LanguageTab(langs.children[i]));
		}
		if (tabs.length == 0) return;
		let firstTab = tabs[0];
		tabs.sort((a, b) => a.langName.localeCompare(b.langName));
		let tabsContainer = document.createElement("div");
		langs.insertAdjacentElement('afterbegin', tabsContainer);
		tabsContainer.className = "langs-tabs";
		for (let i = 0; i < tabs.length; i++) {
			let tab = tabs[i];
			let tabElement = document.createElement("span");
			tabElement.className = "langs-tab";
			tabElement.innerText = tab.langName;
			tabElement.onclick = () => {
				tab.select();
			};
			tabsContainer.appendChild(tabElement);
		}
		let hasUserLanguage = false;
		for (let i = 0; i < tabs.length; i++) {
			if (tabs[i].lang == "en") {
				hasUserLanguage = true;
				tabs[i].select();
			}
		}
		if (!hasUserLanguage) firstTab.select();
	});
	hideElements.remove();
};