diff options
author | Johann <johann.servoire@gmail.com> | 2017-03-23 00:42:13 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-03-23 00:42:13 +0300 |
commit | c72a315740c852152c1bc6a34bf2b4c2372fe389 (patch) | |
tree | be8b706a518eb97ec311b3ad79ffa0e227f337c4 | |
parent | 78fc4d23fcefe31397444b75f43728c38e13c590 (diff) |
Carousel - Add attributes from and to for Slid and Slide events (#21668)
Carousel - Add attributes from and to for Slid and Slide events
-rw-r--r-- | docs/components/carousel.md | 2 | ||||
-rw-r--r-- | js/src/carousel.js | 13 | ||||
-rw-r--r-- | js/tests/unit/carousel.js | 43 |
3 files changed, 55 insertions, 3 deletions
diff --git a/docs/components/carousel.md b/docs/components/carousel.md index ea22f3ef99..24a42a617a 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -265,6 +265,8 @@ Bootstrap's carousel class exposes two events for hooking into carousel function - `direction`: The direction in which the carousel is sliding (either `"left"` or `"right"`). - `relatedTarget`: The DOM element that is being slid into place as the active item. +- `from`: The index of the current item +- `to`: The index of the next item All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`). diff --git a/js/src/carousel.js b/js/src/carousel.js index 8a75cb240e..1aca817f12 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 dbdea921a1..00b438bb2c 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">‹</a>' + + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</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">' |