Перейти к содержанию

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

Материал из MassMeta Wiki
Нет описания правки
Нет описания правки
 
(не показаны 23 промежуточные версии 2 участников)
Строка 1: Строка 1:
(function () {
$(function () {
     const themes = {
     const classes = ['theme-stddark', 'theme-nanotrasen', 'theme-syndicate', 'theme-plasmafire', 'theme-clockcult', 'theme-bloodcult', 'theme-heretic', 'theme-default'];
        'theme-nanotrasen': { name: 'Nanotrasen TGUI', logo: 'images/5/58/Nanotrasen-logo.png' },
        'theme-syndicate':  { name: 'Syndicate TGUI', logo: 'images/c/ce/Syndicate-logo.png' },
        'theme-plasmafire': { name: 'Plasmafire' },
        'theme-clockcult':  { name: 'Clock Cult' },
        'theme-bloodcult':  { name: 'Blood Cult' },
        'theme-heretic':    { name: 'Heretic' },
        'theme-stddark':    { name: 'Standard Dark' },
        'theme-default':    { name: 'Standard Light' }
    };


     function applyTheme(themeId) {
     function applyTheme(themeId) {
         Object.keys(themes).forEach(id => document.body.classList.remove(id));
         classes.forEach(id => document.body.classList.remove(id));
         document.body.classList.remove('theme-active-dark');
         document.body.classList.remove('theme-active-dark');
          
          
         if (themeId && themes[themeId]) {
         if (themeId && classes.includes(themeId)) {
             document.body.classList.add(themeId);
             document.body.classList.add(themeId);
             if (themeId !== 'theme-default') {
             if (themeId !== 'theme-default') {
Строка 21: Строка 12:
             }
             }
             localStorage.setItem('mw-tg-theme', themeId);
             localStorage.setItem('mw-tg-theme', themeId);
           
            const logoImg = document.querySelector('.mw-wiki-logo, .vector-header-container .mw-logo-img, .vector-logo-img');
            if (logoImg) {
                if (logoImg.tagName === 'IMG') {
                    logoImg.src = themes[themeId].logo;
                } else {
                    logoImg.style.backgroundImage = `url(${themes[themeId].logo})`;
                }
            }
         }
         }
     }
     }


     $(document).ready(function () {
     function injectSelector() {
        if (document.getElementById('p-tg-theme')) return;
         const activeTheme = localStorage.getItem('mw-tg-theme') || 'theme-stddark';
         const activeTheme = localStorage.getItem('mw-tg-theme') || 'theme-stddark';
         applyTheme(activeTheme);
         applyTheme(activeTheme);


         let selectHtml = '<div id="p-tg-theme" class="vector-menu vector-dropdown vector-user-menu-logged-in vector-has-collapsible-items" style="margin-right: 8px;">';
         let selectHtml = '<div id="p-tg-theme" style="margin: 0 10px; display: inline-block !important; vertical-align: middle !important; position: relative; width: 36px !important; height: 36px !important;">';
         selectHtml += '<input type="checkbox" id="p-tg-theme-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-tg-theme" class="vector-dropdown-checkbox">';
         selectHtml += '<input type="checkbox" id="p-tg-theme-dropdown-checkbox" role="button" aria-haspopup="true" class="vector-dropdown-checkbox" style="display: none !important;">';
         selectHtml += '<label id="p-tg-theme-dropdown-label" for="p-tg-theme-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--weight-quiet cdx-button--icon-only" aria-label="Смена темы" title="Выбрать тему фракции">';
         selectHtml += '<label id="p-tg-theme-dropdown-label" for="p-tg-theme-dropdown-checkbox" aria-label="Смена темы" title="Выбрать тему фракции" style="display: flex !important; width: 36px !important; height: 36px !important; align-items: center; justify-content: center; cursor: pointer; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important;">';
         selectHtml += '<span class="vector-icon tg-custom-palette-icon"><img src="images/f/f6/Palette.png" alt="Themes" style="width: 20px; height: 20px; object-fit: contain; display: block;" /></span>';
         selectHtml += '<span class="tg-custom-palette-icon"></span>';
         selectHtml += '</label>';
         selectHtml += '</label>';
         selectHtml += '<div class="vector-dropdown-content" style="padding: 8px; min-width: 180px;">';
         selectHtml += '<div class="vector-dropdown-content" id="p-tg-dropdown-menu" style="padding: 8px; min-width: 180px; display: none; position: absolute; top: 110%; right: 0; z-index: 10000;">';
         selectHtml += '<ul class="vector-menu-content-list" style="margin: 0; padding: 0; list-style: none;">';
         selectHtml += '<ul class="vector-menu-content-list" style="margin: 0; padding: 0; list-style: none;">';


         Object.keys(themes).forEach(id => {
         const names = { 'theme-stddark': 'Standard Dark', 'theme-nanotrasen': 'Nanotrasen TGUI', 'theme-syndicate': 'Syndicate TGUI', 'theme-plasmafire': 'Plasmafire', 'theme-clockcult': 'Clock Cult', 'theme-bloodcult': 'Blood Cult', 'theme-heretic': 'Heretic', 'theme-default': 'Standard Light' };
            const isSelected = id === activeTheme ? 'font-weight: bold; color: var(--accent) !important;' : '';
        classes.forEach(id => {
             selectHtml += `<li style="margin: 4px 0;"><a href="#" class="tg-theme-item" data-theme="${id}" style="display: block; padding: 6px 8px; border-radius: 4px; text-decoration: none; ${isSelected}">${themes[id].name}</a></li>`;
             selectHtml += '<li style="margin: 4px 0;"><a href="#" class="tg-theme-item" data-theme="' + id + '" style="display: block; padding: 6px 8px; border-radius: 4px; text-decoration: none;">' + names[id] + '</a></li>';
         });
         });
        selectHtml += '</ul></div></div>';


         selectHtml += '</ul></div></div>';
         const targets = [document.querySelector('.vector-user-links-main'), document.getElementById('p-personal-more'), document.getElementById('p-userlinks'), document.querySelector('.vector-user-links'), document.querySelector('.vector-header-end')];
        for (let target of targets) { if (target) { $(target).before(selectHtml); break; } }
    }
 
    injectSelector();


        const userLinks = document.querySelector('.vector-user-links');
    $(document).on('change', '#p-tg-theme-dropdown-checkbox', function() {
         if (userLinks) {
         $(this).siblings('.vector-dropdown-content').css('display', this.checked ? 'block' : 'none');
            const userMenu = document.getElementById('p-personal-more') || document.getElementById('p-userlinks');
    });
            if (userMenu) {
                $(userMenu).before(selectHtml);
            } else {
                $(userLinks).prepend(selectHtml);
            }
        }


        $(document).on('click', '.tg-theme-item', function (e) {
    $(document).on('click', '.tg-theme-item', function (e) {
            e.preventDefault();
        e.preventDefault();
            const chosenTheme = $(this).data('theme');
        applyTheme($(this).data('theme'));
            applyTheme(chosenTheme);
        $('#p-tg-theme-dropdown-checkbox').prop('checked', false).trigger('change');
           
            $('.tg-theme-item').css({'font-weight': 'normal', 'color': ''});
            $(this).css({'font-weight': 'bold', 'color': 'var(--accent)'});
           
            document.getElementById('p-tg-theme-dropdown-checkbox').checked = false;
        });
     });
     });
})();
});

