feat(sidemenu): leaving content active when menu is open

js/angular/controller/sideMenuController.js

@@ -146,18 +146,21 @@ function($scope, $attrs, $ionicSideMenuDelegate, $ionicPlatform, $ionicBody, $io
    */
   self.openPercentage = function(percentage) {
     var p = percentage / 100;
+    var leaveContentActive = false;
 
     if (self.left && percentage >= 0) {
       self.openAmount(self.left.width * p);
+      leaveContentActive = self.left.leaveContentActive;
     } else if (self.right && percentage < 0) {
       self.openAmount(self.right.width * p);
+      leaveContentActive = self.right.leaveContentActive;
     }
 
-    // add the CSS class "menu-open" if the percentage does not
-    // equal 0, otherwise remove the class from the body element
-    $ionicBody.enableClass((percentage !== 0), 'menu-open');
+    // add the CSS class "menu-open" if don't want to leave content active and the
+    // percentage does not equal 0, otherwise remove the class from the body element
+    $ionicBody.enableClass((!leaveContentActive && percentage !== 0), 'menu-open');
 
-    self.content.setCanScroll(percentage == 0);
+    self.content.setCanScroll(leaveContentActive || percentage == 0);
   };
 
   /*

js/angular/directive/sideMenu.js

@@ -13,7 +13,8 @@
  * <ion-side-menu
  *   side="left"
  *   width="myWidthValue + 20"
- *   is-enabled="shouldLeftSideMenuBeEnabled()">
+ *   is-enabled="shouldLeftSideMenuBeEnabled()"
+ *   leave-content-active="shouldLeftSideMenuLeaveMainContentActive()">
  * </ion-side-menu>
  * ```
  * For a complete side menu example, see the
@@ -22,6 +23,7 @@
  * @param {string} side Which side the side menu is currently on.  Allowed values: 'left' or 'right'.
  * @param {boolean=} is-enabled Whether this side menu is enabled.
  * @param {number=} width How many pixels wide the side menu should be.  Defaults to 275.
+ * @param {boolean=} leave-content-active Whether this menu should leave main content active when menu is opened.  Defaults to false.
  */
 IonicModule
 .directive('ionSideMenu', function() {
@@ -32,6 +34,7 @@ IonicModule
     compile: function(element, attr) {
       angular.isUndefined(attr.isEnabled) && attr.$set('isEnabled', 'true');
       angular.isUndefined(attr.width) && attr.$set('width', '275');
+      angular.isUndefined(attr.leaveContentActive) && attr.$set('leaveContentActive', 'false');
 
       element.addClass('menu menu-' + attr.side);
 
@@ -41,7 +44,8 @@ IonicModule
         var sideMenu = sideMenuCtrl[$scope.side] = new ionic.views.SideMenu({
           width: attr.width,
           el: $element[0],
-          isEnabled: true
+          isEnabled: true,
+          leaveContentActive: false
         });
 
         $scope.$watch($attr.width, function(val) {
@@ -53,8 +57,10 @@ IonicModule
         $scope.$watch($attr.isEnabled, function(val) {
           sideMenu.setIsEnabled(!!val);
         });
+        $scope.$watch($attr.leaveContentActive, function(val) {
+          sideMenu.setLeaveContentActive(!!val);
+        });
       };
     }
   };
 });
-

js/views/sideMenuView.js

@@ -11,6 +11,7 @@
       this.el = opts.el;
       this.isEnabled = (typeof opts.isEnabled === 'undefined') ? true : opts.isEnabled;
       this.setWidth(opts.width);
+      this.leaveContentActive = (typeof opts.leaveContentActive === 'undefined') ? false : opts.leaveContentActive;
     },
     getFullWidth: function() {
       return this.width;
@@ -31,6 +32,9 @@
       if(this.el.style.zIndex !== '-1') {
         this.el.style.zIndex = '-1';
       }
+    },
+    setLeaveContentActive: function(leaveContentActive) {
+      this.leaveContentActive = leaveContentActive;
     }
   });
 

test/unit/angular/controller/sideMenuController.unit.js

@@ -69,6 +69,18 @@ describe('$ionicSideMenus controller', function() {
     expect(ctrl.right.isEnabled).toEqual(true);
   });
 
+  // Menu leaveContentActive
+  it('should set leaveContentActive', function() {
+    ctrl.left.setLeaveContentActive(true);
+    ctrl.right.setLeaveContentActive(true);
+    expect(ctrl.left.leaveContentActive).toEqual(true);
+    expect(ctrl.right.leaveContentActive).toEqual(true);
+    ctrl.left.setLeaveContentActive(false);
+    ctrl.right.setLeaveContentActive(false);
+    expect(ctrl.left.leaveContentActive).toEqual(false);
+    expect(ctrl.right.leaveContentActive).toEqual(false);
+  });
+
   // Menu widths
   it('should init widths', function() {
     expect(ctrl.left.width).toEqual(270);

test/unit/views/sideMenu.unit.js

@@ -12,5 +12,6 @@ describe('SideMenu', function() {
   it('Should init', function() {
     expect(menu.width).toEqual(270);
     expect(menu.isEnabled).toEqual(true);
+    expect(menu.leaveContentActive).toEqual(false);
   });
 });