https://www.jds.fr/blog/wp-content/themes/thegem-elementor/js/thegem-itemsAnimations.js?ver=5.12.3.1

1(function($) {
2
3    var animations = {
4
5        'move-up': {
6            timeout: 200
7        },
8
9        bounce: {
10            timeout: 100
11        },
12
13        'fade-in': {
14            timeout: 100
15        },
16
17        scale: {
18            timeout: 100
19        },
20
21        flip: {
22            timeout: 100
23        },
24
25        'fall-perspective': {
26            timeout: 100
27        },
28
29    };
30
31    var prefixes = 'Webkit Moz ms Ms O'.split(' ');
32    var docElemStyle = document.documentElement.style;
33
34    function getStyleProperty( propName ) {
35        if ( !propName ) {
36            return;
37        }
38
39        // test standard property first
40        if ( typeof docElemStyle[ propName ] === 'string' ) {
41            return propName;
42        }
43
44        // capitalize
45        propName = propName.charAt(0).toUpperCase() + propName.slice(1);
46
47        // test vendor specific properties
48        var prefixed;
49        for ( var i=0, len = prefixes.length; i < len; i++ ) {
50            prefixed = prefixes[i] + propName;
51            if ( typeof docElemStyle[ prefixed ] === 'string' ) {
52                return prefixed;
53            }
54        }
55    }
56
57    var transitionProperty = getStyleProperty('transition');
58    var transitionEndEvent = {
59        WebkitTransition: 'webkitTransitionEnd',
60        MozTransition: 'transitionend',
61        OTransition: 'otransitionend',
62        transition: 'transitionend'
63    }[ transitionProperty ];
64
65
66    function ItemsAnimations(el, options) {
67		var self = this;
68		this.el = el;
69		this.$el = $(el);
70
71		this.options = {
72            itemSelector: '',
73            scrollMonitor: false,
74            firstItemStatic: false
75		};
76		$.extend(this.options, options);
77
78        this.$el.data('itemsAnimations', this);
79
80        self.initialize();
81	}
82
83	$.fn.itemsAnimations = function(options) {
84        if ( typeof options === 'string' ) {
85            var instance = $(this.get(0)).data('itemsAnimations');
86            if (!instance) {
87                return false;
88            }
89            if (options === 'instance') {
90                return instance;
91            }
92        } else {
93            return new ItemsAnimations(this.get(0), options);
94        }
95	}
96
97    ItemsAnimations.prototype = {
98
99        initialize: function() {
100            var self = this;
101
102            this.queue = [];
103            this.queue_is_run = false;
104            this.watchers = {};
105
106            this.animation = this.getAnimation();
107            if (!this.animation || ($(window).width() < 768 && !this.$el.hasClass('enable-animation-mobile'))) {
108                this.animationName = 'disabled';
109                this.animation = this.getAnimationByName('disabled');
110            }
111
112            if (this.options.firstItemStatic) {
113                this.firstStatisItem = $(this.options.itemSelector + ':first', this.$el);
114                this.firstStatisItem.removeClass('item-animations-not-inited');
115            }
116
117            if (this.animationName == 'disabled') {
118                $(this.options.itemSelector, this.$el).removeClass('item-animations-not-inited');
119            }
120
121            // this.initTimer();
122        },
123
124        initTimer: function() {
125			var self = this;
126
127			this.timer = document.createElement('div');
128			this.timer.className = 'items-animations-timer-element';
129            if (this.animation.timeout > 0) {
130                this.timer.setAttribute(
131                    "style",
132                    "transition-duration: " + this.animation.timeout + "ms; -webkit-transition-duration: " + this.animation.timeout + "ms; -moz-transition-duration: " + this.animation.timeout + "ms; -o-transition-duration: " + this.animation.timeout + "ms;"
133                );
134            }
135			document.body.appendChild(this.timer);
136			this.timerCallback = function() {};
137			$(this.timer).bind(transitionEndEvent, function(event) {
138				self.timerCallback();
139			});
140            this.timer.className += ' start-timer';
141		},
142
143        startTimer: function(callback) {
144            setTimeout(callback, this.animation.timeout);
145        },
146
147        startTimerOld: function(callback) {
148			this.timerCallback = callback;
149			if (this.timer.className.indexOf('start-timer') != -1) {
150				this.timer.className = this.timer.className.replace(' start-timer', '');
151			} else {
152				this.timer.className += ' start-timer';
153			}
154		},
155

156        show: function($items, forceUseScrollMonitor) {
157            var self = this;
158
159            if (forceUseScrollMonitor === undefined) {
160                forceUseScrollMonitor = false;
161            }
162
163            if (this.animationName == 'disabled') {
164                $(this.options.itemSelector, this.$el).removeClass('item-animations-not-inited');
165                return false;
166            }
167
168            if ($items == undefined) {
169                $items = $(this.options.itemSelector, this.$el);
170            }
171
172            $items.not('.item-animations-inited').each(function(index) {
173    			var $this = $(this);
174
175                if (self.options.firstItemStatic && self.firstStatisItem && self.firstStatisItem.get(0) == this) {
176                    $this.addClass('item-animations-inited');
177                    return;
178                }
179
180                $this.addClass('item-animations-inited');
181
182                if ((self.options.scrollMonitor || forceUseScrollMonitor) && window.scrollMonitor !== undefined && this.animationName != 'disabled') {
183                    var watcher = scrollMonitor.create(this, -50);
184        			watcher.enterViewport(function() {
185        				var watcher = this;
186                        self.showItem($this, watcher);
187        			});
188                    self.watchers[ watcher.uid ] = watcher;
189                } else {
190                    self.showItem($this);
191                }
192    		});
193
194            $(this.options.itemSelector, this.$el).not('.item-animations-inited').removeClass('item-animations-not-inited');
195
196        },
197
198        reinitItems: function($items) {
199            $items.removeClass('start-animation item-animations-inited item-animations-loading before-start').addClass('item-animations-not-inited');
200            this.clear();
201        },
202
203        getAnimationName: function() {
204            var m = this.$el[0].className.match(/item-animation-(\S+)/);
205            if (!m) {
206                return '';
207            }
208            return m[1];

209        },
210
211        getAnimation: function() {
212            this.animationName = this.getAnimationName();
213            return this.getAnimationByName(this.animationName);
214        },
215
216        getAnimationByName: function(name) {
217            if (!name || animations[name] == undefined) {
218                return false;
219            }
220            return animations[name];
221        },
222
223        showItem: function($item, watcher) {
224            var self = this;
225
226            if ($item.hasClass('item-animations-loading')) {
227                return false;
228            }
229
230            $item.addClass('before-start');
231
232            function showItemCallback() {
233                if ($item.length == 0) {
234                    return false;
235                }
236
237                self.animate($item);
238
239                if (watcher != undefined) {
240                    self.destroyWatcher(watcher);
241                }
242            }
243
244            $item.addClass('item-animations-loading');
245            if (this.animation.timeout > 0) {
246                this.queueAdd(showItemCallback, this.animation.timeout);
247            } else {
248                showItemCallback();
249            }
250        },
251
252        destroyWatcher: function(watcher) {
253            if (this.watchers[ watcher.uid ] != undefined) {
254                delete this.watchers[ watcher.uid ];
255            }
256
257            watcher.destroy();
258        },
259
260        animate: function($item, animation) {
261            $item.bind(transitionEndEvent, function(event) {
262                var target = event.target || event.srcElement;
263                if (target != $item[0]) {
264                    return;
265                }
266                $item.unbind(transitionEndEvent);
267                $item.removeClass('before-start start-animation');
268            });
269
270            $item.removeClass('item-animations-loading item-animations-not-inited').addClass('start-animation');
271        },
272
273        queueAdd: function(callback, timeout) {
274            var self = this;
275
276    		this.queue.push({
277    			callback: callback,
278                timeout: timeout
279    		});
280
281    		if (this.queue.length == 1 && !this.queue_is_run) {
282                this.startTimer(function() {
283                    self.queueNext();
284                });
285    		}
286    	},
287
288        queueNext: function() {
289            var self = this;
290
291    		if (this.queue.length == 0) {
292    			return false;
293    		}
294
295    		var next_action = this.queue.shift();
296
297    		if (next_action == undefined) {
298    			return false;
299    		}
300
301    		this.queue_is_run = true;
302    		next_action.callback();
303
304            this.startTimer(function() {
305                self.queue_is_run = false;
306                self.queueNext();
307            });
308    	},
309
310        clear: function() {
311            this.queue = [];
312            this.queue_is_run = false;
313
314            for (var watcher_uid in this.watchers) {
315                if (this.watchers.hasOwnProperty(watcher_uid)) {
316                    this.destroyWatcher(this.watchers[watcher_uid]);
317                }
318            }
319
320            this.watchers = [];
321        }
322
323    };
324
325})(jQuery);