MediaWiki:Common.js:修订间差异

来自勿忘草与永远的少女
跳到导航跳到搜索
Admin留言 | 贡献
无编辑摘要
标签已被回退
Admin留言 | 贡献
撤销Admin讨论)的修订版本1484
标签撤销 已被回退
第1行: 第1行:
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
$(function() {
$(function() {
     // ==================== 1. 固定顶部导航栏 ====================
     // 检查是否已存在导航栏,避免重复添加
     if ($('.fixed-top-nav').length === 0) {
     if ($('.fixed-top-nav').length === 0) {
       
        // 导航栏 HTML 结构
         var navHtml = `
         var navHtml = `
             <div class="fixed-top-nav">
             <div class="fixed-top-nav">
第32行: 第33行:
             </div>
             </div>
         `;
         `;
       
        // 将导航栏插入到 body 开头
         $('body').prepend(navHtml);
         $('body').prepend(navHtml);
          
          
        // 滚动时添加效果(可选)
         $(window).scroll(function() {
         $(window).scroll(function() {
             if ($(window).scrollTop() > 50) {
             if ($(window).scrollTop() > 50) {
第42行: 第46行:
         });
         });
     }
     }
});


     // ==================== 2. 页脚固定处理 ====================
$(function() {
     // 确保页脚固定在底部
     var footer = $('#footer, .mw-footer');
     var footer = $('#footer, .mw-footer');
   
     if (footer.length > 0) {
     if (footer.length > 0) {
        // 设置底部内边距避免内容被遮挡
         var footerHeight = footer.outerHeight();
         var footerHeight = footer.outerHeight();
         $('body').css('padding-bottom', footerHeight + 20 + 'px');
         $('body').css('padding-bottom', footerHeight + 20 + 'px');
          
          
        // 窗口大小改变时重新计算
         $(window).resize(function() {
         $(window).resize(function() {
             var newHeight = footer.outerHeight();
             var newHeight = footer.outerHeight();
第54行: 第64行:
         });
         });
     }
     }
});


     // ==================== 3. 角色卡片悬停与侧边栏对齐(首页用) ====================
$(function() {
     // 为角色卡片添加悬停效果(可选,纯CSS已有,这里作为备用)
     $('.character-card').hover(
     $('.character-card').hover(
         function() { $(this).addClass('hover'); },
         function() { $(this).addClass('hover'); },
第61行: 第73行:
     );
     );
      
      
    // 动态计算右侧边栏高度(可选,用于对齐)
     function adjustSidebarHeight() {
     function adjustSidebarHeight() {
         var leftHeight = $('.custom-homepage .left-column').outerHeight();
         var leftHeight = $('.custom-homepage .left-column').outerHeight();
第69行: 第82行:
     }
     }
      
      
    // 延迟执行,等待图片加载完成
     setTimeout(adjustSidebarHeight, 500);
     setTimeout(adjustSidebarHeight, 500);
     $(window).resize(adjustSidebarHeight);
     $(window).resize(adjustSidebarHeight);
 
});
    // ==================== 4. 旧版筛选器(锚点点击筛选 .role-card) ====================
/*棋子筛选器*/
$(function() {
     $('a[href^="#"]').click(function(e) {
     $('a[href^="#"]').click(function(e) {
         e.preventDefault();
         e.preventDefault();
第91行: 第106行:
         });
         });
     });
     });
    // ==================== 5. 棋子图鉴表格筛选器(新版) ====================
    // 仅在包含筛选面板和表格的页面运行
    if ($('#chess-filter-panel').length > 0 && $('.chess-table').length > 0) {
        initChessTableFilter();
    }
});
});
/**
* 棋子图鉴表格筛选器初始化函数
* 依赖:页面需包含 #chess-filter-panel、.chess-table、#rarity-filter-group、#role-filter-group 等元素
*/
function initChessTableFilter() {
    // 配置参数(可根据实际字段顺序调整)
    const COL_RARITY = 4;  // 稀有度列索引(从0开始)
    const COL_ROLE = 6;    // 定位列索引(从0开始)
    const DEBUG = false;    // 调试开关
    const table = document.querySelector('.chess-table');
    if (!table) return;
    const tbody = table.querySelector('tbody');
    if (!tbody) return;
    let rows = [];
    const allRarities = new Set();
    const allRoles = new Set();
    const rarityGroup = document.getElementById('rarity-filter-group');
    const roleGroup = document.getElementById('role-filter-group');
    const resetBtn = document.getElementById('reset-filters');
    const statsDiv = document.getElementById('filter-stats');
    // 解析表格数据,提取所有唯一值
    function parseTableData() {
        rows = Array.from(tbody.querySelectorAll('tr'));
        rows.forEach((row, index) => {
            if (row.querySelector('th')) return; // 跳过表头行
            const cells = row.cells;
            if (cells.length <= Math.max(COL_RARITY, COL_ROLE)) {
                DEBUG && console.warn('[ChessFilter] 行 ' + index + ' 列数不足');
                return;
            }
            const rarityCell = cells[COL_RARITY];
            const roleCell = cells[COL_ROLE];
            if (rarityCell) {
                const text = rarityCell.textContent.trim();
                if (text) allRarities.add(text);
            }
            if (roleCell) {
                const text = roleCell.textContent.trim();
                if (text) allRoles.add(text);
            }
        });
        DEBUG && console.log('[ChessFilter] 稀有度列表:', Array.from(allRarities));
        DEBUG && console.log('[ChessFilter] 定位列表:', Array.from(allRoles));
    }
    // 动态生成复选框
    function buildFilterCheckboxes() {
        if (!rarityGroup || !roleGroup) return;
        rarityGroup.innerHTML = '';
        roleGroup.innerHTML = '';
        const sortedRarities = Array.from(allRarities).sort();
        const sortedRoles = Array.from(allRoles).sort();
        sortedRarities.forEach(rarity => {
            const label = document.createElement('label');
            label.style.marginRight = '12px';
            label.style.cursor = 'pointer';
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.className = 'filter-checkbox';
            checkbox.dataset.type = 'rarity';
            checkbox.value = rarity;
            checkbox.addEventListener('change', applyFilters);
            label.appendChild(checkbox);
            label.appendChild(document.createTextNode(' ' + rarity));
            rarityGroup.appendChild(label);
        });
        sortedRoles.forEach(role => {
            const label = document.createElement('label');
            label.style.marginRight = '12px';
            label.style.cursor = 'pointer';
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.className = 'filter-checkbox';
            checkbox.dataset.type = 'role';
            checkbox.value = role;
            checkbox.addEventListener('change', applyFilters);
            label.appendChild(checkbox);
            label.appendChild(document.createTextNode(' ' + role));
            roleGroup.appendChild(label);
        });
        if (sortedRarities.length === 0) {
            rarityGroup.innerHTML = '<span style="color: #999;">无数据</span>';
        }
        if (sortedRoles.length === 0) {
            roleGroup.innerHTML = '<span style="color: #999;">无数据</span>';
        }
    }
    // 执行筛选
    function applyFilters() {
        const selectedRarities = new Set();
        const selectedRoles = new Set();
        document.querySelectorAll('.filter-checkbox[data-type="rarity"]:checked').forEach(cb => {
            selectedRarities.add(cb.value);
        });
        document.querySelectorAll('.filter-checkbox[data-type="role"]:checked').forEach(cb => {
            selectedRoles.add(cb.value);
        });
        let visibleCount = 0;
        rows.forEach(row => {
            if (row.querySelector('th')) {
                row.style.display = '';
                return;
            }
            const cells = row.cells;
            if (cells.length <= Math.max(COL_RARITY, COL_ROLE)) {
                row.style.display = 'none';
                return;
            }
            const rarityCell = cells[COL_RARITY];
            const roleCell = cells[COL_ROLE];
            if (!rarityCell || !roleCell) {
                row.style.display = 'none';
                return;
            }
            const rarityText = rarityCell.textContent.trim();
            const roleText = roleCell.textContent.trim();
            let show = true;
            if (selectedRarities.size > 0 && !selectedRarities.has(rarityText)) {
                show = false;
            }
            if (selectedRoles.size > 0 && !selectedRoles.has(roleText)) {
                show = false;
            }
            row.style.display = show ? '' : 'none';
            if (show) visibleCount++;
        });
        updateStats(visibleCount, rows.length);
    }
    // 重置筛选
    function resetFilters() {
        document.querySelectorAll('.filter-checkbox').forEach(cb => cb.checked = false);
        applyFilters();
    }
    // 更新统计信息
    function updateStats(visible, total) {
        if (statsDiv) {
            const hidden = total - visible;
            statsDiv.innerHTML = `共 ${total} 个棋子,当前显示 ${visible} 个` +
                (hidden > 0 ? `(隐藏 ${hidden} 个)` : '');
        }
    }
    // 初始化
    function init() {
        parseTableData();
        buildFilterCheckboxes();
        if (resetBtn) {
            resetBtn.addEventListener('click', resetFilters);
        }
        updateStats(rows.length, rows.length);
        DEBUG && console.log('[ChessFilter] 初始化完成');
    }
    init();
    // 监听表格变化(应对 dynamic table 分页或动态刷新)
    const observer = new MutationObserver(function() {
        DEBUG && console.log('[ChessFilter] 检测到表格内容变化,重新解析数据');
        allRarities.clear();
        allRoles.clear();
        parseTableData();
        applyFilters();
    });
    observer.observe(tbody, { childList: true, subtree: true });
    observer.observe(table, { childList: true, subtree: true });
}

