From c72a315740c852152c1bc6a34bf2b4c2372fe389 Mon Sep 17 00:00:00 2001
From: Johann <johann.servoire@gmail.com>
Date: Wed, 22 Mar 2017 22:42:13 +0100
Subject: Carousel - Add attributes from and to for Slid and Slide events
 (#21668)

Carousel - Add attributes from and to for Slid and Slide events
---
 js/src/carousel.js        | 13 ++++++++++---
 js/tests/unit/carousel.js | 43 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 3 deletions(-)

(limited to 'js')

diff --git a/js/src/carousel.js b/js/src/carousel.js
index 8a75cb240..1aca817f1 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -282,9 +282,13 @@ const Carousel = (($) => {
 
 
     _triggerSlideEvent(relatedTarget, eventDirectionName) {
+      const targetIndex = this._getItemIndex(relatedTarget)
+      const fromIndex = this._getItemIndex($(this._element).find(Selector.ACTIVE_ITEM)[0])
       const slideEvent = $.Event(Event.SLIDE, {
         relatedTarget,
-        direction: eventDirectionName
+        direction: eventDirectionName,
+        from: fromIndex,
+        to: targetIndex
       })
 
       $(this._element).trigger(slideEvent)
@@ -310,9 +314,10 @@ const Carousel = (($) => {
 
     _slide(direction, element) {
       const activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0]
+      const activeElementIndex = this._getItemIndex(activeElement)
       const nextElement   = element || activeElement &&
         this._getItemByDirection(direction, activeElement)
-
+      const nextElementIndex = this._getItemIndex(nextElement)
       const isCycling = Boolean(this._interval)
 
       let directionalClassName
@@ -354,7 +359,9 @@ const Carousel = (($) => {
 
       const slidEvent = $.Event(Event.SLID, {
         relatedTarget: nextElement,
-        direction: eventDirectionName
+        direction: eventDirectionName,
+        from: activeElementIndex,
+        to: nextElementIndex
       })
 
       if (Util.supportsTransitionEnd() &&
diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index dbdea921a..00b438bb2 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -341,6 +341,49 @@ $(function () {
       .bootstrapCarousel('next')
   })
 
+  QUnit.test('should fire slid and slide events with from and to', function (assert) {
+    assert.expect(4)
+    var template = '<div id="myCarousel" class="carousel slide">'
+        + '<div class="carousel-inner">'
+        + '<div class="carousel-item active">'
+        + '<img alt="">'
+        + '<div class="carousel-caption">'
+        + '<h4>First Thumbnail label</h4>'
+        + '</div>'
+        + '</div>'
+        + '<div class="carousel-item">'
+        + '<img alt="">'
+        + '<div class="carousel-caption">'
+        + '<h4>Second Thumbnail label</h4>'
+        + '</div>'
+        + '</div>'
+        + '<div class="carousel-item">'
+        + '<img alt="">'
+        + '<div class="carousel-caption">'
+        + '<h4>Third Thumbnail label</h4>'
+        + '</div>'
+        + '</div>'
+        + '</div>'
+        + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>'
+        + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>'
+        + '</div>'
+
+    var done = assert.async()
+    $(template)
+      .on('slid.bs.carousel', function (e) {
+        assert.ok(e.from !== undefined, 'from present')
+        assert.ok(e.to !== undefined, 'to present')
+        $(this).off()
+        done()
+      })
+      .on('slide.bs.carousel', function (e) {
+        assert.ok(e.from !== undefined, 'from present')
+        assert.ok(e.to !== undefined, 'to present')
+        $(this).off('slide.bs.carousel')
+      })
+      .bootstrapCarousel('next')
+  })
+
   QUnit.test('should set interval from data attribute', function (assert) {
     assert.expect(4)
     var templateHTML = '<div id="myCarousel" class="carousel slide">'
-- 
cgit v1.2.3