Skip to content
This repository was archived by the owner on May 4, 2022. It is now read-only.

Commit 9b7230e

Browse files
dennybiasiollidennybiasiolli
committed
feat(sidemenu): managing display-type attribute of ion-side-menu
1 parent efef23a commit 9b7230e

File tree

3 files changed

+76
-22
lines changed

3 files changed

+76
-22
lines changed

‎js/angular/controller/sideMenuController.js‎

Lines changed: 56 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ IonicModule
1111
'$rootScope',
1212
function($scope, $attrs, $ionicSideMenuDelegate, $ionicPlatform, $ionicBody, $ionicHistory, $ionicScrollDelegate, IONIC_BACK_PRIORITY, $rootScope) {
1313
var self = this;
14-
var rightShowing, leftShowing, isDragging;
14+
var isDragging;
1515
var startX, lastX, offsetX, isAsideExposed;
1616
var enableMenuWithBackViews = true;
1717

@@ -61,7 +61,11 @@ function($scope, $attrs, $ionicSideMenuDelegate, $ionicPlatform, $ionicBody, $io
6161
if (arguments.length === 0) {
6262
shouldOpen = openAmount <= 0;
6363
}
64-
self.content.enableAnimation();
64+
if (self.left.displayType == 'overlay') {
65+
self.left.enableAnimation();
66+
} else {
67+
self.content.enableAnimation();
68+
}
6569
if (!shouldOpen) {
6670
self.openPercentage(0);
6771
$rootScope.$emit('$ionicSideMenuClose', 'left');
@@ -80,7 +84,11 @@ function($scope, $attrs, $ionicSideMenuDelegate, $ionicPlatform, $ionicBody, $io
8084
if (arguments.length === 0) {
8185
shouldOpen = openAmount >= 0;
8286
}
83-
self.content.enableAnimation();
87+
if (self.right.displayType == 'overlay') {
88+
self.right.enableAnimation();
89+
} else {
90+
self.content.enableAnimation();
91+
}
8492
if (!shouldOpen) {
8593
self.openPercentage(0);
8694
$rootScope.$emit('$ionicSideMenuClose', 'right');
@@ -111,7 +119,17 @@ function($scope, $attrs, $ionicSideMenuDelegate, $ionicPlatform, $ionicBody, $io
111119
* @return {float} The amount the side menu is open, either positive or negative for left (positive), or right (negative)
112120
*/
113121
self.getOpenAmount = function() {
114-
return self.content && self.content.getTranslateX() || 0;
122+
var retOpenAmount = 0;
123+
if ((isNaN(retOpenAmount) || retOpenAmount === 0) && self.right && self.right.displayType == 'overlay') {
124+
retOpenAmount = self.right.getTranslateX();
125+
}
126+
if ((isNaN(retOpenAmount) || retOpenAmount === 0) && self.left && self.left.displayType == 'overlay') {
127+
retOpenAmount = self.left.getTranslateX();
128+
}
129+
if ((isNaN(retOpenAmount) || retOpenAmount === 0) && self.content) {
130+
retOpenAmount = self.content.getTranslateX();
131+
}
132+
return retOpenAmount;
115133
};
116134

117135
/**
@@ -181,6 +199,18 @@ function($scope, $attrs, $ionicSideMenuDelegate, $ionicPlatform, $ionicBody, $io
181199
var maxLeft = self.left && self.left.width || 0;
182200
var maxRight = self.right && self.right.width || 0;
183201

202+
var overlayLeft = self.left && self.left.displayType == 'overlay' || false;
203+
var overlayRight = self.right && self.right.displayType == 'overlay' || false;
204+
var openLeft = overlayLeft && self.left.getTranslateX() || 0;
205+
var openRight = overlayRight && self.right.getTranslateX() || 0;
206+
var openContent = self.content.getTranslateX() || 0;
207+
208+
if (amount > maxLeft) {
209+
amount = maxLeft;
210+
} else if (amount < -maxRight) {
211+
amount = -maxRight;
212+
}
213+
184214
// Check if we can move to that side, depending if the left/right panel is enabled
185215
if (!(self.left && self.left.isEnabled) && amount > 0) {
186216
self.content.setTranslateX(0);
@@ -192,31 +222,30 @@ function($scope, $attrs, $ionicSideMenuDelegate, $ionicPlatform, $ionicBody, $io
192222
return;
193223
}
194224

195-
if (leftShowing && amount > maxLeft) {
196-
self.content.setTranslateX(maxLeft);
197-
return;
198-
}
199-
200-
if (rightShowing && amount < -maxRight) {
201-
self.content.setTranslateX(-maxRight);
202-
return;
225+
if (amount > 0) {
226+
if (overlayLeft) { self.left.setTranslateX(amount); }
227+
if (overlayRight && openRight) { self.right.setTranslateX(0); }
228+
if (!(overlayLeft && openLeft)) { self.content.setTranslateX(overlayLeft ? 0 : amount); }
229+
} else if (amount < 0) {
230+
if (overlayRight) { self.right.setTranslateX(amount); }
231+
if (overlayLeft && openLeft) { self.left.setTranslateX(0); }
232+
if (!(overlayRight && openRight)) { self.content.setTranslateX(overlayRight ? 0 : amount); }
233+
} else /* if (amount === 0) */ {
234+
if (overlayLeft && openLeft) { self.left.setTranslateX(amount); }
235+
if (overlayRight && openRight) { self.right.setTranslateX(amount); }
236+
if (!(overlayRight && openRight) && openContent) { self.content.setTranslateX(amount); }
203237
}
204238

205-
self.content.setTranslateX(amount);
206-
207-
leftShowing = amount > 0;
208-
rightShowing = amount < 0;
209-
210239
if (amount > 0) {
211240
// Push the z-index of the right menu down
212-
self.right && self.right.pushDown && self.right.pushDown();
241+
self.right && self.right.displayType != 'overlay' && self.right.pushDown && self.right.pushDown();
213242
// Bring the z-index of the left menu up
214-
self.left && self.left.bringUp && self.left.bringUp();
243+
self.left && self.left.displayType != 'overlay' && self.left.bringUp && self.left.bringUp();
215244
} else {
216245
// Bring the z-index of the right menu up
217-
self.right && self.right.bringUp && self.right.bringUp();
246+
self.right && self.right.displayType != 'overlay' && self.right.bringUp && self.right.bringUp();
218247
// Push the z-index of the left menu down
219-
self.left && self.left.pushDown && self.left.pushDown();
248+
self.left && self.left.displayType != 'overlay' && self.left.pushDown && self.left.pushDown();
220249
}
221250
};
222251

@@ -348,6 +377,12 @@ function($scope, $attrs, $ionicSideMenuDelegate, $ionicPlatform, $ionicBody, $io
348377
isDragging = true;
349378
// Initialize dragging
350379
self.content.disableAnimation();
380+
if (self.left.displayType == 'overlay') {
381+
self.left.disableAnimation();
382+
}
383+
if (self.right.displayType == 'overlay') {
384+
self.right.disableAnimation();
385+
}
351386
offsetX = self.getOpenAmount();
352387
}
353388

‎js/angular/directive/sideMenu.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,11 @@ IonicModule
3737
angular.isUndefined(attr.displayType) && attr.$set('displayType', 'push');
3838

3939
element.addClass('menu menu-' + attr.side);
40+
if (attr.displayType == 'overlay') {
41+
element.addClass('menu-animated');
42+
element[0].style[attr.side] = '-' + attr.width + 'px';
43+
element[0].style.zIndex = 2147483647; // top most, maximum zIndex value
44+
}
4045

4146
return function($scope, $element, $attr, sideMenuCtrl) {
4247
$scope.side = $attr.side || 'left';

‎js/views/sideMenuView.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,21 @@
3535
},
3636
setDisplayType: function(displayType) {
3737
this.displayType = displayType;
38-
}
38+
},
39+
enableAnimation: function() {
40+
this.animationEnabled = true;
41+
this.el.classList.add('menu-animated');
42+
},
43+
disableAnimation: function() {
44+
this.animationEnabled = false;
45+
this.el.classList.remove('menu-animated');
46+
},
47+
getTranslateX: function() {
48+
return parseFloat(this.el.style[ionic.CSS.TRANSFORM].replace('translate3d(', '').split(',')[0]);
49+
},
50+
setTranslateX: ionic.animationFrameThrottle(function(x) {
51+
this.el.style[ionic.CSS.TRANSFORM] = 'translate3d(' + x + 'px, 0, 0)';
52+
})
3953
});
4054

4155
ionic.views.SideMenuContent = ionic.views.View.inherit({

0 commit comments

Comments
 (0)