https://saintsstatistics.co.uk/templates/joothemes-transport/js/jquery.flexisel.js

1/*
2* File: jquery.flexisel.js
3* Version: 2.1.0
4* Description: Responsive carousel jQuery plugin
5* Author: 9bit Studios
6* Copyright 2016, 9bit Studios
7* http://www.9bitstudios.com
8* Free to use and abuse under the MIT license.
9* http://www.opensource.org/licenses/mit-license.php
10*/
11
12(function ($) {
13
14    $.fn.flexisel = function (options) {
15
16        var defaults = $.extend({
17            visibleItems: 4,
18            itemsToScroll: 3,
19            animationSpeed: 400,
20            infinite: true,
21            navigationTargetSelector: null,
22            autoPlay: {
23                enable: false,
24                interval: 5000,
25                pauseOnHover: true
26            },
27            responsiveBreakpoints: { 
28                portrait: { 
29                    changePoint:480,
30                    visibleItems: 1,
31                    itemsToScroll: 1
32                }, 
33                landscape: { 
34                    changePoint:640,
35                    visibleItems: 2,
36                    itemsToScroll: 2
37                },
38                tablet: { 
39                    changePoint:768,
40                    visibleItems: 3,
41                    itemsToScroll: 3
42                }
43            }
44        }, options);
45        
46        /******************************
47        Private Variables
48        *******************************/         
49        
50        var object = $(this);
51        var settings = $.extend(defaults, options);        
52        var itemsWidth;
53        var canNavigate = true; 
54        var itemCount; 
55        var itemsVisible = settings.visibleItems; 
56        var itemsToScroll = settings.itemsToScroll;
57        var responsivePoints = [];
58        var resizeTimeout;
59        var autoPlayInterval;        
60        
61        /******************************
62        Public Methods
63        *******************************/        
64        
65        var methods = {
66                
67            init: function() {
68                return this.each(function () {
69                    methods.appendHTML();
70                    methods.setEventHandlers();                  
71                    methods.initializeItems();                    
72                });
73            },
74
75            /******************************
76            Initialize Items
77            *******************************/            
78            
79            initializeItems: function() {
80                
81                var obj = settings.responsiveBreakpoints;
82                for(var i in obj) { responsivePoints.push(obj[i]); }
83                responsivePoints.sort(function(a, b) { return a.changePoint - b.changePoint; });
84                var childSet = object.children();
85                itemsWidth = methods.getCurrentItemWidth();
86                itemCount = childSet.length;
87                childSet.width(itemsWidth);
88                object.css({ 'left': -itemsWidth * (itemsVisible + 1) });
89                object.fadeIn();
90                $(window).trigger('resize');
91                
92            },
93            
94            /******************************
95            Append HTML
96            *******************************/            
97            
98            appendHTML: function() {
99                
100                object.addClass("nbs-flexisel-ul");
101                object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>");
102                object.find("li").addClass("nbs-flexisel-item");
103                
104                if(settings.navigationTargetSelector && $(settings.navigationTargetSelector).length > 0) {
105                    $("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").appendTo(".nbs-flexisel-container");
106                } else {
107                    settings.navigationTargetSelector = object.parent();
108                    $("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").appendTo(".nbs-flexisel-container");
109                }
110                    
111                if(settings.infinite) {    
112                    var childSet = object.children();
113                    var cloneContentBefore = childSet.clone();
114                    var cloneContentAfter = childSet.clone();

115                    object.prepend(cloneContentBefore);
116                    object.append(cloneContentAfter);
117                }
118                
119            },
120                    
121            
122            /******************************
123            Set Event Handlers
124            *******************************/
125            setEventHandlers: function() {
126                
127                var childSet = object.children();
128                
129                $(window).on("resize", function(event){
130                    clearTimeout(resizeTimeout);
131                    resizeTimeout = setTimeout(function(){
132                        methods.calculateDisplay();
133                        itemsWidth = methods.getCurrentItemWidth();
134                        childSet.width(itemsWidth);
135                        
136                        if(settings.infinite) {
137                            object.css({
138                                'left': -itemsWidth * Math.floor(childSet.length / 2)
139                            });        
140                        } else {
141                            methods.clearDisabled();
142                            $(settings.navigationTargetSelector).find(".nbs-flexisel-nav-left").addClass('disabled');
143                            object.css({
144                                'left': 0
145                            });
146                        }                                                    
147                    }, 100);
148                    
149                });                    
150                
151                $(".nbs-flexisel-container").find(".nbs-flexisel-nav-left").on("click", function (event) {
152                    methods.scroll(true);
153                });
154                
155                $(".nbs-flexisel-container").find(".nbs-flexisel-nav-right").on("click", function (event) {
156                    methods.scroll(false);
157                });
158                
159                if(settings.autoPlay.enable) {
160
161                    methods.setAutoplayInterval();
162
163                    if (settings.autoPlay.pauseOnHover === true) {
164                        object.on({
165                            mouseenter : function() {
166                                canNavigate = false;
167                            },
168                            mouseleave : function() {
169                                canNavigate = true;
170                            }
171                        });        
172                    }            
173                    
174                }
175                
176                object[0].addEventListener('touchstart', methods.touchHandler.handleTouchStart, false);        
177                object[0].addEventListener('touchmove', methods.touchHandler.handleTouchMove, false);                
178                
179            },        
180            
181            /******************************
182            Calculate Display
183            *******************************/            
184            
185            calculateDisplay: function() {
186                var contentWidth = $('html').width();
187                var largestCustom = responsivePoints[responsivePoints.length-1].changePoint; // sorted array 
188                
189                for(var i in responsivePoints) {
190                    
191                    if(contentWidth >= largestCustom) { // set to default if width greater than largest custom responsiveBreakpoint 
192                        itemsVisible = settings.visibleItems;
193                        itemsToScroll = settings.itemsToScroll;
194                        break;
195                    }
196                    else { // determine custom responsiveBreakpoint to use
197                    
198                        if(contentWidth < responsivePoints[i].changePoint) {
199                            itemsVisible = responsivePoints[i].visibleItems;
200                            itemsToScroll = responsivePoints[i].itemsToScroll;
201                            break;
202                        }
203                        else {
204                            continue;
205                        }
206                    }
207                }
208                
209            },                
210            
211            /******************************
212            Scroll
213            *******************************/                
214            
215            scroll: function(reverse) {
216
217                if(typeof reverse === 'undefined') { reverse = true }
218
219                if(canNavigate == true) {
220                    canNavigate = false;

221                    itemsWidth = methods.getCurrentItemWidth();
222                    
223                    if(settings.autoPlay.enable) {
224                        clearInterval(autoPlayInterval);
225                    }
226                    
227                    if(!settings.infinite) {
228                        
229                        var scrollDistance = itemsWidth * itemsToScroll;
230                        
231                        if(reverse) {                            
232                            object.animate({
233                                'left': methods.calculateNonInfiniteLeftScroll(scrollDistance)
234                            }, settings.animationSpeed, function(){
235                                canNavigate = true;
236                            });                            
237                            
238                        } else {
239                            object.animate({
240                                'left': methods.calculateNonInfiniteRightScroll(scrollDistance)
241                            },settings.animationSpeed, function(){
242                                canNavigate = true;
243                            });                                    
244                        }
245                        
246                        
247                        
248                    } else {                    
249                        object.animate({
250                            'left' : reverse ? "+=" + itemsWidth * itemsToScroll : "-=" + itemsWidth * itemsToScroll
251                        }, settings.animationSpeed, function() {
252                            canNavigate = true;
253                            
254                            if(reverse) { 
255                                methods.offsetItemsToBeginning(itemsToScroll); 
256                            } else {
257                                methods.offsetItemsToEnd(itemsToScroll);
258                            }
259                            methods.offsetSliderPosition(reverse); 
260                            
261                        });
262                    }
263                    
264                    if(settings.autoPlay.enable) {
265                        methods.setAutoplayInterval();
266                    }
267                    
268                }
269            },
270            
271            touchHandler: {
272
273                xDown: null,
274                yDown: null,
275                handleTouchStart: function(evt) {                                         
276                    this.xDown = evt.touches[0].clientX;                                      
277                    this.yDown = evt.touches[0].clientY;
278                }, 
279                handleTouchMove: function (evt) {
280                    if (!this.xDown || !this.yDown) {
281                        return;
282                    }
283
284                    var xUp = evt.touches[0].clientX;                                    
285                    var yUp = evt.touches[0].clientY;
286
287                    var xDiff = this.xDown - xUp;
288                    var yDiff = this.yDown - yUp;
289                    
290                    // only comparing xDiff
291                    // compare which is greater against yDiff to determine whether left/right or up/down  e.g. if (Math.abs( xDiff ) > Math.abs( yDiff ))
292                    if (Math.abs( xDiff ) > 0) {
293                        if ( xDiff > 0 ) {
294                            // swipe left
295                            methods.scroll(false);
296                        } else {
297                            //swipe right
298                            methods.scroll(true);
299                        }                       
300                    }
301                    
302                    /* reset values */
303                    this.xDown = null;
304                    this.yDown = null;
305                    canNavigate = true;
306                }
307            },            
308            
309            /******************************
310            Utility Functions
311            *******************************/
312            
313            getCurrentItemWidth: function() {
314                return (object.parent().width())/itemsVisible;
315            },            
316            
317            offsetItemsToBeginning: function(number) {
318                if(typeof number === 'undefined') { number = 1 }
319                for(var i = 0; i < number; i++) {

320                    object.children().last().insertBefore(object.children().first());
321                }    
322            },                
323            
324            offsetItemsToEnd: function(number) {
325                if(typeof number === 'undefined') { number = 1 }
326                for(var i = 0; i < number; i++) {
327                    object.children().first().insertAfter(object.children().last());    
328                }
329            },            
330            
331            offsetSliderPosition: function(reverse) {
332                var left = parseInt(object.css('left').replace('px', ''));
333                if (reverse) { 
334                    left = left - itemsWidth * itemsToScroll; 
335                } else {
336                    left = left + itemsWidth * itemsToScroll;
337                }
338                object.css({
339                    'left': left
340                });
341            },
342
343            getOffsetPosition: function() {
344                return parseInt(object.css('left').replace('px', ''));    
345            },
346            
347            calculateNonInfiniteLeftScroll: function(toScroll) {
348                
349                methods.clearDisabled();
350                if(methods.getOffsetPosition() + toScroll >= 0) {
351                    $(settings.navigationTargetSelector).find(".nbs-flexisel-nav-left").addClass('disabled');
352                    return 0;
353                } else {
354                    return methods.getOffsetPosition() + toScroll;
355                }
356            },
357            
358            calculateNonInfiniteRightScroll: function(toScroll){
359                
360                methods.clearDisabled();
361                var negativeOffsetLimit = (itemCount * itemsWidth) - (itemsVisible * itemsWidth);
362                
363                if(methods.getOffsetPosition() - toScroll <= -negativeOffsetLimit) {
364                    $(settings.navigationTargetSelector).find(".nbs-flexisel-nav-right").addClass('disabled');
365                    return -negativeOffsetLimit;        
366                } else {
367                    return methods.getOffsetPosition() - toScroll;
368                }
369            },
370            
371            setAutoplayInterval: function(){
372                autoPlayInterval = setInterval(function() {
373                    if (canNavigate) {
374                        methods.scroll(false);
375                    }
376                }, settings.autoPlay.interval);                    
377            },
378            
379            clearDisabled: function() {
380                var parent = $(settings.navigationTargetSelector);
381                parent.find(".nbs-flexisel-nav-left").removeClass('disabled');
382                parent.find(".nbs-flexisel-nav-right").removeClass('disabled');
383            }                        
384            
385        };
386        
387        if (methods[options]) {     // $("#element").pluginName('methodName', 'arg1', 'arg2');
388            return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
389        } else if (typeof options === 'object' || !options) {     // $("#element").pluginName({ option: 1, option:2 });
390            return methods.init.apply(this);  
391        } else {
392            $.error( 'Method "' +  method + '" does not exist in flexisel plugin!');
393        }        
394};
395
396})(jQuery);