https://accessbet.com/v1.545/a/customscroll.js

1//Custom scroller, adds buttons that can scroll a predefined container. Progress bar optional
2/*
3TODO:
4  Parameter for the container to be scrolled
5  Parameter for the container to add the buttons to.
6  Parameter for scroll distance/speed
7  Parameter to add progress bar
8  Parameter for vertical/horizontal scroll
9*/
10
11(function() {
12    var CustomScrollWidget = function(element, parameters) {
13        createWidget = function() {
14            var scrollContainer = parameters.scrollContainer ? document.querySelector(parameters.scrollContainer) : element;
15            var buttonContainer = parameters.buttonContainer ? document.querySelector(parameters.buttonContainer) : element;
16            const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
17
18            var isDragged = false;
19            var isDown = false;
20            var startX;
21            var scrollLeft;
22            var matches = [];
23            let options = {
24                root: scrollContainer,
25                rootMargin: '0px',
26                threshold: [0, 0.10, 0.25, 0.5, 0.75, 1]
27            }
28            let observer;
29            let callback = (entries,observer)=>{
30                entries.forEach((entry)=>{
31                    if (!entry.isIntersecting) {
32                        entry.target.classList.add("hidden");
33                        entry.target.classList.remove("all-visible");
34                    } else {
35                        entry.target.classList.remove("hidden");
36
37                        if (entry.intersectionRatio > 0.5) {
38                            entry.target.classList.add("all-visible");
39                        } else {
40                            if (entry.intersectionRatio < 0.45) {
41                                entry.target.classList.remove("all-visible");
42                            }
43                        }
44
45                    }
46                }
47                )
48            }
49            if (parameters.allowIntersectionObserver && parseInt(parameters.allowIntersectionObserver) == 1) {
50                observer = new IntersectionObserver(callback,options);
51                scrollContainer.classList.add("observer-on")
52            }
53            function CheckScroll() {
54                if (parameters.allowIntersectionObserver && parseInt(parameters.allowIntersectionObserver) == 1) {
55                    let targets = document.querySelectorAll(parameters.scrollContainer + " app-event-item");
56                    if (targets) {
57
58                        targets.forEach(function(target) {
59                            if (matches.indexOf(target) == -1) {
60                                observer.observe(target);
61                                matches.push(target)
62                            }
63                        })
64                    }
65                }
66
67                if (scrollContainer.scrollWidth <= scrollContainer.clientWidth) {
68                    scrollContainer.parentNode.classList.add("no-scroll")
69                } else {
70                    scrollContainer.parentNode.classList.remove("no-scroll")
71                }
72
73                if ((scrollContainer.scrollWidth - scrollContainer.scrollLeft === scrollContainer.clientWidth) && (scrollContainer.scrollLeft > 0)) {
74                    scrollContainer.parentNode.classList.add("scrolled-end")
75
76                } else {
77                    scrollContainer.parentNode.classList.remove("scrolled-end")
78
79                }
80
81                if (scrollContainer.scrollLeft === 0) {
82                    scrollContainer.parentNode.classList.add("scrolled-start")
83
84                } else {
85                    scrollContainer.parentNode.classList.remove("scrolled-start")
86
87                }
88            }
89
90            scrollContainer.addEventListener("scroll", function(event) {
91                CheckScroll();
92
93            })
94            window.addEventListener("resize", function() {
95                CheckScroll();
96            })
97            CheckScroll();
98
99            new ResizeObserver(CheckScroll).observe(scrollContainer)
100            if (parseInt(parameters.clickAndDrag) === 1) {
101                let c = document.querySelector(".carousel-content");
102
103                const preventClick = (e)=>{
104                    console.log(e);
105                    e.preventDefault();
106                    e.stopImmediatePropagation();
107
108                }
109                scrollContainer.addEventListener("mousedown", e=>{
110                    isDown = true;

111                    startX = e.pageX - scrollContainer.offsetLeft;
112                    scrollLeft = scrollContainer.scrollLeft;
113
114                    e.stopPropagation();
115
116                }
117                )
118
119                scrollContainer.addEventListener("mouseleave", ()=>{
120                    isDown = false;
121                }
122                )
123
124                scrollContainer.addEventListener("mouseup", e=>{
125                    isDown = false;
126
127                    const elements = document.querySelectorAll(parameters.disableClickContainer);
128                    console.log(elements);
129                    if (isDragged) {
130                        for (let i = 0; i < elements.length; i++) {
131                            elements[i].addEventListener("click", preventClick, true);
132                        }
133                    } else {
134                        for (let i = 0; i < elements.length; i++) {
135                            elements[i].removeEventListener("click", preventClick, true);
136                        }
137                    }
138
139                    scrollContainer.classList.remove("dragged")
140                    isDragged = false;
141                }
142                )
143                scrollContainer.addEventListener("mousemove", e=>{
144                    if (!isDown)
145                        return;
146                    isDragged = true;
147
148                    e.preventDefault();

149                    const x = e.pageX - scrollContainer.offsetLeft;
150                    const walk = (x - startX) * 1;
151                    scrollContainer.scrollLeft = scrollLeft - walk;
152                    scrollContainer.classList.add("dragged")
153
154                }
155                )
156
157            }
158            var speed = parameters.scrollSpeed ? parseInt(parameters.scrollSpeed) : 40;
159            var distance = parameters.scrollDistance ? parseInt(parameters.scrollDistance) : 320;
160            element.classList.add('customScroll')
161
162            var previous_button = document.createElement('button');
163            previous_button.classList.add('previous');
164
165            var icon = document.createElement("div");
166            icon.classList.add("icon")
167            previous_button.appendChild(icon);
168            previous_button.onclick = function() {
169                var step = distance;
170
171                sideScroll(scrollContainer, 'left', speed, distance, step);
172            }
173            buttonContainer.appendChild(previous_button);
174
175            var next_button = document.createElement('button');
176            var icon = document.createElement("div");
177            icon.classList.add("icon")
178
179            next_button.classList.add('next');
180            next_button.appendChild(icon);
181            next_button.onclick = function() {
182                var step = distance;
183                sideScroll(scrollContainer, 'right', speed, distance, step);
184
185            }
186            buttonContainer.appendChild(next_button)
187
188            if (parameters.addProgressBar == "true") {
189                var p_container = document.createElement('div');
190                p_container.classList.add('progress-container');
191                var progress_bar = document.createElement('div');
192                progress_bar.id = "progress-bar";
193
194                p_container.appendChild(progress_bar);
195                element.appendChild(p_container);
196                scrollContainer.onscroll = function() {
197                    scrolled = 100 * scrollContainer.scrollLeft / (scrollContainer.scrollWidth - scrollContainer.clientWidth);
198                    progress_bar.style.width = scrolled + "%";
199                }
200            }
201            APIManager.eventSubscribe('applicationLoaded', function() {})
202
203            function isOverflown(element) {
204                return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
205            }
206            function sideScroll(element, direction, speed, distance, step) {
207                scrollAmount = 0;
208
209                if (direction == 'left') {
210                    element.scrollLeft -= step;
211
212                } else {
213                    element.scrollLeft += step;
214                }
215                scrollAmount += step;
216
217            }
218
219        }
220        ,
221        refresh = function() {}
222        ,
223        destroy = function() {}
224        ;
225        createWidget();
226
227        return {
228            refresh: refresh,
229            destroy: destroy
230        }
231    };
232
233    var SlideScroll = function(element, parameters) {
234        
235        var slideClass = (parameters.slideClass) ? parameters.slideClass : ".slide";
236        var clickAndDrag = (parameters.clickAndDrag) ? parseInt(parameters.clickAndDrag) : 0;
237        var slides = document.querySelectorAll(slideClass);
238        
239       
240        var slideContainer = (parameters.slideContainer) ? document.querySelector(parameters.slideContainer) : null;
241        var buttonContainer = (parameters.buttonContainer) ? document.querySelector(parameters.buttonContainer) : element;
242        var currentSlide = 0;
243        var createWidget = function(){
244            slides = document.querySelectorAll(slideClass);
245            //console.log(slides);
246            setup(slides)
247        }
248        var setup = function(slides_array) {
249            var dotContainer = document.createElement('div');
250            dotContainer.classList.add("dot-container");
251            
252            for(let i = 0; i < slides_array.length;i++) {
253                let dot = document.createElement('div');
254                dot.classList.add("slide-dot");
255                dot.setAttribute("dot-index", i)
256                slides_array[i].classList.add("slide-out")
257                slides_array[i].setAttribute("data-index",i);
258                if(i == currentSlide) {
259                    slides_array[i].classList.add("slide-in");
260                    dot.classList.add("slide-selected")
261                }
262                dot.addEventListener("click", function(event){
263                 // console.log("k")
264                    goToSlide(i,slides_array)
265                })
266               dotContainer.appendChild(dot)
267                
268            }
269            buttonContainer.appendChild(dotContainer)
270
271            if(clickAndDrag == 1) {
272                var isDown = false;
273                var initialX = 0;
274                slideContainer.addEventListener("dragstart", function(event) {
275                 
276                    initialX = event.pageX;
277                    event.stopPropagation();
278                })
279                slideContainer.addEventListener("touchstart", function(event) {
280                    
281                    let changedTouches = event.changedTouches
282                    if(changedTouches.length > 0) {
283                        initialX = changedTouches[changedTouches.length - 1 ].pageX
284                    }
285                })
286                slideContainer.addEventListener("touchend", function(event) {
287                    
288                     let changedTouches = event.changedTouches
289                    if(changedTouches.length > 0) {
290                        var deltaX = changedTouches[changedTouches.length - 1].pageX - initialX;
291                         if(deltaX > 0) {
292                         currentSlide--;

293                         currentSlide = (currentSlide < 0) ? slides.length - 1 : currentSlide;
294                         goToSlide(currentSlide, slides)
295                     } else if (deltaX < 0) {
296                         currentSlide++;
297                         currentSlide = (currentSlide > slides.length - 1) ? 0 : currentSlide;
298                           goToSlide(currentSlide, slides)
299                     }
300                    }
301                })
302                 slideContainer.addEventListener("dragend", function(event){
303                    
304                     event.stopPropagation();
305                   
306                     var deltaX = event.pageX - initialX;
307                     if(deltaX < 0) {
308                         currentSlide--;
309                         currentSlide = (currentSlide < 0) ? slides.length - 1 : currentSlide;
310                         goToSlide(currentSlide, slides)
311                     } else if (deltaX > 0) {
312                         currentSlide++;
313                         currentSlide = (currentSlide > slides.length - 1) ? 0 : currentSlide;
314                           goToSlide(currentSlide, slides)
315                     }
316                    
317                })
318               
319            }
320            
321        }
322        var goToSlide = function(index, slidesarray) {
323            var slideSelected =slideContainer.querySelector(".slide-in")
324            var dot = buttonContainer.querySelector(".slide-selected");
325            
326           // console.log(slideSelected)
327            if(slideSelected) {
328                slideSelected.classList.remove("slide-in")
329                dot.classList.remove("slide-selected")
330            }
331            var slide = slideContainer.querySelector(`[data-index="${index}"]`);
332           
333            slide.classList.add("slide-in");
334            currentSlide = index;
335            var dot = buttonContainer.querySelector(`[dot-index="${index}"]`);
336             dot.classList.add("slide-selected")
337        }
338        setTimeout(createWidget, 1000)
339    }
340
341    APIManager.registerWidget('customScroll', CustomScrollWidget);
342    APIManager.registerWidget('slidescroll', SlideScroll)
343}())