https://www.hayderecho.com/wp-content/themes/enfold/config-templat…/lottie_animation.js?ver=8.1

1/**
2 * ALB Shortcode Lottie Animations frontend and preview iframe
3 *
4 * @added by guenter
5 * @since 5.5
6 */
7"use strict";
8
9//	global namespace
10var avia_js_shortcodes = avia_js_shortcodes || {};
11var aviaJS = aviaJS || {};
12
13(function()
14{
15	if( ! avia_js_shortcodes.aviaLottieAnimation )
16	{
17		class scAviaLottieAnimation
18		{
19			container = null;		//	container element
20			id = '';
21			player = null;
22			settings = {};
23			loaded = false;
24			started = false;
25			preview = false;
26
27			constructor( container )
28			{
29				this.container = container;
30				this.container.scAviaLottieAnimation = this;
31				this.id = container.getAttribute('id');
32				this.loaded = false;
33				this.started = false;
34				this.preview = document.getElementById( 'av-admin-preview' ) != null;
35
36				//	bind shortcode to element
37				this.container.scAviaLottieAnimation = this;
38
39				this.player = this.container.querySelector( 'dotlottie-player' );
40				this.settings = JSON.parse( this.player.dataset.av_lottie );
41
42				this.initPlayer();
43
44				/**
45				 * hack to catch jQuery custom events (browser events seem to work even when triggered with jQuery)
46				 *
47				 * https://stackoverflow.com/questions/11132553/how-to-catch-the-jquery-event-trigger
48				 * https://stackoverflow.com/questions/36914912/how-to-get-jquery-to-trigger-a-native-custom-event-handler
49				 * https://stackoverflow.com/questions/40915156/listen-for-jquery-event-with-vanilla-js
50				 */
51				this.container.onavia_start_animation = ( e ) =>
52				{
53					const opt = {
54								'bubbles':		true,
55								'cancelable':	true
56							};
57
58					const event = new CustomEvent( 'avia_start_animation', opt );
59					this.container.dispatchEvent( event );
60				};
61
62				this.container.addEventListener( 'avia_start_animation', this.avia_start_animation.bind( this ) );
63				this.player.addEventListener( 'ready', this.lottie_animation_loaded.bind( this ) );
64
65				//	DOM classes are not set !!
66				const obj = this;
67				setTimeout( function(){ obj.prepareAnimation(); } );
68			}
69
70			initPlayer()
71			{
72				this.player.__speed = this.settings.speed != '' ? this.settings.speed : 1;
73				this.player.__autoplay = false;		//	this.settings.autoplay == 'start_loaded ';
74				this.player.__loop = this.settings.loop == '';
75				this.player.__hover = this.settings.hover != '';
76				this.player.__direction = this.settings.direction != '' ? -1 : 1;
77				this.player.__mode = this.settings.mode != '' ? 'bounce' : 'normal';
78				this.player.__controls = this.settings.controls != '';
79
80				this.player.__background = this.settings.background =! '' ? this.settings.background : 'transparent';
81			}
82
83			prepareAnimation()
84			{
85				if( this.container.classList.contains( 'avia_start_animation' ) )
86				{
87					//	container already in viewport - we can start immediatly
88					if( this.settings.autoplay != 'no_autoplay' )
89					{
90						this.settings.autoplay = 'start_loaded';
91					}
92
93					this.avia_start_animation();
94				}
95				else if( this.settings.autoplay == 'start_loaded' || this.settings.lazy_loading == '' || this.preview )
96				{
97					//	force loading of animation
98					this.load_animation();
99				}
100			}
101
102			avia_start_animation( event )
103			{
104				if( this.container.classList.contains( 'avia_animation_finished' ) )
105				{
106					//	make sure to start player when already in viewport
107					this.start();
108				}
109
110				if( this.preview )
111				{
112					//	modal preview does not have waypoint script - simulate it
113					this.container.classList.add( 'avia_start_animation', 'avia_animation_finished' );
114				}
115
116				if( 'undefined' != typeof event )
117				{
118					this.container.classList.add( 'avia_animation_finished', 'avia_start_delayed_animation' );
119				}
120
121				if( this.loaded )
122				{
123					this.start();
124				}
125				else
126				{
127					this.load_animation();
128				}
129			}
130
131			load_animation()
132			{
133				if( this.loaded )
134				{
135					return;
136				}
137
138				this.player.load( this.settings.src );
139			}
140
141			start()
142			{
143				this.started = true;
144				this.container.classList.add( 'av-lottie-animation-started' );
145
146				this.player.play();
147			}
148
149			lottie_animation_loaded( event )
150			{
151				this.loaded = true;
152				this.container.classList.add( 'av-lottie-animation-loaded' );
153
154				if( this.settings.autoplay == 'no_autoplay' )
155				{
156					return;
157				}
158
159				if( this.settings.autoplay == 'start_loaded' || this.preview || this.container.classList.contains( 'avia_start_delayed_animation' ) )
160				{
161					this.start();
162				}
163
164				if( this.container.classList.contains( 'avia_start_animation' ) && this.settings.lazy_loading != '' )
165				{
166					this.start();
167					this.container.classList.add( 'avia_start_delayed_animation' );
168				}
169			}
170		}
171
172		//	class factory
173		avia_js_shortcodes.aviaLottieAnimation = function( container )
174		{
175			return new scAviaLottieAnimation( container );
176		};
177
178		aviaJS.aviaPlugins.register( avia_js_shortcodes.aviaLottieAnimation, '.av-lottie-animation-container' );
179	}
180
181})();