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

Merge pull request #14590 from twbs/carousel-keyboard-option

Browse Source 
Add `keyboard` option to carousel
This commit is contained in:
Jacob 2014-10-02 23:11:14 -07:00
commit 2c562d2386
3 changed files with 90 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/_includes/js/carousel.html
View File

@ -178,6 +178,12 @@ $('.carousel').carousel()
<td>true</td>
<td>Whether the carousel should cycle continuously or have hard stops.</td>
</tr>
<tr>
<td>keyboard</td>
<td>boolean</td>
<td>true</td>
<td>Whether the carousel should react to keyboard events.</td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->

7
js/carousel.js
View File

@ -14,7 +14,7 @@
// =========================
var Carousel = function (element, options) {
this.$element = $(element).on('keydown.bs.carousel', $.proxy(this.keydown, this))
this.$element = $(element)
this.$indicators = this.$element.find('.carousel-indicators')
this.options = options
this.paused =
@ -23,6 +23,8 @@
this.$active =
this.$items = null
this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this))
this.options.pause == 'hover' && !('ontouchstart' in document.documentElement) && this.$element
.on('mouseenter.bs.carousel', $.proxy(this.pause, this))
.on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
@ -35,7 +37,8 @@
Carousel.DEFAULTS = {
interval: 5000,
pause: 'hover',
wrap: true
wrap: true,
keyboard: true
}
Carousel.prototype.keydown = function (e) {

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

@ -399,6 +399,85 @@ $(function () {
strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
})
test('should go to previous item if left arrow key is pressed', function () {
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
+ '<div class="carousel-inner">'
+ '<div id="first" class="item">'
+ '<img alt="">'
+ '</div>'
+ '<div id="second" class="item active">'
+ '<img alt="">'
+ '</div>'
+ '<div id="third" class="item">'
+ '<img alt="">'
+ '</div>'
+ '</div>'
+ '</div>'
var $template = $(templateHTML)
$template.bootstrapCarousel()
strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
$template.trigger($.Event('keydown', { which: 37 }))
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
})
test('should go to next item if right arrow key is pressed', function () {
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
+ '<div class="carousel-inner">'
+ '<div id="first" class="item active">'
+ '<img alt="">'
+ '</div>'
+ '<div id="second" class="item">'
+ '<img alt="">'
+ '</div>'
+ '<div id="third" class="item">'
+ '<img alt="">'
+ '</div>'
+ '</div>'
+ '</div>'
var $template = $(templateHTML)
$template.bootstrapCarousel()
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
$template.trigger($.Event('keydown', { which: 39 }))
strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
})
test('should support disabling the keyboard navigation', function () {
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-keyboard="false">'
+ '<div class="carousel-inner">'
+ '<div id="first" class="item active">'
+ '<img alt="">'
+ '</div>'
+ '<div id="second" class="item">'
+ '<img alt="">'
+ '</div>'
+ '<div id="third" class="item">'
+ '<img alt="">'
+ '</div>'
+ '</div>'
+ '</div>'
var $template = $(templateHTML)
$template.bootstrapCarousel()
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
$template.trigger($.Event('keydown', { which: 39 }))
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press')
$template.trigger($.Event('keydown', { which: 37 }))
strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press')
})
test('should only add mouseenter and mouseleave listeners when not on mobile', function () {
var isMobile = 'ontouchstart' in document.documentElement
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-pause="hover">'