MediaWiki:EventList.js

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

    var heightCache = {};
    
    // 为每个事件选项添加点击事件
    $('.event-option').click(function() {
        var $this = $(this);
        var optionIndex = $this.data('option-index');
        var $container = $this.closest('.event-container');
        var containerId = $container.data('event-id') || $container.index();
        var $effect = $container.find('.event-effect[data-effect-index="' + optionIndex + '"]');
        var $allEffects = $container.find('.event-effect');
        
        // 如果点击的是已经激活的选项
        if ($this.hasClass('active')) {
            // 移除激活状态
            $this.removeClass('active');
            
            // 添加隐藏动画类
            $effect.addClass('hiding');
            
            // 等待动画完成后隐藏元素
            setTimeout(function() {
                $effect.hide().removeClass('hiding');
                smoothAdjustHeight($container, containerId);
            }, 300);
            
        } else {
            // 移除其他选项的激活状态
            $container.find('.event-option').removeClass('active');
            
            // 隐藏其他效果
            $allEffects.not($effect).each(function() {
                var $this = $(this);
                if ($this.is(':visible')) {
                    $this.addClass('hiding');
                    setTimeout(function() {
                        $this.hide().removeClass('hiding');
                    }, 300);
                }
            });
            
            // 激活当前选项
            $this.addClass('active');
            
            // 延迟显示新效果，确保旧效果先隐藏
            setTimeout(function() {
                $effect.show();
                smoothAdjustHeight($container, containerId);
            }, $allEffects.filter(':visible').not($effect).length > 0 ? 150 : 0);
        }
    });
    
    // 平滑调整容器高度
    function smoothAdjustHeight($container, containerId) {
        // 先测量需要的高度
        var measuredHeight = measureHeight($container);
        
        // 如果高度没有变化，不执行动画
        if (heightCache[containerId] === measuredHeight) {
            return;
        }
        
        // 更新缓存
        heightCache[containerId] = measuredHeight;
        
        // 使用requestAnimationFrame确保动画流畅
        requestAnimationFrame(function() {
            $container.css('min-height', measuredHeight + 'px');
            $container.find('.event-background').css('height', (measuredHeight - 160) + 'px');
        });
    }
    
    // 测量所需高度
    function measureHeight($container) {
        var totalHeight = 170; // 基础高度
        
        $container.find('.event-option').each(function() {
            totalHeight += $(this).outerHeight(true);
        });
        
        $container.find('.event-effect:visible').each(function() {
            totalHeight += $(this).outerHeight(true);
        });
        
        return totalHeight + 15; // 添加底部边距
    }
    
    // 初始化所有容器的高度
    $('.event-container').each(function() {
        var $container = $(this);
        var containerId = $container.data('event-id') || $container.index();
        var initialHeight = measureHeight($container);
        heightCache[containerId] = initialHeight;
        $container.css('min-height', initialHeight + 'px');
        $container.find('.event-background').css('height', (initialHeight - 160) + 'px');
    });
    
    // 监听窗口大小变化，重新计算高度
    var resizeTimer;
    $(window).resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            $('.event-container').each(function() {
                var $container = $(this);
                var containerId = $container.data('event-id') || $container.index();
                smoothAdjustHeight($container, containerId);
            });
        }, 250);
    });
});