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();
    }
})();

// 卡牌模块相关的JavaScript功能
$(document).ready(function() {
    // 全局变量，跟踪当前打开的模态窗口
    var currentOpenModal = null;
    
    // 处理卡牌点击事件
    $(document).on('click', '.card-clickable', function(e) {
        e.stopPropagation();
        
        var modalId = $(this).data('modal-id');
        var modal = $('#' + modalId);
        
        if (modal.length) {
            // 如果有其他模态窗口打开，先关闭它
            if (currentOpenModal && currentOpenModal !== modalId) {
                $('#' + currentOpenModal).css('display', 'none');
            }
            
            // 检查是否有多个相同ID的模态窗口（这是问题的根源）
            var allModals = $('[id="' + modalId + '"]');
            if (allModals.length > 1) {
                // 如果有重复的模态窗口，只显示第一个，移除其他的
                allModals.slice(1).remove();
            }
            
            // 显示模态窗口
            modal.first().css('display', 'flex');
            currentOpenModal = modalId;
            
            // 确保主显示区域可见，变体区域隐藏
            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.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) {
            $(this).css('display', 'none');
            currentOpenModal = null;
            
            // 重置显示状态
            var mainDisplay = $(this).find('[id^="main-display-"]');
            var variantsDisplay = $(this).find('.variants-display');
            var btn = $(this).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', '.modal-main-content', function(e) {
        e.stopPropagation();
    });
    
    // 添加按钮悬停效果
    $(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) {
            if (currentOpenModal) {
                $('#' + currentOpenModal).css('display', 'none');
                currentOpenModal = null;
            }
        }
    });
    
    // 页面加载完成后，清理重复的模态窗口
    setTimeout(function() {
        $('.card-modal').each(function() {
            var modalId = $(this).attr('id');
            var duplicates = $('[id="' + modalId + '"]');
            if (duplicates.length > 1) {
                duplicates.slice(1).remove();
            }
        });
    }, 100);
});