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

Commit 2e5bfac

Browse files
Chad Kingwesleycho
Chad King
authored and
wesleycho
committed
feat(carousel): use uib- prefix
Closes #4501
1 parent 0fa851f commit 2e5bfac

File tree

4 files changed

+167
-64
lines changed

4 files changed

+167
-64
lines changed

‎src/carousel/carousel.js

+74-23
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
/**
2-
* @ngdoc overview
3-
* @name ui.bootstrap.carousel
4-
*
5-
* @description
6-
* AngularJS version of an image carousel.
7-
*
8-
*/
1+
/**
2+
* @ngdoc overview
3+
* @name ui.bootstrap.carousel
4+
*
5+
* @description
6+
* AngularJS version of an image carousel.
7+
*
8+
*/
99
angular.module('ui.bootstrap.carousel', [])
10-
.controller('CarouselController', ['$scope', '$element', '$interval', '$animate', function($scope, $element, $interval, $animate) {
10+
11+
.controller('UibCarouselController', ['$scope', '$element', '$interval', '$animate', function($scope, $element, $interval, $animate) {
1112
var self = this,
1213
slides = self.slides = $scope.slides = [],
1314
NEW_ANIMATE = angular.version.minor >= 4,
@@ -220,20 +221,20 @@ angular.module('ui.bootstrap.carousel', [])
220221
* @example
221222
<example module="ui.bootstrap">
222223
<file name="index.html">
223-
<carousel>
224-
<slide>
224+
<uib-carousel>
225+
<uib-slide>
225226
<img src="http://placekitten.com/150/150" style="margin:auto;">
226227
<div class="carousel-caption">
227228
<p>Beautiful!</p>
228229
</div>
229-
</slide>
230-
<slide>
230+
</uib-slide>
231+
<uib-slide>
231232
<img src="http://placekitten.com/100/150" style="margin:auto;">
232233
<div class="carousel-caption">
233234
<p>D'aww!</p>
234235
</div>
235-
</slide>
236-
</carousel>
236+
</uib-slide>
237+
</uib-carousel>
237238
</file>
238239
<file name="demo.css">
239240
.carousel-indicators {
@@ -243,12 +244,12 @@ angular.module('ui.bootstrap.carousel', [])
243244
</file>
244245
</example>
245246
*/
246-
.directive('carousel', [function() {
247+
.directive('uibCarousel', [function() {
247248
return {
248249
restrict: 'EA',
249250
transclude: true,
250251
replace: true,
251-
controller: 'CarouselController',
252+
controller: 'UibCarouselController',
252253
controllerAs: 'carousel',
253254
require: 'carousel',
254255
templateUrl: function(element, attrs) {
@@ -278,15 +279,15 @@ angular.module('ui.bootstrap.carousel', [])
278279
<example module="ui.bootstrap">
279280
<file name="index.html">
280281
<div ng-controller="CarouselDemoCtrl">
281-
<carousel>
282-
<slide ng-repeat="slide in slides" active="slide.active" index="$index">
282+
<uib-carousel>
283+
<uib-slide ng-repeat="slide in slides" active="slide.active" index="$index">
283284
<img ng-src="{{slide.image}}" style="margin:auto;">
284285
<div class="carousel-caption">
285286
<h4>Slide {{$index}}</h4>
286287
<p>{{slide.text}}</p>
287288
</div>
288-
</slide>
289-
</carousel>
289+
</uib-slide>
290+
</uib-carousel>
290291
Interval, in milliseconds: <input type="number" ng-model="myInterval">
291292
<br />Enter a negative number to stop the interval.
292293
</div>
@@ -305,9 +306,9 @@ function CarouselDemoCtrl($scope) {
305306
</example>
306307
*/
307308

308-
.directive('slide', function() {
309+
.directive('uibSlide', function() {
309310
return {
310-
require: '^carousel',
311+
require: '^uibCarousel',
311312
restrict: 'EA',
312313
transclude: true,
313314
replace: true,
@@ -413,3 +414,53 @@ function ($injector, $animate) {
413414
}
414415
};
415416
}]);
417+
418+
/* deprecated carousel below */
419+
420+
angular.module('ui.bootstrap.carousel')
421+
422+
.value('$carouselSuppressWarning', false)
423+
424+
.directive('carousel', ['$log', '$carouselSuppressWarning', function($log, $carouselSuppressWarning) {
425+
return {
426+
restrict: 'EA',
427+
transclude: true,
428+
replace: true,
429+
templateUrl: function(element, attrs) {
430+
return attrs.templateUrl || 'template/carousel/carousel.html';
431+
},
432+
scope: {
433+
interval: '=',
434+
noTransition: '=',
435+
noPause: '=',
436+
noWrap: '&'
437+
},
438+
link: function() {
439+
if (!$carouselSuppressWarning) {
440+
$log.warn('carousel is now deprecated. Use uib-carousel instead.');
441+
}
442+
}
443+
};
444+
}])
445+
446+
.directive('slide', ['$log', '$carouselSuppressWarning', function($log, $carouselSuppressWarning) {
447+
return {
448+
449+
restrict: 'EA',
450+
transclude: true,
451+
replace: true,
452+
templateUrl: function(element, attrs) {
453+
return attrs.templateUrl || 'template/carousel/slide.html';
454+
},
455+
scope: {
456+
active: '=?',
457+
actual: '=?',
458+
index: '=?'
459+
},
460+
link: function (scope, element, attrs, carouselCtrl) {
461+
if (!$carouselSuppressWarning) {
462+
$log.warn('slide is now deprecated. Use uib-slide instead.');
463+
}
464+
}
465+
};
466+
}]);

‎src/carousel/docs/README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ Carousel creates a carousel similar to bootstrap's image carousel.
22

33
The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping, load the `ngTouch` module as a dependency.
44

5-
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.
5+
Use a `<uib-carousel>` element with `<uib-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.
66

7-
Use the `no-wrap` attribute on a `<carousel>` element to control the looping of slides; setting `no-wrap` to an expression which evaluates to a truthy value will prevent looping.
7+
Use the `no-wrap` attribute on a `<uib-carousel>` element to control the looping of slides; setting `no-wrap` to an expression which evaluates to a truthy value will prevent looping.
88

9-
Use the `template-url` attribute on a `<carousel>` or `<slide>` element to specify the url of a custom template to override the default templates.
9+
Use the `template-url` attribute on a `<uib-carousel>` or `<uib-slide>` element to specify the url of a custom template to override the default templates.
1010

11-
Use the `actual` attribute on a `<slide>` element to bind the slide model (or any object of interest) onto the slide directive's `$scope`, which makes it available for customization in the carousel template.
11+
Use the `actual` attribute on a `<uib-slide>` element to bind the slide model (or any object of interest) onto the slide directive's `$scope`, which makes it available for customization in the carousel template.

‎src/carousel/docs/demo.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<div ng-controller="CarouselDemoCtrl">
22
<div style="height: 305px">
3-
<carousel interval="myInterval" no-wrap="noWrapSlides">
4-
<slide ng-repeat="slide in slides" active="slide.active">
3+
<uib-carousel interval="myInterval" no-wrap="noWrapSlides">
4+
<uib-slide ng-repeat="slide in slides" active="slide.active">
55
<img ng-src="{{slide.image}}" style="margin:auto;">
66
<div class="carousel-caption">
77
<h4>Slide {{$index}}</h4>
88
<p>{{slide.text}}</p>
99
</div>
10-
</slide>
11-
</carousel>
10+
</uib-slide>
11+
</uib-carousel>
1212
</div>
1313
<div class="row">
1414
<div class="col-md-6">

‎src/carousel/test/carousel.spec.js

+85-33
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@ describe('carousel', function() {
3333
{active:false,content:'three'}
3434
];
3535
elm = $compile(
36-
'<carousel interval="interval" no-transition="true" no-pause="nopause">' +
37-
'<slide ng-repeat="slide in slides" active="slide.active">' +
36+
'<uib-carousel interval="interval" no-transition="true" no-pause="nopause">' +
37+
'<uib-slide ng-repeat="slide in slides" active="slide.active">' +
3838
'{{slide.content}}' +
39-
'</slide>' +
40-
'</carousel>'
39+
'</uib-slide>' +
40+
'</uib-carousel>'
4141
)(scope);
4242
scope.interval = 5000;
4343
scope.nopause = undefined;
@@ -57,7 +57,7 @@ describe('carousel', function() {
5757
it('should allow overriding of the carousel template', function() {
5858
$templateCache.put('foo/bar.html', '<div>foo</div>');
5959

60-
elm = $compile('<carousel template-url="foo/bar.html"></carousel>')(scope);
60+
elm = $compile('<uib-carousel template-url="foo/bar.html"></uib-carousel>')(scope);
6161
$rootScope.$digest();
6262

6363
expect(elm.html()).toBe('foo');
@@ -67,12 +67,12 @@ describe('carousel', function() {
6767
$templateCache.put('foo/bar.html', '<div class="slide">bar</div>');
6868

6969
elm = $compile(
70-
'<carousel interval="interval" no-transition="true" no-pause="nopause">' +
71-
'<slide template-url="foo/bar.html"></slide>' +
72-
'</carousel>'
70+
'<uib-carousel interval="interval" no-transition="true" no-pause="nopause">' +
71+
'<uib-slide template-url="foo/bar.html"></uib-slide>' +
72+
'</uib-carousel>'
7373
)(scope);
7474
$rootScope.$digest();
75-
75+
7676
var slide = elm.find('.slide');
7777
expect(slide.html()).toBe('bar');
7878
});
@@ -99,11 +99,11 @@ describe('carousel', function() {
9999

100100
it('should stop cycling slides forward when noWrap is truthy', function () {
101101
elm = $compile(
102-
'<carousel interval="interval" no-wrap="noWrap">' +
103-
'<slide ng-repeat="slide in slides" active="slide.active">' +
102+
'<uib-carousel interval="interval" no-wrap="noWrap">' +
103+
'<uib-slide ng-repeat="slide in slides" active="slide.active">' +
104104
'{{slide.content}}' +
105-
'</slide>' +
106-
'</carousel>'
105+
'</uib-slide>' +
106+
'</uib-carousel>'
107107
)(scope);
108108

109109
scope.noWrap = true;
@@ -123,11 +123,11 @@ describe('carousel', function() {
123123

124124
it('should stop cycling slides backward when noWrap is truthy', function () {
125125
elm = $compile(
126-
'<carousel interval="interval" no-wrap="noWrap">' +
127-
'<slide ng-repeat="slide in slides" active="slide.active">' +
126+
'<uib-carousel interval="interval" no-wrap="noWrap">' +
127+
'<uib-slide ng-repeat="slide in slides" active="slide.active">' +
128128
'{{slide.content}}' +
129-
'</slide>' +
130-
'</carousel>'
129+
'</uib-slide>' +
130+
'</uib-carousel>'
131131
)(scope);
132132

133133
scope.noWrap = true;
@@ -146,11 +146,11 @@ describe('carousel', function() {
146146
scope.slides=[{active:false,content:'one'}];
147147
scope.$apply();
148148
elm = $compile(
149-
'<carousel interval="interval" no-transition="true">' +
150-
'<slide ng-repeat="slide in slides" active="slide.active">' +
149+
'<uib-carousel interval="interval" no-transition="true">' +
150+
'<uib-slide ng-repeat="slide in slides" active="slide.active">' +
151151
'{{slide.content}}' +
152-
'</slide>' +
153-
'</carousel>'
152+
'</uib-slide>' +
153+
'</uib-carousel>'
154154
)(scope);
155155
var indicators = elm.find('ol.carousel-indicators > li');
156156
expect(indicators.length).toBe(0);
@@ -348,11 +348,11 @@ describe('carousel', function() {
348348
{active:false,content:'three', id:3}
349349
];
350350
elm = $compile(
351-
'<carousel interval="interval" no-transition="true" no-pause="nopause">' +
352-
'<slide ng-repeat="slide in slides | orderBy: \'id\' " active="slide.active" index="$index">' +
351+
'<uib-carousel interval="interval" no-transition="true" no-pause="nopause">' +
352+
'<uib-slide ng-repeat="slide in slides | orderBy: \'id\' " active="slide.active" index="$index">' +
353353
'{{slide.content}}' +
354-
'</slide>' +
355-
'</carousel>'
354+
'</uib-slide>' +
355+
'</uib-carousel>'
356356
)(scope);
357357
scope.$apply();
358358
scope.slides[0].id = 3;
@@ -418,7 +418,7 @@ describe('carousel', function() {
418418

419419
beforeEach(function() {
420420
scope = $rootScope.$new();
421-
ctrl = $controller('CarouselController', {$scope: scope, $element: angular.element('<div></div>')});
421+
ctrl = $controller('UibCarouselController', {$scope: scope, $element: angular.element('<div></div>')});
422422
for(var i = 0;i < slides.length;i++){
423423
ctrl.addSlide(slides[i]);
424424
}
@@ -486,10 +486,10 @@ describe('carousel', function() {
486486
$templateCache.put('template/carousel/carousel.html', '<div>{{carousel.text}}</div>');
487487

488488
var scope = $rootScope.$new();
489-
var elm = $compile('<carousel interval="bar" no-transition="false" no-pause="true"></carousel>')(scope);
489+
var elm = $compile('<uib-carousel interval="bar" no-transition="false" no-pause="true"></uib-carousel>')(scope);
490490
$rootScope.$digest();
491491

492-
var ctrl = elm.controller('carousel');
492+
var ctrl = elm.controller('uibCarousel');
493493

494494
expect(ctrl).toBeDefined();
495495

@@ -508,18 +508,70 @@ describe('carousel', function() {
508508
{active:false,content:'three'}
509509
];
510510
var elm = $compile(
511-
'<carousel interval="interval" no-transition="true" no-pause="nopause">' +
512-
'<slide ng-repeat="slide in slides" active="slide.active" actual="slide">' +
511+
'<uib-carousel interval="interval" no-transition="true" no-pause="nopause">' +
512+
'<uib-slide ng-repeat="slide in slides" active="slide.active" actual="slide">' +
513513
'{{slide.content}}' +
514-
'</slide>' +
515-
'</carousel>'
514+
'</uib-slide>' +
515+
'</uib-carousel>'
516516
)(scope);
517517
$rootScope.$digest();
518518

519-
var ctrl = elm.controller('carousel');
519+
var ctrl = elm.controller('uibCarousel');
520520

521521
expect(angular.equals(ctrl.slides.map(function(slide) {
522522
return slide.actual;
523523
}), scope.slides)).toBe(true);
524524
});
525525
});
526+
527+
describe('carousel deprecation', function() {
528+
beforeEach(module('ui.bootstrap.carousel'));
529+
beforeEach(module('template/carousel/carousel.html', 'template/carousel/slide.html'));
530+
531+
it('should suppress warning', function() {
532+
module(function($provide) {
533+
$provide.value('$carouselSuppressWarning', true);
534+
});
535+
536+
inject(function($compile, $log, $rootScope) {
537+
spyOn($log, 'warn');
538+
539+
var element = '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
540+
'<slide ng-repeat="slide in slides" active="slide.active">' +
541+
'{{slide.content}}' +
542+
'</slide>' +
543+
'</carousel>';
544+
element = $compile(element)($rootScope);
545+
$rootScope.$digest();
546+
expect($log.warn.calls.count()).toBe(0);
547+
});
548+
});
549+
550+
it('should give warning by default', inject(function($compile, $log, $rootScope) {
551+
spyOn($log, 'warn');
552+
553+
var element = '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
554+
'<slide ng-repeat="slide in slides" active="slide.active">' +
555+
'{{slide.content}}' +
556+
'</slide>' +
557+
'</carousel>';
558+
element = $compile(element)($rootScope);
559+
$rootScope.$digest();
560+
561+
expect($log.warn.calls.count()).toBe(1);
562+
expect($log.warn.calls.argsFor(0)).toEqual(['carousel is now deprecated. Use uib-carousel instead.']);
563+
}));
564+
565+
it('should give warning by default for slider', inject(function($compile, $log, $rootScope) {
566+
spyOn($log, 'warn');
567+
568+
var element = '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
569+
'<slide></slide>' +
570+
'</carousel>';
571+
element = $compile(element)($rootScope);
572+
$rootScope.$digest();
573+
574+
expect($log.warn.calls.count()).toBe(2);
575+
expect($log.warn.calls.argsFor(0)).toEqual(['slide is now deprecated. Use uib-slide instead.']);
576+
}));
577+
});

0 commit comments

Comments
 (0)