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

            $('#filter-display').text(filterText.join(' | '));
            $('#current-filters').fadeIn(300);
        } else {
            $('#current-filters').fadeOut(300);
        }
        
        // 更新统计
        updateStats();
        
        // 如果没有结果，显示提示
        if (visibleCount === 0) {
            if ($('#no-results').length === 0) {
                $('#character-container').append(
                    '<div id="no-results" style="width: 100%; text-align: center; padding: 50px 20px; color: #6c757d; font-size: 16px;">' +
                    '<div style="font-size: 48px; margin-bottom: 20px;">😔</div>' +
                    '没有找到符合条件的战斗员<br>' +
                    '<small style="font-size: 14px; color: #adb5bd;">尝试修改筛选条件或减少关键词</small>' +
                    '</div>'
                );
            }
        } else {
            $('#no-results').remove();
        }
    }
    
    // 更新统计信息
    function updateStats() {
        var total = $('.character-card').length;
        var visible = $('.character-card:visible').length;
        
        // 动画更新数字
        animateNumber($('#visible-count'), visible);
        animateNumber($('#total-count'), total);
        
        // 根据显示比例改变统计颜色
        var percentage = total > 0 ? (visible / total) * 100 : 0;
        var statsColor = '#28a745'; // 绿色
        if (percentage < 50) statsColor = '#ffc107'; // 黄色
        if (percentage < 25) statsColor = '#dc3545'; // 红色
        
        $('#visible-count').css('color', statsColor);
    }
    
    // 数字动画效果
    function animateNumber($element, target) {
        var current = parseInt($element.text()) || 0;
        if (current === target) return;
        
        var increment = target > current ? 1 : -1;
        var steps = Math.abs(target - current);
        var duration = Math.min(500, steps * 20);
        var stepDuration = duration / steps;
        
        var timer = setInterval(function() {
            current += increment;
            $element.text(current);
            
            if (current === target) {
                clearInterval(timer);
            }
        }, stepDuration);
    }
    
    // 为搜索框添加清除按钮
    function addClearButton() {
        var $searchInput = $('#character-search-input');
        if ($searchInput.length > 0 && $('#clear-search').length === 0) {
            var $clearBtn = $('<span>', {
                id: 'clear-search',
                text: '✕',
                style: 'position: relative; left: -25px; cursor: pointer; color: #6c757d; display: none;'
            });
            
            $searchInput.after($clearBtn);
            
            // 显示/隐藏清除按钮
            $searchInput.on('input', function() {
                if ($(this).val().length > 0) {
                    $clearBtn.show();
                } else {
                    $clearBtn.hide();
                }
            });
            
            // 清除按钮点击事件
            $clearBtn.on('click', function() {
                $searchInput.val('').trigger('input');
                currentFilters.search = '';
                applyFilters();
            });
        }
    }
    
    // 初始化清除按钮
    addClearButton();
    
    // 添加键盘快捷键
    $(document).on('keydown', function(e) {
        // Ctrl/Cmd + F 聚焦搜索框
        if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
            e.preventDefault();
            $('#character-search-input').focus().select();
        }
        
        // ESC 清除搜索
        if (e.key === 'Escape') {
            if ($('#character-search-input').is(':focus')) {
                $('#character-search-input').val('').trigger('input');
                currentFilters.search = '';
                applyFilters();
            }
        }
    });
    
    // 高亮搜索关键词（可选功能）
    function highlightSearchTerm() {
        if (currentFilters.search !== '') {
            $('.character-card:visible').each(function() {
                var $card = $(this);
                var $nameElement = $card.find('.character-name');
                if ($nameElement.length > 0) {
                    var originalText = $nameElement.data('original-text') || $nameElement.text();
                    $nameElement.data('original-text', originalText);
                    
                    var regex = new RegExp('(' + currentFilters.search + ')', 'gi');
                    var highlightedText = originalText.replace(regex, '<span style="background-color: #ffeb3b; font-weight: bold;">$1</span>');
                    $nameElement.html(highlightedText);
                }
            });
        } else {
            // 恢复原始文本
            $('.character-name').each(function() {
                var originalText = $(this).data('original-text');
                if (originalText) {
                    $(this).text(originalText);
                }
            });
        }
    }
    
    // 保存和加载用户偏好
    var userPreferences = {
        save: function() {
            if (typeof(Storage) !== "undefined") {
                localStorage.setItem('characterFilters', JSON.stringify(currentFilters));
                localStorage.setItem('filterTimestamp', Date.now());
            }
        },
        load: function() {
            if (typeof(Storage) !== "undefined") {
                var saved = localStorage.getItem('characterFilters');
                var timestamp = localStorage.getItem('filterTimestamp');
                
                // 只在24小时内有效
                if (saved && timestamp) {
                    var age = Date.now() - parseInt(timestamp);
                    if (age < 24 * 60 * 60 * 1000) {
                        return JSON.parse(saved);
                    }
                }
            }
            return null;
        },
        clear: function() {
            if (typeof(Storage) !== "undefined") {
                localStorage.removeItem('characterFilters');
                localStorage.removeItem('filterTimestamp');
            }
        }
    };
    
    // 可选：加载用户上次的筛选设置
    var savedFilters = userPreferences.load();
    if (savedFilters) {
        currentFilters = savedFilters;
        // 应用保存的筛选
        setTimeout(function() {
            applyFilters();
            // 更新UI状态
            if (currentFilters.search) {
                $('#character-search-input').val(currentFilters.search);
            }
            // 更新按钮状态
            Object.keys(currentFilters).forEach(function(filterType) {
                if (filterType !== 'search') {
                    $('.filter-btn[data-filter="' + filterType + '"][data-value="' + currentFilters[filterType] + '"]')
                        .css('background-color', colors.active);
                }
            });
        }, 100);
    }
    
    // 在筛选改变时保存
    $(window).on('beforeunload', function() {
        userPreferences.save();
    });
    
    // 添加筛选提示
    function showFilterTip() {
        if ($('#filter-tip').length === 0 && Math.random() < 0.1) { // 10%概率显示
            var tips = [
                '提示：按 Ctrl+F 可以快速聚焦搜索框',
                '提示：可以同时使用多个筛选条件',
                '提示：搜索支持实时预览结果',
                '提示：你的筛选设置会自动保存24小时'
            ];
            var randomTip = tips[Math.floor(Math.random() * tips.length)];
            
            $('<div>', {
                id: 'filter-tip',
                html: '<span style="color: #17a2b8;">💡 ' + randomTip + '</span>',
                style: 'padding: 10px; background-color: #d1ecf1; border: 1px solid #bee5eb; border-radius: 5px; margin-bottom: 10px;'
            }).prependTo('#filter-controls').delay(5000).fadeOut(500, function() {
                $(this).remove();
            });
        }
    }
    
    // 初始显示提示
    setTimeout(showFilterTip, 1000);
});

