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

Commit 5f895c1

Browse files
mokesmokesajoslin
mokesmokes
authored andcommitted
feat(carousel): add option to prevent pause
sometimes we want the carousel to spin even if the mouse hovers over it. Added an option for an optional attribute, doesn't break current templates
1 parent d952647 commit 5f895c1

File tree

2 files changed

+22
-6
lines changed

2 files changed

+22
-6
lines changed

src/carousel/carousel.js

+9-5
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
* A pure AngularJS carousel.
66
*
77
* For no interval set the interval to non-number, or milliseconds of desired interval
8-
* Template: <carousel interval="none"><slide>{{anything}}</slide></carousel>
8+
* To prevent pause upon mouseover set the nopause attribute to a truthy value
9+
* Template: <carousel interval="none" nopause="someValue"><slide>{{anything}}</slide></carousel>
910
* To change the carousel's active slide set the active attribute to true
1011
* Template: <carousel interval="none"><slide active="someModel">{{anything}}</slide></carousel>
1112
*/
@@ -130,9 +131,11 @@ angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
130131
}
131132
};
132133
$scope.pause = function() {
133-
isPlaying = false;
134-
if (currentTimeout) {
135-
$timeout.cancel(currentTimeout);
134+
if (!$scope.noPause) {
135+
isPlaying = false;
136+
if (currentTimeout) {
137+
$timeout.cancel(currentTimeout);
138+
}
136139
}
137140
};
138141

@@ -173,7 +176,8 @@ angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
173176
templateUrl: 'template/carousel/carousel.html',
174177
scope: {
175178
interval: '=',
176-
noTransition: '='
179+
noTransition: '=',
180+
noPause: '='
177181
}
178182
};
179183
}])

src/carousel/test/carousel.spec.js

+13-1
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,15 @@ describe('carousel', function() {
2020
{active:false,content:'three'}
2121
];
2222
elm = $compile(
23-
'<carousel interval="interval" no-transition="true">' +
23+
'<carousel interval="interval" no-transition="true" no-pause="nopause">' +
2424
'<slide ng-repeat="slide in slides" active="slide.active">' +
2525
'{{slide.content}}' +
2626
'</slide>' +
2727
'</carousel>'
2828
)(scope);
2929
carouselScope = elm.scope();
3030
scope.interval = 5000;
31+
scope.nopause = undefined;
3132
scope.$apply();
3233
});
3334
afterEach(function() {
@@ -178,6 +179,17 @@ describe('carousel', function() {
178179
$timeout.flush();
179180
testSlideActive(2);
180181
});
182+
183+
it('should not pause on mouseover if noPause', function() {
184+
scope.$apply('nopause = true');
185+
testSlideActive(0);
186+
elm.trigger('mouseenter');
187+
$timeout.flush();
188+
testSlideActive(1);
189+
elm.trigger('mouseleave');
190+
$timeout.flush();
191+
testSlideActive(2);
192+
});
181193

182194
it('should remove slide from dom and change active slide', function() {
183195
scope.$apply('slides[1].active = true');

0 commit comments

Comments
 (0)