MediaWiki:Gadget-skinTogglesNew.js
Jump to navigation
Jump to search
Note: After saving, 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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/**
* Toggles for skin cookies
*
* @author Gaz Lloyd
* @author JaydenKieran
*
*/
;(function($, mw, kingkiller){
var READER_COOKIE = 'readermode',
DARK_COOKIE = 'darkmode',
DARK_COOKIE_CONDITIONAL = 'darkmode_conditional',
STICKY_HEADER_COOKIE = 'stickyheader',
currentReader = $.cookie(READER_COOKIE) === 'true',
currentDark = $.cookie(DARK_COOKIE) === 'true',
currentDarkConditional = $.cookie(DARK_COOKIE_CONDITIONAL) === 'true',
currentSticky = $.cookie(STICKY_HEADER_COOKIE) === 'true',
now = new Date(),
hour = now.getHours(),
conditionalCheck = (hour >= 19 || hour < 7),
popupButton,
readerSwitch,
darkConditionalSwitch,
darkSwitch,
stickySwitch,
applyButton,
cancelButton,
portletLink,
$content;
var self = {
init: function () {
portletLink = mw.util.addPortletLink(
'p-personal',
'',
'',
'pt-skin-toggles',
'Your appearance settings',
null,
$('#pt-userpage, #pt-anonuserpage')
);
readerSwitch = new OO.ui.ToggleSwitchWidget({
value: currentReader,
classes: ['reader-toggle'],
align: 'right'
});
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('<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.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;
if (darkConditionalSwitch.getValue() === false) {
if (darkval !== null) {
darkc = darkval.getData();
}
} else if (darkConditionalSwitch.getValue() === true) {
darkc = conditionalCheck
}
$.cookie(DARK_COOKIE, darkc, {expires: 365, path: '/'});
window.location.reload(true);
});
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('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('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('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.')
),
$('<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]);
};
kkc.createOOUIWindow('skin', 'Appearance settings', {size: 'medium', classes: ['kkc-skin-toggle-popup']}, initModal);
popupButton = new OO.ui.ButtonWidget({
framed: false,
icon: 'advanced'
});
popupButton.on('click', function() {
window.OOUIWindowManager.openWindow( 'skin' );
})
portletLink = $(portletLink);
portletLink.empty().append(popupButton.$element);
if (kkc.qsp('kkc') === 'st') {
var popup = new OO.ui.PopupWidget( {
$content: $( '<p>You can click here to switch between light mode and dark mode.</p>' ),
padded: true,
width: 300,
$floatableContainer: portletLink,
autoClose: true,
id: 'kkc-onboarding-st'
} );
$( 'body' ).append( popup.$element );
popup.toggle( true );
}
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'
);
}
}
console.log(
'%cMediaWiki:Gadget-skinTogglesNew.js loaded!',
'color: blue;'
);
}
}
mw.loader.using(['ext.gadget.kkcw-util'], function () {
$(self.init);
})
}(jQuery, mediaWiki, kkcwiki));
