|
|
| Строка 1: |
Строка 1: |
| // Theme module
| |
| ;(function($, mw){
| |
| const COOKIES = { THEME: 'theme', DARK: 'darkmode' };
| |
|
| |
| function loadTheme() {
| |
| const saved = $.cookie(COOKIES.THEME);
| |
| return saved || 'normal';
| |
| }
| |
|
| |
| function saveTheme(theme) {
| |
| $.cookie(COOKIES.THEME, theme, { expires: 365, path: '/' });
| |
| $.cookie(COOKIES.DARK, theme === 'dark', { expires: 365, path: '/' });
| |
| }
| |
|
| |
| function applyTheme(theme) {
| |
| $('body')
| |
| .removeClass('wgl-theme-normal wgl-theme-light wgl-theme-dark')
| |
| .addClass(`wgl-theme-${theme}`);
| |
| mw.hook('wgl.themeChanged').fire(theme);
| |
| }
| |
|
| |
| function initThemeMenu($container, currentTheme) {
| |
| 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: 'Белая тема' },
| |
| { 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));
| |
|
| |
| // Settings dropdown module
| |
| ;(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').append($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);
| |
| }(jQuery, mediaWiki));
| |
|
| |
| const IFRAME_CONFIG = { | | const IFRAME_CONFIG = { |
| iframe1: { | | iframe1: { |