https://lienz.gv.at/plugins/system/cfsimplelottie/modules/elements…/cf-simple-lottie/js/cf-lottie.js?4.5.36

1class cfLottie {
2
3	constructor(el) {
4		this.player = el.querySelector('.el-lottie');
5		this.name = this.player.dataset.name;
6		this.path = this.player.dataset.animationPath;
7		this.renderer = this.player.dataset.renderer;
8		this.trigger = this.player.dataset.trigger;
9		this.offsetTop = this.player.dataset.offsetTop ? Math.min(Math.abs(parseInt(this.player.dataset.offsetTop)), 300) * -1 : 0;
10		this.loop = this.player.hasAttribute('data-loop');
11		this.speed = this.player.dataset.speed ? Math.abs(parseFloat(this.player.dataset.speed)) : 1;
12		this.step = 0;
13		this.isComplete = false;
14		this.rendererSettings = {};
15		this.rendererSettings.preserveAspectRatio = this.player.dataset.preserveAspectRatioAlignmentValue + ' ' + this.player.dataset.preserveAspectRatioReference;
16	}
17
18	init() {
19		let anim = lottie.loadAnimation({
20			container: this.player,
21			name: this.name,
22			path: this.path,
23			renderer: this.renderer,
24			autoplay: false,
25			loop: this.trigger === 'mouseenter' ? false : this.loop,
26			rendererSettings: this.rendererSettings
27		});
28
29		let handleMouseEnter = this.handleMouseEnter.bind(this, anim);
30		let handleMouseLeave = this.handleMouseLeave.bind(this, anim);
31
32		anim.addEventListener('complete', () => {
33			this.isComplete = true;
34
35			if (this.loop) this.playOnMouseEnter(anim);
36
37			else {
38				this.player.removeEventListener('mouseenter', handleMouseEnter);
39				this.player.removeEventListener('mouseleave', handleMouseLeave);
40			}
41		});
42
43		anim.addEventListener('DOMLoaded', () => {
44			this.animationStart = this.player.dataset.animationStart ? Math.ceil(anim.totalFrames * Math.min(Math.max(this.player.dataset.animationStart, 0), 100) / 100) : anim.firstFrame;
45			this.animationEnd = this.player.dataset.animationEnd ? Math.floor(anim.totalFrames * Math.min(Math.max(this.player.dataset.animationEnd, 0), 100) / 100) : anim.totalFrames;
46			this.initialFirstFrame = anim.firstFrame;
47			this.initialTotalFrames = anim.totalFrames;
48			anim.initialSegment = [this.animationStart, this.animationEnd];
49			anim.setSpeed(this.speed);
50
51			anim.goToAndStop(this.animationStart, true);
52
53			switch (this.trigger) {
54				case 'autoplay':
55					anim.playSegments(anim.initialSegment, true);
56					break;
57				case 'inview':
58					if (UIkit.util.isInView(this.player, this.offsetTop, 0)) {
59						anim.playSegments(anim.initialSegment, true);
60					} else {
61						window.addEventListener('scroll', () => {
62							if (UIkit.util.isInView(this.player, this.offsetTop, 0) && !this.isComplete) {
63								anim.playSegments(anim.initialSegment, true);
64								this.isComplete = true;
65							}
66						});
67					}
68
69					break;
70				case 'click':
71					this.player.addEventListener('click', () => {
72						anim.playSegments(anim.initialSegment, true);
73					}, { once: true });
74
75					break;
76				case 'mouseenter':
77					let once = this.player.dataset.onMouseleave === 'pause' ? { once: false } : { once: true };
78
79					this.player.addEventListener('mouseenter', handleMouseEnter, once);
80
81					if (this.player.dataset.onMouseleave === 'pause') {
82						this.player.addEventListener('mouseleave', handleMouseLeave);
83					}
84
85					break;
86				case 'scroll':
87					window.addEventListener('scroll', () => {
88						this.step = Math.floor((UIkit.util.scrolledOver(this.player) * (this.animationEnd - this.animationStart) + this.animationStart));
89						anim.goToAndStop(this.step, true);
90					});
91
92					break;
93				default:
94			}
95		});
96
97	}
98
99	handleMouseEnter(anim) {
100		if (this.player.dataset.onMouseleave !== 'pause') anim.playSegments(anim.initialSegment, true);
101		else this.playOnMouseEnter(anim);
102	}
103
104	handleMouseLeave(anim) {
105		anim.pause();
106	}
107
108	playOnMouseEnter(anim) {
109		let currentFrame = anim.firstFrame === 0 ? anim.currentFrame : anim.firstFrame + anim.currentFrame,
110			firstFrame = this.initialFirstFrame,
111			lastFrame = this.initialFirstFrame === 0 ? this.initialTotalFrames : this.initialFirstFrame + this.initialTotalFrames;
112
113		if (this.animationStart > firstFrame) {
114			firstFrame = this.animationStart;
115		}
116
117		if (this.animationEnd < lastFrame) {
118			lastFrame = this.animationEnd;
119		}
120
121		if (!this.isComplete) {
122			firstFrame = this.animationStart > currentFrame ? this.animationStart : currentFrame;
123		}
124
125		anim.stop();
126		anim.playSegments([firstFrame, lastFrame], true);
127
128		this.isComplete = false;

129	}
130
131
132}
133
134UIkit.util.$$('.cf-lottie').forEach(el => {
135	let x = new cfLottie(el);
136	x.init();
137
138	if (x.renderer === 'canvas')
139		window.addEventListener('resize', () => {
140			lottie.resize(x.name);
141		})
142});