feat(sidenav): add disable click and escape event (#11165)

Author: FjVillar

src/components/sidenav/demoBasicUsage/script.js

@@ -1,5 +1,5 @@
 angular
-  .module('sidenavDemo1', ['ngMaterial'])
+  .module('basicUsageSidenavDemo', ['ngMaterial'])
   .controller('AppCtrl', function ($scope, $timeout, $mdSidenav, $log) {
     $scope.toggleLeft = buildDelayedToggler('left');
     $scope.toggleRight = buildToggler('right');

src/components/sidenav/demoCustomSidenav/script.js

@@ -1,8 +1,7 @@
 angular
-  .module('sidenavDemo2', ['ngMaterial'])
-  .controller('AppCtrl', function ($scope, $timeout, $mdSidenav) {
+  .module('customSidenavDemo', ['ngMaterial'])
+  .controller('AppCtrl', function ($scope, $mdSidenav) {
     $scope.toggleLeft = buildToggler('left');
-    $scope.toggleRight = buildToggler('right');
 
     function buildToggler(componentId) {
       return function() {

src/components/sidenav/demoDisableCloseEvents/index.html

@@ -0,0 +1,45 @@
+<div ng-controller="AppCtrl" layout="column" style="height: 500px;" ng-cloak>
+
+    <section layout="row" flex>
+  
+      <md-sidenav class="md-sidenav-left" md-component-id="closeEventsDisabled"
+                  md-whiteframe="4" md-disable-close-events>
+  
+        <md-toolbar class="md-theme-indigo">
+          <h1 class="md-toolbar-tools">Disabled Close Events</h1>
+        </md-toolbar>
+  
+        <md-content layout-margin="">
+          <p>
+            This sidenav is showing the backdrop, but users can't close the
+             sidenav by clicking on the backdrop or pressing the 'Escape' key.
+          </p>
+          <md-button ng-click="toggleSidenav()" class="md-accent">
+            Close this Sidenav
+          </md-button>
+        </md-content>
+  
+      </md-sidenav>
+  
+      <md-content flex layout-padding>
+  
+        <div layout="column" layout-align="top center">
+          <p>
+            Developers can disable closing the sidenav on backdrop clicks and
+             'Escape' key events.<br/>
+          </p>
+  
+          <div>
+            <md-button ng-click="toggleSidenav()" class="md-raised md-primary">
+              Open Sidenav
+            </md-button>
+          </div>
+  
+        </div>
+  
+      </md-content>
+  
+    </section>
+  
+  </div>
+  

src/components/sidenav/demoDisableCloseEvents/script.js

@@ -0,0 +1,11 @@
+angular
+  .module('disableCloseEventsSidenavDemo', ['ngMaterial'])
+  .controller('AppCtrl', function ($scope, $mdSidenav) {
+    $scope.toggleSidenav = buildToggler('closeEventsDisabled');
+
+    function buildToggler(componentId) {
+      return function() {
+        $mdSidenav(componentId).toggle();
+      };
+    }
+  });

src/components/sidenav/sidenav.js

@@ -231,6 +231,7 @@ function SidenavFocusDirective() {
  *
  * @param {expression=} md-is-open A model bound to whether the sidenav is opened.
  * @param {boolean=} md-disable-backdrop When present in the markup, the sidenav will not show a backdrop.
+ * @param {boolean=} md-disable-close-events When present in the markup, clicking the backdrop or pressing the 'Escape' key will not close the sidenav.
  * @param {string=} md-component-id componentId to use with $mdSidenav service.
  * @param {expression=} md-is-locked-open When this expression evaluates to true,
  * the sidenav 'locks open': it falls into the content's flow instead
@@ -302,6 +303,12 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $mdInterac
     if (!attr.hasOwnProperty('mdDisableBackdrop')) {
       backdrop = $mdUtil.createBackdrop(scope, "md-sidenav-backdrop md-opaque ng-enter");
     }
+    
+    // If md-disable-close-events is set on the sidenav we will disable
+    // backdrop click and Escape key events
+    if (attr.hasOwnProperty('mdDisableCloseEvents')) {
+      var disableCloseEvents = true;
+    }
 
     element.addClass('_md');     // private md component indicator for styling
     $mdTheming(element);
@@ -351,8 +358,12 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $mdInterac
       var focusEl = $mdUtil.findFocusTarget(element) || $mdUtil.findFocusTarget(element,'[md-sidenav-focus]') || element;
       var parent = element.parent();
 
-      parent[isOpen ? 'on' : 'off']('keydown', onKeyDown);
-      if (backdrop) backdrop[isOpen ? 'on' : 'off']('click', close);
+      // If the user hasn't set the disable close events property we are adding
+      // click and escape events to close the sidenav
+      if ( !disableCloseEvents ) {
+        parent[isOpen ? 'on' : 'off']('keydown', onKeyDown);
+        if (backdrop) backdrop[isOpen ? 'on' : 'off']('click', close);
+      }
 
       var restorePositioning = updateContainerPositions(parent, isOpen);
 

src/components/sidenav/sidenav.spec.js

@@ -59,6 +59,40 @@ describe('mdSidenav', function() {
       expect($rootScope.show).toBe(false);
     }));
 
+    describe('disable click and Escape key events if md-disable-close-events is set to true',
+      function() {
+        it('should not close on escape and still show the backdrop', 
+          inject(function($rootScope, $material, $mdConstant, $timeout) {
+            var el = setup('md-is-open="show" md-disable-close-events');
+            $rootScope.$apply('show = true');
+      
+            $material.flushOutstandingAnimations();
+            el.parent().triggerHandler({
+              type: 'keydown',
+              keyCode: $mdConstant.KEY_CODE.ESCAPE
+            });
+            $timeout.flush();
+            var backdrop = el.parent().find('md-backdrop');
+
+            expect($rootScope.show).toBe(true);
+            expect(backdrop.length).toBe(1);
+        }));
+
+        it('should not close on backdrop click and still show the backdrop',
+          inject(function($rootScope, $material, $timeout) {
+            var el = setup('md-is-open="show" md-disable-close-events');
+            $rootScope.$apply('show = true');
+      
+            $material.flushOutstandingAnimations();
+            el.parent().find('md-backdrop').triggerHandler('click');
+            $timeout.flush();
+            var backdrop = el.parent().find('md-backdrop');        
+
+            expect($rootScope.show).toBe(true);
+            expect(backdrop.length).toBe(1);        
+        }));
+    });
+
     it('should show a backdrop by default', inject(function($rootScope, $material) {
       var el = setup('md-is-open="show"');
       $rootScope.$apply('show = true');