From 9573c6736cd957042cfb54fef61cf5c25e616058 Mon Sep 17 00:00:00 2001
From: Chris Chua <chris.sirhc@gmail.com>
Date: Tue, 7 Apr 2015 22:59:37 -0700
Subject: [PATCH] fix(popover): animations with ngAnimate

- Animations didn't work because the class attribute was mangled during
  compilation due to the way class attributes are merged on directives with
  `replace: true`

- Rename attribute to popup-class

- Refactor to rename variables named "class" as it's a keyword
  and also looks weird in editors

Fixes #3375
---
 src/popover/test/popover.spec.js              | 24 +++++++++++++++++++
 src/tooltip/tooltip.js                        | 10 ++++----
 template/tooltip/tooltip-html-popup.html      |  2 +-
 .../tooltip/tooltip-html-unsafe-popup.html    |  2 +-
 template/tooltip/tooltip-popup.html           |  2 +-
 5 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/popover/test/popover.spec.js b/src/popover/test/popover.spec.js
index 7a23c75c87..d888d470dd 100644
--- a/src/popover/test/popover.spec.js
+++ b/src/popover/test/popover.spec.js
@@ -68,6 +68,30 @@ describe('popover', function() {
     elm.click();
     expect(scope.clicked).toBeTruthy();
   }));
+
+  it('should popup with animate class by default', inject(function() {
+    elm.trigger( 'click' );
+    expect( tooltipScope.isOpen ).toBe( true );
+
+    expect(elmBody.children().eq(1)).toHaveClass('fade');
+  }));
+
+  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>'
+    );
+
+    $compile(elmBody)(scope);
+    scope.$digest();
+    elm = elmBody.find('span');
+    elmScope = elm.scope();
+    tooltipScope = elmScope.$$childTail;
+
+    elm.trigger( 'click' );
+    expect( tooltipScope.isOpen ).toBe( true );
+    expect(elmBody.children().eq(1)).not.toHaveClass('fade');
+  }));
+
 });
 
 
diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
index 68bf8b196b..c3c5a3818c 100644
--- a/src/tooltip/tooltip.js
+++ b/src/tooltip/tooltip.js
@@ -101,7 +101,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
           'content="'+startSym+'content'+endSym+'" '+
           'content-exp="contentExp()" '+
           'placement="'+startSym+'placement'+endSym+'" '+
-          'class="'+startSym+'class'+endSym+'" '+
+          'popup-class="'+startSym+'popupClass'+endSym+'" '+
           'animation="animation" '+
           'is-open="isOpen"'+
           'origin-scope="origScope" '+
@@ -292,7 +292,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
             });
 
             attrs.$observe( prefix+'Class', function ( val ) {
-              ttScope.class = val;
+              ttScope.popupClass = val;
             });
 
             function prepPlacement() {
@@ -451,7 +451,7 @@ function ($animate ,  $sce ,  $compile ,  $templateRequest) {
   return {
     restrict: 'EA',
     replace: true,
-    scope: { content: '@', placement: '@', class: '@', animation: '&', isOpen: '&' },
+    scope: { content: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
     templateUrl: 'template/tooltip/tooltip-popup.html'
   };
 })
@@ -478,7 +478,7 @@ function ($animate ,  $sce ,  $compile ,  $templateRequest) {
   return {
     restrict: 'EA',
     replace: true,
-    scope: { contentExp: '&', placement: '@', class: '@', animation: '&', isOpen: '&' },
+    scope: { contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
     templateUrl: 'template/tooltip/tooltip-html-popup.html'
   };
 })
@@ -494,7 +494,7 @@ Deprecated
   return {
     restrict: 'EA',
     replace: true,
-    scope: { content: '@', placement: '@', class: '@', animation: '&', isOpen: '&' },
+    scope: { content: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
     templateUrl: 'template/tooltip/tooltip-html-unsafe-popup.html'
   };
 })
diff --git a/template/tooltip/tooltip-html-popup.html b/template/tooltip/tooltip-html-popup.html
index 8b34cee9c6..b236a240e7 100644
--- a/template/tooltip/tooltip-html-popup.html
+++ b/template/tooltip/tooltip-html-popup.html
@@ -1,4 +1,4 @@
-<div class="tooltip {{placement}} {{class}}" ng-class="{ in: isOpen(), fade: animation() }">
+<div class="tooltip {{placement}} {{popupClass}}" ng-class="{ in: isOpen(), fade: animation() }">
   <div class="tooltip-arrow"></div>
   <div class="tooltip-inner" ng-bind-html="contentExp()"></div>
 </div>
diff --git a/template/tooltip/tooltip-html-unsafe-popup.html b/template/tooltip/tooltip-html-unsafe-popup.html
index b5b3784acf..676a27c518 100644
--- a/template/tooltip/tooltip-html-unsafe-popup.html
+++ b/template/tooltip/tooltip-html-unsafe-popup.html
@@ -1,4 +1,4 @@
-<div class="tooltip {{placement}} {{class}}" ng-class="{ in: isOpen(), fade: animation() }">
+<div class="tooltip {{placement}} {{popupClass}}" ng-class="{ in: isOpen(), fade: animation() }">
   <div class="tooltip-arrow"></div>
   <div class="tooltip-inner" bind-html-unsafe="content"></div>
 </div>
diff --git a/template/tooltip/tooltip-popup.html b/template/tooltip/tooltip-popup.html
index 14c3e3a27c..9b62afe1bb 100644
--- a/template/tooltip/tooltip-popup.html
+++ b/template/tooltip/tooltip-popup.html
@@ -1,4 +1,4 @@
-<div class="tooltip {{placement}} {{class}}" ng-class="{ in: isOpen(), fade: animation() }">
+<div class="tooltip {{placement}} {{popupClass}}" ng-class="{ in: isOpen(), fade: animation() }">
   <div class="tooltip-arrow"></div>
   <div class="tooltip-inner" ng-bind="content"></div>
 </div>