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;
		p.querySelectorAll.forEach((e) => {
			if (e == this.element) {
				e.style.display = "block";
			} else {
				e.style.display = "none";
			}
		});
		let tabs = p.querySelector(".langs-tabs");
		tabs.querySelectorAll(".langs-tab-selected").forEach((e) => {
			e.classList.remove(".langs-tab-selected");
		});
		this.tabElement.classList.add(".langs-tab-selected");
	}
}

document.querySelectorAll(".langs").forEach(langs => {
	langs.style.display = "block";
	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.tabElement = tabElement;
			tab.select();
		};
		tabsContainer.appendChild(tabElement);
	}
	let hasUserLanguage = false;
	for (let i = 0; i < tabs.length; i++) {
		if (tabs[i].lang == mw.config.get("wgUserLanguage")) {
			hasUserLanguage = true;
			tabs[i].select();
		}
	}
	if (!hasUserLanguage) firstTab.select();
});