official-website-abroad/wp-content/themes/nenghui-energy-theme-4/template-parts/blocks/block-development-history.php

<?php
/**
 * Development History Block Template
 * 发展历史区块模板
 */
 
 // 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

// 获取短代码属性
global $development_history_shortcode_atts;
$atts = isset($development_history_shortcode_atts) ? $development_history_shortcode_atts : array();

// 设置默认值
$block_id = !empty($atts['id']) ? $atts['id'] : 'nenghui-development-history-' . uniqid();
$block_class = !empty($atts['class']) ? $atts['class'] : '';
$show_animation = isset($atts['show_animation']) ? $atts['show_animation'] : 'true';

// 从自定义器获取设置
$title = get_theme_mod('development_history_title', 'DEVELOPMENT HISTORY');
$bg_image = get_theme_mod('development_history_bg_image', get_template_directory_uri() . '/assets/images/Development History.webp');

// 获取年份数量设置
$items_count = get_theme_mod('development_history_items_count', 5);
$items_count = min(max(1, intval($items_count)), 20); // 限制在1-20之间

// 获取历史数据
$history_items = array();
$default_years = array('2009', '2012', '2015', '2021', '2022');
$default_descriptions = array(
    1 => '',
    2 => '',
    3 => 'Over 800 MW solar power plants on hand in operation.',
    4 => '',
    5 => ''
);
for ($i = 1; $i <= $items_count; $i++) {
    $default_year = isset($default_years[$i-1]) ? $default_years[$i-1] : (2008 + $i);
    $default_desc = isset($default_descriptions[$i]) ? $default_descriptions[$i] : '';
    $year = get_theme_mod('development_history_item_' . $i . '_year', $default_year);
    $description = get_theme_mod('development_history_item_' . $i . '_description', $default_desc);
    
    $history_items[] = array(
        'year' => $year,
        'description' => $description,
        'active' => get_theme_mod('development_history_item_' . $i . '_active', $i == 3) // 默认第3个激活
    );
}

// 如果没有设置任何历史项目，使用默认数据
if (empty($history_items)) {
    $history_items = array(
        array('year' => '2009', 'description' => '', 'active' => false),
        array('year' => '2012', 'description' => '', 'active' => false),
        array('year' => '2015', 'description' => 'Over 800 MW solar power plants on hand in operation.', 'active' => true),
        array('year' => '2021', 'description' => '', 'active' => false),
        array('year' => '2022', 'description' => '', 'active' => false),
    );
}

// 找到默认激活的项目
$default_active_index = 0;
foreach ($history_items as $index => $item) {
    if ($item['active']) {
        $default_active_index = $index;
        break;
    }
}
?>
<section id="<?php echo esc_attr($block_id); ?>" class="development-history-section <?php echo esc_attr($block_class); ?>" style="background-image: url('<?php echo esc_url($bg_image); ?>')" data-aos="fade-up">
    <div class="development-history-container" data-aos="fade-up" data-aos-delay="200">
        <!-- 左侧时间线区域 -->
        <div class="development-history-left" data-aos="fade-up" data-aos-delay="400">
            <div class="development-history-header" data-aos="fade-up" data-aos-delay="600">
                <h2 class="development-history-title"><?php echo esc_html($title); ?></h2>
            </div>
            
            <div class="development-history-timeline" data-aos="fade-up" data-aos-delay="800">
                <?php foreach ($history_items as $index => $item): ?>
                    <div class="timeline-item <?php echo $item['active'] ? 'active' : ''; ?>" 
                         data-index="<?php echo $index; ?>"
                         data-year="<?php echo esc_attr($item['year']); ?>"
                         data-description="<?php echo esc_attr($item['description']); ?>">
                        <div class="timeline-marker">
                            <div class="timeline-dot"></div>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-year"><?php echo esc_html($item['year']); ?></div>
                            <?php if (!empty($item['description'])): ?>
                                <div class="timeline-description"><?php echo esc_html($item['description']); ?></div>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>

<style>
.development-history-section {
    width: 100%;
    min-height: 600px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: stretch;
}

.development-history-container {
    width: 80%;
    display: flex;
    align-items: stretch;
    min-height: 600px;
    justify-content: center;
}

.development-history-left {
    width: 70%;
    padding: 80px 60px 80px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.development-history-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #2dada2;
    margin: 0 0 50px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.development-history-timeline {
    position: relative;
    padding-left: 40px;
}

.development-history-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ddd;
    z-index: 0;
}



.timeline-item {
    position: relative;
    margin-bottom: 40px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    padding: 5px;
    margin-left: -5px;
}

.timeline-item:focus {
    outline: none;
}

.timeline-marker {
    position: absolute;
    left: -28px;
    top: 8px;
    width: 16px;
    height: 16px;
    z-index: 2;
}

.timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #ccc;
    border: 4px solid #fff;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    left: 6px;
}

.timeline-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: rgba(30, 90, 138, 0.3);
    transform: translate(-50%, -50%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-item.active .timeline-dot {
    background-color: #2dada2;
    transform: scale(1.3);
    box-shadow: 0 4px 12px rgba(30, 90, 138, 0.4);
    left: 9px;
}

.timeline-item.active .timeline-dot::after {
    width: 30px;
    height: 30px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.3;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
}

.timeline-year {
    font-size: 2.2rem;
    font-weight: 700;
    color: #666;
    margin: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.timeline-item.active .timeline-year {
    color: #2dada2;
    font-size: 5rem;
    transform: translateY(-5px);
}

.timeline-description {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin: 8px 0 0 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(10px);
}

.timeline-item.active .timeline-description {
    opacity: 1;
    max-height: 100px;
    transform: translateY(0);
}

.timeline-content {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-item:hover:not(.active) {
    transform: translateX(5px);
    transition: all 0.3s ease;
}

.timeline-item:hover:not(.active) .timeline-dot {
    background-color: #999;
    transform: scale(1.1);
    transition: all 0.3s ease;
}

.timeline-item:hover:not(.active) .timeline-year {
    color: #333;
    transition: all 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .development-history-section {
        min-height: auto;
        flex-direction: column;
    }
    
    .development-history-container {
        flex-direction: column;
        min-height: auto;
    }
    
    .development-history-left {
        width: 75%;
        padding: 60px 40px;
    }
    
    .development-history-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .development-history-left {
        padding: 40px 20px;
    }
    
    .development-history-title {
        font-size: 1.5rem;
        margin-bottom: 30px;
    }
    
    .timeline-year {
        font-size: 1.8rem;
    }
    
    .timeline-item.active .timeline-year {
        font-size: 2rem;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const timelineItems = document.querySelectorAll('#<?php echo esc_js($block_id); ?> .timeline-item');
    const timeline = document.querySelector('#<?php echo esc_js($block_id); ?> .development-history-timeline');
    
    if (timelineItems.length === 0) return;
    
    let isAnimating = false;
    

    
    timelineItems.forEach(item => {
        item.addEventListener('click', function() {
            if (isAnimating) return; // 防止动画期间重复点击
            
            const currentActive = document.querySelector('#<?php echo esc_js($block_id); ?> .timeline-item.active');
            
            if (currentActive === this) return; // 如果点击的是当前激活项，不执行任何操作
            
            isAnimating = true;
            
            // 添加淡出效果到当前激活项
            if (currentActive) {
                currentActive.style.opacity = '0.7';
                currentActive.style.transform = 'translateX(-10px)';
                
                setTimeout(() => {
                    currentActive.classList.remove('active');
                    currentActive.style.opacity = '';
                    currentActive.style.transform = '';
                }, 150);
            }
            
            // 延迟添加新的激活状态
            setTimeout(() => {
                this.style.opacity = '0.7';
                this.style.transform = 'translateX(10px)';
                
                setTimeout(() => {
                     this.classList.add('active');
                      this.style.opacity = '';
                      this.style.transform = '';
                      
                      setTimeout(() => {
                          isAnimating = false;
                      }, 200);
                 }, 100);
            }, currentActive ? 200 : 0);
        });
        
        // 键盘导航支持
        item.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                this.click();
            }
        });
        
        // 添加tabindex以支持键盘导航
        item.setAttribute('tabindex', '0');
        
        // 添加鼠标悬停效果
        item.addEventListener('mouseenter', function() {
            if (!this.classList.contains('active') && !isAnimating) {
                this.style.transition = 'all 0.2s ease';
            }
        });
        
        item.addEventListener('mouseleave', function() {
            if (!this.classList.contains('active')) {
                this.style.transition = '';
            }
        });
    });

    // AOS动画支持（如果可用）
    if (typeof AOS !== 'undefined') {
        AOS.refresh();
    }
    
    // 添加一些额外的CSS动画类
    const additionalStyles = `
        #<?php echo esc_js($block_id); ?> .timeline-item.switching-out {
            opacity: 0.5;
            transform: translateX(-15px) scale(0.95);
        }
        
        #<?php echo esc_js($block_id); ?> .timeline-item.switching-in {
            opacity: 0.5;
            transform: translateX(15px) scale(0.95);
        }
        
        #<?php echo esc_js($block_id); ?> .timeline-item.active {
            transform: scale(1.02);
        }
    `;
    
    const styleElement = document.createElement('style');
    styleElement.textContent = additionalStyles;
    document.head.appendChild(styleElement);
});
</script>