From f66a747615c5216b8cd81c699149f993e8f28608 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 21 Apr 2014 13:14:53 -0700 Subject: [PATCH 1/5] add unit tests for Carousel slid events --- js/tests/unit/carousel.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js index 065354451f0f..a4008bb0c773 100644 --- a/js/tests/unit/carousel.js +++ b/js/tests/unit/carousel.js @@ -66,6 +66,18 @@ $(function () { }).carousel('next') }) + test('should fire slid event with direction', function () { + var template = '' + $.support.transition = false + stop() + $(template).on('slid.bs.carousel', function (e) { + e.preventDefault() + ok(e.direction) + ok(e.direction === 'right' || e.direction === 'left') + start() + }).carousel('next') + }) + test('should fire slide event with relatedTarget', function () { var template = '' $.support.transition = false @@ -80,6 +92,20 @@ $(function () { .carousel('next') }) + test('should fire slid event with relatedTarget', function () { + var template = '' + $.support.transition = false + stop() + $(template) + .on('slid.bs.carousel', function (e) { + e.preventDefault() + ok(e.relatedTarget) + ok($(e.relatedTarget).hasClass('item')) + start() + }) + .carousel('next') + }) + test('should set interval from data attribute', 4, function () { var template = $('') template.attr('data-interval', 1814) From 4d0a8e31a46e54bb180eadb2844d1e4a9c7c4e91 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 21 Apr 2014 13:16:57 -0700 Subject: [PATCH 2/5] Add direction & relatedTarget properties to slid.bs.carousel event Fixes #13393 --- js/carousel.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/js/carousel.js b/js/carousel.js index 9f063aec04c3..14a379fbf110 100644 --- a/js/carousel.js +++ b/js/carousel.js @@ -103,7 +103,8 @@ if ($next.hasClass('active')) return this.sliding = false - var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction }) + var relatedTarget = $next[0] + var e = $.Event('slide.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) this.$element.trigger(e) if (e.isDefaultPrevented()) return @@ -119,6 +120,7 @@ }) } + var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid". not a typo. past tense of "to slide". if ($.support.transition && this.$element.hasClass('slide')) { $next.addClass(type) $next[0].offsetWidth // force reflow @@ -129,14 +131,14 @@ $next.removeClass([type, direction].join(' ')).addClass('active') $active.removeClass(['active', direction].join(' ')) that.sliding = false - setTimeout(function () { that.$element.trigger('slid.bs.carousel') }, 0) // yes, "slid". not a typo. past tense of "to slide". + setTimeout(function () { that.$element.trigger(slidEvent) }, 0) }) .emulateTransitionEnd($active.css('transition-duration').slice(0, -1) * 1000) } else { $active.removeClass('active') $next.addClass('active') this.sliding = false - this.$element.trigger('slid.bs.carousel') // yes, "slid". not a typo. past tense of "to slide". + this.$element.trigger(slidEvent) } isCycling && this.cycle() From 6617d8bcd1db42bf03a4b1d9288e16dae8acfd5a Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 21 Apr 2014 13:28:21 -0700 Subject: [PATCH 3/5] Document .direction & .relatedTarget properties of Carousel events. Fixes #13395 --- docs/_includes/js/carousel.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/_includes/js/carousel.html b/docs/_includes/js/carousel.html index b0665dba8db6..2b5b0111b13e 100644 --- a/docs/_includes/js/carousel.html +++ b/docs/_includes/js/carousel.html @@ -203,6 +203,11 @@

.carousel('next')

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

+

Both events have the following additional properties:

+
    +
  • 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 4bd29bfcff4a78d4828396d614139db2f308eb2a Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Fri, 25 Apr 2014 17:48:02 -0700 Subject: [PATCH 4/5] change 'slid' comments per @fat's feedback --- js/carousel.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/carousel.js b/js/carousel.js index 14a379fbf110..07df86546083 100644 --- a/js/carousel.js +++ b/js/carousel.js @@ -59,7 +59,7 @@ if (pos > (this.$items.length - 1) || pos < 0) return - if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid". not a typo. past tense of "to slide". + if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid" if (activeIndex == pos) return this.pause().cycle() return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos])) @@ -114,13 +114,13 @@ if (this.$indicators.length) { this.$indicators.find('.active').removeClass('active') - this.$element.one('slid.bs.carousel', function () { // yes, "slid". not a typo. past tense of "to slide". + this.$element.one('slid.bs.carousel', function () { // yes, "slid" var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()]) $nextIndicator && $nextIndicator.addClass('active') }) } - var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid". not a typo. past tense of "to slide". + var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid" if ($.support.transition && this.$element.hasClass('slide')) { $next.addClass(type) $next[0].offsetWidth // force reflow From e114727ae94934f0f916eb2b5969b93ae4e408dc Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Fri, 25 Apr 2014 17:50:38 -0700 Subject: [PATCH 5/5] Carousel.slide: rename e => slideEvent --- js/carousel.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/carousel.js b/js/carousel.js index 07df86546083..06e3f3731d76 100644 --- a/js/carousel.js +++ b/js/carousel.js @@ -104,9 +104,9 @@ if ($next.hasClass('active')) return this.sliding = false var relatedTarget = $next[0] - var e = $.Event('slide.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) - this.$element.trigger(e) - if (e.isDefaultPrevented()) return + var slideEvent = $.Event('slide.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) + this.$element.trigger(slideEvent) + if (slideEvent.isDefaultPrevented()) return this.sliding = true