MediaWiki:Gadget-skinTogglesNew.js
Jump to navigation
Jump to search
After saving, you may need to bypass your browser's cache to see the changes. For further information, see Wikipedia:Bypass your cache.
- In most Windows and Linux browsers: Hold down Ctrl and press F5.
- In Safari: Hold down ⇧ Shift and click the Reload button.
- In Chrome and Firefox for Mac: Hold down both ⌘ Cmd+⇧ Shift and press R.
/**
* Toggles for various appearance-related cookies.
*/
;(function($, mw, ts){
var STICKY_HEADER_COOKIE = 'stickyheader',
FLOORNUMBER_LS = 'floornumber_display',
currentSticky = $.cookie(STICKY_HEADER_COOKIE) === 'true',
currentFloornumber = '_auto',
stickySwitch,
floorSelect,
floorSelectAuto,
floorSelectUK,
floorSelectUS,
closeButton,
$content,
userLocale = 'US',
flsetting,
browserLocale;
var self = {
init: function () {
// Add the appearance settings button
self.createSettingsPortletLink();
// Perform skin overrides if required
self.doFloorNumberOverrides();
if (currentSticky) self.doStickyHeaderOverrides();
},
/**
* Perform specific overrides to the skin if the user is currently
* using the sticky header option.
*/
doStickyHeaderOverrides: function() {
$('body').addClass('tsw-stickyheader');
function onScroll() {
var personal = $('#p-personal');
var targetEle = document.getElementById("mw-head");
var head = $('#mw-head');
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 {
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');
}
}
}
}
onScroll();
$(window).scroll(onScroll);
// hidden by css when sticky-hidden is not on
if (mw.config.get('wgIsMainPage') !== true) {
mw.util.addPortletLink('p-namespaces', '/', 'Main Page', 'ca-nstab-mainpage', 'Visit the main page');
}
},
/**
* Perform specific overrides to the skin based on the selected
* floor number preference.
*/
doFloorNumberOverrides: function() {
if (ts.hasLocalStorage()) {
currentFloornumber = window.localStorage.getItem(FLOORNUMBER_LS);
if (currentFloornumber == null) {
currentFloornumber = '_auto';
}
}
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);
},
/**
* Adds the appearance settings portlet link to the page
*/
createSettingsPortletLink: function() {
settingsPortletLink = mw.util.addPortletLink('p-personal', '', '', 'pt-skin-toggles', 'Appearance settings', null, $('#pt-userpage, #pt-anonuserpage'));
$(settingsPortletLink).find('a').addClass('oo-ui-icon-advanced').add('.floor-convention').click(function(e) {
e.preventDefault();
if (!window.OOUIWindowManager || !window.OOUIWindowManager.hasWindow('skin')) {
mw.loader.using(['oojs-ui-core','oojs-ui-windows','oojs-ui-widgets']).then(self.createAppearanceModal);
} else {
window.OOUIWindowManager.openWindow('skin');
}
});
},
/**
* Initialises the creation of the gear modal, for
* appearance settings.
*/
createAppearanceModal: function() {
stickySwitch = new OO.ui.ToggleSwitchWidget({
value: currentSticky,
classes: ['reader-toggle'],
align: 'right'
});
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 (!ts.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 US and Canada: entrance on the 1st floor, then above that is 2nd floor, 3rd floor, etc.');
floorSelect.on('choose', function () {
if (ts.hasLocalStorage()) {
window.localStorage.setItem(FLOORNUMBER_LS, floorSelect.findSelectedItem().getData());
}
});
stickySwitch.on('change', function() {
$.cookie(STICKY_HEADER_COOKIE, stickySwitch.getValue(), {expires: 365, path: '/'});
})
closeButton = new OO.ui.ButtonInputWidget({ label: 'Close', flags: 'destructive'});
$content = $('<div>');
$content
.addClass('appearance-modal')
.append(
$('<div>')
.addClass('reader-mode')
.append(
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.'),
floorSelect.$element,
$('<div>').addClass('setting-header floornumber-header').text('Floor numbering'),
$('<p>').addClass('floornumber-desc').text(floorSelectHelp)
),
$('<div>')
.addClass('appearance-save')
.append(
$('<p>').addClass('save-button-desc').html('We use cookies to personalize the wiki.'),
$('<div>').addClass('save-button-container')
.append(closeButton.$element)
)
);
var initModal = function (modal) {
modal.$body.append( $content );
closeButton.on('click', function(modal){window.OOUIWindowManager.closeWindow(modal);}, [modal]);
};
ts.createOOUIWindow('skin', 'Appearance settings', {size: 'large', classes: ['tsw-skin-toggle-popup']}, initModal, true, true).then(function () {
window.OOUIWindowManager.on('closing', function (win, closed, data) {
if (win.$element.hasClass('tsw-skin-toggle-popup')) {
// If the window that closed is this one, finalise some stuff (mostly reader mode etc).
var requireReload = false;
if ((stickySwitch.getValue() !== currentSticky)) {
requireReload = true;
}
if (requireReload === true) {
window.location.reload(true);
return;
}
}
})
})
}
}
mw.loader.using(['ext.gadget.tsw-util'], function () {
$(self.init);
})
}(jQuery, mediaWiki, tswiki));