refined the touch handler, still needs work on multitouch...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

TODO.otl

@@ -13,37 +13,37 @@
 				groups (depends on style)
 				page background images
 			[_] disable snapping in ribbon mode
-		[_] 0% build a custom scroll lib...
+		[_] 36% build a custom scroll lib...
-			[_] 0% features:
+			[_] 66% features:
-				[_] drag/scroll
+				[X] drag/scroll
 				[_] inertial
-				[_] snap
+				[X] snap
 				| if enabled, on release, detect nearest snap-point and scroll to it.
-			[_] 0% tragets
+			[_] 65% tragets
-				[_] smooth scroll on devices (iscroll)
+				[X] smooth scroll on devices (iscroll)
 				| adaptive transitions, etc.
-				[_] snap scroll to markers (a-la iscroll)
+				[X] snap scroll to markers (a-la iscroll)
-					[_] snap align
+					[X] snap align
-						[_] left (iscroll)
+						[X] left (iscroll)
-						[_] center
+						[X] center
-						[_] right
+						[X] right
 				[_] flexible event system
-					[_] pre/post events
+					[X] pre/post events
 					[_] ability to modify action data before it runs
 					[_] ability to cancel current action
 					| like stop scrolling at a given point.
 					[_] ability to take over and do something manually
 				[_] all actions callable
-				[_] both x and y axis support (x is a priority)
+				[X] both x and y axis support (x is a priority)
 			[_] scroll phases
-				[_] user scroll phase
+				[X] user scroll phase
 				| from mousedown/touchstart and to mouseup/touchend
 				[_] auto scroll phase
 				| from mouseup/touchend and untill scrollend
 				|
 				| must account for speed...
 					[_] momentum
-					[_] snap
+					[X] snap
 			[_] 0% actions
 				[_] 0% .scrollTo(target)
 				| must accept:

layout-iscroll2.html

@@ -12,7 +12,7 @@
 <style>
 
 .viewer {
-	overflow: auto;
+	overflow: hidden;
 }
 .magazine {
 	left: 150px;
@@ -113,70 +113,55 @@ $(document).ready(function(){
 		function(k){console.log(k)}))
 
 
-	window.THRESHOLD = 10
+	window.CLICK_THRESHOLD = 10
+	window.SNAP_TO_PAGES_IN_RIBBON = false
+
+	// XXX make this a default setup in the lib...
 	window.MagazineScroller = makeScrollHandler($('.viewer'), {
 		hScroll: true,
 		vScroll: false,
-		callback: function(speed, distance, touches){
+		callback: function(evt, speed, distance, touches){
+			// ignore situations when the user is still touching...
 			if(touches > 0){
-				return true
+				return
 			}
-			// XXX this is not too correct...
+
-			//		...make this mode specific...
+			// click/tap...
-			if(getMagazineScale() >= 1){
+			if(Math.abs(distance) < CLICK_THRESHOLD){
+				// click...
+				var target = $(evt.target)
+				target = getPageNumber(target.hasClass('page') ? target 
+										: target.parents('.page'))
+				if(target != -1){
+					togglePageView()
+					setCurrentPage(target)
+				}
+				return
+			}
+
+			// swipe left/right...
+			// XXX add swipe up/down...
+			if(!isNavigationViewRelative()){
 				var cur = $('.current.page')
-				if(distance > THRESHOLD){
+				if(distance >= CLICK_THRESHOLD){
 					return nextPage(cur)
-				} else if(distance < -THRESHOLD){
+				} else if(distance <= -CLICK_THRESHOLD){
 					return prevPage(cur)
 				}
 			}
-			setCurrentPage()
+
+			// this makes things snap...
+			SNAP_TO_PAGES_IN_RIBBON && setCurrentPage()
 		},
 	}).start()
 
-	//setMagazineScale(0.5)
-
-	// XXX need to setup style for android to work...
-	$('.viewer').css({overflow: 'hidden'})
-
 	// expand the templates...
 	runMagazineTemplates()
 
 	setCurrentPage(0)
-	//limit_scroll()
 })
 
 
-var SCROLL_LIMIT = 800 * 1.5
-
-function setup_scroll_limiter(){
-	$('.magazine').wrapAll($('<div class="scroller">'))
-	limit_scroll()
-}
-
-// XXX set the limit to next/prev page alignment...
-function limit_scroll(){
-	var W = $('.viewer').width()
-	var ml = parseFloat($('.scroller').css('margin-left')) || 0
-	var pos = $('.viewer').scrollLeft()
-	var c = -ml + pos + W/2
-	$('.scroller').css({
-		'margin-left': -(c-SCROLL_LIMIT),
-		'width': c+SCROLL_LIMIT
-	})
-	$('.viewer').scrollLeft(pos-ml-(c-SCROLL_LIMIT))
-}
-function clear_limits(){
-	var pos = $('.viewer').scrollLeft()
-	var l = parseFloat($('.scroller').css('margin-left'))
-	$('.scroller').css({
-		'margin-left': '',
-		'width': ''
-	})
-	$('.viewer').scrollLeft(pos - l)
-}
-
 </script>
 
 </head>

lib/jli.js

@@ -488,11 +488,14 @@ function makeKeyboardHandler(keybindings, unhandled){
 
 
 
+// XXX pass the actual event target to the callback...
 // XXX handle multiple touches...
 // 		- timeout on lift to count fingers...
 // XXX setup basic styles for the contained element...
 // XXX revise...
 // XXX test on other devices...
+// XXX BUG: on landing a second finger while scrolling the things goes 
+// 		haywhire...
 function makeScrollHandler(root, config){
 	root = $(root)
 
@@ -517,11 +520,15 @@ function makeScrollHandler(root, config){
 	var dt
 
 	function startMoveHandler(evt, callback){
-		// if we are already touching then just skip on this...
+		if(event.touches != null){
-		if(touches > 0){
+			touch = true
-			return false
 		}
 		touches = touch ? event.touches.length : 1
+		// if we are already touching then just skip on this...
+		// XXX test this...
+		if(touches > 1){
+			return false
+		}
 		prev_t = event.timeStamp || Date.now();
 		if(scroller.options.autoCancelEvents){
 			bounds = {
@@ -533,9 +540,6 @@ function makeScrollHandler(root, config){
 		}
 		scrolled = $(root.children()[0])
 		setTransitionDuration(scrolled, 0)
-		if(event.touches != null){
-			touch = true
-		}
 		scrolling = true
 		scroller.state = 'scrolling'
 		scroller.options.enabelStartEvent && root.trigger('userScrollStart')
@@ -606,7 +610,8 @@ function makeScrollHandler(root, config){
 		scroller.options.enableEndEvent && root.trigger('userScrollEnd', dx, dy, dt, start_x, start_y)
 		if(scroller.options.callback 
 				// XXX revise this....
-				&& scroller.options.callback(dx/dt, start_x-x, touches) === false 
+				// call the callback...
+				&& scroller.options.callback(evt, dx/dt, start_x-x, touches) === false 
 				|| touches == 0){
 			// cleanup and stop...
 			touch = false