feat(tooltip): add uib- prefix

Closes #4515

Author: wesleycho

src/popover/docs/demo.html

@@ -12,9 +12,9 @@ <h4>Dynamic</h4>
       <label>Popup Template:</label>
       <input type="text" ng-model="dynamicPopover.templateUrl" class="form-control">
     </div>
-    <button popover="{{dynamicPopover.content}}" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Dynamic Popover</button>
+    <button uib-popover="{{dynamicPopover.content}}" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Dynamic Popover</button>
 
-    <button popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button>
+    <button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default">Popover With Template</button>
 
     <script type="text/ng-template" id="myPopoverTemplate.html">
         <div>{{dynamicPopover.content}}</div>
@@ -25,20 +25,20 @@ <h4>Dynamic</h4>
     </script>
     <hr />
     <h4>Positional</h4>
-    <button popover-placement="top" popover="On the Top!" type="button" class="btn btn-default">Top</button>
-    <button popover-placement="left" popover="On the Left!" type="button" class="btn btn-default">Left</button>
-    <button popover-placement="right" popover="On the Right!" type="button" class="btn btn-default">Right</button>
-    <button popover-placement="bottom" popover="On the Bottom!" type="button" class="btn btn-default">Bottom</button>
+    <button popover-placement="top" uib-popover="On the Top!" type="button" class="btn btn-default">Top</button>
+    <button popover-placement="left" uib-popover="On the Left!" type="button" class="btn btn-default">Left</button>
+    <button popover-placement="right" uib-popover="On the Right!" type="button" class="btn btn-default">Right</button>
+    <button popover-placement="bottom" uib-popover="On the Bottom!" type="button" class="btn btn-default">Bottom</button>
 
     <hr />
     <h4>Triggers</h4>
     <p>
-      <button popover="I appeared on mouse enter!" popover-trigger="mouseenter" type="button" class="btn btn-default">Mouseenter</button>
+      <button uib-popover="I appeared on mouse enter!" popover-trigger="mouseenter" type="button" class="btn btn-default">Mouseenter</button>
     </p>
-    <input type="text" value="Click me!" popover="I appeared on focus! Click away and I'll vanish..."  popover-trigger="focus" class="form-control">
+    <input type="text" value="Click me!" uib-popover="I appeared on focus! Click away and I'll vanish..."  popover-trigger="focus" class="form-control">
 
     <hr />
     <h4>Other</h4>
-    <button Popover-animation="true" popover="I fade in and out!" type="button" class="btn btn-default">fading</button>
-    <button popover="I have a title!" popover-title="The title." type="button" class="btn btn-default">title</button>
+    <button popover-animation="true" uib-popover="I fade in and out!" type="button" class="btn btn-default">fading</button>
+    <button uib-popover="I have a title!" popover-title="The title." type="button" class="btn btn-default">title</button>
 </div>

src/popover/docs/readme.md

@@ -4,13 +4,13 @@ directive supports multiple placements, optional transition animation, and more.
 Like the Bootstrap jQuery plugin, the popover **requires** the tooltip
 module.
 
-There are two versions of the popover: `popover` and `popover-template`:
+There are two versions of the popover: `uib-popover` and `uib-popover-template`:
 
-- `popover` takes text only and will escape any HTML provided for the popover
+- `uib-popover` takes text only and will escape any HTML provided for the popover
   body.
-- `popover-html` takes an expression that evaluates to an html string. *The user is responsible for ensuring the
+- `uib-popover-html` takes an expression that evaluates to an html string. *The user is responsible for ensuring the
   content is safe to put into the DOM!*
-- `popover-template` takes text that specifies the location of a template to
+- `uib-popover-template` takes text that specifies the location of a template to
   use for the popover body. Note that this needs to be wrapped in a tag.
 
 The popover directives provides several optional attributes to control how it
