查看“︁微件:Card”︁的源代码

<noinclude>
此Widget为卡牌显示添加交互效果：
* 鼠标悬停时的动画效果
* 点击后显示放大的模态框
* 自动检测spark_enable属性显示闪光按钮
* 支持闪光卡牌列表显示

使用方法：在页面底部添加 <code>{{#widget:Card}}</code>
</noinclude><includeonly>
<style>
/* 卡牌容器 */
.card-wrapper {
    display: inline-block;
}

/* 卡牌悬停动画 */
.card-deck-trans {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.card-deck-trans:hover {
    transform: translateY(-8px);
    filter: brightness(1.1);
}

.card-deck-trans:active {
    transform: translateY(-4px) scale(0.98);
}

/* 模态框通用样式 */
.card-modal-overlay,
.spark-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.spark-modal-overlay {
    z-index: 10010;
    background-color: rgba(0, 0, 0, 0.9);
}

.card-modal-overlay.active,
.spark-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.card-modal-overlay.fade-in,
.spark-modal-overlay.fade-in {
    opacity: 1;
}

.card-modal-overlay.fade-out,
.spark-modal-overlay.fade-out {
    opacity: 0;
}

/* 关闭按钮 */
.card-modal-close,
.spark-modal-close {
    position: fixed;
    top: 20px;
    right: 30px;
    font-size: 48px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    z-index: 10001;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.spark-modal-close {
    z-index: 10012;
}

.card-modal-close:hover,
.spark-modal-close:hover {
    color: #ff6b6b;
    transform: scale(1.1);
}

/* 模态框中的卡牌容器 */
.card-modal-content {
    position: relative;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: cardZoomIn 0.3s ease;
}

.spark-modal-content {
    position: relative;
    z-index: 10011;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    animation: cardZoomIn 0.3s ease;
}

@keyframes cardZoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* 放大后的卡牌样式 */
.card-modal-content > .card-deck-trans,
.card-modal-content > .card-wrapper > .card-deck-trans {
    width: 270px !important;
    height: 384px !important;
    transform: none !important;
    filter: none !important;
    cursor: default;
}

.card-modal-content > .card-deck-trans:hover,
.card-modal-content > .card-wrapper > .card-deck-trans:hover {
    transform: none !important;
    filter: none !important;
}

.card-modal-content > .card-deck-trans > .card-deck,
.card-modal-content > .card-wrapper > .card-deck-trans > .card-deck {
    transform: scale(0.6) !important;
}

/* 闪光按钮 */
.spark-button {
    margin-top: 20px;
    padding: 12px 36px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px solid #a78bfa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.spark-button:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    transform: translateY(-2px);
}

.spark-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
}

/* 闪光图标动画 */
.spark-button::before {
    content: "✦ ";
    animation: sparkle 1.5s ease-in-out infinite;
}

.spark-button::after {
    content: " ✦";
    animation: sparkle 1.5s ease-in-out infinite 0.75s;
}

@keyframes sparkle {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* 闪光卡牌列表样式 */
.spark-modal-title {
    text-align: center;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.spark-modal-title::before {
    content: "✦ ";
    color: #a78bfa;
}

.spark-modal-title::after {
    content: " ✦";
    color: #a78bfa;
}

.spark-card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.spark-card-list .card-wrapper {
    display: inline-block;
}

.spark-card-list .card-deck-trans {
    cursor: pointer;
}

.spark-card-list .card-deck-trans:hover {
    transform: translateY(-8px);
    filter: brightness(1.1);
}

/* 加载提示 */
.spark-loading {
    color: #fff;
    font-size: 18px;
    text-align: center;
    padding: 40px;
}

.spark-loading::after {
    content: "";
    animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
    0% { content: ""; }
    25% { content: "."; }
    50% { content: ".."; }
    75% { content: "..."; }
}

/* 空列表提示 */
.spark-empty {
    color: #999;
    font-size: 16px;
    text-align: center;
    padding: 40px;
}

/* 放大的闪光卡牌 */
.spark-enlarged-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10015;
    animation: cardZoomIn 0.3s ease;
}

.spark-enlarged-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.spark-enlarged-card .card-deck-trans {
    width: 270px !important;
    height: 384px !important;
    transform: none !important;
    filter: none !important;
    cursor: default;
}

.spark-enlarged-card .card-deck-trans:hover {
    transform: none !important;
    filter: none !important;
}

.spark-enlarged-card .card-deck {
    transform: scale(0.6) !important;
}

.spark-enlarged-close {
    position: fixed;
    top: 20px;
    right: 30px;
    font-size: 48px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    z-index: 10016;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.spark-enlarged-close:hover {
    color: #ff6b6b;
    transform: scale(1.1);
}

/* 防止模态框打开时页面滚动 */
body.card-modal-open {
    overflow: hidden;
}

/* 滚动条样式 */
.spark-modal-content::-webkit-scrollbar {
    width: 8px;
}

.spark-modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.spark-modal-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.spark-modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}
</style>

<script>
(function() {
    'use strict';
    
    // 确保DOM加载完成
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initCardWidget);
    } else {
        initCardWidget();
    }
    
    function initCardWidget() {
        // 创建主模态框元素（如果不存在）
        var modalOverlay = document.querySelector('.card-modal-overlay');
        
        if (!modalOverlay) {
            modalOverlay = document.createElement('div');
            modalOverlay.className = 'card-modal-overlay';
            modalOverlay.innerHTML = '<span class="card-modal-close">&times;</span><div class="card-modal-content"></div>';
            document.body.appendChild(modalOverlay);
        }
        
        // 创建闪光卡牌模态框（如果不存在）
        var sparkModalOverlay = document.querySelector('.spark-modal-overlay');
        
        if (!sparkModalOverlay) {
            sparkModalOverlay = document.createElement('div');
            sparkModalOverlay.className = 'spark-modal-overlay';
            sparkModalOverlay.innerHTML = '<span class="spark-modal-close">&times;</span><div class="spark-modal-content"></div>';
            document.body.appendChild(sparkModalOverlay);
        }
        
        var modalContent = modalOverlay.querySelector('.card-modal-content');
        var closeButton = modalOverlay.querySelector('.card-modal-close');
        var sparkModalContent = sparkModalOverlay.querySelector('.spark-modal-content');
        var sparkCloseButton = sparkModalOverlay.querySelector('.spark-modal-close');
        
        // 当前放大的闪光卡牌容器
        var currentEnlargedContainer = null;
        
        // 关闭主模态框函数
        function closeModal() {
            modalOverlay.classList.add('fade-out');
            setTimeout(function() {
                modalOverlay.classList.remove('active', 'fade-in', 'fade-out');
                modalContent.innerHTML = '';
                document.body.classList.remove('card-modal-open');
            }, 300);
        }
        
        // 关闭闪光模态框函数
        function closeSparkModal() {
            // 先关闭放大的卡牌
            if (currentEnlargedContainer) {
                currentEnlargedContainer.remove();
                currentEnlargedContainer = null;
            }
            
            sparkModalOverlay.classList.add('fade-out');
            setTimeout(function() {
                sparkModalOverlay.classList.remove('active', 'fade-in', 'fade-out');
                sparkModalContent.innerHTML = '';
            }, 300);
        }
        
        // 关闭放大的闪光卡牌
        function closeEnlargedCard() {
            if (currentEnlargedContainer) {
                currentEnlargedContainer.remove();
                currentEnlargedContainer = null;
            }
        }
        
        // 打开主模态框函数
        function openModal(cardElement, cardId, sparkEnable) {
            var cardClone = cardElement.cloneNode(true);
            // 移除克隆卡牌的点击事件标记
            delete cardClone.dataset.cardBound;
            
            modalContent.innerHTML = '';
            modalContent.appendChild(cardClone);
            
            // 如果启用了闪光功能，添加闪光按钮
            if (sparkEnable && sparkEnable.trim() !== '') {
                var sparkButton = document.createElement('button');
                sparkButton.className = 'spark-button';
                sparkButton.textContent = '闪光';
                sparkButton.dataset.cardId = cardId;
                sparkButton.addEventListener('click', function() {
                    openSparkModal(cardId);
                });
                modalContent.appendChild(sparkButton);
            }
            
            modalOverlay.classList.add('active');
            document.body.classList.add('card-modal-open');
            
            // 强制重绘后添加fade-in
            requestAnimationFrame(function() {
                modalOverlay.classList.add('fade-in');
            });
        }
        
        // 打开闪光卡牌模态框
        function openSparkModal(cardId) {
            sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌列表</div><div class="spark-loading">加载中</div>';
            
            sparkModalOverlay.classList.add('active');
            requestAnimationFrame(function() {
                sparkModalOverlay.classList.add('fade-in');
            });
            
            // 通过API获取闪光卡牌列表
            var api = new mw.Api();
            api.get({
                action: 'parse',
                text: '{{Card/spark/list|' + cardId + '}}',
                prop: 'text',
                disablelimitreport: true,
                format: 'json'
            }).done(function(data) {
                if (data.parse && data.parse.text) {
                    var html = data.parse.text['*'];
                    
                    // 检查是否有卡牌
                    var tempDiv = document.createElement('div');
                    tempDiv.innerHTML = html;
                    var cards = tempDiv.querySelectorAll('.card-deck-trans');
                    
                    if (cards.length > 0) {
                        sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌列表</div>' + html;
                        // 为闪光列表中的卡牌绑定事件
                        bindSparkListCardEvents();
                    } else {
                        sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌列表</div><div class="spark-empty">暂无闪光卡牌</div>';
                    }
                }
            }).fail(function() {
                sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌列表</div><div class="spark-empty">加载失败，请重试</div>';
            });
        }
        
        // 为闪光列表中的卡牌绑定点击事件
        function bindSparkListCardEvents() {
            var sparkCards = sparkModalContent.querySelectorAll('.card-deck-trans');
            sparkCards.forEach(function(card) {
                if (card.dataset.sparkBound) return;
                card.dataset.sparkBound = 'true';
                
                card.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // 关闭之前放大的卡牌
                    closeEnlargedCard();
                    
                    // 创建放大容器
                    var enlargedContainer = document.createElement('div');
                    enlargedContainer.className = 'spark-enlarged-container';
                    
                    // 添加关闭按钮
                    var closeBtn = document.createElement('span');
                    closeBtn.className = 'spark-enlarged-close';
                    closeBtn.innerHTML = '&times;';
                    closeBtn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        closeEnlargedCard();
                    });
                    enlargedContainer.appendChild(closeBtn);
                    
                    // 创建卡牌内容区
                    var cardContent = document.createElement('div');
                    cardContent.className = 'spark-enlarged-card';
                    
                    var cardClone = this.cloneNode(true);
                    delete cardClone.dataset.sparkBound;
                    cardContent.appendChild(cardClone);
                    
                    enlargedContainer.appendChild(cardContent);
                    
                    // 点击背景关闭
                    enlargedContainer.addEventListener('click', function(e) {
                        if (e.target === enlargedContainer) {
                            closeEnlargedCard();
                        }
                    });
                    
                    document.body.appendChild(enlargedContainer);
                    currentEnlargedContainer = enlargedContainer;
                });
            });
        }
        
        // 绑定关闭按钮事件
        closeButton.addEventListener('click', function(e) {
            e.stopPropagation();
            closeModal();
        });
        
        sparkCloseButton.addEventListener('click', function(e) {
            e.stopPropagation();
            closeSparkModal();
        });
        
        // 点击遮罩关闭
        modalOverlay.addEventListener('click', function(e) {
            if (e.target === modalOverlay) {
                closeModal();
            }
        });
        
        sparkModalOverlay.addEventListener('click', function(e) {
            if (e.target === sparkModalOverlay) {
                closeSparkModal();
            }
        });
        
        // ESC键关闭
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                // 优先关闭放大的闪光卡牌
                if (currentEnlargedContainer) {
                    closeEnlargedCard();
                } else if (sparkModalOverlay.classList.contains('active')) {
                    closeSparkModal();
                } else if (modalOverlay.classList.contains('active')) {
                    closeModal();
                }
            }
        });
        
        // 为所有卡牌绑定点击事件
        function bindCardEvents() {
            var cards = document.querySelectorAll('.card-deck-trans');
            
            cards.forEach(function(card) {
                // 避免重复绑定
                if (card.dataset.cardBound) return;
                card.dataset.cardBound = 'true';
                
                // 排除模态框内的卡牌
                if (card.closest('.card-modal-overlay') || card.closest('.spark-modal-overlay') || card.closest('.spark-enlarged-container')) return;
                
                card.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 从card-deck-trans元素获取spark_enable
                    var sparkEnable = this.dataset.sparkEnable || '';
                    
                    // 获取card-id从父级card-wrapper
                    var wrapper = this.closest('.card-wrapper');
                    var cardId = wrapper ? wrapper.dataset.cardId : '';
                    
                    openModal(this, cardId, sparkEnable);
                });
            });
        }
        
        // 初始绑定
        bindCardEvents();
        
        // 监听DOM变化，为动态加载的卡牌绑定事件
        var observer = new MutationObserver(function(mutations) {
            var shouldBind = false;
            mutations.forEach(function(mutation) {
                if (mutation.addedNodes.length > 0) {
                    mutation.addedNodes.forEach(function(node) {
                        if (node.nodeType === 1) {
                            if (node.classList && node.classList.contains('card-deck-trans')) {
                                shouldBind = true;
                            } else if (node.querySelector && node.querySelector('.card-deck-trans')) {
                                shouldBind = true;
                            }
                        }
                    });
                }
            });
            if (shouldBind) {
                bindCardEvents();
            }
        });
        
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }
})();
</script>
</includeonly>