MediaWiki:Gadget-skinTogglesNew.js

/** * Toggles for skin cookies * * @author Gaz Lloyd * @author JaydenKieran * */	var	DARK_COOKIE_CONDITIONAL = 'darkmode_conditional', STICKY_HEADER_COOKIE = 'stickyheader', THEME_COOKIE = 'themepreference', ERA_COOKIE = 'erapreference', currentDarkConditional = $.cookie(DARK_COOKIE_CONDITIONAL) === 'true', currentTheme = $.cookie(THEME_COOKIE), currentEra = $.cookie(ERA_COOKIE) === 'true', prompt = 'dark_prompt', now = new Date, hour = now.getHours, conditionalCheck = (hour >= 19 || hour < 7), darkConditionalSwitch, eraSwitch, applyButton, cancelButton, portletLink, $content, formMade = false; var self = { init: function { portletLink = mw.util.addPortletLink(				'p-personal',				'',				'Theme',				'pt-skin-toggles',				'Your appearance settings',				null,				$('#pt-userpage, #pt-anonuserpage')			); $(portletLink).find('a').addClass('oo-ui-icon-advanced').click(function(e) {				e.preventDefault;				if (!formMade) {					mw.loader.using(['oojs-ui-core','oojs-ui-windows','oojs-ui-widgets']).then(self.initForm);				} else {					window.OOUIWindowManager.openWindow('skin');				}			}); if (currentDarkConditional) { var reloadRequired = (conditionalCheck != currentDark) $.cookie(THEME_COOKIE, 'dark', {expires: 365, path: '/'}); if (reloadRequired === true) { window.location.reload(true); }			}			/**			 * Used for prompting users who have prefers-color-scheme set to dark * to switch to dark mode (because doing this automatically would			 * require setting a cookie, prompting this is best for privacy/			 * legal reasons) **/			if (rs.hasLocalStorage) { // This should always be true anyway because browsers that // support prefers-color-scheme have LocalStorage API support if (window.matchMedia('(prefers-color-scheme: dark)').matches) { if (currentTheme == 'light') { // Only show if they're not currently using dark mode var alreadyPrompted = localStorage.getItem(prompt) if (alreadyPrompted === null) { // Only show if the localStorage key doesn't exist mw.loader.using(['oojs-ui-core','oojs-ui-widgets']).then(function {								var popup = new OO.ui.PopupWidget( { $content: $( 'Your device is using dark mode. You can click here to enable the Database\'s dark mode! Don\'t show this again ' ), padded: true, width: 300, $floatableContainer: $('#pt-skin-toggles'), autoClose: true, id: 'rsw-color-scheme-prompt' } );								$( 'body' ).append( popup.$element );								popup.toggle( true );								$( '#rsw-color-scheme-opt-out' ).click( function { // Set localStorage key so we don't prompt them again localStorage.setItem(prompt, 'true') popup.toggle( false ) } )								});						}					}				}			}		},		initForm: function { darkConditionalSwitch = new OO.ui.ToggleSwitchWidget({				value: currentDarkConditional,				classes: ['reader-toggle'],				align: 'right'			}) eraSwitch = new OO.ui.ToggleSwitchWidget({				value: currentEra,				classes: ['reader-toggle'],				align: 'right'			}) themeSwitch = new OO.ui.ButtonSelectWidget({				classes: ['appearance-buttons'],				items: [					new OO.ui.ButtonOptionWidget({ classes: ['light-mode-button'], data: 'light', label: new OO.ui.HtmlSnippet(' Light '), }),					new OO.ui.ButtonOptionWidget({ classes: ['dark-mode-button'], data: 'dark', label:new OO.ui.HtmlSnippet(' Dark '), //disabled: true }),					new OO.ui.ButtonOptionWidget({ classes: ['blackout-mode-button'], data: 'blackout', label:new OO.ui.HtmlSnippet(' Blackout '), //disabled: true }),					new OO.ui.ButtonOptionWidget({ classes: ['grid-mode-button'], data: 'grid', label:new OO.ui.HtmlSnippet(' Grid '), //disabled: true }),				]			});			themeSwitch.setDisabled(darkConditionalSwitch.getValue);
 * (function($, mw, rs){

darkConditionalSwitch.on('change', function {				themeSwitch.setDisabled(darkConditionalSwitch.getValue);			});

themeSwitch.selectItemByData(currentTheme);

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

applyButton.on('click', function{				$.cookie(DARK_COOKIE_CONDITIONAL, darkConditionalSwitch.getValue, {expires: 365, path: '/'});				$.cookie(ERA_COOKIE, eraSwitch.getValue, {expires: 365, path: '/'});				var themeval = themeSwitch.findSelectedItem, 					themec = 'light',					requireReload = false;				if (darkConditionalSwitch.getValue === false) {					if (themeval !== null) {						themec = themeval.getData;					}				} else if (darkConditionalSwitch.getValue === true) {					themec = conditionalCheck;				}				$.cookie(THEME_COOKIE, themec, {expires: 365, path: '/'});				var erac = true;				if (eraSwitch.getValue === false) {					erac = false;				} else if (eraSwitch.getValue === true) {					erac = true;				}				switch (erac) {					case true:						mw.loader.load( '/index.php?title=MediaWiki:Gadget-Classic.css&action=raw&ctype=text/css', 'text/css' );						break;					case false: $('link[rel=stylesheet][href~="/index.php?title=MediaWiki:Gadget-Classic.css&action=raw&ctype=text/css"]').remove; break; }				switch (themec) { case 'light': $('link[rel=stylesheet][href~="/index.php?title=MediaWiki:Gadget-Blackout.css&action=raw&ctype=text/css"]').remove; $('link[rel=stylesheet][href~="/index.php?title=MediaWiki:Gadget-GridMode.css&action=raw&ctype=text/css"]').remove; $('link[rel=stylesheet][href~="/index.php?title=MediaWiki:Gadget-darkMode.css&action=raw&ctype=text/css"]').remove; break; case 'dark': $('link[rel=stylesheet][href~="/index.php?title=MediaWiki:Gadget-Blackout.css&action=raw&ctype=text/css"]').remove; $('link[rel=stylesheet][href~="/index.php?title=MediaWiki:Gadget-GridMode.css&action=raw&ctype=text/css"]').remove; mw.loader.load( '/index.php?title=MediaWiki:Gadget-darkMode.css&action=raw&ctype=text/css', 'text/css' ); break; case 'blackout': $('link[rel=stylesheet][href~="/index.php?title=MediaWiki:Gadget-darkMode.css&action=raw&ctype=text/css"]').remove; $('link[rel=stylesheet][href~="/index.php?title=MediaWiki:Gadget-GridMode.css&action=raw&ctype=text/css"]').remove; mw.loader.load( '/index.php?title=MediaWiki:Gadget-Blackout.css&action=raw&ctype=text/css', 'text/css' ); break; case 'grid': $('link[rel=stylesheet][href~="/index.php?title=MediaWiki:Gadget-Blackout.css&action=raw&ctype=text/css"]').remove; $('link[rel=stylesheet][href~="/index.php?title=MediaWiki:Gadget-darkMode.css&action=raw&ctype=text/css"]').remove; mw.loader.load( '/index.php?title=MediaWiki:Gadget-GridMode.css&action=raw&ctype=text/css', 'text/css' ); break; }				if (requireReload === true) { window.location.reload(true); } else { window.OOUIWindowManager.closeWindow('skin') }			});

cancelButton = new OO.ui.ButtonInputWidget({ label: 'Cancel', flags: 'destructive'});

$content = $(' '); $content .addClass('appearance-modal tile') .append(					$(' ').text('Appearance'),					$(' ')						.addClass('appearance-buttons')						.append(themeSwitch.$element),					$(' ')						.addClass('conditional-mode')						.append( darkConditionalSwitch.$element, $(' ').addClass('dark-conditional-header').text('Automatic dark mode'), $(' ').addClass('dark-conditional-desc').text('Automatically switch to dark mode from 19:00 to 7:00 local time. Disables the manual setting above.'), eraSwitch.$element, $(' ').addClass('era-header').text('Classic Theme'), $(' ').addClass('era-desc').text('A theme to celebrate the Classic era of the Sonic the Hedgehog series.') ),					$(' ')						.addClass('appearance-save')						.append( $(' ').addClass('save-button-desc').html('Saving these changes will reload the page and set personalisation cookies.'), $(' ').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]); };

rs.createOOUIWindow('skin', 'Appearance settings', {size: 'medium', classes: ['rsw-skin-toggle-popup']}, initModal, true); formMade = true; }	}

mw.loader.using(['ext.gadget.rsw-util'], function {		$(self.init);	})

}(jQuery, mediaWiki, rswiki));