MediaWiki:EventList.js

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

    $('.event-option').click(function() {
        var $this = $(this);
        var optionIndex = $this.data('option-index');
        var $container = $this.closest('.event-container');
        var $effect = $container.find('.event-effect[data-effect-index="' + optionIndex + '"]');
        var $allOptions = $container.find('.event-option');
        var $allEffects = $container.find('.event-effect');
        
        // 如果点击的是已经激活的选项，关闭它
        if ($this.hasClass('active')) {
            $this.removeClass('active');
            $effect.slideUp(200, function() {
                calculateHeight($container);
            });
        } else {
            // 移除所有选项的激活状态
            $allOptions.removeClass('active');
            
            // 激活当前选项
            $this.addClass('active');
            
            // 隐藏所有效果，显示当前效果
            $allEffects.not($effect).stop(true, true).hide();
            $effect.stop(true, true).slideDown(200, function() {
                calculateHeight($container);
            });
            
            // 立即计算高度以避免闪烁
            calculateHeight($container);
        }
    });
    
    // 计算并设置容器高度
    function calculateHeight($container) {
        var baseHeight = 170; // 基础高度（到选项区域）
        var totalHeight = baseHeight;
        
        // 计算所有选项的高度
        $container.find('.event-option').each(function() {
            totalHeight += $(this).outerHeight(true);
        });
        
        // 只计算可见效果的高度
        $container.find('.event-effect:visible').each(function() {
            totalHeight += $(this).outerHeight(true);
        });
        
        // 添加底部间距
        totalHeight += 15;
        
        // 设置容器和背景高度
        $container.css('min-height', totalHeight + 'px');
        
        // 背景高度 = 总高度 - 顶部偏移
        var bgHeight = totalHeight - 160;
        $container.find('.event-background').css('height', bgHeight + 'px');
    }
    
    // 初始化时计算所有容器的高度
    $('.event-container').each(function() {
        calculateHeight($(this));
    });
});