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

Velocity for dragging slide box

Browse Source
This commit is contained in:
Max Lynch
2013-10-16 07:12:59 -05:00
parent 7706149a9a
commit 6002991ba3
2 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
dist/js/ionic.js vendored
View File

@ -2280,6 +2280,7 @@ window.ionic = {
this.el = opts.el; this.el = opts.el;
this.dragThresholdX = opts.dragThresholdX || 10; this.dragThresholdX = opts.dragThresholdX || 10;
this.velocityXThreshold = opts.velocityXThreshold || 0.3;
// Listen for drag and release events // Listen for drag and release events
window.ionic.onGesture('drag', function(e) { window.ionic.onGesture('drag', function(e) {
@ -2345,8 +2346,6 @@ window.ionic = {
var _this = this, var _this = this,
finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX; finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX;
console.log("END");
window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
// We didn't have a drag, so just init and leave // We didn't have a drag, so just init and leave
@ -2389,8 +2388,16 @@ window.ionic = {
_this.slideIndex = Math.ceil(finalOffsetX / slideWidth); _this.slideIndex = Math.ceil(finalOffsetX / slideWidth);
// Negative offsetX to slide correctly if(e.gesture.velocityX > _this.velocityXThreshold) {
content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)'; if(e.gesture.direction == 'left') {
_this.slideToSlide(_this.slideIndex + 1);
} else if(e.gesture.direction == 'right') {
_this.slideToSlide(_this.slideIndex - 1);
}
} else {
// Negative offsetX to slide correctly
content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)';
}
_this._initDrag(); _this._initDrag();
}); });
@ -2402,7 +2409,6 @@ window.ionic = {
*/ */
_startDrag: function(e) { _startDrag: function(e) {
var offsetX, content; var offsetX, content;
console.log("START");
this._initDrag(); this._initDrag();
@ -2430,7 +2436,7 @@ window.ionic = {
*/ */
_handleDrag: function(e) { _handleDrag: function(e) {
var _this = this; var _this = this;
console.log("DRAG");
window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
var content; var content;

18
js/views/slideBox.js
View File

@ -14,6 +14,7 @@
this.el = opts.el; this.el = opts.el;
this.dragThresholdX = opts.dragThresholdX || 10; this.dragThresholdX = opts.dragThresholdX || 10;
this.velocityXThreshold = opts.velocityXThreshold || 0.3;
// Listen for drag and release events // Listen for drag and release events
window.ionic.onGesture('drag', function(e) { window.ionic.onGesture('drag', function(e) {
@ -79,8 +80,6 @@
var _this = this, var _this = this,
finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX; finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX;
console.log("END");
window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
// We didn't have a drag, so just init and leave // We didn't have a drag, so just init and leave
@ -123,8 +122,16 @@
_this.slideIndex = Math.ceil(finalOffsetX / slideWidth); _this.slideIndex = Math.ceil(finalOffsetX / slideWidth);
// Negative offsetX to slide correctly if(e.gesture.velocityX > _this.velocityXThreshold) {
content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)'; if(e.gesture.direction == 'left') {
_this.slideToSlide(_this.slideIndex + 1);
} else if(e.gesture.direction == 'right') {
_this.slideToSlide(_this.slideIndex - 1);
}
} else {
// Negative offsetX to slide correctly
content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)';
}
_this._initDrag(); _this._initDrag();
}); });
@ -136,7 +143,6 @@
*/ */
_startDrag: function(e) { _startDrag: function(e) {
var offsetX, content; var offsetX, content;
console.log("START");
this._initDrag(); this._initDrag();
@ -164,7 +170,7 @@
*/ */
_handleDrag: function(e) { _handleDrag: function(e) {
var _this = this; var _this = this;
console.log("DRAG");
window.requestAnimationFrame(function() { window.requestAnimationFrame(function() {
var content; var content;