From b24592d6de13412bc25af9bc462c506d16cc74cb Mon Sep 17 00:00:00 2001
From: Steve Clements <steve@originaleye.co.uk>
Date: Mon, 12 Dec 2016 21:00:32 +0000
Subject: [PATCH] feat(panel): add uifIslightDismiss attribute

Add `uif-is-light-dismiss` as an attribute of the Panel directive to allow the setting to determine whether clicking on the background overlay closes the panel. Default value is false. When not set, or set to false, clicking on the background overlay has no effect. When set to true, clicking on the background overlay closes the panel.

Closes #434.
---
 src/components/panel/demo/index.html        | 12 +++-
 src/components/panel/panelDirective.spec.ts | 70 +++++++++++++++++++++
 src/components/panel/panelDirective.ts      |  4 +-
 3 files changed, 83 insertions(+), 3 deletions(-)

diff --git a/src/components/panel/demo/index.html b/src/components/panel/demo/index.html
index 5ffdc18..96fcb77 100644
--- a/src/components/panel/demo/index.html
+++ b/src/components/panel/demo/index.html
@@ -29,14 +29,22 @@
     <h1 class="ms-font-su">uifPanel Demo | &lt;uif-panel&gt;</h1>
     <em class="ms-font-m">In order for this demo to work you must first build the library in dev mode. (gulp build-lib --dev)</em>
 
+    <p><em class="ms-font-m">Use this toggle to toggle the value of the 'uif-is-light-dismiss' property. If set to true, clicking on the overlay will close the Panel. The default value is false.</em><uif-toggle uif-label-off="isLightDismiss=false" uif-label-on="isLightDismiss=true" ng-model="isLightDismiss"/></p>
+
+
     <h2 class="ms-font-xl">Basic Usage</h2>
+
     <ng-include src="'basic.html'"></ng-include>
     <h4><i class="ms-font-m">Code:</i></h4>
     <raw src="'basic.html'"></raw>
 
     <script type="text/ng-template" id="basic.html">
       <uif-button  ng-click="vm.isOpen1 = !vm.isOpen1">Toggle Menu</uif-button>
-      <uif-panel uif-type="small" uif-is-open="vm.isOpen1" uif-show-overlay="true" uif-show-close="true">
+        <uif-panel uif-type="small"
+                   uif-is-open="vm.isOpen1"
+                   uif-show-overlay="true"
+                   uif-show-close="true"
+                   uif-is-light-dismiss="isLightDismiss">
         <uif-panel-header>Header</uif-panel-header>
         <uif-content>
         <span class="ms-font-m">Place your content in here!</span>
@@ -51,7 +59,7 @@ <h4><i class="ms-font-m">Code:</i></h4>
 
     <script type="text/ng-template" id="withcommandbar.html">
       <uif-button  ng-click="vm.isOpen2 = !vm.isOpen2">Toggle Menu</uif-button>
-      <uif-panel uif-type="large" uif-is-open="vm.isOpen2" uif-show-overlay="true">
+      <uif-panel uif-type="large" uif-is-open="vm.isOpen2" uif-show-overlay="true" uif-is-light-dismiss="isLightDismiss">
         <uif-command-bar uif-search-term="searchValue" placeholder="Search here...">
           <uif-command-bar-main uif-show-overflow='true'>
           <uif-command-bar-item>
diff --git a/src/components/panel/panelDirective.spec.ts b/src/components/panel/panelDirective.spec.ts
index 4f90b8b..0e370d8 100644
--- a/src/components/panel/panelDirective.spec.ts
+++ b/src/components/panel/panelDirective.spec.ts
@@ -93,6 +93,76 @@ describe('panel: <uif-panel />', () => {
       expect(closeButton).toHaveAttr('type', 'button');
     });
 
