Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(carousel): Support swipe for touchscreen devices
Browse files Browse the repository at this point in the history
use ng-swipe-* directives. If ngTouch is included, it will be used.

Closes #1686
  • Loading branch information
mvhecke authored and ajoslin committed Jan 29, 2014
1 parent 66cb03b commit 85140f8
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 12 deletions.
10 changes: 5 additions & 5 deletions misc/demo/assets/app.js
Original file line number Diff line number Diff line change
@@ -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'];
});
Expand All @@ -19,7 +19,7 @@ function MainCtrl($scope, $http, $document, $modal, orderByFilter) {
}
});
};

$scope.showDownloadModal = function() {
var modalInstance = $modal.open({
templateUrl: 'downloadModal.html',
Expand Down Expand Up @@ -62,7 +62,7 @@ var DownloadCtrl = function($scope, $modalInstance) {
minified: true,
tpls: true
};

$scope.download = function (version) {
var options = $scope.options;

Expand All @@ -78,8 +78,8 @@ var DownloadCtrl = function($scope, $modalInstance) {

return downloadUrl.join('');
};

$scope.cancel = function () {
$modalInstance.dismiss();
};
}
}
11 changes: 6 additions & 5 deletions misc/demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -208,7 +209,7 @@ <h1><%= module.displayName %><small>
<script><%= module.docs.js %></script>
<% }); %>
</div>
</div>
</div>
</div><!-- /.container -->
</div><!-- /.main -->
<footer class="footer">
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions src/carousel/docs/README.md
Original file line number Diff line number Diff line change
@@ -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.
28 changes: 27 additions & 1 deletion src/carousel/test/carousel.spec.js
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion template/carousel/carousel.html
Original file line number Diff line number Diff line change
@@ -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>
Expand Down

0 comments on commit 85140f8

Please sign in to comment.