MediaWiki:Gadget-theme.js: различия между версиями
Pok (обсуждение | вклад) мНет описания правки Метка: отменено |
Pok (обсуждение | вклад) мНет описания правки |
||
| (не показано 10 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
;(function($, mw){ | ;(function($, mw){ | ||
const COOKIE = 'ss14_wikiTheme'; | const COOKIE = 'ss14_wikiTheme'; | ||
const COOKIE_SPACE = 'ss14_spaceAnimation'; | |||
function loadTheme() { | function loadTheme() { | ||
return $.cookie(COOKIE) || ' | return $.cookie(COOKIE) || 'dark'; | ||
} | } | ||
| Строка 98: | Строка 21: | ||
$body.addClass(`wgl-theme-${theme}`); | $body.addClass(`wgl-theme-${theme}`); | ||
mw.hook('wgl.themeChanged').fire(theme); | mw.hook('wgl.themeChanged').fire(theme); | ||
} | |||
function loadSpaceAnimation() { | |||
return $.cookie(COOKIE_SPACE) || 'on'; | |||
} | |||
function saveSpaceAnimation(val) { | |||
$.cookie(COOKIE_SPACE, val, { expires: 365, path: '/' }); | |||
} | |||
function applySpaceAnimation(val) { | |||
const $body = $('body'); | |||
const themeClasses = ($body.attr('class') || '') | |||
.split(/\s+/) | |||
.filter(cls => cls.indexOf('wgl-space-animation-') === 0); | |||
if (themeClasses.length) { | |||
$body.removeClass(themeClasses.join(' ')); | |||
} | |||
$body.addClass(`wgl-space-animation-${val}`); | |||
mw.hook('wgl.spaceAnimationChanged').fire(val); | |||
} | } | ||
| Строка 104: | Строка 47: | ||
const $portlet = $('<div>', { | const $portlet = $('<div>', { | ||
class: 'mw-portlet | class: 'mw-portlet mw-portlet-js theme-menu', | ||
id: 'skin-client-prefs-skin-theme' | id: 'skin-client-prefs-skin-theme' | ||
}); | }); | ||
| Строка 114: | Строка 57: | ||
const $form = $('<form>'); | const $form = $('<form>'); | ||
[ | [ | ||
{ key: 'light', label: 'Светлая | { key: 'light', label: 'Светлая' }, | ||
{ key: 'normal', label: 'Стандартная' }, | { key: 'normal', label: 'Стандартная' }, | ||
{ key: 'dark', label: 'Тёмная' }, | { key: 'dark', label: 'Тёмная' }, | ||
| Строка 142: | Строка 85: | ||
) | ) | ||
); | ); | ||
$container.append($portlet); | $container.append($portlet); | ||
initSpaceMenu($portlet); | |||
$form.on('change', 'input[name="theme-selection"]', function() { | $form.on('change', 'input[name="theme-selection"]', function() { | ||
| Строка 151: | Строка 96: | ||
} | } | ||
mw.themeUtils = { loadTheme, applyTheme, initThemeMenu }; | function initSpaceMenu($afterPortlet, currentVal) { | ||
currentVal = currentVal || loadSpaceAnimation(); | |||
const $spacePortlet = $('<div>', { | |||
class: 'mw-portlet mw-portlet-js theme-menu', | |||
id: 'skin-client-prefs-skin-space' | |||
}); | |||
$spacePortlet.append( | |||
$('<div>', { class: 'theme-menu__heading', text: 'Космос' }), | |||
$('<div>', { class: 'theme-menu__content' }) | |||
); | |||
const $form = $('<form style="flex-direction:row;">'); | |||
[ | |||
{ val: 'on', label: 'Включено' }, | |||
{ val: 'off', label: 'Отключено' } | |||
].forEach(opt => { | |||
const $wr = $('<div>', { class: 'theme-client-prefs-radio' }); | |||
const $inp = $('<input>', { | |||
type: 'radio', | |||
name: 'space-animation-selection', | |||
id: `space-value-${opt.val}`, | |||
value: opt.val, | |||
checked: opt.val === currentVal | |||
}); | |||
const $lbl = $('<label>', { | |||
for: `space-value-${opt.val}`, | |||
text: opt.label | |||
}); | |||
$wr.append($inp, $lbl); | |||
$form.append($wr); | |||
}); | |||
$spacePortlet.find('.theme-menu__content').append( | |||
$('<ul>', { class: 'theme-menu__content-list' }) | |||
.append( | |||
$('<li>', { class: 'mw-list-item mw-list-item-js' }) | |||
.append($form) | |||
) | |||
); | |||
$afterPortlet.after($spacePortlet); | |||
applySpaceAnimation(currentVal); | |||
$form.on('change', 'input[name="space-animation-selection"]', function() { | |||
const newVal = $(this).val(); | |||
saveSpaceAnimation(newVal); | |||
applySpaceAnimation(newVal); | |||
}); | |||
} | |||
mw.themeUtils = { | |||
loadTheme, | |||
applyTheme, | |||
initThemeMenu, | |||
loadSpaceAnimation, | |||
saveSpaceAnimation, | |||
applySpaceAnimation, | |||
initSpaceMenu | |||
}; | |||
}(jQuery, mediaWiki)); | }(jQuery, mediaWiki)); | ||