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

10
hacking/sideMenu.html
View File

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