https://www.3si.at/_resources/app/themes/3si/js/components/DefaultSlider.js?m=1623056296

1(function(util){
2
3    var sliderType = registerComponentType('defaultslider');
4    var sliderPaginationType = registerComponentType('defaultslider-pagination');
5
6
7    sliderPaginationType.onCreate(function(paginationComponent){
8
9        paginationComponent.on('active', function(){
10            paginationComponent.getRoot().classList.add('is-active');
11        });
12
13        paginationComponent.on('inactive', function(){
14            paginationComponent.getRoot().classList.remove('is-active');
15        });
16
17        paginationComponent.on('click', function(){
18            sliderType.getComponent(paginationComponent.getRoot()).do('goto', paginationComponent.getConfig('index'));
19        });
20
21    });
22
23    sliderPaginationType.delegateDOMEvent(null, 'click', function(evt, component){
24        component.do('click');
25        evt.preventDefault();
26        evt.stopImmediatePropagation();
27    });
28
29    sliderType.onCreate(function(component){
30
31        let embla = undefined;
32        let lastGotoTriggered = 0;
33
34        let oldScene = undefined;
35        const cleanups = new WeakMap();
36
37        function updatePos(){
38            component.getNestedComponents(sliderPaginationType).forEach(function (paginationComponent) {
39                if (paginationComponent.getConfig('index') == embla.selectedScrollSnap()) {
40                    paginationComponent.do('active');
41                } else {
42                    paginationComponent.do('inactive');
43                }
44            });
45            if (oldScene) {
46                oldScene = undefined;
47                if (cleanups.has(oldScene)) {
48                    cleanups.get(oldScene)();
49                    cleanups.delete(oldScene);
50                }
51            }
52            let newScene = embla.slideNodes()[embla.selectedScrollSnap()];
53            if (newScene) {
54                oldScene = newScene;
55                if (!cleanups.has(newScene)) {
56                    const newIframe = newScene.querySelector('iframe[data-src]');
57                    const newVideo = newScene.querySelector('[data-video]');
58                    if (newIframe) {
59                        newIframe.setAttribute('src', newIframe.getAttribute('data-src'));
60                        cleanups.set(newScene, function () {
61                            console.log('Destroy Iframe');
62                            newIframe.setAttribute('src', 'about:blank');
63                        });
64                    } else if (newVideo) {
65                        const newVideoSrc = newVideo.getAttribute('data-video');
66                        if (newVideo.tagName === 'VIDEO') {
67                            newVideo.setAttribute('src', newVideoSrc);
68                        } else {
69                            newVideo.querySelector('iframe').setAttribute('src', newVideoSrc);
70                        }
71
72                        player = new Plyr(newVideo, {
73                            iconUrl: window.app._config.video.sprite,
74                        });
75                        cleanups.set(newScene, function () {
76                            console.log('Destroy video');
77                            player.destroy();
78                        });
79                    }
80                }
81            }
82        }
83
84        function init() {
85            if(embla){
86                embla.reInit();
87                return;
88            }
89
90            embla = window.app.slider(component.getElement('theatre'), {
91                align: 'start',
92                loop: true,
93                skipSnaps: false,
94                _keyboardControls: true
95            });
96
97            if (embla.slideNodes().length > 1) {
98                if(component.getElement('next') && component.getElement('prev')) {
99                    component.getElement('next').removeAttribute('hidden');
100                    component.getElement('prev').removeAttribute('hidden');
101
102                    component.onDOMEvent('next', 'click', function () {
103                        embla.scrollNext();
104                    });
105
106                    component.onDOMEvent('prev', 'click', function () {
107                        embla.scrollPrev();
108                    });
109                }
110            }
111
112            embla.on('select', function () {
113                updatePos();
114            });
115
116            component.on('goto', function (data) {

117                embla.scrollTo(parseInt(data.detail));
118            });
119
120            component.onDOMEvent(null, 'goto', function (data) {
121                embla.scrollTo(parseInt(data.detail), true);
122                lastGotoTriggered = (new Date()).getTime();
123            });
124        }
125
126        component.onHideShow(function(){
127            init();
128            if((new Date()).getTime() - lastGotoTriggered > 500) {
129                embla.scrollTo(0, true);
130            }
131            updatePos();
132        }, function(){
133            console.log('hide');
134            if(embla) {
135                const currentScene = embla.slideNodes()[embla.selectedScrollSnap()];
136                if (cleanups.has(currentScene)) {
137                    cleanups.get(currentScene)();
138                    cleanups.delete(currentScene);
139                }
140            }
141        });
142
143    });
144
145
146    sliderType.autoRegisterComponents();
147
148})(window.jQueryPolyfill);