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 working dog!

Browse Source
This commit is contained in:
Max Lynch
2013-09-21 14:42:15 -05:00
parent 8e8688c7e6
commit 4ffada9f1e
2 changed files with 39 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
hacking/SideMenuController.js
View File

@ -18,6 +18,17 @@
this.content.endDrag = function(e) {
_this._endDrag(e);
};
/*
// 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);
*/
};
SideMenuController.prototype = {
@ -102,7 +113,6 @@
// what the drag velocity is
var ratio = this.getOpenRatio();
if(ratio == 0)
return;
@ -115,36 +125,38 @@
//this.openPercentage(0);
//}
var sign = ratio && ratio / Math.abs(ratio);
// Left panel, More than positive half, too slow
if((ratio > 0.5 || ratio < -0.5) && velocityX < velocityThreshold) {
this.openPercentage(sign * 100);
}
// Left or Right Panel, Less than +/- half, too slow
else if(ratio <= 0.5 && ratio >= -0.5 && velocityX < velocityThreshold) {
// Going right, less than half, too slow (snap back)
if(ratio > 0 && ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
this.openPercentage(0);
}
// Left panel, Going left, quickly
else if(direction == 'left' && ratio >= 0 && velocityX >= velocityThreshold) {
this.openPercentage(0);
}
// Left panel, Going right, quickly
else if(direction == 'right' && ratio >= 0 && velocityX >= velocityThreshold) {
// Going left, more than half, too slow (snap back)
else if(ratio > 0.5 && direction == 'left' && velocityX < velocityThreshold) {
this.openPercentage(100);
}
// Right panel, Going left, quickly
else if(direction == 'left' && ratio <= 0 && 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);
}
// Right panel, Going right, quickly
else if(direction == 'right' && ratio <= 0 && velocityX >= velocityThreshold) {
this.openPercentage(0);
} else {
// 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);
}
},

10
hacking/sideMenu.html
View File

@ -22,12 +22,10 @@
</main>
</section>
<section id="my-left-panel" class="menu menu-left">
<ul class="list">
</ul>
<h1>LEFT</h1>
</section>
<section id="my-right-panel" class="menu menu-right">
<ul class="list">
</ul>
<h1>RIGHT</h1>
</section>
<script src="../../js/ionic-events.js"></script>
@ -47,7 +45,7 @@
}, this.el);
window.ionic.onGesture('release', function(e) {
_this.endDrag && _this._endDrag(e);
_this.endDrag && _this.endDrag(e);
}, this.el);
};
Controller.prototype = {
@ -75,7 +73,7 @@
var l = new SideMenu({ el: document.getElementById('my-left-panel'), width: 270 });
var r = new SideMenu({ el: document.getElementById('my-right-panel'), width: 270 });
var c = new Controller({ el: document.createElement('content') });
var c = new Controller({ el: document.getElementById('content'), animateClass: 'menu-animated' });
var ctrl = new SideMenuController({
left: l,