rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #15152 from twbs/fix-15144

Browse Source 
honor wrap option in Carousel.getItemForDirection
[skip validator]
This commit is contained in:
Chris Rebert 2014-11-17 01:43:22 -08:00
commit 8df9298b1e
2 changed files with 157 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/carousel.js
View File

@ -70,8 +70,11 @@
}
Carousel.prototype.getItemForDirection = function (direction, active) {
var delta = direction == 'prev' ? -1 : 1
var activeIndex = this.getItemIndex(active)
var willWrap = (direction == 'prev' && activeIndex === 0)
|| (direction == 'next' && activeIndex == (this.$items.length - 1))
if (willWrap && !this.options.wrap) return active
var delta = direction == 'prev' ? -1 : 1
var itemIndex = (activeIndex + delta) % this.$items.length
return this.$items.eq(itemIndex)
}
@ -116,14 +119,8 @@
var $next = next || this.getItemForDirection(type, $active)
var isCycling = this.interval
var direction = type == 'next' ? 'left' : 'right'
var fallback = type == 'next' ? 'first' : 'last'
var that = this
if (!$next.length) {
if (!this.options.wrap) return
$next = this.$element.find('.item')[fallback]()
}
if ($next.hasClass('active')) return (this.sliding = false)
var relatedTarget = $next[0]

153
js/tests/unit/carousel.js
View File

@ -541,4 +541,157 @@ $(function () {
strictEqual(type in $._data($template[0], 'events'), !isMobile, 'does' + (isMobile ? ' not' : '') + ' listen for ' + type + ' events')
})
})
test('should wrap around from end to start when wrap option is true', function () {
var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">'
+ '<ol class="carousel-indicators">'
+ '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
+ '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
+ '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
+ '</ol>'
+ '<div class="carousel-inner">'
+ '<div class="item active" id="one">'
+ '<div class="carousel-caption"/>'
+ '</div>'
+ '<div class="item" id="two">'
+ '<div class="carousel-caption"/>'
+ '</div>'
+ '<div class="item" id="three">'
+ '<div class="carousel-caption"/>'
+ '</div>'
+ '</div>'
+ '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
+ '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
+ '</div>'
var $carousel = $(carouselHTML)
var getActiveId = function () { return $carousel.find('.item.active').attr('id') }
stop()
$carousel
.one('slid.bs.carousel', function () {
strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
$carousel
.one('slid.bs.carousel', function () {
strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
$carousel
.one('slid.bs.carousel', function () {
strictEqual(getActiveId(), 'one', 'carousel wrapped around and slid from 3rd to 1st slide')
start()
})
.bootstrapCarousel('next')
})
.bootstrapCarousel('next')
})
.bootstrapCarousel('next')
})
test('should wrap around from start to end when wrap option is true', function () {
var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">'
+ '<ol class="carousel-indicators">'
+ '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
+ '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
+ '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
+ '</ol>'
+ '<div class="carousel-inner">'
+ '<div class="item active" id="one">'
+ '<div class="carousel-caption"/>'
+ '</div>'
+ '<div class="item" id="two">'
+ '<div class="carousel-caption"/>'
+ '</div>'
+ '<div class="item" id="three">'
+ '<div class="carousel-caption"/>'
+ '</div>'
+ '</div>'
+ '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
+ '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
+ '</div>'
var $carousel = $(carouselHTML)
stop()
$carousel
.on('slid.bs.carousel', function () {
strictEqual($carousel.find('.item.active').attr('id'), 'three', 'carousel wrapped around and slid from 1st to 3rd slide')
start()
})
.bootstrapCarousel('prev')
})
test('should stay at the end when the next method is called and wrap is false', function () {
var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">'
+ '<ol class="carousel-indicators">'
+ '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
+ '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
+ '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
+ '</ol>'
+ '<div class="carousel-inner">'
+ '<div class="item active" id="one">'
+ '<div class="carousel-caption"/>'
+ '</div>'
+ '<div class="item" id="two">'
+ '<div class="carousel-caption"/>'
+ '</div>'
+ '<div class="item" id="three">'
+ '<div class="carousel-caption"/>'
+ '</div>'
+ '</div>'
+ '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
+ '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
+ '</div>'
var $carousel = $(carouselHTML)
var getActiveId = function () { return $carousel.find('.item.active').attr('id') }
stop()
$carousel
.one('slid.bs.carousel', function () {
strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
$carousel
.one('slid.bs.carousel', function () {
strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
$carousel
.one('slid.bs.carousel', function () {
ok(false, 'carousel slid when it should not have slid')
})
.bootstrapCarousel('next')
strictEqual(getActiveId(), 'three', 'carousel did not wrap around and stayed on 3rd slide')
start()
})
.bootstrapCarousel('next')
})
.bootstrapCarousel('next')
})
test('should stay at the start when the prev method is called and wrap is false', function () {
var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">'
+ '<ol class="carousel-indicators">'
+ '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
+ '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
+ '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
+ '</ol>'
+ '<div class="carousel-inner">'
+ '<div class="item active" id="one">'
+ '<div class="carousel-caption"/>'
+ '</div>'
+ '<div class="item" id="two">'
+ '<div class="carousel-caption"/>'
+ '</div>'
+ '<div class="item" id="three">'
+ '<div class="carousel-caption"/>'
+ '</div>'
+ '</div>'
+ '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
+ '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
+ '</div>'
var $carousel = $(carouselHTML)
$carousel
.on('slid.bs.carousel', function () {
ok(false, 'carousel slid when it should not have slid')
})
.bootstrapCarousel('prev')
strictEqual($carousel.find('.item.active').attr('id'), 'one', 'carousel did not wrap around and stayed on 1st slide')
})
})