https://boxes.com.uy/js/jquery.rcbrand.js

1/*www.oguzhansengul.com*/
2(function ($) {
3
4    $.fn.rcbrand = function (options) {
5
6        var defaults = $.extend({
7            visibleItems: 4,
8            itemsToScroll: 3,
9            animationSpeed: 400,
10            infinite: true,
11            navigationTargetSelector: null,
12            autoPlay: {
13                enable: false,
14                interval: 5000,
15                pauseOnHover: true
16            },
17            responsiveBreakpoints: { 
18                portrait: { 
19                    changePoint:480,
20                    visibleItems: 1,
21                    itemsToScroll: 1
22                }, 
23                landscape: { 
24                    changePoint:640,
25                    visibleItems: 2,
26                    itemsToScroll: 2
27                },
28                tablet: { 
29                    changePoint:768,
30                    visibleItems: 3,
31                    itemsToScroll: 3
32                }
33            },
34            loaded: function(){ },
35            before: function(){ },
36            after: function(){ },
37            resize: function(){ }
38        }, options);
39               
40        
41        var object = $(this);
42        var settings = $.extend(defaults, options);        
43        var itemsWidth;
44        var canNavigate = true; 
45        var itemCount; 
46        var itemsVisible = settings.visibleItems; 
47        var itemsToScroll = settings.itemsToScroll;
48        var responsivePoints = [];
49        var resizeTimeout;
50        var autoPlayInterval;        
51          
52        
53        var methods = {
54                
55            init: function() {
56                return this.each(function () {
57                    methods.appendHTML();
58                    methods.setEventHandlers();                  
59                    methods.initializeItems();                    
60                });
61            },           
62            
63            initializeItems: function() {
64                
65                var obj = settings.responsiveBreakpoints;
66                for(var i in obj) { responsivePoints.push(obj[i]); }
67                responsivePoints.sort(function(a, b) { return a.changePoint - b.changePoint; });
68                var childSet = object.children();
69                childSet.first().addClass("index");
70                itemsWidth = methods.getCurrentItemWidth();
71                itemCount = childSet.length;
72                childSet.width(itemsWidth);
73                if(settings.infinite) {
74                    methods.offsetItemsToBeginning(Math.floor(childSet.length / 2)); 
75                    object.css({
76                        'left': -itemsWidth * Math.floor(childSet.length / 2)
77                    }); 
78                }
79                $(window).trigger('resize');              
80                object.fadeIn();
81                settings.loaded.call(this, object);
82                
83            },          
84            
85            appendHTML: function() {
86                
87                object.addClass("rc-rcbrand-ul");
88                object.wrap("<div class='rc-rcbrand-container'><div class='rc-rcbrand-inner'></div></div>");
89                object.find("li").addClass("rc-rcbrand-item");
90                
91                if(settings.navigationTargetSelector && $(settings.navigationTargetSelector).length > 0) {
92                    $("<div class='rc-rcbrand-nav-left'></div><div class='rc-rcbrand-nav-right'></div>").appendTo(settings.navigationTargetSelector);
93                } else {
94                    settings.navigationTargetSelector = object.parent();
95                    $("<div class='rc-rcbrand-nav-left'></div><div class='rc-rcbrand-nav-right'></div>").insertAfter(object);    
96                }
97                    
98                if(settings.infinite) {    
99                    var childSet = object.children();
100                    var cloneContentBefore = childSet.clone();
101                    var cloneContentAfter = childSet.clone();
102                    object.prepend(cloneContentBefore);
103                    object.append(cloneContentAfter);
104                }
105                
106            },
107            setEventHandlers: function() {
108                var self = this;
109                var childSet = object.children();
110                
111                $(window).on("resize", function(event){
112                    canNavigate = false;

113                    clearTimeout(resizeTimeout);
114                    resizeTimeout = setTimeout(function(){
115                        canNavigate = true;
116                        methods.calculateDisplay();
117                        itemsWidth = methods.getCurrentItemWidth();
118                        childSet.width(itemsWidth);
119                        
120                        if(settings.infinite) {
121                            object.css({
122                                'left': -itemsWidth * Math.floor(childSet.length / 2)
123                            });        
124                        } else {
125                            methods.clearDisabled();
126                            $(settings.navigationTargetSelector).find(".rc-rcbrand-nav-left").addClass('disabled');
127                            object.css({
128                                'left': 0
129                            });
130                        }
131                        
132                        settings.resize.call(self, object);
133
134                    }, 100);
135                    
136                });                    
137                
138                $(settings.navigationTargetSelector).find(".rc-rcbrand-nav-left").on("click", function (event) {
139                    methods.scroll(true);
140                });
141                
142                $(settings.navigationTargetSelector).find(".rc-rcbrand-nav-right").on("click", function (event) {
143                    methods.scroll(false);
144                });
145                
146                if(settings.autoPlay.enable) {
147
148                    methods.setAutoplayInterval();
149
150                    if (settings.autoPlay.pauseOnHover === true) {
151                        object.on({
152                            mouseenter : function() {
153                                canNavigate = false;
154                            },
155                            mouseleave : function() {
156                                canNavigate = true;
157                            }
158                        });        
159                    }            
160                    
161                }
162                
163                object[0].addEventListener('touchstart', methods.touchHandler.handleTouchStart, false);        
164                object[0].addEventListener('touchmove', methods.touchHandler.handleTouchMove, false);                
165                
166            },                 
167            
168            calculateDisplay: function() {
169                var contentWidth = $('html').width();
170                var largestCustom = responsivePoints[responsivePoints.length-1].changePoint; 
171                
172                for(var i in responsivePoints) {
173                    
174                    if(contentWidth >= largestCustom) { 
175                        itemsVisible = settings.visibleItems;
176                        itemsToScroll = settings.itemsToScroll;
177                        break;
178                    }
179                    else { 
180                    
181                        if(contentWidth < responsivePoints[i].changePoint) {
182                            itemsVisible = responsivePoints[i].visibleItems;
183                            itemsToScroll = responsivePoints[i].itemsToScroll;
184                            break;
185                        }
186                        else {
187                            continue;
188                        }
189                    }
190                }
191                
192            },                             
193            
194            scroll: function(reverse) {
195
196                if(typeof reverse === 'undefined') { reverse = true }
197
198                if(canNavigate == true) {
199                    canNavigate = false;
200                    settings.before.call(this, object);
201                    itemsWidth = methods.getCurrentItemWidth();
202                    
203                    if(settings.autoPlay.enable) {
204                        clearInterval(autoPlayInterval);
205                    }
206                    
207                    if(!settings.infinite) {
208                        
209                        var scrollDistance = itemsWidth * itemsToScroll;
210                        
211                        if(reverse) {                            
212                            object.animate({
213                                'left': methods.calculateNonInfiniteLeftScroll(scrollDistance)
214                            }, settings.animationSpeed, function(){
215                                settings.after.call(this, object);
216                                canNavigate = true;
217                            });                            
218                            
219                        } else {
220                            object.animate({
221                                'left': methods.calculateNonInfiniteRightScroll(scrollDistance)
222                            },settings.animationSpeed, function(){
223                                settings.after.call(this, object);
224                                canNavigate = true;
225                            });                                    
226                        }
227                        
228                        
229                        
230                    } else {                    
231                        object.animate({
232                            'left' : reverse ? "+=" + itemsWidth * itemsToScroll : "-=" + itemsWidth * itemsToScroll
233                        }, settings.animationSpeed, function() {
234                            settings.after.call(this, object);
235                            canNavigate = true;
236                            
237                            if(reverse) { 
238                                methods.offsetItemsToBeginning(itemsToScroll); 
239                            } else {
240                                methods.offsetItemsToEnd(itemsToScroll);
241                            }
242                            methods.offsetSliderPosition(reverse); 
243                            
244                        });
245                    }
246                    
247                    if(settings.autoPlay.enable) {
248                        methods.setAutoplayInterval();
249                    }
250                    
251                }
252            },
253            
254            touchHandler: {
255
256                xDown: null,
257                yDown: null,
258                handleTouchStart: function(evt) {                                         
259                    this.xDown = evt.touches[0].clientX;                                      
260                    this.yDown = evt.touches[0].clientY;
261                }, 
262                handleTouchMove: function (evt) {
263                    if (!this.xDown || !this.yDown) {
264                        return;
265                    }
266
267                    var xUp = evt.touches[0].clientX;                                    
268                    var yUp = evt.touches[0].clientY;
269
270                    var xDiff = this.xDown - xUp;
271                    var yDiff = this.yDown - yUp;
272                    if (Math.abs( xDiff ) > 0) {
273                        if ( xDiff > 0 ) {
274                            methods.scroll(false);
275                        } else {
276                            methods.scroll(true);
277                        }                       
278                    }
279                    this.xDown = null;
280                    this.yDown = null;
281                    canNavigate = true;
282                }
283            },            
284            
285            getCurrentItemWidth: function() {
286                return (object.parent().width())/itemsVisible;
287            },            
288            
289            offsetItemsToBeginning: function(number) {
290                if(typeof number === 'undefined') { number = 1 }
291                for(var i = 0; i < number; i++) {

292                    object.children().last().insertBefore(object.children().first());
293                }    
294            },                
295            
296            offsetItemsToEnd: function(number) {
297                if(typeof number === 'undefined') { number = 1 }
298                for(var i = 0; i < number; i++) {
299                    object.children().first().insertAfter(object.children().last());    
300                }
301            },            
302            
303            offsetSliderPosition: function(reverse) {
304                var left = parseInt(object.css('left').replace('px', ''));
305                if (reverse) { 
306                    left = left - itemsWidth * itemsToScroll; 
307                } else {
308                    left = left + itemsWidth * itemsToScroll;
309                }
310                object.css({
311                    'left': left
312                });
313            },
314
315            getOffsetPosition: function() {
316                return parseInt(object.css('left').replace('px', ''));    
317            },
318            
319            calculateNonInfiniteLeftScroll: function(toScroll) {
320                
321                methods.clearDisabled();
322                if(methods.getOffsetPosition() + toScroll >= 0) {
323                    $(settings.navigationTargetSelector).find(".rc-rcbrand-nav-left").addClass('disabled');
324                    return 0;
325                } else {
326                    return methods.getOffsetPosition() + toScroll;
327                }
328            },
329            
330            calculateNonInfiniteRightScroll: function(toScroll){
331                
332                methods.clearDisabled();
333                var negativeOffsetLimit = (itemCount * itemsWidth) - (itemsVisible * itemsWidth);
334                
335                if(methods.getOffsetPosition() - toScroll <= -negativeOffsetLimit) {
336                    $(settings.navigationTargetSelector).find(".rc-rcbrand-nav-right").addClass('disabled');
337                    return -negativeOffsetLimit;        
338                } else {
339                    return methods.getOffsetPosition() - toScroll;
340                }
341            },
342            
343            setAutoplayInterval: function(){
344                autoPlayInterval = setInterval(function() {
345                    if (canNavigate) {
346                        methods.scroll(false);
347                    }
348                }, settings.autoPlay.interval);                    
349            },
350            
351            clearDisabled: function() {
352                var parent = $(settings.navigationTargetSelector);
353                parent.find(".rc-rcbrand-nav-left").removeClass('disabled');
354                parent.find(".rc-rcbrand-nav-right").removeClass('disabled');
355            }                        
356            
357        };
358
359        if (methods[options]) {     
360            return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
361        } else if (typeof options === 'object' || !options) {    
362            return methods.init.apply(this);  
363        } else {
364            $.error(method);
365        }        
366};
367
368})(jQuery);