feat(tooltip): add uib- prefix

angular-ui · Oct 3, 2015 · c829bc6 · c829bc6
1 parent 5bc0851
commit c829bc6
Show file tree

Hide file tree

Showing 18 changed files with 467 additions and 142 deletions.
diff --git a/src/popover/docs/demo.html b/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>
diff --git a/src/popover/docs/readme.md b/src/popover/docs/readme.md
@@ -6,11 +6,11 @@ module.
 
 There are two versions of the popover: `popover` and `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
@@ -30,8 +30,8 @@ will display:
   _(Default: false)_:
   Whether to show the popover.
 
-The popover directives require the `$position` service.
+The popover directives require the `$uibPosition` service.
 
 The popover directive also supports various default configurations through the
-$tooltipProvider. See the [tooltip](#tooltip) section for more information.
+$uibTooltipProvider. See the [tooltip](#tooltip) section for more information.
 
diff --git a/src/popover/popover.js b/src/popover/popover.js
@@ -3,48 +3,119 @@
  * 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('popover', ['$tooltip', function($tooltip) {
-  return $tooltip( 'popover', 'popover', 'click' );
+.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', ['$log', '$popoverSuppressWarning', '$uibTooltip', function($log, $popoverSuppressWarning, $tooltip) {
+  if (!$popoverSuppressWarning) {
+    $log.warn('popover-template is now deprecated. Use uib-popover-template instead.');
+  }
+
+  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', ['$log', '$popoverSuppressWarning', '$uibTooltip', function($log, $popoverSuppressWarning, $tooltip) {
+  if (!$popoverSuppressWarning) {
+    $log.warn('popover-html-popup is now deprecated. Use uib-popover-html-popup instead.');
+  }
+
+  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', ['$log', '$popoverSuppressWarning', '$uibTooltip', function($log, $popoverSuppressWarning, $tooltip) {
+  if (!$popoverSuppressWarning) {
+    $log.warn('popover is now deprecated. Use uib-popover instead.');
+  }
+
+  return $tooltip('popover', 'popover', 'click');
 }]);
diff --git a/src/popover/test/popover-html.spec.js b/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();

diff --git a/src/popover/test/popover-template.spec.js b/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();

diff --git a/src/popover/test/popover.spec.js b/src/popover/test/popover.spec.js
@@ -13,7 +13,7 @@ describe('popover', function() {
 
   beforeEach(inject(function($rootScope, $compile) {
     elmBody = angular.element(
-      '<div><span popover="popover text">Selector Text</span></div>'
+      '<div><span uib-popover="popover text">Selector Text</span></div>'
     );
 
     scope = $rootScope;
@@ -57,7 +57,7 @@ describe('popover', function() {
     };
 
     elmBody = angular.element(
-      '<div><input popover="Hello!" ng-click="click()" popover-trigger="mouseenter"/></div>'
+      '<div><input uib-popover="Hello!" ng-click="click()" popover-trigger="mouseenter"/></div>'
     );
     $compile(elmBody)(scope);
     scope.$digest();
@@ -82,7 +82,7 @@ describe('popover', function() {
 
   it('should popup without animate class when animation disabled', inject(function($compile) {
     elmBody = angular.element(
-      '<div><span popover="popover text" popover-animation="false">Selector Text</span></div>'
+      '<div><span uib-popover="popover text" popover-animation="false">Selector Text</span></div>'
     );
 
     $compile(elmBody)(scope);
@@ -101,7 +101,7 @@ describe('popover', function() {
     describe('placement', function() {
       it('can specify an alternative, valid placement', inject(function($compile) {
         elmBody = angular.element(
-          '<div><span popover="popover text" popover-placement="left">Trigger here</span></div>'
+          '<div><span uib-popover="popover text" popover-placement="left">Trigger here</span></div>'
         );
         $compile(elmBody)(scope);
         scope.$digest();
@@ -122,7 +122,7 @@ describe('popover', function() {
     describe('class', function() {
       it('can specify a custom class', inject(function($compile) {
         elmBody = angular.element(
-          '<div><span popover="popover text" popover-class="custom">Trigger here</span></div>'
+          '<div><span uib-popover="popover text" popover-class="custom">Trigger here</span></div>'
         );
         $compile(elmBody)(scope);
         scope.$digest();
@@ -144,7 +144,7 @@ describe('popover', function() {
       beforeEach(inject(function ($compile) {
         scope.isOpen = false;
         elmBody = angular.element(
-          '<div><span popover="popover text" popover-placement="left" popover-is-open="isOpen">Trigger here</span></div>'
+          '<div><span uib-popover="popover text" popover-placement="left" popover-is-open="isOpen">Trigger here</span></div>'
         );
         $compile(elmBody)(scope);
         scope.$digest();

diff --git a/src/tooltip/docs/demo.html b/src/tooltip/docs/demo.html
@@ -8,24 +8,24 @@
       <input type="text" ng-model="dynamicTooltip" class="form-control">
     </div>
     <p>
-      Pellentesque <a href="#" tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
+      Pellentesque <a href="#" uib-tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
       sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
       aliquam. Tincidunt lobortis feugiat vivamus at
-      <a href="#" tooltip-placement="left" tooltip="On the Left!">left</a> eget
+      <a href="#" tooltip-placement="left" uib-tooltip="On the Left!">left</a> eget
       arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
-      <a href="#" tooltip-placement="right" tooltip="On the Right!">right</a>
+      <a href="#" tooltip-placement="right" uib-tooltip="On the Right!">right</a>
       nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
-      <a href="#" tooltip-placement="bottom" tooltip="On the Bottom!">bottom</a>
+      <a href="#" tooltip-placement="bottom" uib-tooltip="On the Bottom!">bottom</a>
       pharetra convallis posuere morbi leo urna,
-      <a href="#" tooltip-animation="false" tooltip="I don't fade. :-(">fading</a>
+      <a href="#" tooltip-animation="false" uib-tooltip="I don't fade. :-(">fading</a>
       at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
-      <a href="#" tooltip-popup-delay='1000' tooltip='appears with delay'>delayed</a> turpis massa tincidunt dui ut.
-      <a href="#" tooltip-template="'myTooltipTemplate.html'">Custom template</a>
+      <a href="#" tooltip-popup-delay='1000' uib-tooltip='appears with delay'>delayed</a> turpis massa tincidunt dui ut.
+      <a href="#" uib-tooltip-template="'myTooltipTemplate.html'">Custom template</a>
       nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
     </p>
 
     <p>
-        I can even contain HTML. <a href="#" tooltip-html="htmlTooltip">Check me out!</a>
+        I can even contain HTML. <a href="#" uib-tooltip-html="htmlTooltip">Check me out!</a>
     </p>
 
     <p>
@@ -41,20 +41,20 @@
                 display: none;
             }
         </style>
-        I can have a custom class. <a href="#" tooltip="I can have a custom class applied to me!" tooltip-class="customClass">Check me out!</a>
+        I can have a custom class. <a href="#" uib-tooltip="I can have a custom class applied to me!" tooltip-class="customClass">Check me out!</a>
     </p>
 
     <form role="form">
       <div class="form-group">
         <label>Or use custom triggers, like focus: </label>
-        <input type="text" value="Click me!" tooltip="See? Now click away..."  tooltip-trigger="focus" tooltip-placement="right" class="form-control" />
+        <input type="text" value="Click me!" uib-tooltip="See? Now click away..." tooltip-trigger="focus" tooltip-placement="right" class="form-control" />
       </div>
 
       <div class="form-group" ng-class="{'has-error' : !inputModel}">
         <label>Disable tooltips conditionally:</label>
         <input type="text" ng-model="inputModel" class="form-control"
           placeholder="Hover over this for a tooltip until this is filled"
-          tooltip="Enter something in this input field to disable this tooltip"
+          uib-tooltip="Enter something in this input field to disable this tooltip"
           tooltip-placement="top"
           tooltip-trigger="mouseenter"
           tooltip-enable="!inputModel" />