MediaWiki:EventList.js

$(function() {
    mw.loader.load(mw.util.getUrl('MediaWiki:EventList.css', { action: 'raw', ctype: 'text/css' }), 'text/css');

    // 计算并设置容器高度
    function calculateHeight($container) {
        var baseHeight = 170; // 基础高度（到选项区域顶部）
        var totalHeight = baseHeight;
        
        // 计算选项容器内所有内容的实际高度
        var $optionsContainer = $container.find('.event-options');
        
        // 遍历选项容器内的所有子元素（包括选项和效果）
        $optionsContainer.children().each(function() {
            totalHeight += $(this).outerHeight(true); // 包含 margin
        });
        
        // 添加底部间距
        totalHeight += 15;
        
        // 设置容器最小高度
        $container.css('min-height', totalHeight + 'px');
        
        // 背景高度 = 总高度 - 顶部偏移（160px）
        var bgHeight = totalHeight - 160;
        $container.find('.event-background').css('height', bgHeight + 'px');
    }
    
    // 初始化时计算所有容器的高度
    // 使用延迟确保图片和内容已加载
    function initializeHeights() {
        $('.event-container').each(function() {
            calculateHeight($(this));
        });
    }
    
    // 页面加载完成后初始化
    initializeHeights();
    
    // 图片加载完成后重新计算
    $('.event-image img').on('load', function() {
        initializeHeights();
    });
    
    // 监听窗口大小变化，重新计算高度
    var resizeTimer;
    $(window).on('resize', function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            initializeHeights();
        }, 250); // 防抖处理
    });
    
    // 使用 MutationObserver 监听内容变化
    if (window.MutationObserver) {
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                var $container = $(mutation.target).closest('.event-container');
                if ($container.length) {
                    calculateHeight($container);
                }
            });
        });
        
        $('.event-container').each(function() {
            observer.observe(this, {
                childList: true,
                subtree: true,
                characterData: true
            });
        });
    }
});