https://www.mygica.com/wp-content/themes/Mygica/elementor-widgets/box-info/box-info-widget.js?ver=1.0.0

1/**
2 * BOX信息框小部件 JavaScript
3 */
4
5class GentiatechBoxInfo {
6    constructor($scope) {
7        // 检查jQuery是否可用
8        if (typeof jQuery === 'undefined') {
9            console.error('BOX信息框: jQuery未定义');
10            return;
11        }
12        
13        this.$ = jQuery; // 首先设置jQuery引用
14        this.$element = $scope;
15        this.init();
16    }
17
18    init() {
19        // 确保jQuery引用已设置
20        if (!this.$) {
21            console.error('BOX信息框: jQuery引用未设置');
22            return;
23        }
24        
25        this.bindEvents();
26        this.initAnimations();
27        this.handleResize();
28        
29        // 延迟执行，确保DOM完全加载
30        setTimeout(() => {
31            this.forcePositionStyles();
32        }, 100);
33    }
34
35    bindEvents() {
36        const $ = this.$; // 本地jQuery引用
37        
38        // 图标悬停效果
39        this.$element.find('.mygica-box-info-icon').on('mouseenter', function() {
40            $(this).addClass('hovered');
41        }).on('mouseleave', function() {
42            $(this).removeClass('hovered');
43        });
44
45        // 信息框悬停效果
46        this.$element.find('.mygica-box-info-info-box').on('mouseenter', function() {
47            $(this).addClass('hovered');
48        }).on('mouseleave', function() {
49            $(this).removeClass('hovered');
50        });
51
52        // 响应式处理
53        $(window).on('resize', () => {
54            this.handleResize();
55        });
56    }
57
58    initAnimations() {
59        // 检查是否在视口中
60        const observer = new IntersectionObserver((entries) => {
61            entries.forEach(entry => {
62                if (entry.isIntersecting) {
63                    this.startAnimations();
64                    observer.unobserve(entry.target);
65                }
66            });
67        }, {
68            threshold: 0.1
69        });
70
71        const container = this.$element.find('.mygica-box-info-container')[0];
72        if (container) {
73            observer.observe(container);
74        }
75    }
76
77    startAnimations() {
78        const $ = this.$; // 本地jQuery引用
79        const $infoBoxes = this.$element.find('.mygica-box-info-info-box');
80        const $icons = this.$element.find('.mygica-box-info-icon');
81
82        // 延迟显示信息框
83        $infoBoxes.each(function(index) {
84            const $box = $(this);
85            setTimeout(() => {
86                $box.addClass('animate-in');
87            }, index * 150);
88        });
89
90        // 延迟显示图标
91        $icons.each(function(index) {
92            const $icon = $(this);
93            setTimeout(() => {
94                $icon.addClass('animate-in');
95            }, index * 100 + 50);
96        });
97    }
98
99    handleResize() {
100        // 调试信息
101        if (!this.$) {
102            console.error('BOX信息框 handleResize: jQuery引用未设置');
103            return;
104        }
105        
106        const $ = this.$; // 本地jQuery引用
107        
108        // 再次检查jQuery函数是否可用
109        if (typeof $ !== 'function') {
110            console.error('BOX信息框 handleResize: jQuery不是函数', typeof $);
111            return;
112        }
113        
114        const windowWidth = $(window).width();
115        const $container = this.$element.find('.mygica-box-info-container');
116        const $stage = this.$element.find('.mygica-box-info-stage');
117
118        if (windowWidth <= 768) {
119            $container.addClass('mobile-layout');
120            // 移动端不缩放
121            if ($stage.length) {
122                $stage.css('transform', 'none');
123            }
124        } else {
125            $container.removeClass('mobile-layout');
126            // 桌面端：按容器尺寸等比缩放舞台，避免两侧裁切
127            if ($stage.length) {
128                const containerW = $container.innerWidth();
129                const containerH = $container.innerHeight();
130                const designW = 1200; // 与CSS舞台宽度一致
131                const designH = 800;  // 与CSS舞台高度一致
132                const scale = Math.min(containerW / designW, containerH / designH);
133                $stage.css({
134                    transform: 'scale(' + scale + ')'
135                });
136            }
137        }
138
139        // 重新计算位置（如果需要）
140        this.recalculatePositions();
141    }
142
143    recalculatePositions() {
144        const $ = this.$; // 本地jQuery引用
145        // 在某些情况下重新计算元素位置
146        const windowWidth = $(window).width();
147        
148        if (windowWidth > 768) {
149            // 桌面布局的位置调整逻辑

150            this.adjustDesktopPositions();
151        }
152        
153        // 强制重新应用定位样式
154        this.forcePositionStyles();
155    }
156    
157    forcePositionStyles() {
158        // 强制重新应用关键的定位样式
159        const $container = this.$element.find('.mygica-box-info-container');
160        const $icons = this.$element.find('.mygica-box-info-icon');
161        const $infoBoxes = this.$element.find('.mygica-box-info-info-box');
162        const $stage = this.$element.find('.mygica-box-info-stage');
163        
164        // 确保容器样式正确
165        $container.css({
166            'position': 'relative',
167            'width': '100%',
168            'display': 'flex',
169            'align-items': 'center',
170            'justify-content': 'center'
171        });
172        if ($stage.length === 0) {
173            // 在极少数情况下若缺失舞台容器不影响其它样式
174        }
175        
176        // 确保图标和信息框的绝对定位
177        $icons.css('position', 'absolute');
178        $infoBoxes.css('position', 'absolute');
179    }
180
181    adjustDesktopPositions() {
182        const $ = this.$; // 本地jQuery引用
183        // 根据容器大小调整图标和信息框位置
184        const $container = this.$element.find('.mygica-box-info-container');
185        const containerWidth = $container.width();
186        const containerHeight = $container.height();
187
188        // 如果容器尺寸发生变化，可以在这里进行位置微调
189        if (containerWidth < 1200) {
190            $container.addClass('compact-layout');
191        } else {
192            $container.removeClass('compact-layout');
193        }
194    }
195
196    // 公共方法：刷新小部件
197    refresh() {
198        this.handleResize();
199        this.initAnimations();
200    }
201
202    // 公共方法：销毁小部件
203    destroy() {
204        const $ = this.$; // 本地jQuery引用
205        this.$element.find('.mygica-box-info-icon').off('mouseenter mouseleave');
206        this.$element.find('.mygica-box-info-info-box').off('mouseenter mouseleave');
207        $(window).off('resize');
208    }
209}
210
211// 确保jQuery可用后再初始化
212(function() {
213    'use strict';
214    
215    // 等待jQuery加载的函数
216    function waitForJQuery(callback) {
217        if (typeof jQuery !== 'undefined') {
218            callback(jQuery);
219        } else {
220            setTimeout(function() {
221                waitForJQuery(callback);
222            }, 50);
223        }
224    }
225    
226    // 等待jQuery加载完成
227    waitForJQuery(function($) {
228        // Elementor前端初始化
229        $(window).on('elementor/frontend/init', function() {
230            if (window.elementorFrontend && window.elementorFrontend.hooks) {
231                window.elementorFrontend.hooks.addAction('frontend/element_ready/mygica_box_info.default', function($scope) {
232                    new GentiatechBoxInfo($scope);
233                });
234            }
235        });
236
237        // 直接初始化（非Elementor环境）
238        $(document).ready(function() {
239            $('.mygica-box-info-container').each(function() {
240                if (!$(this).closest('.elementor').length) {
241                    new GentiatechBoxInfo($(this).parent());
242                }
243            });
244        });
245    });
246
247})();