Skip to content

Commit

Permalink
fix(sideMenu): Fix flashing when closing right side menu, closes #556
Browse files Browse the repository at this point in the history
  • Loading branch information
Adam Bradley committed Mar 1, 2014
1 parent 4d36671 commit a0d60d5
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 14 deletions.
26 changes: 14 additions & 12 deletions js/controllers/sideMenuController.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
this.right = options.right;
this.content = options.content;
this.dragThresholdX = options.dragThresholdX || 10;

this._rightShowing = false;
this._leftShowing = false;
this._isDragging = false;
Expand All @@ -32,7 +32,7 @@
},
/**
* Set the content view controller if not passed in the constructor options.
*
*
* @param {object} content
*/
setContent: function(content) {
Expand Down Expand Up @@ -147,17 +147,19 @@
if((this._leftShowing && amount > maxLeft) || (this._rightShowing && amount < -maxRight)) {
return;
}

this.content.setTranslateX(amount);

if(amount >= 0) {
this._leftShowing = true;
this._rightShowing = false;

// Push the z-index of the right menu down
this.right && this.right.pushDown && this.right.pushDown();
// Bring the z-index of the left menu up
this.left && this.left.bringUp && this.left.bringUp();
if(amount > 0) {
// Push the z-index of the right menu down
this.right && this.right.pushDown && this.right.pushDown();
// Bring the z-index of the left menu up
this.left && this.left.bringUp && this.left.bringUp();
}
} else {
this._rightShowing = true;
this._leftShowing = false;
Expand All @@ -171,7 +173,7 @@

/**
* Given an event object, find the final resting position of this side
* menu. For example, if the user "throws" the content to the right and
* menu. For example, if the user "throws" the content to the right and
* releases the touch, the left menu should snap open (animated, of course).
*
* @param {Event} e the gesture event to use for snapping
Expand All @@ -192,7 +194,7 @@
var velocityX = e.gesture.velocityX;
var direction = e.gesture.direction;

// Less than half, going left
// Less than half, going left
//if(ratio > 0 && ratio < 0.5 && direction == 'left' && velocityX < velocityThreshold) {
//this.openPercentage(0);
//}
Expand All @@ -216,17 +218,17 @@
else if(ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
this.openPercentage(-100);
}

// Going right, more than half, or quickly (snap open)
else if(direction == 'right' && ratio >= 0 && (ratio >= 0.5 || velocityX > velocityThreshold)) {
this.openPercentage(100);
}

// Going left, more than half, or quickly (span open)
else if(direction == 'left' && ratio <= 0 && (ratio <= -0.5 || velocityX > velocityThreshold)) {
this.openPercentage(-100);
}

// Snap back for safety
else {
this.openPercentage(0);
Expand Down
8 changes: 6 additions & 2 deletions js/ext/angular/test/sideMenu.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@

<div ng-controller="MenuCtrl">
<ion-side-menus>
<ion-pane ion-side-menu-content drag-content="$root.$draggy">
<ion-pane ion-side-menu-content>
<header class="bar bar-header bar-assertive">
<button class="button button-icon" ng-click="openLeft()"><i class="icon ion-navicon"></i></button>
<button class="button button-icon ion-navicon" ng-click="openLeft()"></button>
<h1 class="title">Slide me</h1>
<button class="button button-icon ion-navicon" ng-click="openRight()"></button>
</header>
<ion-content has-header="true">
<ion-toggle ng-model="$root.$draggy">Hello</ion-toggle>
Expand Down Expand Up @@ -63,6 +64,9 @@ <h1 class="title">Right</h1>
$scope.openLeft = function() {
$ionicSideMenuDelegate.toggleLeft($scope);
};
$scope.openRight = function() {
$ionicSideMenuDelegate.toggleRight($scope);
};
})
.controller('LeftCtrl', function($scope) {
$scope.value = true;
Expand Down

0 comments on commit a0d60d5

Please sign in to comment.