diff --git a/js/angular/controller/sideMenuController.js b/js/angular/controller/sideMenuController.js index 6a120259d..e7616c3d7 100644 --- a/js/angular/controller/sideMenuController.js +++ b/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); }; /* diff --git a/js/angular/directive/sideMenu.js b/js/angular/directive/sideMenu.js index 1ab736794..14d3d06d7 100644 --- a/js/angular/directive/sideMenu.js +++ b/js/angular/directive/sideMenu.js @@ -13,7 +13,8 @@ * + * is-enabled="shouldLeftSideMenuBeEnabled()" + * leave-content-active="shouldLeftSideMenuLeaveMainContentActive()"> * * ``` * 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); + }); }; } }; }); - diff --git a/js/views/sideMenuView.js b/js/views/sideMenuView.js index 0bb600d22..7a1576856 100644 --- a/js/views/sideMenuView.js +++ b/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; } }); diff --git a/test/unit/angular/controller/sideMenuController.unit.js b/test/unit/angular/controller/sideMenuController.unit.js index 039f5605c..ad17a8e07 100644 --- a/test/unit/angular/controller/sideMenuController.unit.js +++ b/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); diff --git a/test/unit/views/sideMenu.unit.js b/test/unit/views/sideMenu.unit.js index d412770d4..9bbdcb52b 100644 --- a/test/unit/views/sideMenu.unit.js +++ b/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); }); });