Add `keyboard` option to carousel

Also adds unit tests for keyboard events.

Fixes #14468.

diff --git a/docs/_includes/js/carousel.html b/docs/_includes/js/carousel.html
index 23f9af97afd5556c52c28a83641f252acc822d00..62adc09e6fdce5abca38346420adb148593a4d16 100644 (file)
--- a/docs/_includes/js/carousel.html
+++ b/docs/_includes/js/carousel.html
@@ -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 -->

diff --git a/js/carousel.js b/js/carousel.js
index 4c9a1165ce4ed3e11787f0b8de0dc96da53f280e..b6889900957860cf52a065bad38802929a3bc3c2 100644 (file)
--- a/js/carousel.js
+++ b/js/carousel.js
@@ -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) {

diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 64d21446280b3965a9a1560a8e47494f01c2a8a7..6f0b9642fc7c4a385fd8fe016678395d74e8f9f2 100644 (file)
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -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">'