https://www.amarillosparkviewrealty.com/wp-content/themes/ZoneStrap/js/jquery.flexisel.js

1/*
2* File: jquery.flexisel.js
3* Version: 2.2.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            loaded: function(){ },
45            before: function(){ },
46            after: function(){ }
47        }, options);
48        
49        /******************************
50        Private Variables
51        *******************************/         
52        
53        var object = $(this);
54        var settings = $.extend(defaults, options);        
55        var itemsWidth;
56        var canNavigate = true; 
57        var itemCount; 
58        var itemsVisible = settings.visibleItems; 
59        var itemsToScroll = settings.itemsToScroll;
60        var responsivePoints = [];
61        var resizeTimeout;
62        var autoPlayInterval;        
63        
64        /******************************
65        Public Methods
66        *******************************/        
67        
68        var methods = {
69                
70            init: function() {
71                return this.each(function () {
72                    methods.appendHTML();
73                    methods.setEventHandlers();                  
74                    methods.initializeItems();                    
75                });
76            },
77
78            /******************************
79            Initialize Items
80            *******************************/            
81            
82            initializeItems: function() {
83                
84                var obj = settings.responsiveBreakpoints;
85                for(var i in obj) { responsivePoints.push(obj[i]); }
86                responsivePoints.sort(function(a, b) { return a.changePoint - b.changePoint; });
87                var childSet = object.children();
88                itemsWidth = methods.getCurrentItemWidth();
89                itemCount = childSet.length;
90                childSet.width(itemsWidth);
91                object.css({ 'left': -itemsWidth * (itemsVisible + 1) });
92                object.fadeIn();
93                $(window).trigger('resize');
94                settings.loaded.call(this, object);
95                
96            },
97            
98            /******************************
99            Append HTML
100            *******************************/            
101            
102            appendHTML: function() {
103                
104                object.addClass("nbs-flexisel-ul");
105                object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>");
106                object.find("li").addClass("nbs-flexisel-item");
107                
108                if(settings.navigationTargetSelector && $(settings.navigationTargetSelector).length > 0) {
109                    $("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").appendTo(settings.navigationTargetSelector);
110                } else {
111                    settings.navigationTargetSelector = object.parent();
112                    $("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").insertAfter(object);    
113                }
114                    
115                if(settings.infinite) {    
116                    var childSet = object.children();
117                    var cloneContentBefore = childSet.clone();
118                    var cloneContentAfter = childSet.clone();

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

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

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