Commit fe7fffe0 authored by fat's avatar fat
Browse files

Merge branch 'slide-event-reset' of git://github.com/Rowno/bootstrap into Rowno-slide-event-reset

Conflicts:
	js/tests/unit/carousel.js
parents 0a75e4c0 ed1bd2b1
No related merge requests found
Showing with 40 additions and 19 deletions
+40 -19
...@@ -35,6 +35,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery" ...@@ -35,6 +35,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
return { end: transEndEventNames[name] } return { end: transEndEventNames[name] }
} }
} }
return false // explicit for ie8 ( ._.)
} }
// http://blog.alexmaccaw.com/css-transitions // http://blog.alexmaccaw.com/css-transitions
...@@ -347,13 +349,15 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery" ...@@ -347,13 +349,15 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
$next = this.$element.find('.item')[fallback]() $next = this.$element.find('.item')[fallback]()
} }
this.sliding = true if ($next.hasClass('active')) return
isCycling && this.pause()
var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction }) var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction })
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
if ($next.hasClass('active')) return this.sliding = true
isCycling && this.pause()
if (this.$indicators.length) { if (this.$indicators.length) {
this.$indicators.find('.active').removeClass('active') this.$indicators.find('.active').removeClass('active')
...@@ -364,8 +368,6 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery" ...@@ -364,8 +368,6 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
} }
if ($.support.transition && this.$element.hasClass('slide')) { if ($.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$next.addClass(type) $next.addClass(type)
$next[0].offsetWidth // force reflow $next[0].offsetWidth // force reflow
$active.addClass(direction) $active.addClass(direction)
...@@ -379,8 +381,6 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery" ...@@ -379,8 +381,6 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
}) })
.emulateTransitionEnd($active.css('transition-duration').slice(0, -1) * 1000) .emulateTransitionEnd($active.css('transition-duration').slice(0, -1) * 1000)
} else { } else {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$active.removeClass('active') $active.removeClass('active')
$next.addClass('active') $next.addClass('active')
this.sliding = false this.sliding = false
......
This diff is collapsed.
This diff is collapsed.
...@@ -100,13 +100,15 @@ ...@@ -100,13 +100,15 @@
$next = this.$element.find('.item')[fallback]() $next = this.$element.find('.item')[fallback]()
} }
this.sliding = true if ($next.hasClass('active')) return
isCycling && this.pause()
var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction }) var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction })
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
if ($next.hasClass('active')) return this.sliding = true
isCycling && this.pause()
if (this.$indicators.length) { if (this.$indicators.length) {
this.$indicators.find('.active').removeClass('active') this.$indicators.find('.active').removeClass('active')
...@@ -117,8 +119,6 @@ ...@@ -117,8 +119,6 @@
} }
if ($.support.transition && this.$element.hasClass('slide')) { if ($.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$next.addClass(type) $next.addClass(type)
$next[0].offsetWidth // force reflow $next[0].offsetWidth // force reflow
$active.addClass(direction) $active.addClass(direction)
...@@ -132,8 +132,6 @@ ...@@ -132,8 +132,6 @@
}) })
.emulateTransitionEnd($active.css('transition-duration').slice(0, -1) * 1000) .emulateTransitionEnd($active.css('transition-duration').slice(0, -1) * 1000)
} else { } else {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$active.removeClass('active') $active.removeClass('active')
$next.addClass('active') $next.addClass('active')
this.sliding = false this.sliding = false
......
...@@ -16,7 +16,7 @@ $(function () { ...@@ -16,7 +16,7 @@ $(function () {
ok($(document.body).carousel()[0] == document.body, 'document.body returned') ok($(document.body).carousel()[0] == document.body, 'document.body returned')
}) })
test('should not fire sliden when slide is prevented', function () { test('should not fire slide when slide is prevented', function () {
$.support.transition = false $.support.transition = false
stop() stop()
$('<div class="carousel"/>') $('<div class="carousel"/>')
...@@ -31,6 +31,29 @@ $(function () { ...@@ -31,6 +31,29 @@ $(function () {
.carousel('next') .carousel('next')
}) })
test('should reset when slide is prevented', function () {
var template = '<div id="carousel-example-generic" class="carousel slide"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><div class="carousel-inner"><div class="item active"><div class="carousel-caption"></div></div><div class="item"><div class="carousel-caption"></div></div><div class="item"><div class="carousel-caption"></div></div></div><a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"></a></div>'
var $carousel = $(template)
$.support.transition = false
stop()
$carousel.one('slide.bs.carousel', function (e) {
e.preventDefault()
setTimeout(function () {
ok($carousel.find('.item:eq(0)').is('.active'))
ok($carousel.find('.carousel-indicators li:eq(0)').is('.active'))
$carousel.carousel('next')
}, 1);
})
$carousel.one('slid.bs.carousel', function () {
setTimeout(function () {
ok($carousel.find('.item:eq(1)').is('.active'))
ok($carousel.find('.carousel-indicators li:eq(1)').is('.active'))
start()
}, 1);
})
$carousel.carousel('next')
})
test('should fire slide event with direction', function () { test('should fire slide event with direction', function () {
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></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 template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></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>'
$.support.transition = false $.support.transition = false
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment