fix(callout): closing callout

Fixed closing collout by clicking on button located inside it. Closes #450.
ngOfficeUIFabric · Jan 5, 2017 · 8f6c835 · 8f6c835
1 parent 60c4e3a
commit 8f6c835
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 12 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,6 @@ reports/
 *.js.map
 
 !src/core/jquery.phantomjs.fix.js
+
+# Visual Studio
+/.vs
diff --git a/src/components/callout/calloutDirective.spec.ts b/src/components/callout/calloutDirective.spec.ts
@@ -352,9 +352,6 @@ describe('calloutDirectives:', () => {
       expect(element[0]).toHaveClass('ng-hide');
     }));
 
-
-
-
     it('should not close when mouse moves outside callout but there is close button', inject(($compile: angular.ICompileService) => {
       element = angular.element('<uif-callout ng-show="vm.isOpen" uif-close></uif-callout>');
 
@@ -520,7 +517,7 @@ describe('calloutDirectives:', () => {
 
   describe('callout directives rendering together', () => {
     let element: JQuery;
-    let scope: angular.IScope;
+    let scope: any;
 
     beforeEach(inject(($rootScope: angular.IRootScopeService, $compile: angular.ICompileService) => {
       element = angular.element('<uif-callout uif-arrow="left">' +
@@ -620,6 +617,35 @@ describe('calloutDirectives:', () => {
       expect(deepestSpan).not.toHaveClass('ms-Callout-actionText');
     }));
 
+    it('clicking close button inside callout actions directive closes callout', inject(($compile: angular.ICompileService) => {
+      element = angular.element('<uif-callout ng-show="vm.isOpen" uif-close>' +
+        '<uif-callout-actions>' +
+        '<uif-button uif-type="command" ng-click="vm.isOpen = false">' +
+        '<uif-icon uif-type="x"></uif-icon>' +
+        'Cancel' +
+        '</uif-button>' +
+        '</uif-callout-actions>' +
+        '</uif-callout>');
+
+      // intially callout is open
+      scope.vm = {
+        isOpen: true
+      };
+
+      $compile(element)(scope);
+      scope.$digest();
+
+      element = jQuery(element[0]);
+      expect(element[0]).not.toHaveClass('ng-hide');
+
+      // close
+      let cancelButton: JQuery = element.find('button.ms-Button.ms-Button--command').eq(0);
+      cancelButton.click();
+      scope.$digest();
+
+      let calloutElement: JQuery = element.eq(0);
+      expect(element[0]).toHaveClass('ng-hide');
+    }));
 
   });
 

diff --git a/src/components/callout/calloutDirective.ts b/src/components/callout/calloutDirective.ts
@@ -2,7 +2,6 @@ import * as angular from 'angular';
 import { CalloutType } from './calloutTypeEnum';
 import { CalloutArrow } from './calloutArrowEnum';
 
-
 /**
  * @ngdoc class
  * @name CalloutController
@@ -88,7 +87,6 @@ export class CalloutContentDirective implements angular.IDirective {
 
 }
 
-
 /**
  * @ngdoc directive
  * @name uifCalloutActions
@@ -293,7 +291,6 @@ export class CalloutDirective implements angular.IDirective {
       scope.$apply();
     });
 
-
     scope.$watch('ngShow', (newValue: boolean, oldValue: boolean) => {
       // close button closes everytime
       let isClosingByButtonClick: boolean = !newValue && scope.closeButtonClicked;
@@ -302,8 +299,12 @@ export class CalloutDirective implements angular.IDirective {
         return;
       }
 
-      if (!newValue) {
+      if (!newValue && angular.isUndefined(attrs.uifClose)) {
+        // callout visible on mouse over
         scope.ngShow = scope.isMouseOver;
+      } else {
+        // callout visiblity controlled by ng-show
+        scope.ngShow = newValue;
       }
     });
 

diff --git a/src/components/callout/demo/index.html b/src/components/callout/demo/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 
 <head>
@@ -178,7 +178,7 @@ <h1 class="ms-font-su">Callout Demo | &lt;uif-callout&gt;</h1>
       </uif-callout>
     </div>
 
-    <!-- fifth example -->
+    <!-- sixth example -->
 
     <p>Callout can have close button, with help of <em>uif-close</em> attribute.
       <br/>
@@ -200,12 +200,15 @@ <h1 class="ms-font-su">Callout Demo | &lt;uif-callout&gt;</h1>
         <uif-callout-header>All of your favorite people</uif-callout-header>
         <uif-callout-content>Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</uif-callout-content>
         <uif-callout-actions>
-          <a href="#" class="ms-Callout-link ms-Link ms-Link--hero">Learn more</a>
+          <uif-button uif-type="command" ng-click="vm.secondVisible = false">
+            <uif-icon uif-type="x"></uif-icon>
+            Close
+          </uif-button>
         </uif-callout-actions>
       </uif-callout>
     </div>
 
-    <!-- sixth example -->
+    <!-- seventh example -->
 
     <p>When <em>ngShow</em> is used without <em>uif-close</em>, callout is closed when mouse leaves from callout:
       <br/>