Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
carousel.js 12.85 KiB
1 
import Util from './util'
2
3
4 
/**
5 
 * --------------------------------------------------------------------------
6 
 * Bootstrap (v4.0.0-alpha.6): carousel.js
7 
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
8 
 * --------------------------------------------------------------------------
9 
 */
10
11 
const Carousel = (($) => {
12
13
14 
  /**
15 
   * ------------------------------------------------------------------------
16 
   * Constants
17 
   * ------------------------------------------------------------------------
18 
   */
19
20 
  const NAME                = 'carousel'
21 
  const VERSION             = '4.0.0-alpha.6'
22 
  const DATA_KEY            = 'bs.carousel'
23 
  const EVENT_KEY           = `.${DATA_KEY}`
24 
  const DATA_API_KEY        = '.data-api'
25 
  const JQUERY_NO_CONFLICT  = $.fn[NAME]
26 
  const TRANSITION_DURATION = 600
27 
  const ARROW_LEFT_KEYCODE  = 37 // KeyboardEvent.which value for left arrow key
28 
  const ARROW_RIGHT_KEYCODE = 39 // KeyboardEvent.which value for right arrow key
29
30 
  const Default = {
31 
    interval : 5000,
32 
    keyboard : true,
33 
    slide    : false,
34 
    pause    : 'hover',
35 
    wrap     : true
36 
  }
37
38 
  const DefaultType = {
39 
    interval : '(number|boolean)',
40 
    keyboard : 'boolean',
41 
    slide    : '(boolean|string)',
42 
    pause    : '(string|boolean)',
43 
    wrap     : 'boolean'
44 
  }
45
46 
  const Direction = {
47 
    NEXT     : 'next',
48 
    PREV     : 'prev',
49 
    LEFT     : 'left',
50 
    RIGHT    : 'right'
51 
  }
52
53 
  const Event = {
54 
    SLIDE          : `slide${EVENT_KEY}`,
55 
    SLID           : `slid${EVENT_KEY}`,
56 
    KEYDOWN        : `keydown${EVENT_KEY}`,
57 
    MOUSEENTER     : `mouseenter${EVENT_KEY}`,
58 
    MOUSELEAVE     : `mouseleave${EVENT_KEY}`,
59 
    LOAD_DATA_API  : `load${EVENT_KEY}${DATA_API_KEY}`,
60 
    CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
61 
  }
62
63 
  const ClassName = {
64 
    CAROUSEL : 'carousel',
65 
    ACTIVE   : 'active',
66 
    SLIDE    : 'slide',
67 
    RIGHT    : 'carousel-item-right',
68 
    LEFT     : 'carousel-item-left',
69 
    NEXT     : 'carousel-item-next',
70 
    PREV     : 'carousel-item-prev',
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
ITEM : 'carousel-item' } const Selector = { ACTIVE : '.active', ACTIVE_ITEM : '.active.carousel-item', ITEM : '.carousel-item', NEXT_PREV : '.carousel-item-next, .carousel-item-prev', INDICATORS : '.carousel-indicators', DATA_SLIDE : '[data-slide], [data-slide-to]', DATA_RIDE : '[data-ride="carousel"]' } /** * ------------------------------------------------------------------------ * Class Definition * ------------------------------------------------------------------------ */ class Carousel { constructor(element, config) { this._items = null this._interval = null this._activeElement = null this._isPaused = false this._isSliding = false this._config = this._getConfig(config) this._element = $(element)[0] this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0] this._addEventListeners() } // getters static get VERSION() { return VERSION } static get Default() { return Default } // public next() { if (this._isSliding) { throw new Error('Carousel is sliding') } this._slide(Direction.NEXT) } nextWhenVisible() { // Don't call next when the page isn't visible if (!document.hidden) { this.next() } } prev() { if (this._isSliding) { throw new Error('Carousel is sliding') } this._slide(Direction.PREV)
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
} pause(event) { if (!event) { this._isPaused = true } if ($(this._element).find(Selector.NEXT_PREV)[0] && Util.supportsTransitionEnd()) { Util.triggerTransitionEnd(this._element) this.cycle(true) } clearInterval(this._interval) this._interval = null } cycle(event) { if (!event) { this._isPaused = false } if (this._interval) { clearInterval(this._interval) this._interval = null } if (this._config.interval && !this._isPaused) { this._interval = setInterval( (document.visibilityState ? this.nextWhenVisible : this.next).bind(this), this._config.interval ) } } to(index) { this._activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0] const activeIndex = this._getItemIndex(this._activeElement) if (index > this._items.length - 1 || index < 0) { return } if (this._isSliding) { $(this._element).one(Event.SLID, () => this.to(index)) return } if (activeIndex === index) { this.pause() this.cycle() return } const direction = index > activeIndex ? Direction.NEXT : Direction.PREV this._slide(direction, this._items[index]) } dispose() { $(this._element).off(EVENT_KEY) $.removeData(this._element, DATA_KEY) this._items = null this._config = null this._element = null this._interval = null
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
this._isPaused = null this._isSliding = null this._activeElement = null this._indicatorsElement = null } // private _getConfig(config) { config = $.extend({}, Default, config) Util.typeCheckConfig(NAME, config, DefaultType) return config } _addEventListeners() { if (this._config.keyboard) { $(this._element) .on(Event.KEYDOWN, (event) => this._keydown(event)) } if (this._config.pause === 'hover' && !('ontouchstart' in document.documentElement)) { $(this._element) .on(Event.MOUSEENTER, (event) => this.pause(event)) .on(Event.MOUSELEAVE, (event) => this.cycle(event)) } } _keydown(event) { if (/input|textarea/i.test(event.target.tagName)) { return } switch (event.which) { case ARROW_LEFT_KEYCODE: event.preventDefault() this.prev() break case ARROW_RIGHT_KEYCODE: event.preventDefault() this.next() break default: return } } _getItemIndex(element) { this._items = $.makeArray($(element).parent().find(Selector.ITEM)) return this._items.indexOf(element) } _getItemByDirection(direction, activeElement) { const isNextDirection = direction === Direction.NEXT const isPrevDirection = direction === Direction.PREV const activeIndex = this._getItemIndex(activeElement) const lastItemIndex = this._items.length - 1 const isGoingToWrap = isPrevDirection && activeIndex === 0 || isNextDirection && activeIndex === lastItemIndex if (isGoingToWrap && !this._config.wrap) { return activeElement } const delta = direction === Direction.PREV ? -1 : 1 const itemIndex = (activeIndex + delta) % this._items.length return itemIndex === -1 ? this._items[this._items.length - 1] : this._items[itemIndex]