@@ -40,7 +40,7 @@ $tooltipProvider. See the [tooltip](#tooltip) section for more information.
 For Safari 7+ support, if you want to use **focus** `popover-trigger`, you need to use an anchor tag with a tab index. For example:
 
 ```
-<a tabindex="0" popover="Test" popover-trigger="focus" class="btn btn-default">
+<a tabindex="0" uib-popover="Test" popover-trigger="focus" class="btn btn-default">
   Click Me
 </a>
 ```

src/popover/popover.js

@@ -3,48 +3,108 @@
  * function, placement as a function, inside, support for more triggers than
  * just mouse enter/leave, and selector delegatation.
  */
-angular.module( 'ui.bootstrap.popover', ['ui.bootstrap.tooltip'])
+angular.module('ui.bootstrap.popover', ['ui.bootstrap.tooltip'])
 
-.directive('popoverTemplatePopup', function() {
+.directive('uibPopoverTemplatePopup', function() {
   return {
-    restrict: 'EA',
     replace: true,
     scope: { title: '@', contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&',
       originScope: '&' },
     templateUrl: 'template/popover/popover-template.html'
   };
 })
 
-.directive('popoverTemplate', ['$tooltip', function($tooltip) {
-  return $tooltip('popoverTemplate', 'popover', 'click', {
+.directive('uibPopoverTemplate', ['$uibTooltip', function($uibTooltip) {
+  return $uibTooltip('uibPopoverTemplate', 'popover', 'click', {
     useContentExp: true
   });
 }])
 
-.directive('popoverHtmlPopup', function() {
+.directive('uibPopoverHtmlPopup', function() {
   return {
-    restrict: 'EA',
     replace: true,
     scope: { contentExp: '&', title: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
     templateUrl: 'template/popover/popover-html.html'
   };
 })
 
-.directive('popoverHtml', ['$tooltip', function($tooltip) {
-  return $tooltip( 'popoverHtml', 'popover', 'click', {
+.directive('uibPopoverHtml', ['$uibTooltip', function($uibTooltip) {
+  return $uibTooltip('uibPopoverHtml', 'popover', 'click', {
     useContentExp: true
   });
 }])
 
-.directive('popoverPopup', function() {
+.directive('uibPopoverPopup', function() {
   return {
-    restrict: 'EA',
     replace: true,
     scope: { title: '@', content: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
     templateUrl: 'template/popover/popover.html'
   };
 })
 
+.directive('uibPopover', ['$uibTooltip', function($uibTooltip) {
+  return $uibTooltip('uibPopover', 'popover', 'click');
+}]);
+
+/* Deprecated popover below */
+
+angular.module('ui.bootstrap.popover')
+
+.value('$popoverSuppressWarning', false)
+
+.directive('popoverTemplatePopup', ['$log', '$popoverSuppressWarning', function($log, $popoverSuppressWarning) {
+  return {
+    replace: true,
+    scope: { title: '@', contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&',
+      originScope: '&' },
+    templateUrl: 'template/popover/popover-template.html',
+    link: function() {
+      if (!$popoverSuppressWarning) {
+        $log.warn('popover-template-popup is now deprecated. Use uib-popover-template-popup instead.');
+      }
+    }
+  };
+}])
+
+.directive('popoverTemplate', ['$tooltip', function($tooltip) {
+  return $tooltip('popoverTemplate', 'popover', 'click', {
+    useContentExp: true
+  });
+}])
+
+.directive('popoverHtmlPopup', ['$log', '$popoverSuppressWarning', function($log, $popoverSuppressWarning) {
+  return {
+    replace: true,
+    scope: { contentExp: '&', title: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
+    templateUrl: 'template/popover/popover-html.html',
+    link: function() {
+      if (!$popoverSuppressWarning) {
+        $log.warn('popover-html-popup is now deprecated. Use uib-popover-html-popup instead.');
+      }
+    }
+  };
+}])
+
+.directive('popoverHtml', ['$tooltip', function($tooltip) {
+  return $tooltip('popoverHtml', 'popover', 'click', {
+    useContentExp: true
+  });
+}])
+
+.directive('popoverPopup', ['$log', '$popoverSuppressWarning', function($log, $popoverSuppressWarning) {
+  return {
+    replace: true,
+    scope: { title: '@', content: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
+    templateUrl: 'template/popover/popover.html',
+    link: function() {
+      if (!$popoverSuppressWarning) {
+        $log.warn('popover-popup is now deprecated. Use uib-popover-popup instead.');
+      }
+    }
+  };
+}])
+
 .directive('popover', ['$tooltip', function($tooltip) {
-  return $tooltip( 'popover', 'popover', 'click' );
+
+  return $tooltip('popover', 'popover', 'click');
 }]);

src/popover/test/popover-html.spec.js

@@ -13,7 +13,7 @@ describe('popover', function() {
 
   beforeEach(inject(function($rootScope, $compile, $sce) {
     elmBody = angular.element(
-      '<div><span popover-html="template">Selector Text</span></div>'
+      '<div><span uib-popover-html="template">Selector Text</span></div>'
     );
 
     scope = $rootScope;
@@ -100,7 +100,7 @@ describe('popover', function() {
     };
 
     elmBody = angular.element(
-      '<div><input popover-html="template" ng-click="click()" popover-trigger="mouseenter"/></div>'
+      '<div><input uib-popover-html="template" ng-click="click()" popover-trigger="mouseenter"/></div>'
     );
     $compile(elmBody)(scope);
     scope.$digest();
@@ -127,7 +127,7 @@ describe('popover', function() {
 
   it('should popup without animate class when animation disabled', inject(function($compile) {
     elmBody = angular.element(
-      '<div><span popover-html="template" popover-animation="false">Selector Text</span></div>'
+      '<div><span uib-popover-html="template" popover-animation="false">Selector Text</span></div>'
     );
 
     $compile(elmBody)(scope);
@@ -146,7 +146,7 @@ describe('popover', function() {
     describe('placement', function() {
       it('can specify an alternative, valid placement', inject(function($compile) {
         elmBody = angular.element(
-          '<div><span popover-html="template" popover-placement="left">Trigger here</span></div>'
+          '<div><span uib-popover-html="template" popover-placement="left">Trigger here</span></div>'
         );
         $compile(elmBody)(scope);
         scope.$digest();
@@ -168,7 +168,7 @@ describe('popover', function() {
     describe('class', function() {
       it('can specify a custom class', inject(function($compile) {
         elmBody = angular.element(
-          '<div><span popover-html="template" popover-class="custom">Trigger here</span></div>'
+          '<div><span uib-popover-html="template" popover-class="custom">Trigger here</span></div>'
         );
         $compile(elmBody)(scope);
         scope.$digest();
@@ -187,3 +187,64 @@ describe('popover', function() {
     });
   });
 });
+
+/* Deprecation tests below */
+
+describe('popover deprecation', function() {
+  beforeEach(module('ui.bootstrap.popover'));
+  beforeEach(module('template/popover/popover-html.html'));
+
+  var elm, elmBody, elmScope, tooltipScope;
+
+  function trigger(element, evt) {
+    evt = new Event(evt);
+
+    element[0].dispatchEvent(evt);
+    element.scope().$$childTail.$digest();
+  }
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$popoverSuppressWarning', true);
+      $provide.value('$tooltipSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope, $sce) {
+      spyOn($log, 'warn');
+
+      $rootScope.html = 'I say: <strong class="hello">Hello!</strong>';
+      $rootScope.safeHtml = $sce.trustAsHtml($rootScope.html);
+      elmBody = angular.element('<div><span popover-html="safeHtml">Selector Text</span></div>');
+      $compile(elmBody)($rootScope);
+      $rootScope.$digest();
+      elm = elmBody.find('span');
+      elmScope = elm.scope();
+      tooltipScope = elmScope.$$childTail;
+
+      trigger(elm, 'mouseenter');
+      tooltipScope.$digest();
+
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope, $sce) {
+    spyOn($log, 'warn');
+
+    $rootScope.html = 'I say: <strong class="hello">Hello!</strong>';
+    $rootScope.safeHtml = $sce.trustAsHtml($rootScope.html);
+    elmBody = angular.element('<div><span popover-html="safeHtml">Selector Text</span></div>');
+    $compile(elmBody)($rootScope);
+    $rootScope.$digest();
+    elm = elmBody.find('span');
+    elmScope = elm.scope();
+    tooltipScope = elmScope.$$childTail;
+
+    elm.trigger('click');
+    tooltipScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(2);
+    expect($log.warn.calls.argsFor(0)).toEqual(['$tooltip is now deprecated. Use $uibTooltip instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['popover-html-popup is now deprecated. Use uib-popover-html-popup instead.']);
+  }));
+});

src/popover/test/popover-template.spec.js

@@ -18,7 +18,7 @@ describe('popover template', function() {
 
   beforeEach(inject(function($rootScope, $compile) {
     elmBody = angular.element(
-      '<div><span popover-template="templateUrl">Selector Text</span></div>'
+      '<div><span uib-popover-template="templateUrl">Selector Text</span></div>'
     );
 
     scope = $rootScope;
@@ -84,7 +84,7 @@ describe('popover template', function() {
     describe('placement', function() {
       it('can specify an alternative, valid placement', inject(function($compile) {
         elmBody = angular.element(
-          '<div><span popover-template="templateUrl" popover-placement="left">Trigger</span></div>'
+          '<div><span uib-popover-template="templateUrl" popover-placement="left">Trigger</span></div>'
         );
         $compile(elmBody)(scope);
         scope.$digest();
@@ -106,7 +106,7 @@ describe('popover template', function() {
     describe('class', function() {
       it('can specify a custom class', inject(function($compile) {
         elmBody = angular.element(
-          '<div><span popover-template="templateUrl" popover-class="custom">Trigger</span></div>'
+          '<div><span uib-popover-template="templateUrl" popover-class="custom">Trigger</span></div>'
         );
         $compile(elmBody)(scope);
         scope.$digest();
@@ -125,3 +125,56 @@ describe('popover template', function() {
     });
   });
 });
+
+/* Deprecation tests below */
+
+describe('popover template deprecation', function() {
+  beforeEach(module('ui.bootstrap.popover'));
+  beforeEach(module('template/popover/popover.html'));
+  beforeEach(module('template/popover/popover-template.html'));
+
+  var elm, elmBody, elmScope, tooltipScope;
+
+  it('should suppress warning', function() {
+    module(function($provide) {
+      $provide.value('$popoverSuppressWarning', true);
+      $provide.value('$tooltipSuppressWarning', true);
+    });
+
+    inject(function($compile, $log, $rootScope, $templateCache) {
+      spyOn($log, 'warn');
+      $templateCache.put('myUrl', [200, '<span>{{ myTemplateText }}</span>', {}]);
+      $rootScope.templateUrl = 'myUrl';
+
+      elmBody = angular.element('<div><span popover-template="templateUrl">Selector Text</span></div>');
+      $compile(elmBody)($rootScope);
+      $rootScope.$digest();
+      elm = elmBody.find('span');
+      elmScope = elm.scope();
+      tooltipScope = elmScope.$$childTail;
+
+      elm.trigger('click');
+      tooltipScope.$digest();
+      expect($log.warn.calls.count()).toBe(0);
+    });
+  });
+
+  it('should give warning by default', inject(function($compile, $log, $rootScope, $templateCache) {
+    spyOn($log, 'warn');
+    $templateCache.put('myUrl', [200, '<span>{{ myTemplateText }}</span>', {}]);
+    $rootScope.templateUrl = 'myUrl';
+
+    elmBody = angular.element('<div><span popover-template="templateUrl">Selector Text</span></div>');
+    $compile(elmBody)($rootScope);
+    elm = elmBody.find('span');
+    elmScope = elm.scope();
+    tooltipScope = elmScope.$$childTail;
+
+    elm.trigger('click');
+    tooltipScope.$digest();
+
+    expect($log.warn.calls.count()).toBe(2);
+    expect($log.warn.calls.argsFor(0)).toEqual(['$tooltip is now deprecated. Use $uibTooltip instead.']);
+    expect($log.warn.calls.argsFor(1)).toEqual(['popover-template-popup is now deprecated. Use uib-popover-template-popup instead.']);
+  }));
+});