|
|
| 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); |