https://512.com.do/js/glider.js

1/* @preserve
2    _____ __ _     __                _
3   / ___// /(_)___/ /___  ____      (_)___
4  / (_ // // // _  // -_)/ __/_    / /(_-<
5  \___//_//_/ \_,_/ \__//_/  (_)__/ //___/
6                              |___/
7
8  Version: 1.7.4
9  Author: Nick Piscitelli (pickykneee)
10  Website: https://nickpiscitelli.com
11  Documentation: http://nickpiscitelli.github.io/Glider.js
12  License: MIT License
13  Release Date: October 25th, 2018
14
15*/
16
17/* global define */
18
19(function (factory) {
20  typeof define === 'function' && define.amd
21    ? define(factory)
22    : typeof exports === 'object'
23      ? (module.exports = factory())
24      : factory()
25})(function () {
26  ('use strict') // eslint-disable-line no-unused-expressions
27
28  /* globals window:true */
29  var _window = typeof window !== 'undefined' ? window : this
30
31  var Glider = (_window.Glider = function (element, settings) {
32    var _ = this
33
34    if (element._glider) return element._glider
35
36    _.ele = element
37    _.ele.classList.add('glider')
38
39    // expose glider object to its DOM element
40    _.ele._glider = _
41
42    // merge user setting with defaults
43    _.opt = Object.assign(
44      {},
45      {
46        slidesToScroll: 1,
47        slidesToShow: 1,
48        resizeLock: true,
49        duration: 0.5,
50        // easeInQuad
51        easing: function (x, t, b, c, d) {
52          return c * (t /= d) * t + b
53        }
54      },
55      settings
56    )
57
58    // set defaults
59    _.animate_id = _.page = _.slide = 0
60    _.arrows = {}
61
62    // preserve original options to
63    // extend breakpoint settings
64    _._opt = _.opt
65
66    if (_.opt.skipTrack) {
67      // first and only child is the track
68      _.track = _.ele.children[0]
69    } else {
70      // create track and wrap slides
71      _.track = document.createElement('div')
72      _.ele.appendChild(_.track)
73      while (_.ele.children.length !== 1) {
74        _.track.appendChild(_.ele.children[0])
75      }
76    }
77
78    _.track.classList.add('glider-track')
79
80    // start glider
81    _.init()
82
83    // set events
84    _.resize = _.init.bind(_, true)
85    _.event(_.ele, 'add', {
86      scroll: _.updateControls.bind(_)
87    })
88    _.event(_window, 'add', {
89      resize: _.resize
90    })
91  })
92
93  var gliderPrototype = Glider.prototype
94  gliderPrototype.init = function (refresh, paging) {
95    var _ = this
96
97    var width = 0
98
99    var height = 0
100
101    _.slides = _.track.children;
102
103    [].forEach.call(_.slides, function (_, i) {
104      _.classList.add('glider-slide')
105      _.setAttribute('data-gslide', i)
106    })
107
108    _.containerWidth = _.ele.clientWidth
109
110    var breakpointChanged = _.settingsBreakpoint()
111    if (!paging) paging = breakpointChanged
112
113    if (
114      _.opt.slidesToShow === 'auto' ||
115      typeof _.opt._autoSlide !== 'undefined'
116    ) {
117      var slideCount = _.containerWidth / _.opt.itemWidth
118
119      _.opt._autoSlide = _.opt.slidesToShow = _.opt.exactWidth
120        ? slideCount
121        : Math.max(1, Math.floor(slideCount))
122    }
123    if (_.opt.slidesToScroll === 'auto') {
124      _.opt.slidesToScroll = Math.floor(_.opt.slidesToShow)
125    }
126
127    _.itemWidth = _.opt.exactWidth
128      ? _.opt.itemWidth
129      : _.containerWidth / _.opt.slidesToShow;
130
131    // set slide dimensions
132    [].forEach.call(_.slides, function (__) {
133      __.style.height = 'auto'
134      __.style.width = _.itemWidth + 'px'
135      width += _.itemWidth
136      height = Math.max(__.offsetHeight, height)
137    })
138
139    _.track.style.width = width + 'px'
140    _.trackWidth = width
141    _.isDrag = false
142    _.preventClick = false
143
144    _.opt.resizeLock && _.scrollTo(_.slide * _.itemWidth, 0)
145
146    if (breakpointChanged || paging) {
147      _.bindArrows()
148      _.buildDots()
149      _.bindDrag()
150    }
151
152    _.updateControls()
153
154    _.emit(refresh ? 'refresh' : 'loaded')
155  }
156
157  gliderPrototype.bindDrag = function () {
158    var _ = this
159    _.mouse = _.mouse || _.handleMouse.bind(_)
160
161    var mouseup = function () {
162      _.mouseDown = undefined
163      _.ele.classList.remove('drag')
164      if (_.isDrag) {
165        _.preventClick = true
166      }
167      _.isDrag = false
168    }
169
170    var events = {
171      mouseup: mouseup,
172      mouseleave: mouseup,
173      mousedown: function (e) {
174        e.preventDefault()
175        e.stopPropagation()
176        _.mouseDown = e.clientX
177        _.ele.classList.add('drag')
178      },
179      mousemove: _.mouse,
180      click: function (e) {
181        if (_.preventClick) {
182          e.preventDefault()
183          e.stopPropagation()
184        }
185        _.preventClick = false
186      }
187    }
188
189    _.ele.classList.toggle('draggable', _.opt.draggable === true)
190    _.event(_.ele, 'remove', events)
191    if (_.opt.draggable) _.event(_.ele, 'add', events)
192  }
193
194  gliderPrototype.buildDots = function () {
195    var _ = this
196
197    if (!_.opt.dots) {
198      if (_.dots) _.dots.innerHTML = ''
199      return
200    }
201
202    if (typeof _.opt.dots === 'string') {
203      _.dots = document.querySelector(_.opt.dots)
204    } else _.dots = _.opt.dots
205    if (!_.dots) return
206
207    _.dots.innerHTML = ''
208    _.dots.classList.add('glider-dots')
209
210    for (var i = 0; i < Math.ceil(_.slides.length / _.opt.slidesToShow); ++i) {
211      var dot = document.createElement('button')
212      dot.dataset.index = i
213      dot.setAttribute('aria-label', 'Page ' + (i + 1))
214      dot.setAttribute('role', 'tab')
215      dot.className = 'glider-dot ' + (i ? '' : 'active')
216      _.event(dot, 'add', {
217        click: _.scrollItem.bind(_, i, true)
218      })
219      _.dots.appendChild(dot)
220    }
221  }
222
223  gliderPrototype.bindArrows = function () {
224    var _ = this
225    if (!_.opt.arrows) {
226      Object.keys(_.arrows).forEach(function (direction) {
227        var element = _.arrows[direction]
228        _.event(element, 'remove', { click: element._func })
229      })
230      return
231    }
232    ['prev', 'next'].forEach(function (direction) {
233      var arrow = _.opt.arrows[direction]
234      if (arrow) {
235        if (typeof arrow === 'string') arrow = document.querySelector(arrow)
236        if (arrow) {
237          arrow._func = arrow._func || _.scrollItem.bind(_, direction)
238          _.event(arrow, 'remove', {
239            click: arrow._func
240          })
241          _.event(arrow, 'add', {
242            click: arrow._func
243          })
244          _.arrows[direction] = arrow
245        }
246      }
247    })
248  }
249
250  gliderPrototype.updateControls = function (event) {
251    var _ = this
252
253    if (event && !_.opt.scrollPropagate) {
254      event.stopPropagation()
255    }
256
257    var disableArrows = _.containerWidth >= _.trackWidth
258
259    if (!_.opt.rewind) {
260      if (_.arrows.prev) {
261        _.arrows.prev.classList.toggle(
262          'disabled',
263          _.ele.scrollLeft <= 0 || disableArrows
264        )
265        _.arrows.prev.classList.contains('disabled')
266          ? _.arrows.prev.setAttribute('aria-disabled', true)
267          : _.arrows.prev.setAttribute('aria-disabled', false)
268      }
269      if (_.arrows.next) {
270        _.arrows.next.classList.toggle(
271          'disabled',
272          Math.ceil(_.ele.scrollLeft + _.containerWidth) >=
273            Math.floor(_.trackWidth) || disableArrows
274        )
275        _.arrows.next.classList.contains('disabled')
276          ? _.arrows.next.setAttribute('aria-disabled', true)
277          : _.arrows.next.setAttribute('aria-disabled', false)
278      }
279    }
280
281    _.slide = Math.round(_.ele.scrollLeft / _.itemWidth)
282    _.page = Math.round(_.ele.scrollLeft / _.containerWidth)
283
284    var middle = _.slide + Math.floor(Math.floor(_.opt.slidesToShow) / 2)
285
286    var extraMiddle = Math.floor(_.opt.slidesToShow) % 2 ? 0 : middle + 1
287    if (Math.floor(_.opt.slidesToShow) === 1) {
288      extraMiddle = 0
289    }
290
291    // the last page may be less than one half of a normal page width so
292    // the page is rounded down. when at the end, force the page to turn
293    if (_.ele.scrollLeft + _.containerWidth >= Math.floor(_.trackWidth)) {
294      _.page = _.dots ? _.dots.children.length - 1 : 0
295    }
296
297    [].forEach.call(_.slides, function (slide, index) {
298      var slideClasses = slide.classList
299
300      var wasVisible = slideClasses.contains('visible')
301
302      var start = _.ele.scrollLeft
303
304      var end = _.ele.scrollLeft + _.containerWidth
305
306      var itemStart = _.itemWidth * index
307
308      var itemEnd = itemStart + _.itemWidth;
309
310      [].forEach.call(slideClasses, function (className) {
311        /^left|right/.test(className) && slideClasses.remove(className)
312      })
313      slideClasses.toggle('active', _.slide === index)
314      if (middle === index || (extraMiddle && extraMiddle === index)) {
315        slideClasses.add('center')
316      } else {
317        slideClasses.remove('center')
318        slideClasses.add(
319          [
320            index < middle ? 'left' : 'right',
321            Math.abs(index - (index < middle ? middle : extraMiddle || middle))
322          ].join('-')
323        )
324      }
325
326      var isVisible =
327        Math.ceil(itemStart) >= Math.floor(start) &&
328        Math.floor(itemEnd) <= Math.ceil(end)
329      slideClasses.toggle('visible', isVisible)
330      if (isVisible !== wasVisible) {
331        _.emit('slide-' + (isVisible ? 'visible' : 'hidden'), {
332          slide: index
333        })
334      }
335    })
336    if (_.dots) {
337      [].forEach.call(_.dots.children, function (dot, index) {
338        dot.classList.toggle('active', _.page === index)
339      })
340    }
341
342    if (event && _.opt.scrollLock) {
343      clearTimeout(_.scrollLock)
344      _.scrollLock = setTimeout(function () {
345        clearTimeout(_.scrollLock)
346        // dont attempt to scroll less than a pixel fraction - causes looping
347        if (Math.abs(_.ele.scrollLeft / _.itemWidth - _.slide) > 0.02) {
348          if (!_.mouseDown) {
349            // Only scroll if not at the end (#94)
350            if (_.trackWidth > _.containerWidth + _.ele.scrollLeft) {
351              _.scrollItem(_.getCurrentSlide())
352            }
353          }
354        }
355      }, _.opt.scrollLockDelay || 250)
356    }
357  }
358
359  gliderPrototype.getCurrentSlide = function () {
360    var _ = this
361    return _.round(_.ele.scrollLeft / _.itemWidth)
362  }
363
364  gliderPrototype.scrollItem = function (slide, dot, e) {
365    if (e) e.preventDefault()
366
367    var _ = this
368
369    var originalSlide = slide
370    ++_.animate_id
371
372    if (dot === true) {
373      slide = slide * _.containerWidth
374      slide = Math.round(slide / _.itemWidth) * _.itemWidth
375    } else {
376      if (typeof slide === 'string') {
377        var backwards = slide === 'prev'
378
379        // use precise location if fractional slides are on
380        if (_.opt.slidesToScroll % 1 || _.opt.slidesToShow % 1) {
381          slide = _.getCurrentSlide()
382        } else {
383          slide = _.slide
384        }
385
386        if (backwards) slide -= _.opt.slidesToScroll
387        else slide += _.opt.slidesToScroll
388
389        if (_.opt.rewind) {
390          var scrollLeft = _.ele.scrollLeft
391          slide =
392            backwards && !scrollLeft
393              ? _.slides.length
394              : !backwards &&
395                scrollLeft + _.containerWidth >= Math.floor(_.trackWidth)
396                ? 0
397                : slide
398        }
399      }
400
401      slide = Math.max(Math.min(slide, _.slides.length), 0)
402
403      _.slide = slide
404      slide = _.itemWidth * slide
405    }
406
407    _.scrollTo(
408      slide,
409      _.opt.duration * Math.abs(_.ele.scrollLeft - slide),
410      function () {
411        _.updateControls()
412        _.emit('animated', {
413          value: originalSlide,
414          type:
415            typeof originalSlide === 'string' ? 'arrow' : dot ? 'dot' : 'slide'
416        })
417      }
418    )
419
420    return false
421  }
422
423  gliderPrototype.settingsBreakpoint = function () {
424    var _ = this
425
426    var resp = _._opt.responsive
427
428    if (resp) {
429      // Sort the breakpoints in mobile first order
430      resp.sort(function (a, b) {
431        return b.breakpoint - a.breakpoint
432      })
433
434      for (var i = 0; i < resp.length; ++i) {
435        var size = resp[i]
436        if (_window.innerWidth >= size.breakpoint) {
437          if (_.breakpoint !== size.breakpoint) {
438            _.opt = Object.assign({}, _._opt, size.settings)
439            _.breakpoint = size.breakpoint
440            return true
441          }
442          return false
443        }
444      }
445    }
446    // set back to defaults in case they were overriden
447    var breakpointChanged = _.breakpoint !== 0
448    _.opt = Object.assign({}, _._opt)
449    _.breakpoint = 0
450    return breakpointChanged
451  }
452
453  gliderPrototype.scrollTo = function (scrollTarget, scrollDuration, callback) {
454    var _ = this
455
456    var start = new Date().getTime()
457
458    var animateIndex = _.animate_id
459
460    var animate = function () {
461      var now = new Date().getTime() - start
462      _.ele.scrollLeft =
463        _.ele.scrollLeft +
464        (scrollTarget - _.ele.scrollLeft) *
465          _.opt.easing(0, now, 0, 1, scrollDuration)
466      if (now < scrollDuration && animateIndex === _.animate_id) {
467        _window.requestAnimationFrame(animate)
468      } else {
469        _.ele.scrollLeft = scrollTarget
470        callback && callback.call(_)
471      }
472    }
473
474    _window.requestAnimationFrame(animate)
475  }
476
477  gliderPrototype.removeItem = function (index) {
478    var _ = this
479
480    if (_.slides.length) {
481      _.track.removeChild(_.slides[index])
482      _.refresh(true)
483      _.emit('remove')
484    }
485  }
486
487  gliderPrototype.addItem = function (ele) {
488    var _ = this
489
490    _.track.appendChild(ele)
491    _.refresh(true)
492    _.emit('add')
493  }
494
495  gliderPrototype.handleMouse = function (e) {
496    var _ = this
497    if (_.mouseDown) {
498      _.isDrag = true
499      _.ele.scrollLeft +=
500        (_.mouseDown - e.clientX) * (_.opt.dragVelocity || 3.3)
501      _.mouseDown = e.clientX
502    }
503  }
504
505  // used to round to the nearest 0.XX fraction
506  gliderPrototype.round = function (double) {
507    var _ = this
508    var step = _.opt.slidesToScroll % 1 || 1
509    var inv = 1.0 / step
510    return Math.round(double * inv) / inv
511  }
512
513  gliderPrototype.refresh = function (paging) {
514    var _ = this
515    _.init(true, paging)
516  }
517
518  gliderPrototype.setOption = function (opt, global) {
519    var _ = this
520
521    if (_.breakpoint && !global) {
522      _._opt.responsive.forEach(function (v) {
523        if (v.breakpoint === _.breakpoint) {
524          v.settings = Object.assign({}, v.settings, opt)
525        }
526      })
527    } else {
528      _._opt = Object.assign({}, _._opt, opt)
529    }
530
531    _.breakpoint = 0
532    _.settingsBreakpoint()
533  }
534
535  gliderPrototype.destroy = function () {
536    var _ = this
537
538    var replace = _.ele.cloneNode(true)
539
540    var clear = function (ele) {
541      ele.removeAttribute('style');
542      [].forEach.call(ele.classList, function (className) {
543        /^glider/.test(className) && ele.classList.remove(className)
544      })
545    }
546    // remove track
547    replace.children[0].outerHTML = replace.children[0].innerHTML

547
548    clear(replace);
549    [].forEach.call(replace.getElementsByTagName('*'), clear)
550    _.ele.parentNode.replaceChild(replace, _.ele)
551    _.event(_window, 'remove', {
552      resize: _.resize
553    })
554    _.emit('destroy')
555  }
556
557  gliderPrototype.emit = function (name, arg) {
558    var _ = this
559
560    var e = new _window.CustomEvent('glider-' + name, {
561      bubbles: !_.opt.eventPropagate,
562      detail: arg
563    })
564    _.ele.dispatchEvent(e)
565  }
566
567  gliderPrototype.event = function (ele, type, args) {
568    var eventHandler = ele[type + 'EventListener'].bind(ele)
569    Object.keys(args).forEach(function (k) {
570      eventHandler(k, args[k])
571    })
572  }
573
574  return Glider
575})