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();
    
    $('.допуск-контейнер').hover(function() {
        var $tooltip = $(this).find('.допуск-подсказка');
        var $container = $(this);

        var rect = $container[0].getBoundingClientRect();
        var tooltipRect = $tooltip[0].getBoundingClientRect();
        var viewportWidth = $(window).width();
        var viewportHeight = $(window).height();

        var 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.css('left', left + 'px');

        var bottom = rect.height + 10; // по умолчанию снизу
        var 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.css({
            'top': top,
            'bottom': bottom === 'auto' ? 'auto' : bottom + 'px',
            'opacity': 1,
            'transform': 'translateY(0)'
        });

    }, function() {
        $(this).find('.допуск-подсказка').css({
            'opacity': 0,
            'transform': 'translateY(10px)'
        });
    });
});