Merge branch 'twbs/v4-dev' into dropdown-keyboard

1 files changed, 78 insertions, 59 deletions

diff --git a/js/src/carousel.js b/js/src/carousel.js
index 34cab4391..9a1a668b2 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -3,7 +3,7 @@ import Util from './util'
 
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v4.0.0-alpha.2): carousel.js
+ * Bootstrap (v4.0.0-alpha.5): carousel.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -18,12 +18,14 @@ const Carousel = (($) => {
    */
 
   const NAME                = 'carousel'
-  const VERSION             = '4.0.0-alpha.2'
+  const VERSION             = '4.0.0-alpha.5'
   const DATA_KEY            = 'bs.carousel'
   const EVENT_KEY           = `.${DATA_KEY}`
   const DATA_API_KEY        = '.data-api'
   const JQUERY_NO_CONFLICT  = $.fn[NAME]
   const TRANSITION_DURATION = 600
+  const ARROW_LEFT_KEYCODE  = 37 // KeyboardEvent.which value for left arrow key
+  const ARROW_RIGHT_KEYCODE = 39 // KeyboardEvent.which value for right arrow key
 
   const Default = {
     interval : 5000,
@@ -43,7 +45,9 @@ const Carousel = (($) => {
 
   const Direction = {
     NEXT     : 'next',
-    PREVIOUS : 'prev'
+    PREV     : 'prev',
+    LEFT     : 'left',
+    RIGHT    : 'right'
   }
 
   const Event = {
@@ -60,8 +64,10 @@ const Carousel = (($) => {
     CAROUSEL : 'carousel',
     ACTIVE   : 'active',
     SLIDE    : 'slide',
-    RIGHT    : 'right',
-    LEFT     : 'left',
+    RIGHT    : 'carousel-item-right',
+    LEFT     : 'carousel-item-left',
+    NEXT     : 'carousel-item-next',
+    PREV     : 'carousel-item-prev',
     ITEM     : 'carousel-item'
   }
 
@@ -69,7 +75,7 @@ const Carousel = (($) => {
     ACTIVE      : '.active',
     ACTIVE_ITEM : '.active.carousel-item',
     ITEM        : '.carousel-item',
-    NEXT_PREV   : '.next, .prev',
+    NEXT_PREV   : '.carousel-item-next, .carousel-item-prev',
     INDICATORS  : '.carousel-indicators',
     DATA_SLIDE  : '[data-slide], [data-slide-to]',
     DATA_RIDE   : '[data-ride="carousel"]'
@@ -114,9 +120,10 @@ const Carousel = (($) => {
     // public
 
     next() {
-      if (!this._isSliding) {
-        this._slide(Direction.NEXT)
+      if (this._isSliding) {
+        throw new Error('Carousel is sliding')
       }
+      this._slide(Direction.NEXT)
     }
 
     nextWhenVisible() {
@@ -127,9 +134,10 @@ const Carousel = (($) => {
     }
 
     prev() {
-      if (!this._isSliding) {
-        this._slide(Direction.PREVIOUS)
+      if (this._isSliding) {
+        throw new Error('Carousel is sliding')
       }
+      this._slide(Direction.PREVIOUS)
     }
 
     pause(event) {
@@ -159,7 +167,8 @@ const Carousel = (($) => {
 
       if (this._config.interval && !this._isPaused) {
         this._interval = setInterval(
-          $.proxy(document.visibilityState ? this.nextWhenVisible : this.next, this), this._config.interval
+          (document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
+          this._config.interval
         )
       }
     }
@@ -167,9 +176,9 @@ const Carousel = (($) => {
     to(index) {
       this._activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0]
 
-      let activeIndex = this._getItemIndex(this._activeElement)
+      const activeIndex = this._getItemIndex(this._activeElement)
 
-      if (index > (this._items.length - 1) || index < 0) {
+      if (index > this._items.length - 1 || index < 0) {
         return
       }
 
@@ -184,7 +193,7 @@ const Carousel = (($) => {
         return
       }
 
-      let direction = index > activeIndex ?
+      const direction = index > activeIndex ?
         Direction.NEXT :
         Direction.PREVIOUS
 
@@ -217,28 +226,33 @@ const Carousel = (($) => {
     _addEventListeners() {
       if (this._config.keyboard) {
         $(this._element)
-          .on(Event.KEYDOWN, $.proxy(this._keydown, this))
+          .on(Event.KEYDOWN, (event) => this._keydown(event))
       }
 
       if (this._config.pause === 'hover' &&
         !('ontouchstart' in document.documentElement)) {
         $(this._element)
-          .on(Event.MOUSEENTER, $.proxy(this.pause, this))
-          .on(Event.MOUSELEAVE, $.proxy(this.cycle, this))
+          .on(Event.MOUSEENTER, (event) => this.pause(event))
+          .on(Event.MOUSELEAVE, (event) => this.cycle(event))
       }
     }
 
     _keydown(event) {
-      event.preventDefault()
-
       if (/input|textarea/i.test(event.target.tagName)) {
         return
       }
 
       switch (event.which) {
-        case 37: this.prev(); break
-        case 39: this.next(); break
-        default: return
+        case ARROW_LEFT_KEYCODE:
+          event.preventDefault()
+          this.prev()
+          break
+        case ARROW_RIGHT_KEYCODE:
+          event.preventDefault()
+          this.next()
+          break
+        default:
+          return
       }
     }
 
@@ -248,29 +262,29 @@ const Carousel = (($) => {
     }
 
     _getItemByDirection(direction, activeElement) {
-      let isNextDirection = direction === Direction.NEXT
-      let isPrevDirection = direction === Direction.PREVIOUS
-      let activeIndex     = this._getItemIndex(activeElement)
-      let lastItemIndex   = (this._items.length - 1)
-      let isGoingToWrap   = (isPrevDirection && activeIndex === 0) ||
-                            (isNextDirection && activeIndex === lastItemIndex)
+      const isNextDirection = direction === Direction.NEXT
+      const isPrevDirection = direction === Direction.PREVIOUS
+      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
       }
 
-      let delta     = direction === Direction.PREVIOUS ? -1 : 1
-      let itemIndex = (activeIndex + delta) % this._items.length
+      const delta     = direction === Direction.PREVIOUS ? -1 : 1
+      const itemIndex = (activeIndex + delta) % this._items.length
 
       return itemIndex === -1 ?
         this._items[this._items.length - 1] : this._items[itemIndex]
     }
 
 
-    _triggerSlideEvent(relatedTarget, directionalClassname) {
-      let slideEvent = $.Event(Event.SLIDE, {
+    _triggerSlideEvent(relatedTarget, eventDirectionName) {
+      const slideEvent = $.Event(Event.SLIDE, {
         relatedTarget,
-        direction: directionalClassname
+        direction: eventDirectionName
       })
 
       $(this._element).trigger(slideEvent)
@@ -284,7 +298,7 @@ const Carousel = (($) => {
           .find(Selector.ACTIVE)
           .removeClass(ClassName.ACTIVE)
 
-        let nextIndicator = this._indicatorsElement.children[
+        const nextIndicator = this._indicatorsElement.children[
           this._getItemIndex(element)
         ]
 
@@ -295,22 +309,32 @@ const Carousel = (($) => {
     }
 
     _slide(direction, element) {
-      let activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0]
-      let nextElement   = element || activeElement &&
+      const activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0]
+      const nextElement   = element || activeElement &&
         this._getItemByDirection(direction, activeElement)
 
-      let isCycling = Boolean(this._interval)
+      const isCycling = Boolean(this._interval)
 
-      let directionalClassName = direction === Direction.NEXT ?
-        ClassName.LEFT :
-        ClassName.RIGHT
+      let directionalClassName
+      let orderClassName
+      let eventDirectionName
+
+      if (direction === Direction.NEXT) {
+        directionalClassName = ClassName.LEFT
+        orderClassName = ClassName.NEXT
+        eventDirectionName = Direction.LEFT
+      } else {
+        directionalClassName = ClassName.RIGHT
+        orderClassName = ClassName.PREV
+        eventDirectionName = Direction.RIGHT
+      }
 
       if (nextElement && $(nextElement).hasClass(ClassName.ACTIVE)) {
         this._isSliding = false
         return
       }
 
-      let slideEvent = this._triggerSlideEvent(nextElement, directionalClassName)
+      const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName)
       if (slideEvent.isDefaultPrevented()) {
         return
       }
@@ -328,15 +352,15 @@ const Carousel = (($) => {
 
       this._setActiveIndicatorElement(nextElement)
 
-      let slidEvent = $.Event(Event.SLID, {
+      const slidEvent = $.Event(Event.SLID, {
         relatedTarget: nextElement,
-        direction: directionalClassName
+        direction: eventDirectionName
       })
 
       if (Util.supportsTransitionEnd() &&
         $(this._element).hasClass(ClassName.SLIDE)) {
 
-        $(nextElement).addClass(direction)
+        $(nextElement).addClass(orderClassName)
 
         Util.reflow(nextElement)
 
@@ -346,15 +370,10 @@ const Carousel = (($) => {
         $(activeElement)
           .one(Util.TRANSITION_END, () => {
             $(nextElement)
-              .removeClass(directionalClassName)
-              .removeClass(direction)
-
-            $(nextElement).addClass(ClassName.ACTIVE)
+              .removeClass(`${directionalClassName} ${orderClassName}`)
+              .addClass(ClassName.ACTIVE)
 
-            $(activeElement)
-              .removeClass(ClassName.ACTIVE)
-              .removeClass(direction)
-              .removeClass(directionalClassName)
+            $(activeElement).removeClass(`${ClassName.ACTIVE} ${orderClassName} ${directionalClassName}`)
 
             this._isSliding = false
 
@@ -382,13 +401,13 @@ const Carousel = (($) => {
     static _jQueryInterface(config) {
       return this.each(function () {
         let data      = $(this).data(DATA_KEY)
-        let _config = $.extend({}, Default, $(this).data())
+        const _config = $.extend({}, Default, $(this).data())
 
         if (typeof config === 'object') {
           $.extend(_config, config)
         }
 
-        let action = typeof config === 'string' ? config : _config.slide
+        const action = typeof config === 'string' ? config : _config.slide
 
         if (!data) {
           data = new Carousel(this, _config)
@@ -410,20 +429,20 @@ const Carousel = (($) => {
     }
 
     static _dataApiClickHandler(event) {
-      let selector = Util.getSelectorFromElement(this)
+      const selector = Util.getSelectorFromElement(this)
 
       if (!selector) {
         return
       }
 
-      let target = $(selector)[0]
+      const target = $(selector)[0]
 
       if (!target || !$(target).hasClass(ClassName.CAROUSEL)) {
         return
       }
 
-      let config     = $.extend({}, $(target).data(), $(this).data())
-      let slideIndex = this.getAttribute('data-slide-to')
+      const config     = $.extend({}, $(target).data(), $(this).data())
+      const slideIndex = this.getAttribute('data-slide-to')
 
       if (slideIndex) {
         config.interval = false
@@ -452,7 +471,7 @@ const Carousel = (($) => {
 
   $(window).on(Event.LOAD_DATA_API, () => {
     $(Selector.DATA_RIDE).each(function () {
-      let $carousel = $(this)
+      const $carousel = $(this)
       Carousel._jQueryInterface.call($carousel, $carousel.data())
     })
   })