MediaWiki:Common.js

$(document).ready(function() {
    // Инициализация боковой панели
    $('.боковая-панель-кнопка').on('click', function() {
        var targetId = $(this).data('target');
        
        // Удаляем активный класс у всех кнопок
        $('.боковая-панель-кнопка').removeClass('active');
        // Добавляем активный класс текущей кнопке
        $(this).addClass('active');
        
        // Скрываем все разделы
        $('.боковая-панель-раздел').removeClass('default');
        // Показываем выбранный раздел
        $('#' + targetId).addClass('default');
    });
    
    // Активируем первую кнопку по умолчанию
    $('.боковая-панель-кнопка:first').click();
});

document.querySelectorAll('.допуск-контейнер').forEach(container => {
    const tooltip = container.querySelector('.допуск-подсказка');

    container.addEventListener('mouseenter', () => {
        const rect = container.getBoundingClientRect();
        const tooltipRect = tooltip.getBoundingClientRect();
        const viewportWidth = window.innerWidth;
        const viewportHeight = window.innerHeight;

        // горизонтальное положение
        let left = rect.left + rect.width / 2 - tooltipRect.width / 2;
        if (left + tooltipRect.width > viewportWidth - 10) left = viewportWidth - tooltipRect.width - 10;
        if (left < 10) left = 10;
        tooltip.style.left = `${left}px`;

        // вертикальное положение
        let bottom = rect.height + 10; // по умолчанию снизу
        let top = 'auto';

        if (rect.bottom + tooltipRect.height + 10 > viewportHeight) {
            if (rect.top - tooltipRect.height - 10 >= 0) {
                top = rect.top - tooltipRect.height - 10 + 'px';
                bottom = 'auto';
            } else {
                top = rect.top + rect.height / 2 - tooltipRect.height / 2 + 'px';
                bottom = 'auto';
            }
        }

        tooltip.style.top = top;
        tooltip.style.bottom = bottom === 'auto' ? 'auto' : `${bottom}px`;

        tooltip.style.opacity = 1;
        tooltip.style.transform = 'translateY(0)';
    });

    container.addEventListener('mouseleave', () => {
        tooltip.style.opacity = 0;
        tooltip.style.transform = 'translateY(10px)';
    });
});