MediaWiki:Gadget-skinTogglesNew.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/**
 * Toggles for skin cookies
 * 
 * @author Gaz Lloyd
 * @author JaydenKieran
 * 
 */
;(function($, mw, rs){
	var READER_COOKIE = 'readermode',
		DARK_COOKIE = 'darkmode',
		DARK_COOKIE_CONDITIONAL = 'darkmode_conditional',
		STICKY_HEADER_COOKIE = 'stickyheader',
		FLOORNUMBER_LS = 'floornumber_display',
		AF2020_LS = 'af2020',
		currentReader = $.cookie(READER_COOKIE) === 'true',
		currentDark = $.cookie(DARK_COOKIE) === 'true',
		currentDarkConditional = $.cookie(DARK_COOKIE_CONDITIONAL) === 'true',
		currentSticky = $.cookie(STICKY_HEADER_COOKIE) === 'true',
		currentAF2020 = 'false',
		currentFloornumber = '_auto',
		prompt = 'dark_prompt',
		now = new Date(),
		hour = now.getHours(),
		conditionalCheck = (hour >= 19 || hour < 7),
		popupButton,
		readerSwitch,
		darkConditionalSwitch,
		darkSwitch,
		stickySwitch,
		floorSelect,
		floorSelectAuto,
		floorSelectUK,
		floorSelectUS,
		applyButton,
		cancelButton,
		portletLink,
		$content,
		formMade = false,
		userLocale = 'UK',
		flsetting,
		browserLocale,
		floorSelectHelp;

	var self = {
		init: function () {
			if (rs.hasLocalStorage()) {
				currentFloornumber = window.localStorage.getItem(FLOORNUMBER_LS);
				if (currentFloornumber == null) {
					currentFloornumber = '_auto';
				}
				
				currentAF2020 = window.localStorage.getItem(AF2020_LS);
				if (currentAF2020 == null) {
					currentAF2020 = 'false'
				}
			}
			flsetting = currentFloornumber;
			if (window.navigator.languages && window.navigator.languages.length) {
				browserLocale = window.navigator.languages[0];
			} else {
				browserLocale = navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en';
			}
			switch (browserLocale) {
				// all langs in -US or -CA
				case 'en-US':
				case 'es-US':
				case 'en-CA':
				case 'fr-CA':
					userLocale = 'US';
					break;
			}
			if (currentFloornumber == '_auto') {
				flsetting = userLocale;
			}
			switch (flsetting) {
				case 'US':
					flsetting = 'floornumber-setting-us';
					break;
				case 'UK':
				default:
					flsetting = 'floornumber-setting-gb';
					break;
			}
			$('body').addClass(flsetting);
			
			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').add('.floor-convention').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 (currentReader) {
				mw.util.addPortletLink(
					'p-namespaces',
					mw.util.getUrl(mw.config.get('wgMainPageTitle')),
					'Menu',
					'ca-reader-menu'
				);

				// can't use the nextnode parameter in addPortletLink
				// because the id of the first tab varies
				$('#ca-reader-menu')
					.prependTo('#p-namespaces ul');

				// move sidebar
				$('#mw-panel')
					.attr('id', 'ca-reader-dropdown')
					.appendTo('#ca-reader-menu');
			}

			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");
					  	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 (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 (!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: $( '<p style="font-size: 0.75em;">Your device is using dark mode. You can click here to enable the wiki\'s dark mode!<br /><a id="rsw-color-scheme-opt-out" href="#">Don\'t show this again</a></p>' ),
								  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 )
								} )	
							});
						}
					}
				}
			}
			
			if (currentAF2020 == 'true') {
				mw.loader.load('ext.gadget.clippy');
			}
		},
		initForm: function() {
			readerSwitch = new OO.ui.ToggleSwitchWidget({
				value: currentReader,
				classes: ['reader-toggle'],
				align: 'right'
			});

			stickySwitch = new OO.ui.ToggleSwitchWidget({
				value: currentSticky,
				classes: ['reader-toggle'],
				align: 'right'
			});
			
			af2020Switch = new OO.ui.ToggleSwitchWidget({
				value: (currentAF2020 == 'true'),
				classes: ['reader-toggle', 'af2020-switch'],
				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('<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
					}),
				]
			});
			
			floorSelectAuto = new OO.ui.RadioOptionWidget({
						data: '_auto',
						label: 'Auto-detect: '+userLocale
					});
			floorSelectUK = new OO.ui.RadioOptionWidget({
						data: 'UK',
						label: 'UK'
					});
			floorSelectUS = new OO.ui.RadioOptionWidget({
						data: 'US',
						label: 'US'
					});
			
			floorSelect = new OO.ui.RadioSelectWidget({
				classes: ['floornumber-select'],
				items: [
					floorSelectAuto,
					floorSelectUK,
					floorSelectUS
					]
			});
			floorSelect.selectItemByData(currentFloornumber);
			floorSelectHelp = 'Changes how floor numbers are displayed on the wiki - whether the numbering begins at 0 (ground) or 1.';
			if (!rs.hasLocalStorage()) {
				floorSelect.setDisabled(true);
				floorSelectHelp = 'This option requires local storage to be supported and enabled in your browser.';
			}
			floorSelectAuto.$element.attr('title', 'Automatically detect the type to use from your browser.');
			floorSelectUK.$element.attr('title', 'The numbering used in the UK, Europe, and many Commonwealth countries: entrance on the ground floor, then above that is 1st floor, 2nd floor, etc.');
			floorSelectUS.$element.attr('title', 'The numbering used in the USA and Canada: entrance on the 1st floor, then above that is 2nd floor, 3rd floor, etc.');

			darkSwitch.setDisabled(darkConditionalSwitch.getValue())

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

			stickySwitch.setDisabled(readerSwitch.getValue())
			readerSwitch.setDisabled(stickySwitch.getValue())

			readerSwitch.on('change', function() {
				if (readerSwitch.getValue() === true) {
					stickySwitch.setValue(false)
				}
				stickySwitch.setDisabled(readerSwitch.getValue())
			})

			stickySwitch.on('change', function() {
				if (stickySwitch.getValue() === true) {
					readerSwitch.setValue(false)
				}
				readerSwitch.setDisabled(stickySwitch.getValue())
			})

			darkSwitch.selectItemByData(currentDark);

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

			applyButton.on('click', function(){
				$.cookie(READER_COOKIE, readerSwitch.getValue(), {expires: 365, path: '/'});
				$.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 ((readerSwitch.getValue() !== currentReader) || (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 (rs.hasLocalStorage()) {
					window.localStorage.setItem(FLOORNUMBER_LS, floorSelect.findSelectedItem().getData());
					window.localStorage.setItem(AF2020_LS, af2020Switch.getValue());
				}
				
				if (af2020Switch.getValue() !== (currentAF2020 == 'true')) {
					requireReload = true;
				}
				
				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 = $('<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),
							af2020Switch.$element,
							$('<div>').addClass('setting-header af2020-header').html('<img style="max-width: 15px;" src="' + rs.getFileURLCached('Dragon dagger(p++).png') + '"> April Fools 2020'),
							$('<p>').addClass('af2020-desc').text('Re-experience our April Fools 2020 content, including a quest on the wiki and achievements to earn.')
						),
					$('<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]);
			};

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

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

}(jQuery, mediaWiki, rswiki));