MediaWiki:Common.js: различия между версиями
Pok (обсуждение | вклад) мНет описания правки |
Pok (обсуждение | вклад) мНет описания правки |
||
| Строка 1275: | Строка 1275: | ||
// wiki import end | // wiki import end | ||
(function($, mw) { | |||
const COOKIE = 'ss14_wikiTheme'; | const COOKIE = 'ss14_wikiTheme'; | ||
| Строка 1287: | Строка 1287: | ||
function applyTheme(theme) { | function applyTheme(theme) { | ||
var $body = $(document.body); | |||
var existing = ($body.attr('class') || '').split(/\s+/).filter(function(c) { | |||
return c.indexOf('wgl-theme-') === 0; | |||
}); | |||
if ( | if (existing.length) { | ||
$body.removeClass( | $body.removeClass(existing.join(' ')); | ||
} | } | ||
$body.addClass( | $body.addClass('wgl-theme-' + theme); | ||
mw.hook('wgl.themeChanged').fire(theme); | mw.hook('wgl.themeChanged').fire(theme); | ||
} | } | ||
| Строка 1301: | Строка 1301: | ||
currentTheme = currentTheme || loadTheme(); | currentTheme = currentTheme || loadTheme(); | ||
var $portlet = $('<div>', { | |||
class: 'mw-portlet mw-portlet-skin-client-prefs-skin-theme | class: 'mw-portlet mw-portlet-skin-client-prefs-skin-theme theme-menu', | ||
id: 'skin-client-prefs-skin-theme' | id: 'skin-client-prefs-skin-theme' | ||
}); | }); | ||
| Строка 1310: | Строка 1310: | ||
); | ); | ||
var $form = $('<form>'); | |||
[ | var options = [ | ||
{ key: 'light', label: 'Светлая (beta)' }, | { key: 'light', label: 'Светлая (beta)' }, | ||
{ key: 'normal', label: 'Стандартная' }, | { key: 'normal', label: 'Стандартная' }, | ||
{ key: 'dark', label: 'Тёмная' }, | { key: 'dark', label: 'Тёмная' }, | ||
{ key: 'ss14', label: 'Space Station 14' } | { key: 'ss14', label: 'Space Station 14' } | ||
].forEach(opt | ]; | ||
options.forEach(function(opt) { | |||
var $wr = $('<div>', { class: 'theme-client-prefs-radio' }); | |||
type: | var $inp = $('<input>', { | ||
name: | type: 'radio', | ||
id: | name: 'theme-selection', | ||
value: | id: 'theme-value-' + opt.key, | ||
checked: | value: opt.key, | ||
checked: opt.key === currentTheme | |||
}); | }); | ||
var $lbl = $('<label>', { | |||
for: | for: 'theme-value-' + opt.key, | ||
text: | text: opt.label | ||
}); | }); | ||
$wr.append($inp, $lbl); | $wr.append($inp, $lbl); | ||
| Строка 1334: | Строка 1335: | ||
$portlet.find('.theme-menu__content').append( | $portlet.find('.theme-menu__content').append( | ||
$('<ul>', { class: 'theme-menu__content-list' }) | $('<ul>', { class: 'theme-menu__content-list' }).append( | ||
$('<li>', { class: 'mw-list-item mw-list-item-js' }).append($form) | |||
) | |||
); | ); | ||
$container.append($portlet); | $container.append($portlet); | ||
$form.on('change', 'input[name="theme-selection"]', function() { | $form.on('change', 'input[name="theme-selection"]', function() { | ||
var newTheme = $(this).val(); | |||
saveTheme(newTheme); | saveTheme(newTheme); | ||
applyTheme(newTheme); | applyTheme(newTheme); | ||
| Строка 1350: | Строка 1349: | ||
function createSettingsDropdown(currentTheme) { | function createSettingsDropdown(currentTheme) { | ||
var $dropdown = $('<div>', { class: 'theme-dropdown' }); | |||
var $details = $('<details>', { id: 'theme-preferences-details', class: 'theme-dropdown-details' }); | |||
var $summary = $('<summary>', { class: 'theme-dropdown-summary', 'data-tooltip-initialized': 'true' }) | |||
.append($('<span>', { class: 'theme-icon theme-icon-settings' })); | .append($('<span>', { class: 'theme-icon theme-icon-settings' })); | ||
$details.append($summary); | $details.append($summary); | ||
var $window = $('<div>', { id: 'theme-preferences', class: 'theme-window' }).hide(); | |||
var $header = $('<div>', { id: 'theme-preferences__header', class: 'theme-window__header', text: 'Параметры' }); | |||
$window.append($header); | $window.append($header); | ||
var $content = $('<div>', { id: 'theme-preferences__content', class: 'theme-window__content' }); | |||
$window.append($content); | $window.append($content); | ||
| Строка 1375: | Строка 1367: | ||
$('#user-tools').append($dropdown); | $('#user-tools').append($dropdown); | ||
var $cover = $('#menus-cover'); | |||
$details.on('toggle', function() { | $details.on('toggle', function() { | ||
var open = $(this).prop('open'); | |||
$window.toggle( | $window.toggle(open); | ||
if ($cover.length) { | if ($cover.length) { | ||
$cover.css('display', | $cover.css('display', open ? 'block' : 'none'); | ||
} | } | ||
}); | }); | ||
$(document).on('click', function(e) { | $(document).on('click', function(e) { | ||
var inside = $(e.target).closest('.theme-window, .theme-dropdown-summary').length; | |||
if (! | if (!inside && $details.prop('open')) { | ||
$details.removeAttr('open'); | $details.removeAttr('open'); | ||
if ($cover.length) { | if ($cover.length) { $cover.hide(); } | ||
} | } | ||
}); | }); | ||
} | } | ||
function | mw.themeUtils = { | ||
loadTheme: loadTheme, | |||
applyTheme: applyTheme, | |||
initThemeMenu: initThemeMenu, | |||
createSettingsDropdown: createSettingsDropdown | |||
}; | |||
$(function() { | |||
var theme = loadTheme(); | |||
applyTheme(theme); | |||
createSettingsDropdown(theme); | createSettingsDropdown(theme); | ||
}); | |||
} | |||
})(jQuery, mediaWiki); | })(jQuery, mediaWiki); | ||