MediaWiki:Gadget-toggleDarkMode.js: Difference between revisions

From Discord Dungeons Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
  ;(function($, mw) {
  ;(function($, mw) {
var DARKMODE_COOKIE = "darkmode",
var DARKMODE_COOKIE = "darkmode",
currentDark = localStorage.getItem(DARKMODE_COOKIE),
currentDark = localStorage.getItem(DARKMODE_COOKIE) == 'true',
portletLink,
portletLink,
darkSwitch,
formMade;
formMade;


var self = {
var self = {
init: function() {
init: function() {
if (currentDark) {
$('body').addClass('wgl-darkmode')
$('body').removeClass('wgl-lightmode')
}
portletLink = mw.util.addPortletLink(
portletLink = mw.util.addPortletLink(
'p-personal',
'p-personal',
Line 17: Line 22:
$('#pt-userpage, #pt-anonuserpage')
$('#pt-userpage, #pt-anonuserpage')
);
);
$(portletLink).find('a').addClass('oo-ui-icon-advanced').add('.floor-convention').click(function(e) {
 
$(portletLink).find('a').addClass('oo-ui-icon-advanced').click(function(e) {
e.preventDefault();
e.preventDefault();
if (!formMade) {
mw.loader.using(['oojs-ui-core','oojs-ui-windows','oojs-ui-widgets']).then(self.initForm);
} else {
window.OOUIWindowManager.openWindow('skin');
}
})
},
initForm: function() {
darkSwitch = new OO.ui.ButtonSelectWidget({
classes: ['appearance-buttons'],
items: [
new OO.ui.ButtonOptionWidget({
classes: ['light-mode-button'],
data: false,
label: new OO.ui.HtmlSnippet('<div class="button-img"></div><div class="button-text">Light</div><div class="button-text-selected"></div>'),
}),
new OO.ui.ButtonOptionWidget({
classes: ['dark-mode-button'],
data: true,
label:new OO.ui.HtmlSnippet('<div class="button-img"></div><div class="button-text">Dark</div><div class="button-text-selected"></div>'),
//disabled: true
}),
]
});


darkSwitch.selectItemByData(currentDark);
currentDark = !currentDark;


applyButton = new OO.ui.ButtonInputWidget({
localStorage.setItem(DARKMODE_COOKIE, currentDark);
label: 'Save',
flags: ['primary', 'progressive'],
classes: ['skin-save-button']
});


applyButton.on('click', function(){
if (currentDark) {
$('body').addClass('wgl-darkmode')
});
$('body').removeClass('wgl-lightmode')
} else {
$('body').addClass('wgl-lightmode')
$('body').removeClass('wgl-darkmode')
}


cancelButton = new OO.ui.ButtonInputWidget({ label: 'Cancel', flags: 'destructive'});
})
$content = $('<div>');
$content
.addClass('appearance-modal tile')
.append(
$('<h2>').text('Appearance'),
$('<div>')
.addClass('appearance-buttons')
.append(darkSwitch.$element),
$('<div>')
.addClass('reader-mode')
.append(
darkConditionalSwitch.$element,
$('<div>').addClass('setting-header dark-conditional-header').text('Automatic dark mode'),
$('<p>').addClass('dark-conditional-desc').text('Automatically switch to dark mode from 19:00 to 7:00 local time. Disables the manual setting above.'),
readerSwitch.$element,
$('<div>').addClass('setting-header reader-mode-header').text('Reader mode'),
$('<p>').addClass('reader-mode-desc').text('Increase the font size and switch the wiki to a fixed-width layout. Incompatible with sticky headers.'),
stickySwitch.$element,
$('<div>').addClass('setting-header sticky-header-header').text('Sticky header'),
$('<p>').addClass('sticky-header-desc').text('Pin the navigation bar and search to the top when scrolling. Incompatible with reader mode.'),
floorSelect.$element,
$('<div>').addClass('setting-header floornumber-header').text('Floor numbering'),
$('<p>').addClass('floornumber-desc').text(floorSelectHelp)
),
$('<div>')
.addClass('appearance-save')
.append(
$('<p>').addClass('save-button-desc').html('Saving these changes will reload the page and set <a href="https://weirdgloop.org/privacy">personalisation cookies</a>.'),
$('<div>').addClass('save-button-container')
.append(applyButton.$element)
.append(cancelButton.$element)
)
);
 
var initModal = function (modal) {
modal.$body.append( $content );
cancelButton.on('click', function(modal){window.OOUIWindowManager.closeWindow(modal);}, [modal]);
};
formMade = true;
}
}
}
}
mw.loader.using(['mediawiki.util'], function () {
mw.loader.using(['mediawiki.util'], function () {
$(self.init);
$(self.init);

Latest revision as of 08:12, 31 March 2022

 ;(function($, mw) {
	 var DARKMODE_COOKIE = "darkmode",
	 	 currentDark = localStorage.getItem(DARKMODE_COOKIE) == 'true',
		 portletLink,
		 formMade;

	 var self = {
		 init: function() {

			if (currentDark) {
				$('body').addClass('wgl-darkmode')
				$('body').removeClass('wgl-lightmode')
			}

			portletLink = mw.util.addPortletLink(
				'p-personal',
				'',
				'',
				'pt-skin-toggles',
				'Toggle darkmode',
				null,
				$('#pt-userpage, #pt-anonuserpage')
			);

			$(portletLink).find('a').addClass('oo-ui-icon-advanced').click(function(e) {
				e.preventDefault();

				currentDark = !currentDark;

				localStorage.setItem(DARKMODE_COOKIE, currentDark);

				if (currentDark) {
					$('body').addClass('wgl-darkmode')
					$('body').removeClass('wgl-lightmode')
				} else {
					$('body').addClass('wgl-lightmode')
					$('body').removeClass('wgl-darkmode')
				}

		 	})
		}
	}

	mw.loader.using(['mediawiki.util'], function () {
		$(self.init);
	})

 }(jQuery, mediaWiki));
Retrieved from "https://wiki.discorddungeons.me/index.php?title=MediaWiki:Gadget-toggleDarkMode.js&oldid=29086"