MediaWiki:Gadget-toggleDarkMode.js: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
No edit summary
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;


Line 17: Line 16:
$('#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);
if (currentDark) {
} else {
currentDark = false;
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);
localStorage.setItem(DARKMODE_COOKIE, currentDark);


applyButton = new OO.ui.ButtonInputWidget({
if (currentDark) {
label: 'Save',
$('body').addClass('wgl-darkmode')
flags: ['primary', 'progressive'],
$('body').removeClass('wgl-lightmode')
classes: ['skin-save-button']
} else {
});
$('body').addClass('wgl-lightmode')
$('body').removeClass('wgl-darkmode')
}


applyButton.on('click', function(){
})
});
 
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('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);

Navigation menu