https://materials-lab.io/static/assets/js/plugins/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/* =========================================================================
13 *
14 *  Creative-Tim Modifications:
15 *  - line 112 and 115 we added Material Icons chevron_left and chevron_right
16 * ==========================================================================
17 */
18
19
20(function($) {
21
22  $.fn.flexisel = function(options) {
23
24    var defaults = $.extend({
25      visibleItems: 4,
26      itemsToScroll: 3,
27      animationSpeed: 400,
28      infinite: true,
29      navigationTargetSelector: null,
30      autoPlay: {
31        enable: false,
32        interval: 5000,
33        pauseOnHover: true
34      },
35      responsiveBreakpoints: {
36        portrait: {
37          changePoint: 480,
38          visibleItems: 1,
39          itemsToScroll: 1
40        },
41        landscape: {
42          changePoint: 640,
43          visibleItems: 2,
44          itemsToScroll: 2
45        },
46        tablet: {
47          changePoint: 768,
48          visibleItems: 3,
49          itemsToScroll: 3
50        }
51      }
52    }, options);
53
54    /******************************
55    Private Variables
56    *******************************/
57
58    var object = $(this);
59    var settings = $.extend(defaults, options);
60    var itemsWidth;
61    var canNavigate = true;
62    var itemCount;
63    var itemsVisible = settings.visibleItems;
64    var itemsToScroll = settings.itemsToScroll;
65    var responsivePoints = [];
66    var resizeTimeout;
67    var autoPlayInterval;
68
69    /******************************
70    Public Methods
71    *******************************/
72
73    var methods = {
74
75      init: function() {
76        return this.each(function() {
77          methods.appendHTML();
78          methods.setEventHandlers();
79          methods.initializeItems();
80        });
81      },
82
83      /******************************
84      Initialize Items
85      *******************************/
86
87      initializeItems: function() {
88
89        var obj = settings.responsiveBreakpoints;
90        for (var i in obj) {
91          responsivePoints.push(obj[i]);
92        }
93        responsivePoints.sort(function(a, b) {
94          return a.changePoint - b.changePoint;
95        });
96        var childSet = object.children();
97        itemsWidth = methods.getCurrentItemWidth();
98        itemCount = childSet.length;
99        childSet.width(itemsWidth);
100        object.css({
101          'left': -itemsWidth * (itemsVisible + 1)
102        });
103        object.fadeIn();
104        $(window).trigger('resize');
105
106      },
107
108      /******************************
109      Append HTML
110      *******************************/
111
112      appendHTML: function() {
113
114        object.addClass("nbs-flexisel-ul");
115        object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>");
116        object.find("li").addClass("nbs-flexisel-item");
117
118        if (settings.navigationTargetSelector && $(settings.navigationTargetSelector).length > 0) {
119          $("<div class='nbs-flexisel-nav-left'><i class='material-icons'>chevron_left</i></div><div class='nbs-flexisel-nav-right'><i class='material-icons'>chevron_right</i></div>").appendTo(settings.navigationTargetSelector);
120        } else {
121          settings.navigationTargetSelector = object.parent();
122          $("<div class='nbs-flexisel-nav-left'><i class='material-icons'>chevron_left</i></div><div class='nbs-flexisel-nav-right'><i class='material-icons'>chevron_right</i></div>").insertAfter(object);
123        }
124
125        if (settings.infinite) {
126          var childSet = object.children();
127          var cloneContentBefore = childSet.clone();
128          var cloneContentAfter = childSet.clone();
129          object.prepend(cloneContentBefore);
130          object.append(cloneContentAfter);
131        }
132
133      },
134
135
136      /******************************
137      Set Event Handlers
138      *******************************/
139      setEventHandlers: function() {
140
141        var childSet = object.children();
142
143        $(window).on("resize", function(event) {
144          clearTimeout(resizeTimeout);
145          resizeTimeout = setTimeout(function() {
146            methods.calculateDisplay();
147            itemsWidth = methods.getCurrentItemWidth();
148            childSet.width(itemsWidth);
149
150            if (settings.infinite) {
151              object.css({
152                'left': -itemsWidth * Math.floor(childSet.length / 2)
153              });
154            } else {
155              methods.clearDisabled();
156              $(settings.navigationTargetSelector).find(".nbs-flexisel-nav-left").addClass('disabled');
157              object.css({
158                'left': 0
159              });
160            }
161          }, 100);
162
163        });
164
165        $(settings.navigationTargetSelector).find(".nbs-flexisel-nav-left").on("click", function(event) {
166          methods.scroll(true);
167        });
168
169        $(settings.navigationTargetSelector).find(".nbs-flexisel-nav-right").on("click", function(event) {
170          methods.scroll(false);
171        });
172
173        if (settings.autoPlay.enable) {
174
175          methods.setAutoplayInterval();
176
177          if (settings.autoPlay.pauseOnHover === true) {
178            object.on({
179              mouseenter: function() {
180                canNavigate = false;

181              },
182              mouseleave: function() {
183                canNavigate = true;
184              }
185            });
186          }
187
188        }
189
190        object[0].addEventListener('touchstart', methods.touchHandler.handleTouchStart, false);
191        object[0].addEventListener('touchmove', methods.touchHandler.handleTouchMove, false);
192
193      },
194
195      /******************************
196      Calculate Display
197      *******************************/
198
199      calculateDisplay: function() {
200        var contentWidth = $('html').width();
201        var largestCustom = responsivePoints[responsivePoints.length - 1].changePoint; // sorted array
202
203        for (var i in responsivePoints) {
204
205          if (contentWidth >= largestCustom) { // set to default if width greater than largest custom responsiveBreakpoint
206            itemsVisible = settings.visibleItems;
207            itemsToScroll = settings.itemsToScroll;
208            break;
209          } else { // determine custom responsiveBreakpoint to use
210
211            if (contentWidth < responsivePoints[i].changePoint) {
212              itemsVisible = responsivePoints[i].visibleItems;
213              itemsToScroll = responsivePoints[i].itemsToScroll;
214              break;
215            } else {
216              continue;
217            }
218          }
219        }
220
221      },
222
223      /******************************
224      Scroll
225      *******************************/
226
227      scroll: function(reverse) {
228
229        if (typeof reverse === 'undefined') {
230          reverse = true
231        }
232
233        if (canNavigate == true) {
234          canNavigate = false;
235          itemsWidth = methods.getCurrentItemWidth();
236
237          if (settings.autoPlay.enable) {
238            clearInterval(autoPlayInterval);
239          }
240
241          if (!settings.infinite) {
242
243            var scrollDistance = itemsWidth * itemsToScroll;
244
245            if (reverse) {
246              object.animate({
247                'left': methods.calculateNonInfiniteLeftScroll(scrollDistance)
248              }, settings.animationSpeed, function() {
249                canNavigate = true;
250              });
251
252            } else {
253              object.animate({
254                'left': methods.calculateNonInfiniteRightScroll(scrollDistance)
255              }, settings.animationSpeed, function() {
256                canNavigate = true;
257              });
258            }
259
260
261
262          } else {
263            object.animate({
264              'left': reverse ? "+=" + itemsWidth * itemsToScroll : "-=" + itemsWidth * itemsToScroll
265            }, settings.animationSpeed, function() {
266              canNavigate = true;
267
268              if (reverse) {
269                methods.offsetItemsToBeginning(itemsToScroll);
270              } else {
271                methods.offsetItemsToEnd(itemsToScroll);
272              }
273              methods.offsetSliderPosition(reverse);
274
275            });
276          }
277
278          if (settings.autoPlay.enable) {
279            methods.setAutoplayInterval();
280          }
281
282        }
283      },
284
285      touchHandler: {
286
287        xDown: null,
288        yDown: null,
289        handleTouchStart: function(evt) {
290          this.xDown = evt.touches[0].clientX;
291          this.yDown = evt.touches[0].clientY;
292        },
293        handleTouchMove: function(evt) {
294          if (!this.xDown || !this.yDown) {
295            return;
296          }
297
298          var xUp = evt.touches[0].clientX;
299          var yUp = evt.touches[0].clientY;
300
301          var xDiff = this.xDown - xUp;
302          var yDiff = this.yDown - yUp;
303
304          // only comparing xDiff
305          // compare which is greater against yDiff to determine whether left/right or up/down  e.g. if (Math.abs( xDiff ) > Math.abs( yDiff ))
306          if (Math.abs(xDiff) > 0) {
307            if (xDiff > 0) {
308              // swipe left
309              methods.scroll(false);
310            } else {
311              //swipe right
312              methods.scroll(true);
313            }
314          }
315
316          /* reset values */
317          this.xDown = null;
318          this.yDown = null;
319          canNavigate = true;
320        }
321      },
322
323      /******************************
324      Utility Functions
325      *******************************/
326
327      getCurrentItemWidth: function() {
328        return (object.parent().width()) / itemsVisible;
329      },
330
331      offsetItemsToBeginning: function(number) {
332        if (typeof number === 'undefined') {
333          number = 1
334        }
335        for (var i = 0; i < number; i++) {

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