javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Side menu content scoping fix

Browse Source
This commit is contained in:
Max Lynch
2013-10-04 10:16:50 -05:00
parent 48c716af1e
commit 1212945df8
5 changed files with 147 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
dist/ionic-angular.js vendored
View File

@ -165,33 +165,6 @@ angular.module('ionic.ui.sideMenu', [])
bringUp: function() {
$scope.rightZIndex = 0;
}
},
content: {
onDrag: function(e) {},
endDrag: function(e) {},
getTranslateX: function() {
/*
var r = /translate3d\((-?.+)px/;
var d = r.exec(this.el.style.webkitTransform);
if(d && d.length > 0) {
return parseFloat(d[1]);
}
*/
return $scope.contentTranslateX || 0;
},
setTranslateX: function(amount) {
$scope.contentTranslateX = amount;
$scope.$apply();
},
enableAnimation: function() {
//this.el.classList.add(this.animateClass);
$scope.animationEnabled = true;
},
disableAnimation: function() {
//this.el.classList.remove(this.animateClass);
$scope.animationEnabled = false;
}
}
});
@ -204,7 +177,7 @@ angular.module('ionic.ui.sideMenu', [])
controller: 'SideMenuCtrl',
replace: true,
transclude: true,
template: '<div class="view"><div ng-transclude></div></div>',
template: '<div class="view" ng-transclude></div>',
}
})
@ -212,6 +185,7 @@ angular.module('ionic.ui.sideMenu', [])
return {
restrict: 'CA',
require: '^sideMenuCtrl',
scope: true,
compile: function(element, attr, transclude) {
return function($scope, $element, $attr, sideMenuCtrl) {
window.ionic.onGesture('drag', function(e) {
@ -222,17 +196,27 @@ angular.module('ionic.ui.sideMenu', [])
sideMenuCtrl._endDrag(e);
}, $element[0]);
$scope.$watch('contentTranslateX', function(value) {
$element[0].style.webkitTransform = 'translate3d(' + value + 'px, 0, 0)';
});
$scope.$watch('animationEnabled', function(isAnimationEnabled) {
if(isAnimationEnabled) {
sideMenuCtrl.setContent({
onDrag: function(e) {},
endDrag: function(e) {},
getTranslateX: function() {
return $scope.contentTranslateX || 0;
},
setTranslateX: function(amount) {
$scope.contentTranslateX = amount;
$scope.$apply();
$element[0].style.webkitTransform = 'translate3d(' + amount + 'px, 0, 0)';
},
enableAnimation: function() {
//this.el.classList.add(this.animateClass);
$scope.animationEnabled = true;
$element[0].classList.add('menu-animated');
} else {
},
disableAnimation: function() {
//this.el.classList.remove(this.animateClass);
$scope.animationEnabled = false;
$element[0].classList.remove('menu-animated');
}
});
};
}

113
dist/ionic.js vendored
View File

@ -2341,38 +2341,57 @@ ionic.controllers.NavController.prototype = {
;
(function(ionic) {
/**
* The SideMenuController is a controller with a left and/or right menu that
* can be slid out and toggled. Seen on many an app.
*
* The right or left menu can be disabled or not used at all, if desired.
*/
ionic.controllers.SideMenuController = function(options) {
var self = this;
self.left = options.left;
self.right = options.right;
self.content = options.content;
this.left = options.left;
this.right = options.right;
this.content = options.content;
self._rightShowing = false;
self._leftShowing = false;
this._rightShowing = false;
this._leftShowing = false;
this._isDragging = false;
this.content.onDrag = function(e) {
self._handleDrag(e);
};
if(this.content) {
this.content.onDrag = function(e) {
self._handleDrag(e);
};
this.content.endDrag = function(e) {
self._endDrag(e);
};
/*
// Bind release and drag listeners
window.ion.onGesture('release', function(e) {
self._endDrag(e);
}, self.center);
window.ion.onGesture('drag', function(e) {
self._handleDrag(e);
}, self.center);
*/
this.content.endDrag = function(e) {
self._endDrag(e);
};
}
};
ionic.controllers.SideMenuController.prototype = {
/**
* Set the content view controller if not passed in the constructor options.
*
* @param {object} content
*/
setContent: function(content) {
var self = this;
this.content = content;
this.content.onDrag = function(e) {
self._handleDrag(e);
};
this.content.endDrag = function(e) {
self._endDrag(e);
};
},
/**
* Toggle the left menu to open 100%
*/
toggleLeft: function() {
var openAmount = this.getOpenAmount();
if(openAmount > 0) {
@ -2381,6 +2400,10 @@ ionic.controllers.NavController.prototype = {
this.openPercentage(100);
}
},
/**
* Toggle the right menu to open 100%
*/
toggleRight: function() {
var openAmount = this.getOpenAmount();
if(openAmount < 0) {
@ -2389,9 +2412,20 @@ ionic.controllers.NavController.prototype = {
this.openPercentage(-100);
}
},
/**
* @return {float} The amount the side menu is open, either positive or negative for left (positive), or right (negative)
*/
getOpenAmount: function() {
return this.content.getTranslateX() || 0;
},
/**
* @return {float} The ratio of open amount over menu width. For example, a
* menu of width 100 open 50 pixels would be open 50% or a ratio of 0.5. Value is negative
* for right menu.
*/
getOpenRatio: function() {
var amount = this.getOpenAmount();
if(amount >= 0) {
@ -2399,9 +2433,20 @@ ionic.controllers.NavController.prototype = {
}
return amount / this.right.width;
},
/**
* @return {float} The percentage of open amount over menu width. For example, a
* menu of width 100 open 50 pixels would be open 50%. Value is negative
* for right menu.
*/
getOpenPercentage: function() {
return this.getOpenRatio() * 100;
},
/**
* Open the menu with a given percentage amount.
* @param {float} percentage The percentage (positive or negative for left/right) to open the menu.
*/
openPercentage: function(percentage) {
var p = percentage / 100;
var maxLeft = this.left.width;
@ -2412,6 +2457,12 @@ ionic.controllers.NavController.prototype = {
this.openAmount(maxRight * p);
}
},
/**
* Open the menu the given pixel amount.
* @param {float} amount the pixel amount to open the menu. Positive value for left menu,
* negative value for right menu (only one menu will be visible at a time).
*/
openAmount: function(amount) {
var maxLeft = this.left.width;
var maxRight = this.right.width;
@ -2445,6 +2496,14 @@ ionic.controllers.NavController.prototype = {
this.left.pushDown();
}
},
/**
* 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
* releases the touch, the left menu should snap open (animated, of course).
*
* @param {Event} e the gesture event to use for snapping
*/
snapToRest: function(e) {
// We want to animate at the end of this
this.content.enableAnimation();
@ -2501,9 +2560,13 @@ ionic.controllers.NavController.prototype = {
this.openPercentage(0);
}
},
// End a drag with the given event
_endDrag: function(e) {
this.snapToRest(e);
},
// Initialize a drag with the given event
_initDrag: function(e) {
this.content.disableAnimation();
this._isDragging = true;
@ -2511,6 +2574,8 @@ ionic.controllers.NavController.prototype = {
this._offsetX = 0;
this._lastX = 0;
},
// Handle a drag event
_handleDrag: function(e) {
if(!this._isDragging) {
this._initDrag(e);
@ -2520,7 +2585,7 @@ ionic.controllers.NavController.prototype = {
this._offsetX = this.getOpenAmount();
}
//console.log('Dragging page', this._startX, this._lastX, this._offsetX, e);
var newX = this._offsetX + (this._lastX - this._startX);
this.openAmount(newX);

2
example/toderp2/js/app.js
View File

@ -2,8 +2,6 @@ angular.module('ionic.todo', [
'ionic.todo.services',
'ionic.todo.controllers',
'ionic.service',
'ionic.ui.nav',
'ionic.ui.sideMenu',

24
js/controllers/sideMenuController.js
View File

@ -17,13 +17,15 @@
this._leftShowing = false;
this._isDragging = false;
this.content.onDrag = function(e) {
self._handleDrag(e);
};
if(this.content) {
this.content.onDrag = function(e) {
self._handleDrag(e);
};
this.content.endDrag = function(e) {
self._endDrag(e);
};
this.content.endDrag = function(e) {
self._endDrag(e);
};
}
};
ionic.controllers.SideMenuController.prototype = {
@ -33,7 +35,17 @@
* @param {object} content
*/
setContent: function(content) {
var self = this;
this.content = content;
this.content.onDrag = function(e) {
self._handleDrag(e);
};
this.content.endDrag = function(e) {
self._endDrag(e);
};
},
/**

56
js/ext/angular/src/directive/ionicSideMenu.js vendored
View File

@ -25,33 +25,6 @@ angular.module('ionic.ui.sideMenu', [])
bringUp: function() {
$scope.rightZIndex = 0;
}
},
content: {
onDrag: function(e) {},
endDrag: function(e) {},
getTranslateX: function() {
/*
var r = /translate3d\((-?.+)px/;
var d = r.exec(this.el.style.webkitTransform);
if(d && d.length > 0) {
return parseFloat(d[1]);
}
*/
return $scope.contentTranslateX || 0;
},
setTranslateX: function(amount) {
$scope.contentTranslateX = amount;
$scope.$apply();
},
enableAnimation: function() {
//this.el.classList.add(this.animateClass);
$scope.animationEnabled = true;
},
disableAnimation: function() {
//this.el.classList.remove(this.animateClass);
$scope.animationEnabled = false;
}
}
});
@ -64,7 +37,7 @@ angular.module('ionic.ui.sideMenu', [])
controller: 'SideMenuCtrl',
replace: true,
transclude: true,
template: '<div class="view"><div ng-transclude></div></div>',
template: '<div class="view" ng-transclude></div>',
}
})
@ -72,6 +45,7 @@ angular.module('ionic.ui.sideMenu', [])
return {
restrict: 'CA',
require: '^sideMenuCtrl',
scope: true,
compile: function(element, attr, transclude) {
return function($scope, $element, $attr, sideMenuCtrl) {
window.ionic.onGesture('drag', function(e) {
@ -82,17 +56,27 @@ angular.module('ionic.ui.sideMenu', [])
sideMenuCtrl._endDrag(e);
}, $element[0]);
$scope.$watch('contentTranslateX', function(value) {
$element[0].style.webkitTransform = 'translate3d(' + value + 'px, 0, 0)';
});
$scope.$watch('animationEnabled', function(isAnimationEnabled) {
if(isAnimationEnabled) {
sideMenuCtrl.setContent({
onDrag: function(e) {},
endDrag: function(e) {},
getTranslateX: function() {
return $scope.contentTranslateX || 0;
},
setTranslateX: function(amount) {
$scope.contentTranslateX = amount;
$scope.$apply();
$element[0].style.webkitTransform = 'translate3d(' + amount + 'px, 0, 0)';
},
enableAnimation: function() {
//this.el.classList.add(this.animateClass);
$scope.animationEnabled = true;
$element[0].classList.add('menu-animated');
} else {
},
disableAnimation: function() {
//this.el.classList.remove(this.animateClass);
$scope.animationEnabled = false;
$element[0].classList.remove('menu-animated');
}
});
};
}