2026年4月17日 (五) 21:33的版本

/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
$(function() {
    // 检查是否已存在导航栏,避免重复添加
    if ($('.fixed-top-nav').length === 0) {
        
        // 导航栏 HTML 结构
        var navHtml = `
            <div class="fixed-top-nav">
                <a href="首页" class="nav-logo">
                    <img src="/wikibg/logo.jpg" alt="网站Logo">
                    <span>万华镜</span>
                </a>
                <div class="nav-links">
                    <a href="首页" class="nav-link">
                        📚 首页
                    </a>
                    <a href="游戏攻略" class="nav-link">
                        📖 游戏攻略
                    </a>
                    <a href="棋子" class="nav-link">
                        ⚔️ 棋子图鉴
                    </a>
                    <a href="天赋图鉴" class="nav-link">
                        🗺️ 天赋图鉴
                    </a>
                    <a href="装备图鉴" class="nav-link">
                        📊 装备图鉴
                    </a>
                    <a href="https://www.war3whj.top/war3wiki/moniqi/moniqi.html" class="nav-link">
                        📊 阵容模拟器
                    </a>
                </div>
            </div>
        `;
        
        // 将导航栏插入到 body 开头
        $('body').prepend(navHtml);
        
        // 滚动时添加效果(可选)
        $(window).scroll(function() {
            if ($(window).scrollTop() > 50) {
                $('.fixed-top-nav').addClass('scrolled');
            } else {
                $('.fixed-top-nav').removeClass('scrolled');
            }
        });
    }
});


