From b38ec2cc422b0e2bf6ea370d7e4bb071210bbd30 Mon Sep 17 00:00:00 2001 From: Mario Estrada Date: Fri, 24 Feb 2012 18:01:42 -0500 Subject: [PATCH 1/3] support for desktop flicking --- src/zepto.flickable.js | 46 +++++++++++++++++++++++++++++++++++++----- 1 file changed, 41 insertions(+), 5 deletions(-) diff --git a/src/zepto.flickable.js b/src/zepto.flickable.js index e84757e..da3a555 100644 --- a/src/zepto.flickable.js +++ b/src/zepto.flickable.js @@ -133,6 +133,14 @@ $(this).flickable('flickDown', settings.onFlickDown); }, + mousedown: function(e) { + window.flick_down = $(this)[0]; + e.preventDefault(); + + _resetEventData(e); + $(this).trigger("onStart"); + }, + touchstart: function(e) { _resetEventData(e); $(this).trigger("onStart"); @@ -155,6 +163,31 @@ }); + $('body').bind({ + mousemove: function(e) { + el = $(window.flick_down); + + if(el && el.length) { + if(settings.preventDefault) { + e.preventDefault(); + } + _updateDelta(e); + el.trigger("onMove"); + } + }, + mouseup: function(e) { + + el = $(window.flick_down); + window.flick_down = null; + + if(el) { + e.preventDefault(); + + _endTouch(e); + el.trigger("onEnd"); + } + } + }); if(!_browserSupports('transform')){ // Browser does not support CSS3 transitions ಠ_ಠ @@ -547,8 +580,8 @@ var pageX, pageY; // Android and iOS structure event data differently - (typeof e.touches[0].pageX != 'undefined') ? pageX=e.touches[0].pageX : pageX=e.pageX; - (typeof e.touches[0].pageY != 'undefined') ? pageY=e.touches[0].pageY : pageY=e.pageY; + (e.touches && typeof e.touches[0].pageX != 'undefined') ? pageX=e.touches[0].pageX : pageX=e.pageX; + (e.touches && typeof e.touches[0].pageY != 'undefined') ? pageY=e.touches[0].pageY : pageY=e.pageY; eventData = eventDataObject; eventData.start = {x:pageX, y:pageY, time: e.timeStamp}; @@ -567,8 +600,8 @@ var pageX, pageY; // Android and iOS structure event data differently - (typeof e.touches[0].pageX != 'undefined') ? pageX=e.touches[0].pageX : pageX=e.pageX; - (typeof e.touches[0].pageY != 'undefined') ? pageY=e.touches[0].pageY : pageY=e.pageY; + (e.touches && typeof e.touches[0].pageX != 'undefined') ? pageX=e.touches[0].pageX : pageX=e.pageX; + (e.touches && typeof e.touches[0].pageY != 'undefined') ? pageY=e.touches[0].pageY : pageY=e.pageY; var dirX, dirY, prevX = pageX, @@ -617,6 +650,9 @@ flickY = 0; if((speedX > flickThreshold)) { + el = $(window.flick_down); + if(el) + $(this).one('click', function(e) { e.preventDefault(); }); (Math.abs(eventData.delta.dist.x) >= minTravelDistance) ? flickX = dirX : flickX = 0; } else if((speedY > flickThreshold)) { (Math.abs(eventData.delta.dist.y) >= minTravelDistance) ? flickY = dirY : flickY = 0; @@ -734,4 +770,4 @@ } -})( Zepto ); +})( Zepto ); \ No newline at end of file From f7a656aeafd6e406d91b4154c583c9c5bb46aa54 Mon Sep 17 00:00:00 2001 From: Mario Estrada Date: Fri, 24 Feb 2012 18:06:00 -0500 Subject: [PATCH 2/3] not using global variable to prevent conflicts --- src/zepto.flickable.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/zepto.flickable.js b/src/zepto.flickable.js index da3a555..4709443 100644 --- a/src/zepto.flickable.js +++ b/src/zepto.flickable.js @@ -11,7 +11,6 @@ * Zepto JavaScript Library */ (function( $ ){ - var eventData, eventDataObject = { @@ -38,7 +37,8 @@ flickableObjects = 0, // Number of flickable objects that have been initialised flickThreshold = 0.7, // Threshold in which a "touch and move" becomes a "flick" (the higher the number, the faster the swipe) minTravelDistance = 5, // This is the minimum distance in px the user's finger must travel for it to be considered a valid flick - debug = false; // If true, a floating div will display event data on screen during touches + debug = false, // If true, a floating div will display event data on screen during touches + element_moving; var methods = { @@ -134,7 +134,7 @@ }, mousedown: function(e) { - window.flick_down = $(this)[0]; + element_moving = $(this)[0]; e.preventDefault(); _resetEventData(e); @@ -165,7 +165,7 @@ $('body').bind({ mousemove: function(e) { - el = $(window.flick_down); + el = $(element_moving); if(el && el.length) { if(settings.preventDefault) { @@ -177,8 +177,8 @@ }, mouseup: function(e) { - el = $(window.flick_down); - window.flick_down = null; + el = $(element_moving); + element_moving = null; if(el) { e.preventDefault(); @@ -650,7 +650,7 @@ flickY = 0; if((speedX > flickThreshold)) { - el = $(window.flick_down); + el = $(element_moving); if(el) $(this).one('click', function(e) { e.preventDefault(); }); (Math.abs(eventData.delta.dist.x) >= minTravelDistance) ? flickX = dirX : flickX = 0; From 0e515e786f1f253bfdedef2770bccc2a2926d95d Mon Sep 17 00:00:00 2001 From: Mario Estrada Date: Fri, 24 Feb 2012 18:08:50 -0500 Subject: [PATCH 3/3] added click prevention when scrolling is vertical --- src/zepto.flickable.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/zepto.flickable.js b/src/zepto.flickable.js index 4709443..9562ee5 100644 --- a/src/zepto.flickable.js +++ b/src/zepto.flickable.js @@ -655,6 +655,8 @@ $(this).one('click', function(e) { e.preventDefault(); }); (Math.abs(eventData.delta.dist.x) >= minTravelDistance) ? flickX = dirX : flickX = 0; } else if((speedY > flickThreshold)) { + if(el) + $(this).one('click', function(e) { e.preventDefault(); }); (Math.abs(eventData.delta.dist.y) >= minTravelDistance) ? flickY = dirY : flickY = 0; }