https://www.accademiamoda.it/wp-content/themes/iuad-theme/src/js/custom/lottie-hover.js?ver=1.0.0

1/**
2 * Lottie Hover Animations
3 * Riproduce l'animazione al passaggio del mouse e la resetta all'uscita
4 */
5(function() {
6    'use strict';
7
8    document.addEventListener('DOMContentLoaded', function() {
9        if (typeof lottie === 'undefined') {
10            return;
11        }
12
13        const wrappers = document.querySelectorAll('.lottie-wrapper');
14
15        if (wrappers.length === 0) {
16            return;
17        }
18
19        wrappers.forEach(wrapper => {
20            // Salta se già inizializzato
21            if (wrapper.dataset.lottieInitialized === 'true') {
22                return;
23            }
24            
25            const url = wrapper.dataset.lottie;
26            
27            if (!url) {
28                return;
29            }
30
31            const anim = lottie.loadAnimation({
32                container: wrapper,
33                renderer: 'svg',
34                loop: false,
35                autoplay: false,
36                path: url
37            });
38            
39            // Marca come inizializzato
40            wrapper.dataset.lottieInitialized = 'true';
41            
42            const trigger = wrapper.closest('.dipartimento-card') || 
43                           wrapper.closest('.docenti-filter-mobile-btn') ||
44                           wrapper.closest('button') ||
45                           wrapper;
46
47            const handleEnter = () => {
48                wrapper.classList.add('is-hovered');
49                anim.stop();
50                anim.setDirection(1);
51                anim.play();
52            };
53
54            const handleLeave = () => {
55                wrapper.classList.remove('is-hovered');
56                const currentFrame = anim.currentFrame;
57                anim.goToAndStop(currentFrame, true);
58                anim.setDirection(-1);
59                anim.play();
60            };
61
62            trigger.addEventListener('mouseenter', handleEnter);
63            trigger.addEventListener('mouseleave', handleLeave);
64
65            if (trigger !== wrapper) {
66                wrapper.addEventListener('mouseenter', handleEnter);
67                wrapper.addEventListener('mouseleave', handleLeave);
68            }
69        });
70    });
71
72    // Reinizializza le Lottie quando i template responsive cambiano visibilità
73    // Usa un MutationObserver per rilevare cambiamenti di display
74    if (typeof MutationObserver !== 'undefined') {
75        const mutationObserver = new MutationObserver(() => {
76            // Trova i wrapper non ancora inizializzati che sono ora visibili
77            const allWrappers = document.querySelectorAll('.lottie-wrapper');
78            allWrappers.forEach(wrapper => {
79                if (wrapper.dataset.lottieInitialized !== 'true' && wrapper.dataset.lottie) {
80                    const computedStyle = window.getComputedStyle(wrapper);
81                    const isVisible = computedStyle.display !== 'none' && computedStyle.visibility !== 'hidden';
82                    
83                    // Verifica se è dentro un template responsive nascosto
84                    const mobileWrapper = wrapper.closest('.responsive-template-mobile');
85                    const desktopWrapper = wrapper.closest('.responsive-template-desktop');
86                    const mobileHidden = mobileWrapper && window.getComputedStyle(mobileWrapper).display === 'none';
87                    const desktopHidden = desktopWrapper && window.getComputedStyle(desktopWrapper).display === 'none';
88                    
89                    if (isVisible && !mobileHidden && !desktopHidden) {
90                        // Reinizializza questo wrapper
91                        const url = wrapper.dataset.lottie;
92                        if (url && typeof lottie !== 'undefined') {
93                            try {
94                                const anim = lottie.loadAnimation({
95                                    container: wrapper,
96                                    renderer: 'svg',
97                                    loop: false,
98                                    autoplay: false,
99                                    path: url
100                                });
101                                
102                                wrapper.dataset.lottieInitialized = 'true';
103                                
104                                const trigger = wrapper.closest('.dipartimento-card') || 
105                                               wrapper.closest('.docenti-filter-mobile-btn') ||
106                                               wrapper.closest('button') ||
107                                               wrapper;
108
109                                const handleEnter = () => {
110                                    wrapper.classList.add('is-hovered');
111                                    anim.stop();
112                                    anim.setDirection(1);
113                                    anim.play();
114                                };
115
116                                const handleLeave = () => {
117                                    wrapper.classList.remove('is-hovered');
118                                    const currentFrame = anim.currentFrame;
119                                    anim.goToAndStop(currentFrame, true);
120                                    anim.setDirection(-1);
121                                    anim.play();
122                                };
123
124                                trigger.addEventListener('mouseenter', handleEnter);
125                                trigger.addEventListener('mouseleave', handleLeave);
126
127                                if (trigger !== wrapper) {
128                                    wrapper.addEventListener('mouseenter', handleEnter);
129                                    wrapper.addEventListener('mouseleave', handleLeave);
130                                }
131                            } catch (error) {
132                                console.error('Errore reinizializzazione Lottie:', error);
133                            }
134                        }
135                    }
136                }
137            });
138        });
139
140        // Osserva cambiamenti nel DOM (quando i template responsive cambiano visibilità)
141        mutationObserver.observe(document.body, {
142            childList: true,
143            subtree: true,
144            attributes: true,
145            attributeFilter: ['style', 'class']
146        });
147    }
148
149    // Reinizializza anche su resize (per template responsive)
150    let resizeTimeout;
151    window.addEventListener('resize', () => {
152        clearTimeout(resizeTimeout);
153        resizeTimeout = setTimeout(() => {
154            // Trova i wrapper non ancora inizializzati che sono ora visibili
155            const allWrappers = document.querySelectorAll('.lottie-wrapper');

156            allWrappers.forEach(wrapper => {
157                if (wrapper.dataset.lottieInitialized !== 'true' && wrapper.dataset.lottie) {
158                    const computedStyle = window.getComputedStyle(wrapper);
159                    const isVisible = computedStyle.display !== 'none' && computedStyle.visibility !== 'hidden';
160                    
161                    // Verifica se è dentro un template responsive nascosto
162                    const mobileWrapper = wrapper.closest('.responsive-template-mobile');
163                    const desktopWrapper = wrapper.closest('.responsive-template-desktop');
164                    const mobileHidden = mobileWrapper && window.getComputedStyle(mobileWrapper).display === 'none';
165                    const desktopHidden = desktopWrapper && window.getComputedStyle(desktopWrapper).display === 'none';
166                    
167                    if (isVisible && !mobileHidden && !desktopHidden) {
168                        // Reinizializza questo wrapper (stesso codice del MutationObserver)
169                        const url = wrapper.dataset.lottie;
170                        if (url && typeof lottie !== 'undefined') {
171                            try {
172                                const anim = lottie.loadAnimation({
173                                    container: wrapper,
174                                    renderer: 'svg',
175                                    loop: false,
176                                    autoplay: false,
177                                    path: url
178                                });
179                                
180                                wrapper.dataset.lottieInitialized = 'true';
181                                
182                                const trigger = wrapper.closest('.dipartimento-card') || 
183                                               wrapper.closest('.docenti-filter-mobile-btn') ||
184                                               wrapper.closest('button') ||
185                                               wrapper;
186
187                                const handleEnter = () => {
188                                    wrapper.classList.add('is-hovered');
189                                    anim.stop();
190                                    anim.setDirection(1);
191                                    anim.play();
192                                };
193
194                                const handleLeave = () => {
195                                    wrapper.classList.remove('is-hovered');
196                                    const currentFrame = anim.currentFrame;
197                                    anim.goToAndStop(currentFrame, true);
198                                    anim.setDirection(-1);
199                                    anim.play();
200                                };
201
202                                trigger.addEventListener('mouseenter', handleEnter);
203                                trigger.addEventListener('mouseleave', handleLeave);
204
205                                if (trigger !== wrapper) {
206                                    wrapper.addEventListener('mouseenter', handleEnter);
207                                    wrapper.addEventListener('mouseleave', handleLeave);
208                                }
209                            } catch (error) {
210                                console.error('Errore reinizializzazione Lottie:', error);
211                            }
212                        }
213                    }
214                }
215            });
216        }, 200);
217    });
218})();
219