微件:Card：修订间差异

来自卡厄思梦境WIKI
跳转到导航 跳转到搜索
←上一编辑
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
328次编辑
功能测试
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
328次编辑
功能测试
 
第8行： 第8行：
.card-deck-trans {
.card-deck-trans {
     cursor: pointer;
     cursor: pointer;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     transition: transform 0.2s ease;
}
}


第49行： 第49行：
     z-index: 10001;
     z-index: 10001;
     line-height: 1;
     line-height: 1;
    transition: color 0.2s ease;
}
}


第126行： 第125行：
     z-index: 10002;
     z-index: 10002;
     line-height: 1;
     line-height: 1;
    transition: color 0.2s ease;
}
}


第143行： 第141行：
.spark-modal-content .card-deck-trans {
.spark-modal-content .card-deck-trans {
     cursor: default;
     cursor: default;
    pointer-events: none;
}
}


第149行： 第148行：
}
}


/* 闪光模态框标题 */
.spark-modal-title {
.spark-modal-title {
     width: 100%;
     width: 100%;
第158行： 第156行：
}
}


/* 加载提示 */
.spark-loading {
.spark-loading {
     color: #fff;
     color: #fff;
第167行： 第164行：
<div id="card-modal-overlay" class="card-modal-overlay">
<div id="card-modal-overlay" class="card-modal-overlay">
     <span class="card-modal-close" id="card-modal-close">&times;</span>
     <span class="card-modal-close" id="card-modal-close">&times;</span>
     <div class="card-modal-content" id="card-modal-content">
     <div class="card-modal-content" id="card-modal-content"></div>
    </div>
</div>
</div>


<div id="spark-modal-overlay" class="spark-modal-overlay">
<div id="spark-modal-overlay" class="spark-modal-overlay">
     <span class="spark-modal-close" id="spark-modal-close">&times;</span>
     <span class="spark-modal-close" id="spark-modal-close">&times;</span>
     <div class="spark-modal-content" id="spark-modal-content">
     <div class="spark-modal-content" id="spark-modal-content"></div>
    </div>
</div>
</div>


第181行： 第176行：
     'use strict';
     'use strict';
      
      
    // 等待DOM加载完成
     function init() {
     function init() {
         var cardModal = document.getElementById('card-modal-overlay');
         var cardModal = document.getElementById('card-modal-overlay');
第190行： 第184行：
         var sparkModalClose = document.getElementById('spark-modal-close');
         var sparkModalClose = document.getElementById('spark-modal-close');
          
          
        // 为所有卡牌添加点击事件
         function bindCardEvents() {
         function bindCardEvents() {
             var cards = document.querySelectorAll('.card-deck-trans');
             var cards = document.querySelectorAll('.card-deck-trans');
              
              
             cards.forEach(function(card) {
             cards.forEach(function(card) {
                // 跳过已绑定事件的卡牌和模态框内的卡牌
                 if (card.dataset.bound || card.closest('.spark-modal-content') || card.closest('.card-modal-content')) {
                 if (card.dataset.bound || card.closest('.spark-modal-content')) {
                     return;
                     return;
                 }
                 }
第206行： 第198行：
                     e.stopPropagation();
                     e.stopPropagation();
                      
                      
                    // 获取卡牌信息
                     var cardDeck = this.querySelector('.card-deck');
                     var cardDeck = this.querySelector('.card-deck');
                     if (!cardDeck) return;
                     if (!cardDeck) return;
                      
                      
                    // 克隆卡牌
                     var clonedCard = document.createElement('div');
                     var clonedCard = this.cloneNode(true);
                     clonedCard.className = 'card-modal-card';
                     clonedCard.classList.add('card-modal-card');
                     clonedCard.innerHTML = '<div class="card-deck">' + cardDeck.innerHTML + '</div>';
                     clonedCard.classList.remove('card-deck-trans');
                    clonedCard.style.width = '270px';
                    clonedCard.style.height = '384px';
                    clonedCard.style.cursor = 'default';
                      
                      
                    var clonedDeck = clonedCard.querySelector('.card-deck');
                    if (clonedDeck) {
                        clonedDeck.style.transform = 'scale(0.6)';
                    }
                   
                    // 清空并添加内容
                     cardModalContent.innerHTML = '';
                     cardModalContent.innerHTML = '';
                    cardModalContent.appendChild(clonedCard);
                      
                      
                    var cardContainer = document.createElement('div');
                    cardContainer.className = 'card-modal-card-container';
                    cardContainer.appendChild(clonedCard);
                    cardModalContent.appendChild(cardContainer);
                   
                    // 检查是否显示闪光按钮
                     var sparkEnable = this.dataset.sparkEnable;
                     var sparkEnable = this.dataset.sparkEnable;
                     var sort = this.dataset.sort;
                     var sort = this.dataset.sort;
                     var cardId = this.dataset.cardId;
                     var cardId = this.dataset.cardId;
                      
                      
                    // 判断条件：spark_enable=1 且 sort不是中立卡牌/怪物卡牌
                     if (sparkEnable === '1' && sort !== '中立卡牌' && sort !== '怪物卡牌' && cardId) {
                     if (sparkEnable === '1' && sort !== '中立卡牌' && sort !== '怪物卡牌') {
                         var sparkButton = document.createElement('button');
                         var sparkButton = document.createElement('button');
                         sparkButton.className = 'card-spark-button';
                         sparkButton.className = 'card-spark-button';
第248行： 第223行：
                     }
                     }
                      
                      
                    // 显示模态框
                     cardModal.classList.add('active');
                     cardModal.classList.add('active');
                     document.body.style.overflow = 'hidden';
                     document.body.style.overflow = 'hidden';
第255行： 第229行：
         }
         }
          
          
        // 打开闪光卡牌模态框
         function openSparkModal(cardId) {
         function openSparkModal(cardId) {
             sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌</div><div class="spark-loading">加载中...</div>';
             sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌</div><div class="spark-loading">加载中...</div>';
             sparkModal.classList.add('active');
             sparkModal.classList.add('active');
              
              
            // 使用MediaWiki API加载闪光卡牌
             var apiUrl = mw.config.get('wgScriptPath') + '/api.php';
             var apiUrl = mw.config.get('wgScriptPath') + '/api.php';
             var params = {
             var params = new URLSearchParams({
                 action: 'parse',
                 action: 'parse',
                 text: '{{Card/display/spark|' + cardId + '}}',
                 text: '{{Card/display/spark|' + cardId + '}}',
第268行： 第240行：
                 format: 'json',
                 format: 'json',
                 contentmodel: 'wikitext'
                 contentmodel: 'wikitext'
             };
             });
              
              
             var url = apiUrl + '?' + Object.keys(params).map(function(key) {
             fetch(apiUrl + '?' + params.toString())
                return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
            }).join('&');
           
            fetch(url)
                 .then(function(response) {
                 .then(function(response) {
                     return response.json();
                     return response.json();
第281行： 第249行：
                     if (data.parse && data.parse.text) {
                     if (data.parse && data.parse.text) {
                         var html = data.parse.text['*'];
                         var html = data.parse.text['*'];
                         sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌</div>' + html;
                         if (html.trim() === '' || html.indexOf('card-deck-trans') === -1) {
                       
                            sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌</div><div style="color: #fff;">暂无闪光卡牌</div>';
                        // 为新加载的卡牌禁用点击事件
                         } else {
                        var sparkCards = sparkModalContent.querySelectorAll('.card-deck-trans');
                             sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌</div>' + html;
                         sparkCards.forEach(function(card) {
                         }
                             card.style.cursor = 'default';
                            card.addEventListener('click', function(e) {
                                e.preventDefault();
                                e.stopPropagation();
                            });
                         });
                     } else {
                     } else {
                         sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌</div><div style="color: #fff;">暂无闪光卡牌</div>';
                         sparkModalContent.innerHTML = '<div class="spark-modal-title">闪光卡牌</div><div style="color: #fff;">暂无闪光卡牌</div>';
第302行： 第264行：
         }
         }
          
          
        // 关闭卡牌模态框
         cardModalClose.addEventListener('click', function() {
         cardModalClose.addEventListener('click', function() {
             cardModal.classList.remove('active');
             cardModal.classList.remove('active');
第309行： 第270行：
         });
         });
          
          
        // 关闭闪光模态框
         sparkModalClose.addEventListener('click', function() {
         sparkModalClose.addEventListener('click', function() {
             sparkModal.classList.remove('active');
             sparkModal.classList.remove('active');
         });
         });
          
          
        // 点击模态框背景关闭
         cardModal.addEventListener('click', function(e) {
         cardModal.addEventListener('click', function(e) {
             if (e.target === cardModal) {
             if (e.target === cardModal) {
第329行： 第288行：
         });
         });
          
          
        // ESC键关闭模态框
         document.addEventListener('keydown', function(e) {
         document.addEventListener('keydown', function(e) {
             if (e.key === 'Escape') {
             if (e.key === 'Escape') {
第341行： 第299行：
         });
         });
          
          
        // 初始化绑定事件
         bindCardEvents();
         bindCardEvents();
          
          
        // 监听DOM变化，为动态加载的卡牌绑定事件
         var observer = new MutationObserver(function() {
         var observer = new MutationObserver(function(mutations) {
             bindCardEvents();
             bindCardEvents();
         });
         });
第355行： 第311行：
     }
     }
      
      
    // 页面加载完成后初始化
     if (document.readyState === 'loading') {
     if (document.readyState === 'loading') {
         document.addEventListener('DOMContentLoaded', init);
         document.addEventListener('DOMContentLoaded', init);

2026年1月17日 (六) 17:01的最新版本

此Widget用于为卡牌添加交互功能。 使用方法：在页面底部添加

×
×

检索自“http://dovewiki.me/index.php?title=微件:Card&oldid=825”