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();
    
    // Подключаем Tippy.js через CDN динамически
    if (!window.tippy) {
        var tippyScript = document.createElement('script');
        tippyScript.src = "https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js";
        tippyScript.onload = function() {
            var tippyCoreScript = document.createElement('script');
            tippyCoreScript.src = "https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.min.js";
            tippyCoreScript.onload = initTippy;
            document.head.appendChild(tippyCoreScript);
        };
        document.head.appendChild(tippyScript);

        // Подключаем CSS
        var tippyCSS = document.createElement('link');
        tippyCSS.rel = "stylesheet";
        tippyCSS.href = "https://unpkg.com/tippy.js@6/dist/tippy.css";
        document.head.appendChild(tippyCSS);
    } else {
        initTippy();
    }

    // Инициализация Tippy после загрузки скриптов
    function initTippy() {
        $('.допуск-контейнер').each(function() {
            var content = $(this).find('.допуск-подсказка').html(); // берем содержимое подсказки
            tippy(this, {
                content: content,
                allowHTML: true,
                interactive: true,
                placement: 'auto',      // автоматический выбор позиции
                maxWidth: '500px',
                minHeight: 'auto',
                theme: 'dark',          // темная тема
                arrow: true,           // без стрелки
                duration: [200, 200],   // плавное появление/исчезание
                popperOptions: {
                    modifiers: [
                        {
                            name: 'preventOverflow',
                            options: {
                                padding: 8 // отступ от краев экрана
                            }
                        },
                        {
                            name: 'flip',
                            options: {
                                fallbackPlacements: ['top', 'bottom', 'right', 'left']
                            }
                        }
                    ]
                }
            });
        });
    }

	(function() {
	    'use strict';
	    
	    if (window.lawTooltipsLoaded) return;
	    window.lawTooltipsLoaded = true;
	    
	    function loadTippy(callback) {
	        if (window.tippy) {
	            callback();
	            return;
	        }
	        
	        var popperScript = document.createElement('script');
	        popperScript.src = 'https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js';
	        popperScript.onload = function() {
	            var tippyScript = document.createElement('script');
	            tippyScript.src = 'https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.min.js';
	            tippyScript.onload = callback;
	            document.head.appendChild(tippyScript);
	        };
	        document.head.appendChild(popperScript);
	        
	        var tippyCSS = document.createElement('link');
	        tippyCSS.rel = 'stylesheet';
	        tippyCSS.href = 'https://unpkg.com/tippy.js@6/dist/tippy.css';
	        document.head.appendChild(tippyCSS);
	    }
	    
	    function extractLawDataFromPage() {
	        var lawData = {};
	        var detailTables = document.querySelectorAll('.mw-collapsible-content table');
	        
	        detailTables.forEach(function(table) {
	            var rows = table.querySelectorAll('tr');
	            
	            rows.forEach(function(row) {
	                var cells = row.querySelectorAll('td');
	                if (cells.length >= 3) {
	                    var crimeCell = cells[0];
	                    var descriptionCell = cells[1];
	                    var exampleCell = cells[2];
	                    
	                    var anchor = crimeCell.querySelector('[id]');
	                    if (anchor) {
	                        var lawCode = anchor.id;
	                        var titleElement = crimeCell.querySelector('b');
	                        
	                        if (titleElement && lawCode.match(/^\d{3}$/)) {
	                            var titleText = titleElement.textContent.trim();
	                            
	                            var lawTitle = titleText.replace(/^\d{3}\s*/, '').replace(/^\d{3}/, '').trim();
	                            
	                            var description = descriptionCell.textContent.trim();
	                            
	                            var examples = [];
	                            var exampleItems = exampleCell.querySelectorAll('li');
	                            exampleItems.forEach(function(item) {
	                                var text = item.textContent.trim();
	                                if (text) {
	                                    examples.push(text);
	                                }
	                            });
	                            
	                            lawData[lawCode] = {
	                                title: lawTitle,
	                                description: description,
	                                examples: examples
	                            };
	                        }
	                    }
	                }
	            });
	        });
	        
	        return lawData;
	    }
	    
	    function createTooltipContent(lawCode, lawData) {
	        var data = lawData[lawCode];
	        if (!data) return null;
	        
	        var html = '<div class="law-tooltip">';
	        html += '<h4 class="law-tooltip-title">' + lawCode + ' - ' + data.title + '</h4>';
	        html += '<p class="law-tooltip-description">' + data.description + '</p>';
	        
	        if (data.examples && data.examples.length > 0) {
	            html += '<div class="law-tooltip-examples">';
	            html += '<strong>Примеры:</strong>';
	            html += '<ul>';
	            data.examples.slice(0, 5).forEach(function(example) {
	                html += '<li>' + example + '</li>';
	            });
	            html += '</ul>';
	            html += '</div>';
	        }
	        html += '</div>';
	        
	        return html;
	    }
	    
	    function initTooltips() {
	        var lawData = extractLawDataFromPage();
	        var tableCells = document.querySelectorAll('.law-tooltips td, .law-tooltips th');
	        
	        tableCells.forEach(function(cell) {
	            var link = cell.querySelector('a[href*="#"]');
	            
	            if (link) {
	                var href = link.getAttribute('href');
	                var match = href.match(/#(\d{3})/);
	                
	                if (match) {
	                    var lawCode = match[1];
	                    var tooltipContent = createTooltipContent(lawCode, lawData);
	                    
	                    if (tooltipContent) {
	                        cell.classList.add('law-cell-with-tooltip');
	                        
	                        cell.addEventListener('click', function(e) {
	                            e.preventDefault();
	                            window.location.hash = lawCode;
	                        });
	                        
	                        tippy(cell, {
	                            content: tooltipContent,
	                            allowHTML: true,
	                            interactive: true,
	                            placement: 'top',
	                            maxWidth: 400,
	                            theme: 'law-theme',
	                            arrow: true,
	                            duration: [200, 150],
	                            delay: [0, 50],
	                            appendTo: document.body,
	                            boundary: 'viewport',
	                            popperOptions: {
	                                strategy: 'fixed',
	                                modifiers: [
	                                    {
	                                        name: 'preventOverflow',
	                                        options: {
	                                            boundary: 'viewport',
	                                            padding: 20,
	                                            altAxis: true,
	                                            altBoundary: true
	                                        }
	                                    },
	                                    {
	                                        name: 'flip',
	                                        options: {
	                                            fallbackPlacements: ['bottom', 'left', 'right']
	                                        }
	                                    },
	                                    {
	                                        name: 'computeStyles',
	                                        options: {
	                                            adaptive: false
	                                        }
	                                    }
	                                ]
	                            },
	                            onShow: function(instance) {
	                                document.querySelectorAll('[data-tippy-root]').forEach(function(tooltip) {
	                                    if (tooltip._tippy && tooltip._tippy !== instance) {
	                                        tooltip._tippy.hide();
	                                    }
	                                });
	                            }
	                        });
	                    }
	                }
	            }
	        });
	    }
	    
	    function init() {
	        loadTippy(function() {
	            initTooltips();
	        });
	    }
	    
	    if (document.readyState === 'loading') {
	        document.addEventListener('DOMContentLoaded', init);
	    } else {
	        init();
	    }
	    
	})();
	
	(function() {
	    'use strict';
	    
	    console.log('Data tooltip script loading...');
	    
	    if (window.dataTextTooltipsLoaded) {
	        console.log('Script already loaded, skipping...');
	        return;
	    }
	    window.dataTextTooltipsLoaded = true;
	    
	    function loadTippy(callback) {
	        console.log('Loading Tippy.js...');
	        if (window.tippy) {
	            console.log('Tippy.js already loaded');
	            callback();
	            return;
	        }
	        
	        var popperScript = document.createElement('script');
	        popperScript.src = 'https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js';
	        popperScript.onload = function() {
	            console.log('Popper.js loaded');
	            var tippyScript = document.createElement('script');
	            tippyScript.src = 'https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.min.js';
	            tippyScript.onload = function() {
	                console.log('Tippy.js loaded');
	                callback();
	            };
	            tippyScript.onerror = function() {
	                console.error('Failed to load Tippy.js');
	            };
	            document.head.appendChild(tippyScript);
	        };
	        popperScript.onerror = function() {
	            console.error('Failed to load Popper.js');
	        };
	        document.head.appendChild(popperScript);
	        
	        var tippyCSS = document.createElement('link');
	        tippyCSS.rel = 'stylesheet';
	        tippyCSS.href = 'https://unpkg.com/tippy.js@6/dist/tippy.css';
	        document.head.appendChild(tippyCSS);
	    }
	    
	    function initTooltips() {
	        console.log('Initializing tooltips...');
	        var elements = document.querySelectorAll('.data-tooltip[data-text]');
	        console.log('Found elements:', elements.length);
	        
	        elements.forEach(function(element, index) {
	            var tooltipText = element.getAttribute('data-text');
	            console.log('Element', index + 1, ':', element, 'Text:', tooltipText);
	            
	            if (tooltipText && tooltipText.trim()) {
	                try {
	                    tippy(element, {
	                        content: tooltipText,
	                        allowHTML: true,
	                        interactive: false,
	                        placement: 'top',
	                        maxWidth: 300,
	                        theme: 'data-tooltip-theme',
	                        arrow: true,
	                        duration: [200, 150],
	                        delay: [0, 50],
	                        onShow: function(instance) {
	                            console.log('Tooltip showing for:', instance.reference);
	                        },
	                        onHide: function(instance) {
	                            console.log('Tooltip hiding for:', instance.reference);
	                        }
	                    });
	                    console.log('Tooltip created for element', index + 1);
	                } catch (error) {
	                    console.error('Error creating tooltip:', error);
	                }
	            }
	        });
	        
	        console.log('Tooltips initialization complete');
	    }
	    
	    function init() {
	        console.log('Initializing data tooltip system...');
	        loadTippy(function() {
	            console.log('Tippy loaded, initializing tooltips...');
	            setTimeout(function() {
	                initTooltips();
	            }, 100);
	        });
	    }
	    
	    if (document.readyState === 'loading') {
	        console.log('Document loading, waiting for DOMContentLoaded...');
	        document.addEventListener('DOMContentLoaded', init);
	    } else {
	        console.log('Document ready, initializing immediately...');
	        init();
	    }
	    
	})();
});