MediaWiki:Common.js

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
• Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
• Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
• Opera: Нажмите Ctrl+F5.

(function () {
    var BUTTON_URL = 'https://i-on.pro/catalog';
    var BUTTON_TEXT = 'Купить у дистрибьютора';
    var BUTTON_CLASS = 'distributor-link';
    var STYLE_ID = 'distributor-link-inline-styles';

    function ensureStyles() {
        if (document.getElementById(STYLE_ID)) {
            return;
        }

        var style = document.createElement('style');
        style.id = STYLE_ID;
        style.type = 'text/css';
        style.appendChild(document.createTextNode([
            '.skin-vector-2022 .vector-header-end {',
            '    align-items: center;',
            '    gap: 12px;',
            '}',
            '',
            '.skin-vector-2022 .' + BUTTON_CLASS + ' {',
            '    display: inline-flex;',
            '    align-items: center;',
            '    justify-content: center;',
            '    flex: 0 0 auto;',
            '    max-width: 100%;',
            '    box-sizing: border-box;',
            '    white-space: nowrap;',
            '    padding: 18px 40px;',
            '    border-radius: 999px;',
            '    background: linear-gradient(135deg, #01a2e7, #00b0f0);',
            '    color: #ffffff !important;',
            '    font-size: 15px;',
            '    font-weight: 600;',
            '    line-height: 1.2;',
            '    text-align: center;',
            '    text-decoration: none !important;',
            '    box-shadow: 0 6px 16px rgba(1, 162, 231, 0.28);',
            '    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;',
            '}',
            '',
            '.skin-vector-2022 .' + BUTTON_CLASS + ':hover,',
            '.skin-vector-2022 .' + BUTTON_CLASS + ':focus {',
            '    color: #ffffff !important;',
            '    text-decoration: none !important;',
            '    transform: translateY(-1px);',
            '    box-shadow: 0 8px 18px rgba(1, 162, 231, 0.34);',
            '}',
            '',
            '@media (max-width: 1366px) {',
            '    .skin-vector-2022 .' + BUTTON_CLASS + ' {',
            '        padding: 10px 18px;',
            '        font-size: 14px;',
            '    }',
            '}',
            '',
            '@media (max-width: 1100px) {',
            '    .skin-vector-2022 .vector-header-end {',
            '        flex-wrap: wrap;',
            '        align-items: flex-start;',
            '        row-gap: 10px;',
            '    }',
            '',
            '    .skin-vector-2022 .vector-header-end #p-search {',
            '        order: 1;',
            '        flex: 1 1 100%;',
            '        min-width: 0;',
            '    }',
            '',
            '    .skin-vector-2022 .' + BUTTON_CLASS + ' {',
            '        order: 2;',
            '        padding: 10px 16px;',
            '        font-size: 14px;',
            '    }',
            '',
            '    .skin-vector-2022 .vector-header-end .vector-user-links {',
            '        order: 3;',
            '        margin-left: auto;',
            '    }',
            '}',
            '',
            '@media (max-width: 720px) {',
            '    .skin-vector-2022 .vector-header-end {',
            '        row-gap: 8px;',
            '    }',
            '',
            '    .skin-vector-2022 .vector-header-end .vector-user-links {',
            '        order: 2;',
            '        width: 100%;',
            '        justify-content: flex-end;',
            '        margin-left: 0;',
            '    }',
            '',
            '    .skin-vector-2022 .' + BUTTON_CLASS + ' {',
            '        order: 3;',
            '        flex: 1 1 100%;',
            '        width: 100%;',
            '        white-space: normal;',
            '        padding: 12px 16px;',
            '        font-size: 14px;',
            '    }',
            '}'
        ].join('\n')));

        document.head.appendChild(style);
    }

    function createButton() {
        var link = document.createElement('a');
        link.href = BUTTON_URL;
        link.target = '_blank';
        link.rel = 'noopener noreferrer';
        link.className = BUTTON_CLASS;
        link.textContent = BUTTON_TEXT;
        return link;
    }

    function insertButton() {
        if (document.querySelector('.' + BUTTON_CLASS)) {
            return true;
        }

        var headerEnd = document.querySelector('.vector-header-end');
        if (!headerEnd) {
            return false;
        }

        var userLinks = headerEnd.querySelector('.vector-user-links');
        var button = createButton();

        if (userLinks) {
            headerEnd.insertBefore(button, userLinks);
        } else {
            headerEnd.appendChild(button);
        }

        return true;
    }

    function init() {
        ensureStyles();

        var attempts = 0;
        var timer = setInterval(function () {
            attempts += 1;

            if (insertButton() || attempts >= 20) {
                clearInterval(timer);
            }
        }, 300);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();