|
|
| Строка 1: |
Строка 1: |
| ;(function($, mw){ | | ;(function($, mw){ |
| const COOKIES = { THEME: 'ss14_wikiTheme', DARK: 'darkmode' }; | | const COOKIE = 'ss14_wikiTheme'; |
|
| |
|
| function loadTheme() { | | function loadTheme() { |
| const saved = $.cookie(COOKIES.THEME); | | return $.cookie(COOKIE) || 'normal'; |
| return saved || 'normal';
| |
| }
| |
| | |
| function saveTheme(theme) {
| |
| $.cookie(COOKIES.THEME, theme, { expires: 365, path: '/' });
| |
| $.cookie(COOKIES.DARK, theme === 'dark', { expires: 365, path: '/' });
| |
| } | | } |
|
| |
|
| Строка 19: |
Строка 13: |
| } | | } |
|
| |
|
| function initThemeMenu($container, currentTheme) {
| | applyTheme(loadTheme()); |
| const $portlet = $('<div>', {
| |
| class: 'mw-portlet mw-portlet-skin-client-prefs-skin-theme mw-portlet-js theme-menu',
| |
| id: 'skin-client-prefs-skin-theme'
| |
| });
| |
| | |
| const $heading = $('<div>', { class: 'theme-menu__heading', text: 'Тема' });
| |
| const $menuContent = $('<div>', { class: 'theme-menu__content' });
| |
| const $list = $('<ul>', { class: 'theme-menu__content-list' });
| |
| const $item = $('<li>', { class: 'mw-list-item mw-list-item-js' });
| |
| const $form = $('<form>');
| |
| | |
| const themes = [
| |
| { key: 'light', label: 'Светлая (beta)' },
| |
| { key: 'normal', label: 'Стандартная' },
| |
| { key: 'dark', label: 'Тёмная' }
| |
| ];
| |
| themes.forEach(item => {
| |
| const $wrapper = $('<div>', { class: 'theme-client-prefs-radio' });
| |
| const $input = $('<input>', {
| |
| type: 'radio', name: 'theme-selection',
| |
| id: `theme-value-${item.key}`, value: item.key,
| |
| checked: item.key === currentTheme
| |
| });
| |
| const $label = $('<label>', { for: `theme-value-${item.key}`, text: item.label });
| |
| $wrapper.append($input, $label);
| |
| $form.append($wrapper);
| |
| });
| |
| | |
| $item.append($form);
| |
| $list.append($item);
| |
| $menuContent.append($list);
| |
| $portlet.append($heading, $menuContent);
| |
| $container.append($portlet);
| |
| | |
| $form.on('change', 'input[name="theme-selection"]', function() {
| |
| const newTheme = $(this).val();
| |
| saveTheme(newTheme);
| |
| applyTheme(newTheme);
| |
| });
| |
| }
| |
| | |
| const initialTheme = loadTheme();
| |
| applyTheme(initialTheme); | |
| | |
| mw.themeUtils = { loadTheme, applyTheme, initThemeMenu };
| |
| }(jQuery, mediaWiki));
| |
| | |
| ;(function($, mw){
| |
| const { loadTheme, initThemeMenu } = mw.themeUtils;
| |
| | |
| function createSettingsDropdown(currentTheme) {
| |
| const $dropdown = $('<div>', { class: 'theme-dropdown' });
| |
| const $details = $('<details>', { id: 'theme-preferences-details', class: 'theme-dropdown-details' });
| |
| const $summary = $('<summary>', { class: 'theme-dropdown-summary', 'data-tooltip-initialized': 'true' })
| |
| .append($('<span>', { class: 'theme-icon theme-icon-settings' }));
| |
| $details.append($summary);
| |
| | |
| const $window = $('<div>', { id: 'theme-preferences', class: 'theme-window' }).hide();
| |
| const $header = $('<div>', {
| |
| id: 'theme-preferences__header',
| |
| class: 'theme-window__header',
| |
| text: 'Параметры'
| |
| });
| |
| $window.append($header);
| |
| | |
| const $content = $('<div>', {
| |
| id: 'theme-preferences__content',
| |
| class: 'theme-window__content'
| |
| });
| |
| $window.append($content);
| |
| | |
| initThemeMenu($content, currentTheme);
| |
| | |
| $dropdown.append($details, $window);
| |
| $('#user-tools').prepend($dropdown);
| |
| | |
| $details.on('toggle', function() {
| |
| $(this).prop('open') ? $window.show() : $window.hide();
| |
| });
| |
| }
| |
| | |
| function init() {
| |
| if (mw.config.get('wgPageName') !== 'Обсуждение_участника:Pok') return;
| |
| const theme = loadTheme();
| |
| createSettingsDropdown(theme);
| |
| }
| |
|
| |
|
| $(init); | | mw.themeUtils = mw.themeUtils || {}; |
| | mw.themeUtils.loadTheme = loadTheme; |
| | mw.themeUtils.applyTheme = applyTheme; |
| }(jQuery, mediaWiki)); | | }(jQuery, mediaWiki)); |