User:PetraMagna/server-toggle.js: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
PetraMagna (talk | contribs) page-specific settings; support tabber extension |
PetraMagna (talk | contribs) m just to be safe about detection |
||
Line 20: | Line 20: | ||
$(".tabber__tabs").each(function(i, parent) { |
$(".tabber__tabs").each(function(i, parent) { |
||
const children = $(parent).find("a.tabber__tab"); |
const children = $(parent).find("a.tabber__tab"); |
||
if (children.length == 2 |
if (children.length == 2) { |
||
const text1 = children[0].innerText.toLowerCase(), text2 = children[1].innerText.toLowerCase(); |
|||
⚫ | |||
if ((text1 === "jp" || text1 === "japan") && (text2 === "gl" || text2 === "global")) { |
|||
⚫ | |||
⚫ | |||
⚫ | |||
} |
|||
} |
} |
||
}); |
}); |
Revision as of 12:13, 21 May 2024
/**
* 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(), text2 = children[1].innerText.toLowerCase();
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 COOKIE_KEY = 'default-server-' + mw.config.get('wgTitle').replace(/[=;, ]/g, '');
const EXPIRY_TIME = 365;
let server = Cookies.get(COOKIE_KEY);
if (server) {
if (server === "jp" || server === "gl") {
console.log("server-toggle: Previously set server detected. Switching to " + server);
$(".server-toggle-" + server + "-button").each(function(i, button) {
button.click();
});
} else {
// invalid value; purge it just in case something bad broke it
Cookies.remove(COOKIE_KEY);
console.log("server-toggle: Remove invalid cookie value " + server);
}
} else {
console.log("server-toggle: No cookie detected. Defaulting to jp.")
Cookies.set(COOKIE_KEY, 'jp', {expires: EXPIRY_TIME});
}
// 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;
console.log("server-toggle: " + current_server + " button clicked. Switching...");
Cookies.set(COOKIE_KEY, current_server, {expires: EXPIRY_TIME});
// switch to this server everywhere else
$(".server-toggle-" + current_server + "-button").each(function(i, button) {
button.click();
});
no_recurse = false;
});
});
}
}
function addScript( src, callback ) {
var s = document.createElement( 'script' );
s.setAttribute( 'src', src );
s.onload=callback;
document.body.appendChild( s );
}
addScript("https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js", main);
})();