/* 添加CSS样式通过JavaScript */
$(function() {
    if ($('#character-filter-style').length === 0) {
        $('<style>', {
            id: 'character-filter-style',
            text: `
                #character-filter-system * {
                    box-sizing: border-box;
                }
                
                .filter-btn, #reset-filters, #search-button {
                    transition: all 0.3s ease;
                    user-select: none;
                }
                
                .filter-btn:active, #reset-filters:active, #search-button:active {
                    transform: scale(0.95) !important;
                }
                
                #character-search-input {
                    transition: border-color 0.3s ease;
                }
                
                #character-search-input:focus {
                    border-color: #80bdff !important;
                    outline: none;
                    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
                }
                
                .character-card {
                    transition: all 0.3s ease;
                }
                
                .character-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
                }
                
                #no-results {
                    animation: fadeIn 0.5s ease;
                }
                
                @keyframes fadeIn {
                    from { opacity: 0; transform: translateY(10px); }
                    to { opacity: 1; transform: translateY(0); }
                }
                
                @media (max-width: 768px) {
                    .filter-group {
                        margin-bottom: 20px !important;
                    }
                    
                    .filter-btn {
                        margin-bottom: 5px !important;
                    }
                    
                    #character-search-input {
                        width: 100% !important;
                        margin-bottom: 10px;
                    }
                    
                    #search-button, #reset-filters {
                        display: inline-block !important;
                        margin-bottom: 5px;
                    }
                }
            `
        }).appendTo('head');
    }
});