official-website-china/wp-content/themes/nenghui-energy-theme-cn/assets/js/block-cooperate.js

/**
 * Block Cooperate JavaScript
 * 合作伙伴区块交互功能
 * 
 * @package Nenghui Energy Theme
 * @since 1.0.0
 */

(function($) {
    'use strict';

    /**
     * 合作伙伴区块初始化
     */
    function initCooperateBlock() {
        const $cooperateBlocks = $('.cooperate-block');
        
        if ($cooperateBlocks.length === 0) {
            return;
        }

        $cooperateBlocks.each(function() {
            const $block = $(this);
            const $carousel = $block.find('.cooperate-carousel');
            const $slides = $block.find('.carousel-slide');
            
            // 添加淡入动画
            addFadeInAnimation($block);
            
            // 添加悬停效果增强
            addHoverEffects($slides);
            
            // 添加键盘导航支持
            addKeyboardNavigation($slides);
            
            // 添加无障碍支持
            addAccessibilitySupport($slides);
        });
    }

    /**
     * 添加淡入动画
     */
    function addFadeInAnimation($block) {
        // 使用Intersection Observer API实现滚动触发动画
        if ('IntersectionObserver' in window) {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        $(entry.target).addClass('animate-in');
                        observer.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.1,
                rootMargin: '50px'
            });

            observer.observe($block[0]);
        } else {
            // 降级处理：直接添加动画类
            $block.addClass('animate-in');
        }
    }

    /**
     * 添加悬停效果增强
     */
    function addHoverEffects($slides) {
        $slides.each(function() {
            const $slide = $(this);
            const $img = $slide.find('img');
            
            $slide.on('mouseenter', function() {
                // 添加悬停时的缩放效果
                $img.css('transform', 'scale(1.05)');
                
                // 其他幻灯片稍微变暗
                $slides.not(this).addClass('dimmed');
            });
            
            $slide.on('mouseleave', function() {
                // 恢复原始状态
                $img.css('transform', 'scale(1)');
                $slides.removeClass('dimmed');
            });
        });
    }

    /**
     * 添加键盘导航支持
     */
    function addKeyboardNavigation($slides) {
        $slides.attr('tabindex', '0').on('keydown', function(e) {
            const $current = $(this);
            let $target;
            
            switch(e.which) {
                case 37: // 左箭头
                    e.preventDefault();
                    $target = $current.prev('.carousel-slide');
                    if ($target.length === 0) {
                        $target = $slides.last();
                    }
                    $target.focus();
                    break;
                    
                case 39: // 右箭头
                    e.preventDefault();
                    $target = $current.next('.carousel-slide');
                    if ($target.length === 0) {
                        $target = $slides.first();
                    }
                    $target.focus();
                    break;
                    
                case 13: // 回车键
                case 32: // 空格键
                    e.preventDefault();
                    $current.trigger('click');
                    break;
            }
        });
    }

    /**
     * 添加无障碍支持
     */
    function addAccessibilitySupport($slides) {
        $slides.each(function(index) {
            const $slide = $(this);
            const $img = $slide.find('img');
            const altText = $img.attr('alt') || '合作伙伴';
            
            // 添加ARIA标签
            $slide.attr({
                'role': 'button',
                'aria-label': `查看${altText}详情，第${index + 1}个合作伙伴，共${$slides.length}个`,
                'aria-describedby': 'cooperate-instructions'
            });
        });
        
        // 添加使用说明（对屏幕阅读器可见）
        const $instructions = $('<div>', {
            id: 'cooperate-instructions',
            class: 'sr-only',
            text: '使用左右箭头键导航合作伙伴，按回车键或空格键查看详情'
        });
        
        $('.cooperate-block').first().append($instructions);
    }

    /**
     * 响应式处理
     */
    function handleResponsive() {
        const $cooperateBlocks = $('.cooperate-block');
        const windowWidth = $(window).width();
        
        $cooperateBlocks.each(function() {
            const $block = $(this);
            const $wrapper = $block.find('.carousel-wrapper');
            
            // 根据屏幕宽度调整布局
            if (windowWidth <= 480) {
                $wrapper.addClass('mobile-layout');
            } else {
                $wrapper.removeClass('mobile-layout');
            }
        });
    }

    /**
     * 性能优化：图片懒加载
     */
    function initLazyLoading() {
        if ('IntersectionObserver' in window) {
            const imageObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const $img = $(entry.target);
                        const src = $img.attr('src');
                        
                        if (src) {
                            $img.on('load', function() {
                                $(this).addClass('loaded');
                            }).on('error', function() {
                                $(this).addClass('error');
                                console.warn('Failed to load cooperate partner image:', src);
                            });
                        }
                        
                        imageObserver.unobserve(entry.target);
                    }
                });
            });

            $('.cooperate-block img').each(function() {
                imageObserver.observe(this);
            });
        }
    }

    // 文档就绪时初始化
    $(document).ready(function() {
        initCooperateBlock();
        initLazyLoading();
        handleResponsive();
    });

    // 窗口大小改变时重新处理响应式
    $(window).on('resize', debounce(handleResponsive, 250));

    /**
     * 防抖函数
     */
    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }

})(jQuery);