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 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: $( '<p style="font-size: 0.75em;">Your device is using dark mode. You can click here to enable the Database\'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 )
} )
});
}
}
}
}
},
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('<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: 'dark',
label:new OO.ui.HtmlSnippet('<div class="button-img"></div><div class="button-text">Dark</div><div class="button-text-selected"></div>'),
//disabled: true
}),
new OO.ui.ButtonOptionWidget({
classes: ['blackout-mode-button'],
data: 'blackout',
label:new OO.ui.HtmlSnippet('<div class="button-img"></div><div class="button-text">Blackout</div><div class="button-text-selected"></div>'),
//disabled: true
}),
new OO.ui.ButtonOptionWidget({
classes: ['grid-mode-button'],
data: 'grid',
label:new OO.ui.HtmlSnippet('<div class="button-img"></div><div class="button-text">Grid</div><div class="button-text-selected"></div>'),
//disabled: true
}),
]
});
themeSwitch.setDisabled(darkConditionalSwitch.getValue());
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 = $('<div>');
$content
.addClass('appearance-modal tile')
.append(
$('<h2>').text('Appearance'),
$('<div>')
.addClass('appearance-buttons')
.append(themeSwitch.$element),
$('<div>')
.addClass('conditional-mode')
.append(
darkConditionalSwitch.$element,
$('<div>').addClass('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.'),
eraSwitch.$element,
$('<div>').addClass('era-header').text('Classic Theme'),
$('<p>').addClass('era-desc').text('A theme to celebrate the Classic era of the Sonic the Hedgehog series.')
),
$('<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: 'medium', classes: ['rsw-skin-toggle-popup']}, initModal, true);
formMade = true;
}
}
mw.loader.using(['ext.gadget.rsw-util'], function () {
$(self.init);
})
}(jQuery, mediaWiki, rswiki));