+    it('clicking on the Overlay should not close the panel when no value is supplied to uif-is-light-dismiss', inject(($compile: Function, $rootScope: angular.IRootScopeService) => {
+
+      $scope.isOpen = true;
+      $rootScope.$digest();
+      expect(panel).toHaveClass('is-open');
+
+      // attempt to close the panel by clicking on the background overlay
+      panel.find('.ms-Overlay.ms-Overlay--dark').trigger('click');
+      $rootScope.$digest();
+      this.$timeoutservice.flush();
+      expect($scope.isOpen).toEqual(true);
+    }));
+
+  });
+
+  describe('Tests for uif-is-light-dismiss attribute boolean value', () => {
+
+    let panel: JQuery;
+    let $scope: any;
+
+    afterEach(() => {
+      this.$timeoutservice.verifyNoPendingTasks();
+    });
+
+    beforeEach(inject(($rootScope: angular.IRootScopeService, $compile: Function, $timeout: angular.ITimeoutService) => {
+
+      $scope = $rootScope;
+      this.$timeoutservice = $timeout;
+      $scope.isOpen = true;
+      $scope.isLightDismiss = false;
+
+      panel = $compile(`<uif-panel uif-type="small" uif-is-open="isOpen" uif-show-overlay="true" uif-show-close="true" uif-is-light-dismiss="isLightDismiss">
+                              <uif-panel-header>Header</uif-panel-header>
+                              <uif-content>
+                              <span class="ms-font-m">Place your content in here!</span>
+                              </uif-content>
+                            </uif-panel>
+                    `)($scope);
+      $scope.$digest();
+      $('body').append(panel);
+      panel = jQuery(panel[0]);
+    }));
+
+    it('clicking on the Overlay should not close the panel when uif-is-light-dismiss is false', inject(($compile: Function, $rootScope: angular.IRootScopeService) => {
+
+      $scope.isOpen = true;
+      $rootScope.$digest();
+      expect(panel).toHaveClass('is-open');
+
+      // attempt to close the panel by clicking on the background overlay
+      panel.find('.ms-Overlay.ms-Overlay--dark').trigger('click');
+      $rootScope.$digest();
+      this.$timeoutservice.flush();
+      expect($scope.isOpen).toEqual(true);
+    }));
+
+    it('clicking on the Overlay should close the panel when uif-is-light-dismiss is true', inject(($compile: Function, $rootScope: angular.IRootScopeService) => {
+
+      $scope.isOpen = true;
+      $scope.isLightDismiss = true;
+      $rootScope.$digest();
+      expect(panel).toHaveClass('is-open');
+
+      // attempt to close the panel by clicking on the background overlay
+      panel.find('.ms-Overlay.ms-Overlay--dark').trigger('click');
+      $rootScope.$digest();
+      this.$timeoutservice.flush();
+      expect($scope.isOpen).toEqual(false);
+    }));
+
   });
 
   describe('Command bar is placed correctly', () => {
diff --git a/src/components/panel/panelDirective.ts b/src/components/panel/panelDirective.ts
index bb5202a..8e0e24c 100644
--- a/src/components/panel/panelDirective.ts
+++ b/src/components/panel/panelDirective.ts
@@ -23,7 +23,7 @@ export class PanelDirective implements angular.IDirective {
   public restrict: string = 'E';
   public template: string = `<div class="ms-Panel">
                               <div  class="ms-Overlay"
-                                    ng-click="closePanel()"
+                                    ng-click="uifIsLightDismiss && closePanel()"
                                     ng-class="uifShowOverlay === true ? \'ms-Overlay--dark\' : \'\';"></div>
                               <div class="ms-Panel-main">
                                 <div class="ms-Panel-commands">
@@ -43,6 +43,7 @@ export class PanelDirective implements angular.IDirective {
     uifIsOpen: '=',
     uifShowClose: '=',
     uifShowOverlay: '=',
+    uifIsLightDismiss: '=',
     uifType: '@'
   };
 
@@ -116,6 +117,7 @@ interface IPanelScope extends angular.IScope {
   uifType: string;
   uifShowOverlay: boolean;
   uifShowClose: boolean;
+  uifIsLightDismiss: boolean;
   closePanel: () => void;
 }