MediaWiki:Common.js

/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */

// 切换标签
(function() {
    'use strict';
    
    function initTabSwitcher() {
        var tabContainers = document.querySelectorAll('.resp-tabs');
        
        tabContainers.forEach(function(container) {
            var tabButtons = container.querySelectorAll('.czn-list-style');
            if (tabButtons.length === 0) return;
            
            // 检测模式
            var tabContents = container.querySelectorAll('.resp-tab-content');
            var portraitImages = document.querySelectorAll('.portrait-image');
            
            // 初始化
            tabButtons.forEach(function(button, index) {
                button.classList.toggle('active', index === 0);
            });
            
            if (tabContents.length > 0) {
                tabContents.forEach(function(content, index) {
                    content.style.display = index === 0 ? 'block' : 'none';
                });
            }
            
            if (portraitImages.length > 0) {
                portraitImages.forEach(function(image, index) {
                    image.style.display = index === 0 ? 'block' : 'none';
                });
            }
            
            // 点击事件
            tabButtons.forEach(function(button, index) {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 更新标签状态
                    tabButtons.forEach(function(btn, i) {
                        btn.classList.toggle('active', i === index);
                    });
                    
                    // 传统模式切换
                    if (tabContents.length > 0) {
                        tabContents.forEach(function(content, i) {
                            content.style.display = i === index ? 'block' : 'none';
                        });
                    }
                    
                    // 立绘模式切换
                    if (portraitImages.length > 0) {
                        portraitImages.forEach(function(image) {
                            image.style.display = 'none';
                        });
                        var targetImage = document.querySelector('.portrait-image[data-index="' + index + '"]');
                        if (targetImage) {
                            targetImage.style.display = 'block';
                        }
                    }
                });
            });
        });
    }
    
    // 初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initTabSwitcher);
    } else {
        initTabSwitcher();
    }
})();

// 卡牌点击放大功能
$(document).ready(function() {
    // 处理卡牌点击事件
    $(document).on('click', '.card-clickable', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        var modalId = $(this).data('modal-id');
        var modal = $('#' + modalId);
        
        if (modal.length) {
            // 关闭其他所有可能打开的模态窗口
            $('.card-modal').css('display', 'none');
            
            // 显示当前模态窗口
            modal.css('display', 'flex');
            
            // 确保主显示区域可见，变体区域隐藏
            var mainDisplay = modal.find('[id^="main-display-"]');
            var variantsDisplay = modal.find('.variants-display');
            var btn = modal.find('.lingguangyishan-btn');
            
            if (mainDisplay.length) mainDisplay.css('display', 'flex');
            if (variantsDisplay.length) variantsDisplay.css('display', 'none');
            if (btn.length) {
                btn.text('灵光一闪');
                btn.css('background-color', '#4a90e2');
            }
        }
    });
    
    // 处理灵光一闪按钮点击事件
    $(document).on('click', '.lingguangyishan-btn', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        var variantsId = $(this).data('variants-id');
        var modalId = $(this).data('modal-id');
        var variantsDisplay = $('#' + variantsId);
        var mainDisplay = $('#main-display-' + modalId);
        
        if (variantsDisplay.length && mainDisplay.length) {
            if (variantsDisplay.css('display') === 'none' || variantsDisplay.css('display') === '') {
                // 显示变体，隐藏主显示
                variantsDisplay.css('display', 'block');
                mainDisplay.css('display', 'none');
                $(this).text('返回');
                $(this).css('background-color', '#5cb85c');
            } else {
                // 隐藏变体，显示主显示
                variantsDisplay.css('display', 'none');
                mainDisplay.css('display', 'flex');
                $(this).text('灵光一闪');
                $(this).css('background-color', '#4a90e2');
            }
        }
    });
    
    // 处理模态窗口关闭事件 - 只关闭被点击的模态窗口
    $(document).on('click', '.card-modal', function(e) {
        if (e.target === this) {
            var modal = $(this);
            modal.css('display', 'none');
            
            // 重置显示状态
            var mainDisplay = modal.find('[id^="main-display-"]');
            var variantsDisplay = modal.find('.variants-display');
            var btn = modal.find('.lingguangyishan-btn');
            
            if (mainDisplay.length) mainDisplay.css('display', 'flex');
            if (variantsDisplay.length) variantsDisplay.css('display', 'none');
            if (btn.length) {
                btn.text('灵光一闪');
                btn.css('background-color', '#4a90e2');
            }
        }
    });
    
    // 添加按钮悬停效果
    $(document).on('mouseenter', '.lingguangyishan-btn', function() {
        if ($(this).text() === '灵光一闪') {
            $(this).css('background-color', '#357abd');
        } else {
            $(this).css('background-color', '#449d44');
        }
    });
    
    $(document).on('mouseleave', '.lingguangyishan-btn', function() {
        if ($(this).text() === '灵光一闪') {
            $(this).css('background-color', '#4a90e2');
        } else {
            $(this).css('background-color', '#5cb85c');
        }
    });
    
    // 处理ESC键关闭所有模态窗口
    $(document).on('keydown', function(e) {
        if (e.key === 'Escape' || e.keyCode === 27) {
            $('.card-modal:visible').each(function() {
                var modal = $(this);
                modal.css('display', 'none');
                
                // 重置显示状态
                var mainDisplay = modal.find('[id^="main-display-"]');
                var variantsDisplay = modal.find('.variants-display');
                var btn = modal.find('.lingguangyishan-btn');
                
                if (mainDisplay.length) mainDisplay.css('display', 'flex');
                if (variantsDisplay.length) variantsDisplay.css('display', 'none');
                if (btn.length) {
                    btn.text('灵光一闪');
                    btn.css('background-color', '#4a90e2');
                }
            });
        }
    });
});