feat(carousel): use uib- prefix

Closes #4501
angular-ui · Oct 2, 2015 · 2e5bfac · 2e5bfac
1 parent 0fa851f
commit 2e5bfac
Show file tree

Hide file tree

Showing 4 changed files with 167 additions and 64 deletions.
diff --git 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
 <example module="ui.bootstrap">
   <file name="index.html">
-    <carousel>
-      <slide>
+    <uib-carousel>
+      <uib-slide>
         <img src="http://placekitten.com/150/150" style="margin:auto;">
         <div class="carousel-caption">
           <p>Beautiful!</p>
         </div>
-      </slide>
-      <slide>
+      </uib-slide>
+      <uib-slide>
         <img src="http://placekitten.com/100/150" style="margin:auto;">
         <div class="carousel-caption">
           <p>D'aww!</p>
         </div>
-      </slide>
-    </carousel>
+      </uib-slide>
+    </uib-carousel>
   </file>
   <file name="demo.css">
     .carousel-indicators {
@@ -243,12 +244,12 @@ angular.module('ui.bootstrap.carousel', [])
   </file>
 </example>
  */
-.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', [])
 <example module="ui.bootstrap">
   <file name="index.html">
 <div ng-controller="CarouselDemoCtrl">
-  <carousel>
-    <slide ng-repeat="slide in slides" active="slide.active" index="$index">
+  <uib-carousel>
+    <uib-slide ng-repeat="slide in slides" active="slide.active" index="$index">
       <img ng-src="{{slide.image}}" style="margin:auto;">
       <div class="carousel-caption">
         <h4>Slide {{$index}}</h4>
         <p>{{slide.text}}</p>
       </div>
-    </slide>
-  </carousel>
+    </uib-slide>
+  </uib-carousel>
   Interval, in milliseconds: <input type="number" ng-model="myInterval">
   <br />Enter a negative number to stop the interval.
 </div>
@@ -305,9 +306,9 @@ function CarouselDemoCtrl($scope) {
 </example>
 */
 
-.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.');
+      }
+    }
+  };
+}]);
diff --git 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 `<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.
+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.
 
-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.
+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.
 
-Use the `template-url` attribute on a `<carousel>` or `<slide>` element to specify the url of a custom template to override the default templates.
+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.
 
-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.
+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.
diff --git a/src/carousel/docs/demo.html b/src/carousel/docs/demo.html
@@ -1,14 +1,14 @@
 <div ng-controller="CarouselDemoCtrl">
   <div style="height: 305px">
-    <carousel interval="myInterval" no-wrap="noWrapSlides">
-      <slide ng-repeat="slide in slides" active="slide.active">
+    <uib-carousel interval="myInterval" no-wrap="noWrapSlides">
+      <uib-slide ng-repeat="slide in slides" active="slide.active">
         <img ng-src="{{slide.image}}" style="margin:auto;">
         <div class="carousel-caption">
           <h4>Slide {{$index}}</h4>
           <p>{{slide.text}}</p>
         </div>
-      </slide>
-    </carousel>
+      </uib-slide>
+    </uib-carousel>
   </div>
   <div class="row">
     <div class="col-md-6">

diff --git 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(
-        '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
-          '<slide ng-repeat="slide in slides" active="slide.active">' +
+        '<uib-carousel interval="interval" no-transition="true" no-pause="nopause">' +
+          '<uib-slide ng-repeat="slide in slides" active="slide.active">' +
             '{{slide.content}}' +
-          '</slide>' +
-        '</carousel>'
+          '</uib-slide>' +
+        '</uib-carousel>'
       )(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', '<div>foo</div>');
 
-      elm = $compile('<carousel template-url="foo/bar.html"></carousel>')(scope);
+      elm = $compile('<uib-carousel template-url="foo/bar.html"></uib-carousel>')(scope);
       $rootScope.$digest();
 
       expect(elm.html()).toBe('foo');
@@ -67,12 +67,12 @@ describe('carousel', function() {
       $templateCache.put('foo/bar.html', '<div class="slide">bar</div>');
 
       elm = $compile(
-        '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
-          '<slide template-url="foo/bar.html"></slide>' + 
-        '</carousel>'
+        '<uib-carousel interval="interval" no-transition="true" no-pause="nopause">' +
+          '<uib-slide template-url="foo/bar.html"></uib-slide>' + 
+        '</uib-carousel>'
       )(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(
-          '<carousel interval="interval" no-wrap="noWrap">' +
-            '<slide ng-repeat="slide in slides" active="slide.active">' +
+          '<uib-carousel interval="interval" no-wrap="noWrap">' +
+            '<uib-slide ng-repeat="slide in slides" active="slide.active">' +
               '{{slide.content}}' +
-            '</slide>' +
-          '</carousel>'
+            '</uib-slide>' +
+          '</uib-carousel>'
         )(scope);
 
       scope.noWrap = true;
@@ -123,11 +123,11 @@ describe('carousel', function() {
 
     it('should stop cycling slides backward when noWrap is truthy', function () {
       elm = $compile(
-          '<carousel interval="interval" no-wrap="noWrap">' +
-            '<slide ng-repeat="slide in slides" active="slide.active">' +
+          '<uib-carousel interval="interval" no-wrap="noWrap">' +
+            '<uib-slide ng-repeat="slide in slides" active="slide.active">' +
               '{{slide.content}}' +
-            '</slide>' +
-          '</carousel>'
+            '</uib-slide>' +
+          '</uib-carousel>'
         )(scope);
 
       scope.noWrap = true;
@@ -146,11 +146,11 @@ describe('carousel', function() {
       scope.slides=[{active:false,content:'one'}];
       scope.$apply();
       elm = $compile(
-          '<carousel interval="interval" no-transition="true">' +
-            '<slide ng-repeat="slide in slides" active="slide.active">' +
+          '<uib-carousel interval="interval" no-transition="true">' +
+            '<uib-slide ng-repeat="slide in slides" active="slide.active">' +
               '{{slide.content}}' +
-            '</slide>' +
-          '</carousel>'
+            '</uib-slide>' +
+          '</uib-carousel>'
         )(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(
-          '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
-            '<slide ng-repeat="slide in slides | orderBy: \'id\' " active="slide.active" index="$index">' +
+          '<uib-carousel interval="interval" no-transition="true" no-pause="nopause">' +
+            '<uib-slide ng-repeat="slide in slides | orderBy: \'id\' " active="slide.active" index="$index">' +
               '{{slide.content}}' +
-            '</slide>' +
-          '</carousel>'
+            '</uib-slide>' +
+          '</uib-carousel>'
         )(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('<div></div>')});
+      ctrl = $controller('UibCarouselController', {$scope: scope, $element: angular.element('<div></div>')});
       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', '<div>{{carousel.text}}</div>');
 
       var scope = $rootScope.$new();
-      var elm = $compile('<carousel interval="bar" no-transition="false" no-pause="true"></carousel>')(scope);
+      var elm = $compile('<uib-carousel interval="bar" no-transition="false" no-pause="true"></uib-carousel>')(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(
-      '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
-        '<slide ng-repeat="slide in slides" active="slide.active" actual="slide">' +
+      '<uib-carousel interval="interval" no-transition="true" no-pause="nopause">' +
+        '<uib-slide ng-repeat="slide in slides" active="slide.active" actual="slide">' +
           '{{slide.content}}' +
-        '</slide>' +
-      '</carousel>'
+        '</uib-slide>' +
+      '</uib-carousel>'
     )(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 = '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
+          '<slide ng-repeat="slide in slides" active="slide.active">' +
+            '{{slide.content}}' +
+          '</slide>' +
+        '</carousel>';
+      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 = '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
+          '<slide ng-repeat="slide in slides" active="slide.active">' +
+            '{{slide.content}}' +
+          '</slide>' +
+        '</carousel>';
+    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 = '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
+          '<slide></slide>' + 
+        '</carousel>';
+    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.']);
+  }));
+});