MediaWiki:ServerToggle.js

/**
 * Usage: add the class server-toggle-jp-button and server-toggle-gl-button to
 * buttons that switch between JP and GL. For place where the tabs extension is
 * used and it is not possible to manually apply a class to the label, add
 * the class .server-toggle-parent to the `tabs` tag.
 * 
 * This script will 
 * (1) automatically remember the user's choice and apply it in a new page
 * (2) apply server switches to multiple tabs at once
 **/

(function() {
	// not possible to directly set classes to tab labels, so use this roundabout way to do it
	$(".server-toggle-parent").each(function(i, parent) {
		const children = $(parent).find("label.tabs-label");
		children[0].classList.add("server-toggle-jp-button");
		children[1].classList.add("server-toggle-gl-button");
	});
	// for tabber extension instead of tabs extension
	$(".tabber__tabs").each(function(i, parent) {
		const children = $(parent).find("a.tabber__tab");
		if (children.length == 2) {
			const text1 = children[0].innerText.toLowerCase().trim(), text2 = children[1].innerText.toLowerCase().trim();
			if ((text1 === "jp" || text1 === "japan") && (text2 === "gl" || text2 === "global")) {
				children[0].classList.add("server-toggle-jp-button");
				children[1].classList.add("server-toggle-gl-button");
			}
		}
	});
	
	function main() {
		const STORAGE_KEY = 'default-server-' + mw.config.get('wgTitle');
		let server = localStorage.getItem(STORAGE_KEY);
		if (server) {
			if (server === "jp" || server === "gl") {
				$(".server-toggle-" + server + "-button").each(function(i, button) {
					button.click();
				});
			} else {
				// invalid value; purge it just in case something bad broke it
				localStorage.removeItem(STORAGE_KEY);
			}
		} else {
			localStorage.setItem(STORAGE_KEY, 'jp');
		}
		// add event listener on all buttons so that we can 
		// (1) save user preference
		// (2) switch between jp and gl for all tabs
		
		// no recurse prevents the infinite click -> onclick event triggered
		// -> click -> onclick event triggered loop from happening
		let no_recurse = false;
		for (server of ['jp', 'gl']) {
			$(".server-toggle-" + server + "-button").each(function(i, button) {
				const current_server = server;
				button.addEventListener("click", function() {
					if (no_recurse) {
						return;
					}
					no_recurse = true;
					localStorage.setItem(STORAGE_KEY, current_server);
					// switch to this server everywhere else
					$(".server-toggle-" + current_server + "-button").each(function(i, button) {
						button.click();
					});
					no_recurse = false;
				});
			});
		}
	}
	
	main();
	
})();