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

Версия от 17:04, 8 мая 2025

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

    function loadTheme() {
        return $.cookie(COOKIE) || 'normal';
    }

    function saveTheme(theme) {
        $.cookie(COOKIE, theme, { 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) {
        currentTheme = currentTheme || 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'
        });
        $portlet.append(
            $('<div>', { class: 'theme-menu__heading', text: 'Тема' }),
            $('<div>', { class: 'theme-menu__content' })
        );

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

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

        $form.on('change', 'input[name="theme-selection"]', function() {
            const newTheme = $(this).val();
            saveTheme(newTheme);
            applyTheme(newTheme);
        });
    }

    mw.themeUtils = { loadTheme, applyTheme, initThemeMenu };
}(jQuery, mediaWiki));