MediaWiki:Common.js: различия между версиями

мНет описания правки
мНет описания правки
Строка 1275: Строка 1275:
// wiki import end
// wiki import end


;(function($, mw){
(function($, mw) {
     const COOKIE = 'ss14_wikiTheme';
     const COOKIE = 'ss14_wikiTheme';


Строка 1287: Строка 1287:


     function applyTheme(theme) {
     function applyTheme(theme) {
         const $body = $('body');
         var $body = $(document.body);
         const themeClasses = ($body.attr('class') || '')
         var existing = ($body.attr('class') || '').split(/\s+/).filter(function(c) {
            .split(/\s+/)
            return c.indexOf('wgl-theme-') === 0;
            .filter(cls => cls.indexOf('wgl-theme-') === 0);
        });
         if (themeClasses.length) {
         if (existing.length) {
             $body.removeClass(themeClasses.join(' '));
             $body.removeClass(existing.join(' '));
         }
         }
         $body.addClass(`wgl-theme-${theme}`);
         $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();


         const $portlet = $('<div>', {
         var $portlet = $('<div>', {
             class: 'mw-portlet mw-portlet-skin-client-prefs-skin-theme mw-portlet-js theme-menu',
             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:
         );
         );


         const $form = $('<form>');
         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 => {
         ];
             const $wr = $('<div>', { class: 'theme-client-prefs-radio' });
        options.forEach(function(opt) {
             const $inp = $('<input>', {
             var $wr = $('<div>', { class: 'theme-client-prefs-radio' });
                 type:     'radio',
             var $inp = $('<input>', {
                 name:     'theme-selection',
                 type:   'radio',
                 id:       `theme-value-${opt.key}`,
                 name:   'theme-selection',
                 value:   opt.key,
                 id:     'theme-value-' + opt.key,
                 checked: opt.key === currentTheme
                 value:   opt.key,
                 checked: opt.key === currentTheme
             });
             });
             const $lbl = $('<label>', {
             var $lbl = $('<label>', {
                 for:     `theme-value-${opt.key}`,
                 for:   'theme-value-' + opt.key,
                 text:     opt.label
                 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(
                .append(
                $('<li>', { class: 'mw-list-item mw-list-item-js' }).append($form)
                    $('<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() {
             const newTheme = $(this).val();
             var newTheme = $(this).val();
             saveTheme(newTheme);
             saveTheme(newTheme);
             applyTheme(newTheme);
             applyTheme(newTheme);
Строка 1350: Строка 1349:


     function createSettingsDropdown(currentTheme) {
     function createSettingsDropdown(currentTheme) {
         const $dropdown = $('<div>', { class: 'theme-dropdown' });
         var $dropdown = $('<div>', { class: 'theme-dropdown' });
         const $details = $('<details>', { id: 'theme-preferences-details', class: 'theme-dropdown-details' });
         var $details = $('<details>', { id: 'theme-preferences-details', class: 'theme-dropdown-details' });
         const $summary = $('<summary>', { class: 'theme-dropdown-summary', 'data-tooltip-initialized': 'true' })
         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);


         const $window = $('<div>', { id: 'theme-preferences', class: 'theme-window' }).hide();
         var $window = $('<div>', { id: 'theme-preferences', class: 'theme-window' }).hide();
         const $header = $('<div>', {
         var $header = $('<div>', { id: 'theme-preferences__header', class: 'theme-window__header', text: 'Параметры' });
            id: 'theme-preferences__header',
            class: 'theme-window__header',
            text: 'Параметры'
        });
         $window.append($header);
         $window.append($header);


         const $content = $('<div>', {
         var $content = $('<div>', { id: 'theme-preferences__content', class: 'theme-window__content' });
            id: 'theme-preferences__content',
            class: 'theme-window__content'
        });
         $window.append($content);
         $window.append($content);


Строка 1375: Строка 1367:
         $('#user-tools').append($dropdown);
         $('#user-tools').append($dropdown);


         const $cover = $('#menus-cover');
         var $cover = $('#menus-cover');
 
         $details.on('toggle', function() {
         $details.on('toggle', function() {
             const isOpen = $(this).prop('open');
             var open = $(this).prop('open');
             $window.toggle(isOpen);
             $window.toggle(open);
 
             if ($cover.length) {
             if ($cover.length) {
                 $cover.css('display', isOpen ? 'block' : 'none');
                 $cover.css('display', open ? 'block' : 'none');
             }
             }
         });
         });
         $(document).on('click', function(e) {
         $(document).on('click', function(e) {
             const isClickInside = $(e.target).closest('.theme-window, .theme-dropdown-summary').length > 0;
             var inside = $(e.target).closest('.theme-window, .theme-dropdown-summary').length;
             if (!isClickInside && $details.prop('open')) {
             if (!inside && $details.prop('open')) {
                 $details.removeAttr('open');
                 $details.removeAttr('open');
                 if ($cover.length) {
                 if ($cover.length) { $cover.hide(); }
                    $cover.css('display', 'none');
                }
             }
             }
         });
         });
     }
     }


     function init() {
     mw.themeUtils = {
         const theme = loadTheme();
        loadTheme: loadTheme,
        applyTheme: applyTheme,
        initThemeMenu: initThemeMenu,
        createSettingsDropdown: createSettingsDropdown
    };
 
    $(function() {
         var theme = loadTheme();
        applyTheme(theme);
         createSettingsDropdown(theme);
         createSettingsDropdown(theme);
        applyTheme(theme);
     });
     }
 
    $(init);
 
})(jQuery, mediaWiki);
})(jQuery, mediaWiki);