mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-02 14:24:19 +01:00
Merge pull request #15152 from twbs/fix-15144
honor wrap option in Carousel.getItemForDirection [skip validator]
This commit is contained in:
Chris Rebert
commit
8df9298b1e
@ -70,8 +70,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
Carousel.prototype.getItemForDirection = function (direction, active) {
|
Carousel.prototype.getItemForDirection = function (direction, active) {
|
||||||
var delta = direction == 'prev' ? -1 : 1
|
|
||||||
var activeIndex = this.getItemIndex(active)
|
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
|
var itemIndex = (activeIndex + delta) % this.$items.length
|
||||||
return this.$items.eq(itemIndex)
|
return this.$items.eq(itemIndex)
|
||||||
}
|
}
|
||||||
@ -116,14 +119,8 @@
|
|||||||
var $next = next || this.getItemForDirection(type, $active)
|
var $next = next || this.getItemForDirection(type, $active)
|
||||||
var isCycling = this.interval
|
var isCycling = this.interval
|
||||||
var direction = type == 'next' ? 'left' : 'right'
|
var direction = type == 'next' ? 'left' : 'right'
|
||||||
var fallback = type == 'next' ? 'first' : 'last'
|
|
||||||
var that = this
|
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)
|
if ($next.hasClass('active')) return (this.sliding = false)
|
||||||
|
|
||||||
var relatedTarget = $next[0]
|
var relatedTarget = $next[0]
|
||||||
|
|||||||
@ -541,4 +541,157 @@ $(function () {
|
|||||||
strictEqual(type in $._data($template[0], 'events'), !isMobile, 'does' + (isMobile ? ' not' : '') + ' listen for ' + type + ' events')
|
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')
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user