$(function() {
    // 确保页脚固定在底部
    var footer = $('#footer, .mw-footer');
    
    if (footer.length > 0) {
        // 设置底部内边距避免内容被遮挡
        var footerHeight = footer.outerHeight();
        $('body').css('padding-bottom', footerHeight + 20 + 'px');
        
        // 窗口大小改变时重新计算
        $(window).resize(function() {
            var newHeight = footer.outerHeight();
            $('body').css('padding-bottom', newHeight + 20 + 'px');
        });
    }
});

$(function() {
    // 为角色卡片添加悬停效果(可选,纯CSS已有,这里作为备用)
    $('.character-card').hover(
        function() { $(this).addClass('hover'); },
        function() { $(this).removeClass('hover'); }
    );
    
    // 动态计算右侧边栏高度(可选,用于对齐)
    function adjustSidebarHeight() {
        var leftHeight = $('.custom-homepage .left-column').outerHeight();
        var rightHeight = $('.custom-homepage .right-column').outerHeight();
        if (rightHeight < leftHeight && $(window).width() > 768) {
            $('.custom-homepage .right-column').css('min-height', leftHeight);
        }
    }
    
    // 延迟执行,等待图片加载完成
    setTimeout(adjustSidebarHeight, 500);
    $(window).resize(adjustSidebarHeight);
});
/*棋子筛选器*/
$(function() {
    $('a[href^="#"]').click(function(e) {
        e.preventDefault();
        var filter = $(this).attr('href').substring(1);

        if (filter === '全部') {
            $('.role-card').show();
            return;
        }

        $('.role-card').each(function() {
            var text = $(this).text();
            if (text.includes(filter)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
});