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

Renamed panel to menu

Browse Source
This commit is contained in:
Max Lynch
2013-08-31 19:05:55 -05:00
parent 3f84ba6b86
commit 34f7c94d1b
3 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
js/controllers/ionic-leftrightmenu.js Normal file
View File

@ -0,0 +1,199 @@
/**
* The LeftRightPanelViewController makes it easy to have an interface
* with two hidden menus: one on the left, and one on the right.
*
* The main content supports dragging to show either panel, or the panel can be
* show/hidden through buttons elsewhere in the app.
*
* Either panel can be disabled based on the context in the app.
*/
(function(window, document, ion) {
ion.controllers = ion.controllers || {};
ion.controllers.LeftRightMenuViewController = function(options) {
var _this = this;
this.animateClass = options.animateClass;
this.left = options.left;
this.leftWidth = options.leftWidth;
this.right = options.right;
this.rightWidth = options.rightWidth;
this.center = options.center;
this._rightShowing = false;
this._leftShowing = false;
this._isLeftEnabled = true;
this._isRightEnabled = true;
// Bind release and drag listeners
window.ion.onGesture('release', function(e) {
_this._endDrag(e);
}, this.center);
window.ion.onGesture('drag', function(e) {
_this._handleDrag(e);
}, this.center);
};
ion.controllers.LeftRightMenuViewController.prototype = {
setIsLeftEnabled: function(isLeftEnabled) {
this._isLeftEnabled = isLeftEnabled;
},
setIsRightEnabled: function(isRightEnabled) {
this._isRightEnabled = isRightEnabled;
},
toggleLeft: function() {
var openAmount = this.getOpenAmount();
if(openAmount > 0) {
this.openPercentage(0);
} else {
this.openPercentage(100);
}
},
toggleRight: function() {
var openAmount = this.getOpenAmount();
if(openAmount < 0) {
this.openPercentage(0);
} else {
this.openPercentage(-100);
}
},
getOpenAmount: function() {
var r = /translate3d\((-?\d+)px/;
var d = r.exec(this.center.style.webkitTransform);
if(d && d.length > 0) {
return parseInt(d[1]);
}
return 0;
},
getOpenRatio: function() {
var amount = this.getOpenAmount();
if(amount >= 0) {
return amount / this.leftWidth;
}
return amount / this.rightWidth;
},
openPercentage: function(percentage) {
var p = percentage / 100;
var maxLeft = this.leftWidth;
var maxRight = this.rightWidth;
if(percentage >= 0) {
this.openAmount(maxLeft * p);
} else {
this.openAmount(maxRight * p);
}
},
openAmount: function(amount) {
var maxLeft = this.leftWidth;
var maxRight = this.rightWidth;
// Check if we can move to that side, depending if the left/right panel is enabled
if((!this._isLeftEnabled && amount > 0) || (!this._isRightEnabled && amount < 0)) {
return;
}
if((this._leftShowing && amount > maxLeft) || (this._rightShowing && amount < -maxRight)) {
return;
}
this.center.style.webkitTransform = 'translate3d(' + amount + 'px, 0, 0)';
if(amount >= 0) {
this._leftShowing = true;
this._rightShowing = false;
this.right.style.display = 'none';
this.left.style.display = 'block';
} else {
this._rightShowing = true;
this._leftShowing = false;
this.right.style.display = 'block';
this.left.style.display = 'none';
}
},
snapToRest: function(e) {
// We want to animate at the end of this
this.center.classList.add(this.animateClass);
this._isDragging = false;
// Check how much the panel is open after the drag, and
// what the drag velocity is
var ratio = this.getOpenRatio();
if(ratio == 0)
return;
var velocityThreshold = 0.3;
var velocityX = e.gesture.velocityX
var direction = e.gesture.direction;
// Less than half, going left
//if(ratio > 0 && ratio < 0.5 && direction == 'left' && velocityX < velocityThreshold) {
//this.openPercentage(0);
//}
// Going right, less than half, too slow (snap back)
if(ratio > 0 && ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
this.openPercentage(0);
}
// Going left, more than half, too slow (snap back)
else if(ratio > 0.5 && direction == 'left' && velocityX < velocityThreshold) {
this.openPercentage(100);
}
// Going left, less than half, too slow (snap back)
else if(ratio < 0 && ratio > -0.5 && direction == 'left' && velocityX < velocityThreshold) {
this.openPercentage(0);
}
// Going right, more than half, too slow (snap back)
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);
}
},
_endDrag: function(e) {
this.snapToRest(e);
},
_initDrag: function(e) {
this.center.classList.remove(this.animateClass);
this._isDragging = true;
this._startX = 0;
this._offsetX = 0;
this._lastX = 0;
},
_handleDrag: function(e) {
if(!this._isDragging) {
this._initDrag(e);
this._startX = e.gesture.touches[0].pageX;
this._lastX = this._startX;
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);
this._lastX = e.gesture.touches[0].pageX;
}
};
})(this, document, ion = this.ion || {});