diff --git a/src/carousel/carousel.js b/src/carousel/carousel.js index 28ea4352a7..e080973e4b 100644 --- a/src/carousel/carousel.js +++ b/src/carousel/carousel.js @@ -1,13 +1,14 @@ -/** -* @ngdoc overview -* @name ui.bootstrap.carousel -* -* @description -* AngularJS version of an image carousel. -* -*/ +/** + * @ngdoc overview + * @name ui.bootstrap.carousel + * + * @description + * AngularJS version of an image carousel. + * + */ angular.module('ui.bootstrap.carousel', []) -.controller('CarouselController', ['$scope', '$element', '$interval', '$animate', function($scope, $element, $interval, $animate) { + +.controller('UibCarouselController', ['$scope', '$element', '$interval', '$animate', function($scope, $element, $interval, $animate) { var self = this, slides = self.slides = $scope.slides = [], NEW_ANIMATE = angular.version.minor >= 4, @@ -220,20 +221,20 @@ angular.module('ui.bootstrap.carousel', []) * @example - - + +

Beautiful!

- - + +

D'aww!

- - + + .carousel-indicators { @@ -243,12 +244,12 @@ angular.module('ui.bootstrap.carousel', []) */ -.directive('carousel', [function() { +.directive('uibCarousel', [function() { return { restrict: 'EA', transclude: true, replace: true, - controller: 'CarouselController', + controller: 'UibCarouselController', controllerAs: 'carousel', require: 'carousel', templateUrl: function(element, attrs) { @@ -278,15 +279,15 @@ angular.module('ui.bootstrap.carousel', [])
- - + +

Slide {{$index}}

{{slide.text}}

- - + + Interval, in milliseconds:
Enter a negative number to stop the interval.
@@ -305,9 +306,9 @@ function CarouselDemoCtrl($scope) { */ -.directive('slide', function() { +.directive('uibSlide', function() { return { - require: '^carousel', + require: '^uibCarousel', restrict: 'EA', transclude: true, replace: true, @@ -413,3 +414,53 @@ function ($injector, $animate) { } }; }]); + +/* deprecated carousel below */ + +angular.module('ui.bootstrap.carousel') + +.value('$carouselSuppressWarning', false) + +.directive('carousel', ['$log', '$carouselSuppressWarning', function($log, $carouselSuppressWarning) { + return { + restrict: 'EA', + transclude: true, + replace: true, + templateUrl: function(element, attrs) { + return attrs.templateUrl || 'template/carousel/carousel.html'; + }, + scope: { + interval: '=', + noTransition: '=', + noPause: '=', + noWrap: '&' + }, + link: function() { + if (!$carouselSuppressWarning) { + $log.warn('carousel is now deprecated. Use uib-carousel instead.'); + } + } + }; +}]) + +.directive('slide', ['$log', '$carouselSuppressWarning', function($log, $carouselSuppressWarning) { + return { + + restrict: 'EA', + transclude: true, + replace: true, + templateUrl: function(element, attrs) { + return attrs.templateUrl || 'template/carousel/slide.html'; + }, + scope: { + active: '=?', + actual: '=?', + index: '=?' + }, + link: function (scope, element, attrs, carouselCtrl) { + if (!$carouselSuppressWarning) { + $log.warn('slide is now deprecated. Use uib-slide instead.'); + } + } + }; +}]); \ No newline at end of file diff --git a/src/carousel/docs/README.md b/src/carousel/docs/README.md index 69da16a93a..0fe1eba398 100644 --- a/src/carousel/docs/README.md +++ b/src/carousel/docs/README.md @@ -2,10 +2,10 @@ 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 `` element with `` 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. +Use a `` element with `` 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. -Use the `no-wrap` attribute on a `` element to control the looping of slides; setting `no-wrap` to an expression which evaluates to a truthy value will prevent looping. +Use the `no-wrap` attribute on a `` element to control the looping of slides; setting `no-wrap` to an expression which evaluates to a truthy value will prevent looping. -Use the `template-url` attribute on a `` or `` element to specify the url of a custom template to override the default templates. +Use the `template-url` attribute on a `` or `` element to specify the url of a custom template to override the default templates. -Use the `actual` attribute on a `` 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. +Use the `actual` attribute on a `` 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. diff --git a/src/carousel/docs/demo.html b/src/carousel/docs/demo.html index 151528d43c..0383722387 100644 --- a/src/carousel/docs/demo.html +++ b/src/carousel/docs/demo.html @@ -1,14 +1,14 @@
- - + +

Slide {{$index}}

{{slide.text}}

- - + +
diff --git a/src/carousel/test/carousel.spec.js b/src/carousel/test/carousel.spec.js index 48bf9bcb34..e656c70548 100644 --- a/src/carousel/test/carousel.spec.js +++ b/src/carousel/test/carousel.spec.js @@ -33,11 +33,11 @@ describe('carousel', function() { {active:false,content:'three'} ]; elm = $compile( - '' + - '' + + '' + + '' + '{{slide.content}}' + - '' + - '' + '' + + '' )(scope); scope.interval = 5000; scope.nopause = undefined; @@ -57,7 +57,7 @@ describe('carousel', function() { it('should allow overriding of the carousel template', function() { $templateCache.put('foo/bar.html', '
foo
'); - elm = $compile('')(scope); + elm = $compile('')(scope); $rootScope.$digest(); expect(elm.html()).toBe('foo'); @@ -67,12 +67,12 @@ describe('carousel', function() { $templateCache.put('foo/bar.html', '
bar
'); elm = $compile( - '' + - '' + - '' + '' + + '' + + '' )(scope); $rootScope.$digest(); - + var slide = elm.find('.slide'); expect(slide.html()).toBe('bar'); }); @@ -99,11 +99,11 @@ describe('carousel', function() { it('should stop cycling slides forward when noWrap is truthy', function () { elm = $compile( - '' + - '' + + '' + + '' + '{{slide.content}}' + - '' + - '' + '' + + '' )(scope); scope.noWrap = true; @@ -123,11 +123,11 @@ describe('carousel', function() { it('should stop cycling slides backward when noWrap is truthy', function () { elm = $compile( - '' + - '' + + '' + + '' + '{{slide.content}}' + - '' + - '' + '' + + '' )(scope); scope.noWrap = true; @@ -146,11 +146,11 @@ describe('carousel', function() { scope.slides=[{active:false,content:'one'}]; scope.$apply(); elm = $compile( - '' + - '' + + '' + + '' + '{{slide.content}}' + - '' + - '' + '' + + '' )(scope); var indicators = elm.find('ol.carousel-indicators > li'); expect(indicators.length).toBe(0); @@ -348,11 +348,11 @@ describe('carousel', function() { {active:false,content:'three', id:3} ]; elm = $compile( - '' + - '' + + '' + + '' + '{{slide.content}}' + - '' + - '' + '' + + '' )(scope); scope.$apply(); scope.slides[0].id = 3; @@ -418,7 +418,7 @@ describe('carousel', function() { beforeEach(function() { scope = $rootScope.$new(); - ctrl = $controller('CarouselController', {$scope: scope, $element: angular.element('
')}); + ctrl = $controller('UibCarouselController', {$scope: scope, $element: angular.element('
')}); for(var i = 0;i < slides.length;i++){ ctrl.addSlide(slides[i]); } @@ -486,10 +486,10 @@ describe('carousel', function() { $templateCache.put('template/carousel/carousel.html', '
{{carousel.text}}
'); var scope = $rootScope.$new(); - var elm = $compile('')(scope); + var elm = $compile('')(scope); $rootScope.$digest(); - var ctrl = elm.controller('carousel'); + var ctrl = elm.controller('uibCarousel'); expect(ctrl).toBeDefined(); @@ -508,18 +508,70 @@ describe('carousel', function() { {active:false,content:'three'} ]; var elm = $compile( - '' + - '' + + '' + + '' + '{{slide.content}}' + - '' + - '' + '' + + '' )(scope); $rootScope.$digest(); - var ctrl = elm.controller('carousel'); + var ctrl = elm.controller('uibCarousel'); expect(angular.equals(ctrl.slides.map(function(slide) { return slide.actual; }), scope.slides)).toBe(true); }); }); + +describe('carousel deprecation', function() { + beforeEach(module('ui.bootstrap.carousel')); + beforeEach(module('template/carousel/carousel.html', 'template/carousel/slide.html')); + + it('should suppress warning', function() { + module(function($provide) { + $provide.value('$carouselSuppressWarning', true); + }); + + inject(function($compile, $log, $rootScope) { + spyOn($log, 'warn'); + + var element = '' + + '' + + '{{slide.content}}' + + '' + + ''; + element = $compile(element)($rootScope); + $rootScope.$digest(); + expect($log.warn.calls.count()).toBe(0); + }); + }); + + it('should give warning by default', inject(function($compile, $log, $rootScope) { + spyOn($log, 'warn'); + + var element = '' + + '' + + '{{slide.content}}' + + '' + + ''; + element = $compile(element)($rootScope); + $rootScope.$digest(); + + expect($log.warn.calls.count()).toBe(1); + expect($log.warn.calls.argsFor(0)).toEqual(['carousel is now deprecated. Use uib-carousel instead.']); + })); + + it('should give warning by default for slider', inject(function($compile, $log, $rootScope) { + spyOn($log, 'warn'); + + var element = '' + + '' + + ''; + element = $compile(element)($rootScope); + $rootScope.$digest(); + + expect($log.warn.calls.count()).toBe(2); + expect($log.warn.calls.argsFor(0)).toEqual(['slide is now deprecated. Use uib-slide instead.']); + })); +});