MediaWiki:Gadget-skinToggles.js

/** * Toggles for skin cookies */	var DARK_COOKIE = 'darkmode', DARK_COOKIE_CONDITIONAL = 'darkmode_conditional', STICKY_HEADER_COOKIE = 'stickyheader', currentDark = $.cookie(DARK_COOKIE) === 'true', currentDarkConditional = $.cookie(DARK_COOKIE_CONDITIONAL) === 'true', currentSticky = $.cookie(STICKY_HEADER_COOKIE) === 'true', prompt = 'dark_prompt', now = new Date, hour = now.getHours, conditionalCheck = (hour >= 19 || hour < 7), popupButton, darkConditionalSwitch, darkSwitch, stickySwitch, applyButton, cancelButton, portletLink, $content, formMade = false, browserLocale;
 * (function($, mw, rts){

var self = { init: function { portletLink = mw.util.addPortletLink(				'p-personal',				,				,				'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(DARK_COOKIE, conditionalCheck, {expires: 365, path: '/'}); if (reloadRequired === true) { window.location.reload(true); }			}

if (currentSticky) { window.addEventListener("scroll", function {					var personal = $('#p-personal');				   if (mw.config.get('wgAction') === 'edit' || window.location.search.includes('veaction')) {				  		// We're on an edit page, do nothing and reset all the stuff						if (personal.is(":hidden")) {							personal.show;							head.removeClass('sticky-hidden');						}				    } else {					  	var targetEle = document.getElementById("mw-head");					  	// stop console spam if the element is found					  	if (!targetEle) {                        	return;                        }					  	var head = $('#mw-head');					  	if (window.scrollY > (targetEle.offsetTop + targetEle.offsetHeight)) {							if (personal.is(":visible")) {								personal.hide;								head.addClass('sticky-hidden');							}					  	} else {							if (personal.is(":hidden")) {								personal.show;								head.removeClass('sticky-hidden'); }					 	}				  	}				});				// hidden by css when sticky-hidden is not on				if (mw.config.get('wgIsMainPage') !== true) {					mw.util.addPortletLink( 'p-namespaces', mw.util.getUrl(mw.config.get('wgMainPageTitle')), 'Main Page', 'ca-nstab-mainpage', 'Visit the main page' );				}			}			/**			 * 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 (rts.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 (!currentDark) {						// 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 wiki\'s dark mode! Don\'t show this again ' ),								 padded: true,								  width: 300,								  $floatableContainer: $('#pt-skin-toggles'),								  autoClose: true,								  id: 'rts-color-scheme-prompt'								} ); $( 'body' ).append( popup.$element ); popup.toggle( true ); $( '#rts-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 {			stickySwitch = new OO.ui.ToggleSwitchWidget({ value: currentSticky, classes: ['reader-toggle'], align: 'right' });

darkConditionalSwitch = new OO.ui.ToggleSwitchWidget({				value: currentDarkConditional,				classes: ['reader-toggle'],				align: 'right'			})

darkSwitch = new OO.ui.ButtonSelectWidget({				classes: ['appearance-buttons'],				items: [					new OO.ui.ButtonOptionWidget({ classes: ['light-mode-button'], data: false, label: new OO.ui.HtmlSnippet(' Light '), }),					new OO.ui.ButtonOptionWidget({ classes: ['dark-mode-button'], data: true, label:new OO.ui.HtmlSnippet(' Dark '), //disabled: true }),				]			});

darkSwitch.setDisabled(darkConditionalSwitch.getValue)

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

darkSwitch.selectItemByData(currentDark);

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(STICKY_HEADER_COOKIE, stickySwitch.getValue, {expires: 365, path: '/'});				var darkval = darkSwitch.findSelectedItem,					darkc = false,					requireReload = false;				if (stickySwitch.getValue !== currentSticky) {					requireReload = true;				}

if (darkConditionalSwitch.getValue === false) { if (darkval !== null) { darkc = darkval.getData; }				} else if (darkConditionalSwitch.getValue === true) { darkc = conditionalCheck }				$.cookie(DARK_COOKIE, darkc, {expires: 365, path: '/'}); if (darkc === true) { mw.loader.using(['wg.darkmode']).then(function {					 $('body').addClass('wgl-darkmode')					  $('body').removeClass('wgl-lightmode')					}); } else { $('body').addClass('wgl-lightmode') $('body').removeClass('wgl-darkmode') }				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(darkSwitch.$element),					$(' ')						.addClass('reader-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.'), stickySwitch.$element, $(' ').addClass('sticky-header-header').text('Sticky header'), $(' ').addClass('sticky-header-desc').text('Pin the navigation bar and search to the top when scrolling. Incompatible with reader mode.') ),					$(' ')						.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]); };

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

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

}(jQuery, mediaWiki, rtswiki));