MediaWiki:Common.js: различия между версиями
Pok (обсуждение | вклад) мНет описания правки |
Pok (обсуждение | вклад) мНет описания правки |
||
| Строка 1: | Строка 1: | ||
;(function($, mw, rs){ | ;(function($, mw, rs){ | ||
// Only run on specific page | |||
if (mw.config.get('wgPageName') !== 'Обсуждение_участника:Pok') return; | |||
var DARK_COOKIE = 'darkmode', | |||
STICKY_HEADER_COOKIE = 'stickyheader', | |||
THEME_COOKIE = 'theme', | |||
fixedWidthEnabled = $.cookie('readermode') === 'true', | |||
theme = $.cookie(THEME_COOKIE) || ($.cookie(DARK_COOKIE) === 'true' ? 'dark' : 'light'), | |||
themePopup; | |||
var self = { | |||
init: function () { | |||
self.createThemeButton(); | |||
self.createSettingsButton(); | |||
self.createFixedWidthToggle(); | |||
// Initialize theme cookie if absent | |||
if (!$.cookie(THEME_COOKIE)) { | |||
$.cookie(THEME_COOKIE, theme, { expires: 365, path: '/' }); | |||
} | |||
}, | |||
/** | |||
* Create a theme toggle button inside #user-tools | |||
*/ | |||
createThemeButton: function() { | |||
var $container = $('#user-tools'); | |||
if (!$container.length) return; | |||
var $button = $('<a>', { | |||
href: '#', | |||
id: 'pt-theme-toggle', | |||
title: 'Change theme' | |||
}).addClass('oo-ui-icon-advanced') | |||
.on('click', function(e) { | |||
e.preventDefault(); | |||
if (!themePopup) { | |||
mw.loader.using(['oojs-ui-core', 'oojs-ui-windows', 'oojs-ui-widgets']).then(self.buildThemePopup); | |||
} else { | |||
themePopup.toggle(); | |||
} | |||
}); | |||
$container.append($button); | |||
}, | |||
/** | |||
* Build the theme selection popup | |||
*/ | |||
buildThemePopup: function() { | |||
var themeSwitch = new OO.ui.ButtonSelectWidget({ | |||
items: [ | |||
new OO.ui.ButtonOptionWidget({ data: 'light', label: 'Light' }), | |||
new OO.ui.ButtonOptionWidget({ data: 'dark', label: 'Dark' }) | |||
] | |||
}); | |||
themeSwitch.selectItemByData(theme); | |||
themeSwitch.on('choose', function() { | |||
theme = themeSwitch.findSelectedItem().getData(); | |||
$.cookie(THEME_COOKIE, theme, { expires: 365, path: '/' }); | |||
self.applyTheme(theme); | |||
}); | |||
themePopup = new OO.ui.PopupWidget({ | |||
$content: themeSwitch.$element, | |||
$floatableContainer: $('#pt-theme-toggle'), | |||
autoClose: true | |||
}); | |||
$(document.body).append(themePopup.$element); | |||
themePopup.toggle(true); | |||
}, | |||
/** | |||
* Apply the selected theme class to <body> | |||
*/ | |||
applyTheme: function(name) { | |||
$('body').removeClass(function(i, cls) { | |||
return (cls.match(/wgl-theme-\S+/g) || []).join(' '); | |||
}); | |||
if (name !== 'light') { | |||
mw.loader.using(['wgl.theme.' + name]).then(function() { | |||
$('body').addClass('wgl-theme-' + name); | |||
}); | |||
} | |||
}, | |||
/** | |||
* Toggle fixed-width mode | |||
*/ | |||
toggleFixedWidth: function () { | |||
fixedWidthEnabled = !fixedWidthEnabled; | |||
if (fixedWidthEnabled) { | |||
$('body').addClass('wgl-fixedWidth'); | |||
mw.loader.load('wg.fixedwidth'); | |||
} else { | |||
$('body').removeClass('wgl-fixedWidth'); | |||
} | |||
$.cookie('readermode', fixedWidthEnabled, { expires: 365, path: '/' }); | |||
}, | |||
/** | |||
* Create toggle link for fixed-width in personal portlet | |||
*/ | |||
createFixedWidthToggle: function() { | |||
var link = mw.util.addPortletLink('p-personal', '#', '', 'pt-fixed-width', 'Toggle fixed-width mode'); | |||
$(link).on('click', function(e) { | |||
e.preventDefault(); | |||
self.toggleFixedWidth(); | |||
}); | |||
}, | |||
/** | |||
* Create Appearance Settings button in personal portlet | |||
*/ | |||
createSettingsButton: function() { | |||
var link = mw.util.addPortletLink('p-personal', '#', '', 'pt-settings', 'Appearance settings'); | |||
$(link).on('click', function(e) { | |||
e.preventDefault(); | |||
mw.loader.using(['oojs-ui-core', 'oojs-ui-windows', 'oojs-ui-widgets']).then(self.openSettingsModal); | |||
}); | |||
}, | |||
/** | |||
* Open modal for appearance settings (sticky header) | |||
*/ | |||
openSettingsModal: function() { | |||
var stickySwitch = new OO.ui.ToggleSwitchWidget({ value: $.cookie(STICKY_HEADER_COOKIE) === 'true' }); | |||
stickySwitch.on('change', function() { | |||
$.cookie(STICKY_HEADER_COOKIE, stickySwitch.getValue(), { expires: 365, path: '/' }); | |||
}); | |||
var closeBtn = new OO.ui.ButtonInputWidget({ label: 'Close', flags: 'destructive' }); | |||
var $content = $('<div>').append( | |||
$('<h3>').text('Sticky header'), | |||
stickySwitch.$element, | |||
closeBtn.$element | |||
); | |||
rs.createOOUIWindow('settings', 'Appearance settings', { size: 'medium' }, function(modal) { | |||
modal.$body.append($content); | |||
closeBtn.on('click', function() { window.OOUIWindowManager.closeWindow(modal); }); | |||
}, true); | |||
} | |||
}; | |||
// Initialize on DOM ready | |||
mw.loader.using(['ext.gadget.rsw-util'], function(){ $(self.init); }); | |||
}(jQuery, mediaWiki, rswiki)); | }(jQuery, mediaWiki, rswiki)); | ||