Space Station 14 Вики

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

Интерактивная навигация по истории
← Предыдущая правка
мНет описания правки
Нет описания правки
 
(не показано 29 промежуточных версий этого же участника)
Строка 1: Строка 1:
;(function($, mw){
;(function($, mw){
     const COOKIES = { THEME: 'ss14_wikiTheme', DARK: 'darkmode' };
     const COOKIE = 'ss14_wikiTheme';
    const COOKIE_SPACE = 'ss14_spaceAnimation';
    const COOKIE_PROJECT = 'ss14_preferredProject';


     function loadTheme() {
     function loadTheme() {
         const saved = $.cookie(COOKIES.THEME);
         return $.cookie(COOKIE) || 'dark';
        return saved || 'normal';
     }
     }


     function saveTheme(theme) {
     function saveTheme(theme) {
         $.cookie(COOKIES.THEME, theme, { expires: 365, path: '/' });
         $.cookie(COOKIE, theme, { expires: 365, path: '/' });
        $.cookie(COOKIES.DARK, theme === 'dark', { expires: 365, path: '/' });
     }
     }


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


     function initThemeMenu($container, currentTheme) {
     function initThemeMenu($container, currentTheme) {
        currentTheme = currentTheme || loadTheme();
         const $portlet = $('<div>', {
         const $portlet = $('<div>', {
             class: 'mw-portlet mw-portlet-skin-client-prefs-skin-theme mw-portlet-js theme-menu',
             class: 'mw-portlet mw-portlet-js theme-menu',
             id: 'skin-client-prefs-skin-theme'
             id: 'skin-client-prefs-skin-theme'
         });
         });
        $portlet.append(
            $('<div>', { class: 'theme-menu__heading', text: 'Тема' }),
            $('<div>', { class: 'theme-menu__content' })
        );


        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 $form = $('<form>');
 
         [
         const themes = [
             { key: 'light',  label: 'Светлая' },
             { key: 'light',  label: 'Светлая (beta)' },
             { key: 'normal', label: 'Стандартная' },
             { key: 'normal', label: 'Стандартная' },
             { key: 'dark',  label: 'Тёмная' }
             { key: 'dark',  label: 'Тёмная' },
         ];
            { key: 'ss14',  label: 'Space Station 14' }
        themes.forEach(item => {
         ].forEach(opt => {
             const $wrapper = $('<div>', { class: 'theme-client-prefs-radio' });
             const $wr = $('<div>', { class: 'theme-client-prefs-radio' });
             const $input = $('<input>', {
             const $inp = $('<input>', {
                 type: 'radio', name: 'theme-selection',
                 type: 'radio',
                 id: `theme-value-${item.key}`, value: item.key,
                name: 'theme-selection',
                 checked: item.key === currentTheme
                 id: `theme-value-${opt.key}`,
                value: opt.key,
                 checked: opt.key === currentTheme
             });
             });
             const $label = $('<label>', { for: `theme-value-${item.key}`, text: item.label });
             const $lbl = $('<label>', {
             $wrapper.append($input, $label);
                for: `theme-value-${opt.key}`,
             $form.append($wrapper);
                text: opt.label
            });
             $wr.append($inp, $lbl);
             $form.append($wr);
         });
         });


         $item.append($form);
         $portlet.find('.theme-menu__content').append(
        $list.append($item);
            $('<ul>', { class: 'theme-menu__content-list' })
        $menuContent.append($list);
                .append(
         $portlet.append($heading, $menuContent);
                    $('<li>', { class: 'mw-list-item mw-list-item-js' })
                        .append($form)
                )
         );
 
         $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() {
Строка 61: Строка 120:
     }
     }


     const initialTheme = loadTheme();
     function initSpaceMenu($afterPortlet, currentVal) {
    applyTheme(initialTheme);
        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)
                )
        );


    mw.themeUtils = { loadTheme, applyTheme, initThemeMenu };
        $afterPortlet.after($spacePortlet);
}(jQuery, mediaWiki));
        applySpaceAnimation(currentVal);


;(function($, mw){
        $form.on('change', 'input[name="space-animation-selection"]', function() {
    const { loadTheme, initThemeMenu } = mw.themeUtils;
            const newVal = $(this).val();
            saveSpaceAnimation(newVal);
            applySpaceAnimation(newVal);
        });
    }


     function createSettingsDropdown(currentTheme) {
     function initPreferredProjectMenu($afterPortlet, currentVal) {
        const $dropdown = $('<div>', { class: 'theme-dropdown' });
         currentVal = currentVal || loadPreferredProject();
        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 $projectPortlet = $('<div>', {
        const $header = $('<div>', {
            class: 'mw-portlet mw-portlet-js theme-menu',
             id: 'theme-preferences__header',
             id: 'skin-client-prefs-skin-project'
            class: 'theme-window__header',
            text: 'Параметры'
         });
         });
         $window.append($header);
         $projectPortlet.append(
            $('<div>', { class: 'theme-menu__heading', text: 'Предпочитаемый проект' }),
            $('<div>', { class: 'theme-menu__content' })
        );


         const $content = $('<div>', {
         const $form = $('<form style="grid-template-columns:1fr 1fr;">');
             id: 'theme-preferences__content',
        [
             class: 'theme-window__content'
            { 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);
         });
         });
        $window.append($content);


         initThemeMenu($content, currentTheme);
         $projectPortlet.find('.theme-menu__content').append(
            $('<ul>', { class: 'theme-menu__content-list' })
                .append(
                    $('<li>', { class: 'mw-list-item mw-list-item-js' })
                        .append($form)
                )
        );


         $dropdown.append($details, $window);
         $afterPortlet.after($projectPortlet);
         $('#user-tools').prepend($dropdown);
         applyPreferredProject(currentVal);


         $details.on('toggle', function() {
         $form.on('change', 'input[name="preferred-project-selection"]', function() {
             $(this).prop('open') ? $window.show() : $window.hide();
             const newVal = $(this).val();
            savePreferredProject(newVal);
            applyPreferredProject(newVal);
         });
         });
     }
     }


     function init() {
     mw.themeUtils = {
        if (mw.config.get('wgPageName') !== 'Обсуждение_участника:Pok') return;
         loadTheme,
         const theme = loadTheme();
        applyTheme,
         createSettingsDropdown(theme);
        initThemeMenu,
     }
        loadSpaceAnimation,
        saveSpaceAnimation,
        applySpaceAnimation,
        initSpaceMenu,
        loadPreferredProject,
        savePreferredProject,
        applyPreferredProject,
         initPreferredProjectMenu
     };


    $(init);
}(jQuery, mediaWiki));
}(jQuery, mediaWiki));
Источник — https://station14.ru/wiki/MediaWiki:Gadget-theme.js