https://websurfers.it/plugins/system/fs_animator/src/app/element/fs_animator/assets/js/fs_animator.js?v=1.1.0

1/**
2 * @package   Animator element for YOOtheme Pro
3 * @author    Flart Studio https://www.flart.studio
4 * @copyright Copyright (C) Flart Studio
5 * @license   GNU General Public License version 3, or later
6 */
7
8class FSTextRotator {
9    constructor(params, items) {
10        // Element Settings
11        const settings = Object.assign({
12            headerID: document.getElementById(params['headerID']),
13            imageID: document.getElementById(params['imageID']),
14            animationLoop: params['animationLoop'],
15            animationLoopCount: params['animationLoopCount'],
16            animationLoopStop: params['animationLoopStop'],
17            showOverlayImages: params['showOverlayImages'],
18        });
19
20        let index = 0;
21
22        function animate() {
23
24            if (!settings.animationLoop && settings.animationLoopStop == 'last' && settings.animationLoopCount == 0) {
25                return;
26            }
27
28            settings.headerID.innerHTML = '';
29            settings.headerID.classList.remove('uk-invisible');
30            index = index % items.length;
31
32            const innserSpan = document.createElement((items[index]['link']) ? 'a' : 'span');
33            innserSpan.classList.add(
34                "item_" + index,
35            );
36
37            //Link
38            if (items[index]['link']) {
39                innserSpan.setAttribute('href', items[index]['link']);
40                if (items[index]['link_target']) {
41                    innserSpan.setAttribute('target', '_blank');
42                }
43            }
44
45            //Image
46            if (settings.showOverlayImages && items[index]['image']) {
47                settings.imageID.innerHTML = '';
48                const itemImage = document.createElement('img');
49
50                itemImage.classList.add(
51                    "el-image",
52                    "animate__animated",
53                    "animate__" + items[index]['imageAnimation'],
54                );
55
56                itemImage.setAttribute('data-src', items[index]['image']);
57                itemImage.setAttribute('uk-img', '');
58                itemImage.setAttribute('loading', 'false');
59                itemImage.setAttribute('fetchpriority', 'high');
60
61                if (items[index]['image_alt']) {
62                    itemImage.setAttribute('alt', items[index]['image_alt']);
63                }
64
65                itemImage.style.setProperty('display', 'inline-block');
66                itemImage.style.setProperty('width', '100%');
67                itemImage.style.setProperty('height', '100%');
68                itemImage.style.setProperty('object-fit', 'cover');
69
70                itemImage.style.setProperty('--animate-duration', items[index]['AnimationDuration'] + "s");
71                settings.imageID.appendChild(itemImage);
72            }
73
74            if (!items[index]['AnimationLetters']) {
75                innserSpan.classList.add(
76                    "animate__animated",
77                    "animate__" + items[index]['textAnimation']
78                );
79
80                innserSpan.style.setProperty('display', 'inline-block');
81                innserSpan.style.setProperty('--animate-duration', items[index]['AnimationDuration'] + "s");
82                innserSpan.innerHTML = items[index]['text'];
83            }
84
85            settings.headerID.appendChild(innserSpan);
86
87            //Create Letters Spans
88            if (items[index]['text'] && items[index]['AnimationLetters']) {
89
90                //Remove doble spacecs
91                items[index]['text'] = items[index]['text'].replace(/  +/g, ' ');
92
93                innserSpan.innerHTML = items[index]['text'].split(' ').map((word, i, {length}) => {
94
95                    const letters = (word + ' ').split('').map(char => '<span class="letter">

95' + char + '</span>');
96                    return '<span class="word" style="display:inline-block; white-space:nowrap;">' + letters.join('') + '</span>';
97
98                }).join('');
99
100                const letterSpan = innserSpan.getElementsByClassName('letter');
101
102                let i = 0;
103                innserSpan.querySelectorAll('.letter').forEach(function (element) {
104                    element.classList.add(
105                        "animate__animated",
106                        "animate__" + items[index]['textAnimation']
107                    );
108
109                    element.style.setProperty('display', 'inline-block');
110                    element.style.setProperty('white-space', 'pre-wrap');
111                    element.style.setProperty('animation-delay', ((items[index]['AnimationDelay'] / 1000) * i) + "s");
112                    element.style.setProperty('--animate-duration', items[index]['AnimationDuration'] + "s");
113
114                    i++
115                });
116
117                //Removeing Empty Space after last word
118                var list = document.querySelectorAll('.word:last-child .letter:last-child');
119                for (const element of list) {
120                    if (element.innerHTML === ' ') {
121                        element.remove()
122                    }
123                }
124            }
125
126            if ((settings.animationLoop || settings.animationLoopCount != 0)) {
127                setTimeout(animate, items[index]['AnimationInterval']);
128
129                if (settings.animationLoopCount && index == items.length - 1) {
130                    settings.animationLoopCount -= 1;
131                }
132
133                index += 1;
134            }
135        }
136
137        //Scrollspy
138        UIkit.scrollspy(settings.headerID, {
139            repeat: false,
140            offsetTop: -100,
141            hidden: false
142        });
143
144        UIkit.util.on(settings.headerID, 'inview', function () {
145            animate();
146        });
147
148    }
149}
150
151window.FSTextRotator = FSTextRotator;