feat(carousel): Support swipe for touchscreen devices

use ng-swipe-* directives. If ngTouch is included, it will be used.

Closes #1686

Author: mvhecke

misc/demo/assets/app.js

@@ -1,4 +1,4 @@
-angular.module('bootstrapDemoApp', ['ui.bootstrap', 'plunker'], function($httpProvider){
+angular.module('bootstrapDemoApp', ['ui.bootstrap', 'plunker', 'ngTouch'], function($httpProvider){
   FastClick.attach(document.body);
   delete $httpProvider.defaults.headers.common['X-Requested-With'];
 });
@@ -19,7 +19,7 @@ function MainCtrl($scope, $http, $document, $modal, orderByFilter) {
       }
     });
   };
-  
+
   $scope.showDownloadModal = function() {
     var modalInstance = $modal.open({
       templateUrl: 'downloadModal.html',
@@ -62,7 +62,7 @@ var DownloadCtrl = function($scope, $modalInstance) {
     minified: true,
     tpls: true
   };
-  
+
   $scope.download = function (version) {
     var options = $scope.options;
 
@@ -78,8 +78,8 @@ var DownloadCtrl = function($scope, $modalInstance) {
 
     return downloadUrl.join('');
   };
-  
+
   $scope.cancel = function () {
     $modalInstance.dismiss();
   };
-}
+}

misc/demo/index.html

@@ -10,6 +10,7 @@
 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular.min.js"></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-touch.min.js"></script>
     <script src="ui-bootstrap-tpls-<%= pkg.version%>.min.js"></script>
     <script src="assets/plunker.js"></script>
     <script src="assets/app.js"></script>
@@ -208,7 +209,7 @@ <h1><%= module.displayName %><small>
                     <script><%= module.docs.js %></script>
                 <% }); %>
             </div>
-        </div> 
+        </div>
     </div><!-- /.container -->
 </div><!-- /.main -->
 <footer class="footer">
@@ -278,11 +279,11 @@ <h4 style="text-align: center;">{{buildErrorText}}</h4>
               <% if (i % 3 === 0) {%>
                 <div class="btn-group" style="width: 100%;">
               <% } %>
-              <button type="button" class="btn btn-default" 
+              <button type="button" class="btn btn-default"
                style="width: 33%; border-radius: 0;"
-               ng-class="{'btn-primary': module.<%= module.name %>}" 
-               ng-model="module.<%= module.name %>" 
-               btn-checkbox 
+               ng-class="{'btn-primary': module.<%= module.name %>}"
+               ng-model="module.<%= module.name %>"
+               btn-checkbox
                ng-change="selectedChanged('<%= module.name %>', module.<%= module.name %>)">
                   <%= module.displayName %>
               </button>

src/carousel/docs/README.md

@@ -1,3 +1,5 @@
 Carousel creates a carousel similar to bootstrap's image carousel.
 
+The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping, load the `ngTouch` module as a dependency.
+
 Use a `<carousel>` element with `<slide>` elements inside it.  It will automatically cycle through the slides at a given rate, and a current-index variable will be kept in sync with the currently visible slide.

src/carousel/test/carousel.spec.js

@@ -1,5 +1,17 @@
 describe('carousel', function() {
-  beforeEach(module('ui.bootstrap.carousel'));
+  beforeEach(module('ui.bootstrap.carousel', function($compileProvider, $provide) {
+    angular.forEach(['ngSwipeLeft', 'ngSwipeRight'], makeMock);
+    function makeMock(name) {
+      $provide.value(name + 'Directive', []); //remove existing directive if it exists
+      $compileProvider.directive(name, function() {
+        return function(scope, element, attr) {
+          element.on(name, function() {
+            scope.$apply(attr[name]);
+          });
+        };
+      });
+    }
+  }));
   beforeEach(module('template/carousel/carousel.html', 'template/carousel/slide.html'));
 
   var $rootScope, $compile, $controller, $timeout;
@@ -114,6 +126,20 @@ describe('carousel', function() {
       testSlideActive(0);
     });
 
+    describe('swiping', function() {
+      it('should go next on swipeLeft', function() {
+        testSlideActive(0);
+        elm.triggerHandler('ngSwipeLeft');
+        testSlideActive(1);
+      });
+
+      it('should go prev on swipeRight', function() {
+        testSlideActive(0);
+        elm.triggerHandler('ngSwipeRight');
+        testSlideActive(2);
+      });
+    });
+
     it('should select a slide when clicking on slide indicators', function () {
       var indicators = elm.find('ol.carousel-indicators > li');
       indicators.eq(1).click();

template/carousel/carousel.html

@@ -1,4 +1,4 @@
-<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel">
+<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()">
     <ol class="carousel-indicators" ng-show="slides().length > 1">
         <li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li>
     </ol>