MediaWiki:Common.js/User:Fumple/DarkMode.js: Difference between revisions
From Inkipedia, the Splatoon wiki
(Improved code, added changeskin button, added a message to show up when the changes are being saved) |
(Update darkmode gadget name) |
||
Line 36: | Line 36: | ||
else { | else { | ||
// Get the options | // Get the options | ||
var darkmodestatus = mw.user.options.get("gadget- | var darkmodestatus = mw.user.options.get("gadget-dark-vector"); | ||
var currentskin = mw.user.options.get("skin"); | var currentskin = mw.user.options.get("skin"); | ||
Line 57: | Line 57: | ||
$("#darkmodechange").click(function () { | $("#darkmodechange").click(function () { | ||
$("#darkmodebox").html("Please wait!"); | $("#darkmodebox").html("Please wait!"); | ||
changeOption("gadget- | changeOption("gadget-dark-vector", darkmodestatus == "1" ? "0":"1"); | ||
}) | }) | ||
$("#fpl-skinchange").click(function () { | $("#fpl-skinchange").click(function () { |
Latest revision as of 19:21, 10 October 2023
$(function() { function changeOption(key, value) { new mw.Api().get({ "action": "query", "format": "json", "meta": "tokens" }) .done(function (data) { new mw.Api().post({ "action": "options", "format": "json", "optionname": key, "optionvalue": value, "token":data.query.tokens.csrftoken }) .done(function () { $("#darkmodebox").html("Done! Refreshing the page!"); window.location.reload(); }) .fail(function (err) { $("#darkmodebox").html("An unexpected error occured!"); console.log(err) }) }) .fail(function (err) { $("#darkmodebox").html("An unexpected error occured while getting a token!"); console.log(err) }) } if (mw.user.getName() == null) { // Forgot I put the `will come later` here, dark mode without an account could be possible? But only with an extension // I mean you could force dark mode upon everyone with `prefers-color-scheme`, but... $("#darkmodebox").html("You can't use DarkMode as you aren't logged in.<br>The ability to use DarkMode without an account will come later."); } else { // Get the options var darkmodestatus = mw.user.options.get("gadget-dark-vector"); var currentskin = mw.user.options.get("skin"); // If currentskin is empty or null, set a default value, because it's better than displaying nothing. // Although should current skin be ever empty? Better stay on the safe side if(currentskin == "" || currentskin == null) currentskin = "<site-default>"; $("#darkmodebox").html( "DarkMode is currently " + (darkmodestatus == "1" ? "enabled" : "disabled") + ". <input id='darkmodechange' type='button' value='Change that'>" + "<div id='fpl-skinchangecontainer'></div>" ); // If the current skin isn't vector, inform the user, that this won't work, unless they change it if(currentskin != "vector") { $("#fpl-skinchangecontainer").text("Your currently selected website skin is "+currentskin+", you must change to the vector skin for dark mode to work"); $("#fpl-skinchangecontainer").append("<br/><input id='fpl-skinchange' type='button' value='Change the skin'>"); $("#fpl-skinchangecontainer").append("<br/>You can revert the change by going to <a href='/wiki/Special:Preferences#mw-prefsection-rendering-skin'>Preferences -> Appearance</a>"); } // Handle the clicks $("#darkmodechange").click(function () { $("#darkmodebox").html("Please wait!"); changeOption("gadget-dark-vector", darkmodestatus == "1" ? "0":"1"); }) $("#fpl-skinchange").click(function () { $("#darkmodebox").html("Please wait!"); changeOption("skin", "vector"); }) } })