Текущая версия от 13:50, 14 июня 2026

$(function () {
    const classes = ['theme-stddark', 'theme-nanotrasen', 'theme-syndicate', 'theme-plasmafire', 'theme-clockcult', 'theme-bloodcult', 'theme-heretic', 'theme-default'];

    function applyTheme(themeId) {
        classes.forEach(id => document.body.classList.remove(id));
        document.body.classList.remove('theme-active-dark');
        
        if (themeId && classes.includes(themeId)) {
            document.body.classList.add(themeId);
            if (themeId !== 'theme-default') {
                document.body.classList.add('theme-active-dark');
            }
            localStorage.setItem('mw-tg-theme', themeId);
        }
    }

    function injectSelector() {
        if (document.getElementById('p-tg-theme')) return;
        const activeTheme = localStorage.getItem('mw-tg-theme') || 'theme-stddark';
        applyTheme(activeTheme);

        let selectHtml = '<div id="p-tg-theme" style="margin: 0 10px; display: inline-block !important; vertical-align: middle !important; position: relative; width: 36px !important; height: 36px !important;">';
        selectHtml += '<input type="checkbox" id="p-tg-theme-dropdown-checkbox" role="button" aria-haspopup="true" class="vector-dropdown-checkbox" style="display: none !important;">';
        selectHtml += '<label id="p-tg-theme-dropdown-label" for="p-tg-theme-dropdown-checkbox" aria-label="Смена темы" title="Выбрать тему фракции" style="display: flex !important; width: 36px !important; height: 36px !important; align-items: center; justify-content: center; cursor: pointer; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important;">';
        selectHtml += '<span class="tg-custom-palette-icon"></span>';
        selectHtml += '</label>';
        selectHtml += '<div class="vector-dropdown-content" id="p-tg-dropdown-menu" style="padding: 8px; min-width: 180px; display: none; position: absolute; top: 110%; right: 0; z-index: 10000;">';
        selectHtml += '<ul class="vector-menu-content-list" style="margin: 0; padding: 0; list-style: none;">';

        const names = { 'theme-stddark': 'Standard Dark', 'theme-nanotrasen': 'Nanotrasen TGUI', 'theme-syndicate': 'Syndicate TGUI', 'theme-plasmafire': 'Plasmafire', 'theme-clockcult': 'Clock Cult', 'theme-bloodcult': 'Blood Cult', 'theme-heretic': 'Heretic', 'theme-default': 'Standard Light' };
        classes.forEach(id => {
            selectHtml += '<li style="margin: 4px 0;"><a href="#" class="tg-theme-item" data-theme="' + id + '" style="display: block; padding: 6px 8px; border-radius: 4px; text-decoration: none;">' + names[id] + '</a></li>';
        });
        selectHtml += '</ul></div></div>';

        const targets = [document.querySelector('.vector-user-links-main'), document.getElementById('p-personal-more'), document.getElementById('p-userlinks'), document.querySelector('.vector-user-links'), document.querySelector('.vector-header-end')];
        for (let target of targets) { if (target) { $(target).before(selectHtml); break; } }
    }

    injectSelector();

    $(document).on('change', '#p-tg-theme-dropdown-checkbox', function() {
        $(this).siblings('.vector-dropdown-content').css('display', this.checked ? 'block' : 'none');
    });

    $(document).on('click', '.tg-theme-item', function (e) {
        e.preventDefault();
        applyTheme($(this).data('theme'));
        $('#p-tg-theme-dropdown-checkbox').prop('checked', false).trigger('change');
    });
});