MediaWiki:Gadget-theme.js: различия между версиями
Pok (обсуждение | вклад) мНет описания правки Метка: отменено |
Pok (обсуждение | вклад) Нет описания правки |
||
| (не показано 14 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
;(function($, mw){ | ;(function($, mw){ | ||
const COOKIE = 'ss14_wikiTheme'; | const COOKIE = 'ss14_wikiTheme'; | ||
const COOKIE_SPACE = 'ss14_spaceAnimation'; | |||
const COOKIE_PROJECT = 'ss14_preferredProject'; | |||
function loadTheme() { | function loadTheme() { | ||
return $.cookie(COOKIE) || ' | return $.cookie(COOKIE) || 'dark'; | ||
} | } | ||
| Строка 98: | Строка 22: | ||
$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); | |||
} | |||
function loadPreferredProject() { | |||
return $.cookie(COOKIE_PROJECT) || 'corvax'; | |||
} | |||
function savePreferredProject(val) { | |||
$.cookie(COOKIE_PROJECT, val, { expires: 365, path: '/' }); | |||
} | |||
function applyPreferredProject(val) { | |||
const $body = $('body'); | |||
const classes = ($body.attr('class') || '') | |||
.split(/\s+/) | |||
.filter(cls => cls.indexOf('wgl-preferred-project-') === 0); | |||
if (classes.length) { | |||
$body.removeClass(classes.join(' ')); | |||
} | |||
$body.addClass(`wgl-preferred-project-${val}`); | |||
mw.hook('wgl.preferredProjectChanged').fire(val); | |||
} | } | ||
| Строка 104: | Строка 70: | ||
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: | Строка 80: | ||
const $form = $('<form>'); | const $form = $('<form>'); | ||
[ | [ | ||
{ key: 'light', label: 'Светлая | { key: 'light', label: 'Светлая' }, | ||
{ key: 'normal', label: 'Стандартная' }, | { key: 'normal', label: 'Стандартная' }, | ||
{ key: 'dark', label: 'Тёмная' }, | { key: 'dark', label: 'Тёмная' }, | ||
| Строка 121: | Строка 87: | ||
const $wr = $('<div>', { class: 'theme-client-prefs-radio' }); | const $wr = $('<div>', { class: 'theme-client-prefs-radio' }); | ||
const $inp = $('<input>', { | const $inp = $('<input>', { | ||
type: | type: 'radio', | ||
name: | name: 'theme-selection', | ||
id: | id: `theme-value-${opt.key}`, | ||
value: | value: opt.key, | ||
checked: | checked: opt.key === currentTheme | ||
}); | }); | ||
const $lbl = $('<label>', { | const $lbl = $('<label>', { | ||
for: | for: `theme-value-${opt.key}`, | ||
text: | text: opt.label | ||
}); | }); | ||
$wr.append($inp, $lbl); | $wr.append($inp, $lbl); | ||
| Строка 142: | Строка 108: | ||
) | ) | ||
); | ); | ||
$container.append($portlet); | $container.append($portlet); | ||
initSpaceMenu($portlet); | |||
initPreferredProjectMenu($portlet); | |||
$form.on('change', 'input[name="theme-selection"]', function() { | $form.on('change', 'input[name="theme-selection"]', function() { | ||
| Строка 151: | Строка 120: | ||
} | } | ||
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="grid-template-columns:1fr 1fr;">'); | |||
[ | |||
{ 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); | |||
}); | |||
} | |||
function initPreferredProjectMenu($afterPortlet, currentVal) { | |||
currentVal = currentVal || loadPreferredProject(); | |||
const $projectPortlet = $('<div>', { | |||
class: 'mw-portlet mw-portlet-js theme-menu', | |||
id: 'skin-client-prefs-skin-project' | |||
}); | |||
$projectPortlet.append( | |||
$('<div>', { class: 'theme-menu__heading', text: 'Предпочитаемый проект' }), | |||
$('<div>', { class: 'theme-menu__content' }) | |||
); | |||
const $form = $('<form style="grid-template-columns:1fr 1fr;">'); | |||
[ | |||
{ val: 'corvax', label: 'Corvax' }, | |||
{ val: 'goob', label: 'Goob' }, | |||
{ val: 'wl', label: 'WL' }, | |||
{ val: 'wega', label: 'Wega' } | |||
].forEach(opt => { | |||
const $wr = $('<div>', { class: 'theme-client-prefs-radio' }); | |||
const $inp = $('<input>', { | |||
type: 'radio', | |||
name: 'preferred-project-selection', | |||
id: `project-value-${opt.val}`, | |||
value: opt.val, | |||
checked: opt.val === currentVal | |||
}); | |||
const $lbl = $('<label>', { | |||
for: `project-value-${opt.val}`, | |||
text: opt.label | |||
}); | |||
$wr.append($inp, $lbl); | |||
$form.append($wr); | |||
}); | |||
$projectPortlet.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($projectPortlet); | |||
applyPreferredProject(currentVal); | |||
$form.on('change', 'input[name="preferred-project-selection"]', function() { | |||
const newVal = $(this).val(); | |||
savePreferredProject(newVal); | |||
applyPreferredProject(newVal); | |||
}); | |||
} | |||
mw.themeUtils = { | |||
loadTheme, | |||
applyTheme, | |||
initThemeMenu, | |||
loadSpaceAnimation, | |||
saveSpaceAnimation, | |||
applySpaceAnimation, | |||
initSpaceMenu, | |||
loadPreferredProject, | |||
savePreferredProject, | |||
applyPreferredProject, | |||
initPreferredProjectMenu | |||
}; | |||
}(jQuery, mediaWiki)); | }(jQuery, mediaWiki)); | ||