added inertial scroll and scroll limiting in ribbon mode...

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

TODO.otl

@@ -5,21 +5,14 @@
 		| touchdown point.
 		[_] BUG: no drag threshold on excludedElements (TouchSwipe)
 		| stalled...
-	[_] 64% general todo
+	[_] 65% general todo
-		[_] 0% STUB: build a UI around current iscroll to allow time for internal scroll devel
+		[_] 60% build a custom scroll lib...
-			[_] manually resize pages to screen on load
+			[X] 100% features:
-			[_] scale .content ot fit in page
-			| this will temporarily disable these features:
-				groups (depends on style)
-				page background images
-			[_] disable snapping in ribbon mode
-		[_] 36% build a custom scroll lib...
-			[_] 66% features:
 				[X] drag/scroll
-				[_] inertial
+				[X] inertial
 				[X] snap
 				| if enabled, on release, detect nearest snap-point and scroll to it.
-			[_] 65% tragets
+			[X] 100% tragets
 				[X] smooth scroll on devices (iscroll)
 				| adaptive transitions, etc.
 				[X] snap scroll to markers (a-la iscroll)
@@ -27,22 +20,19 @@
 						[X] left (iscroll)
 						[X] center
 						[X] right
-				[_] flexible event system
+				[X] flexible event system
 					[X] pre/post events
-					[_] ability to modify action data before it runs
+					[X] ability to cancel current action
-					[_] ability to cancel current action
 					| like stop scrolling at a given point.
-					[_] ability to take over and do something manually
-				[_] all actions callable
 				[X] both x and y axis support (x is a priority)
-			[_] scroll phases
+			[X] scroll phases
 				[X] user scroll phase
 				| from mousedown/touchstart and to mouseup/touchend
-				[_] auto scroll phase
+				[X] auto scroll phase
 				| from mouseup/touchend and untill scrollend
 				|
 				| must account for speed...
-					[_] momentum
+					[X] momentum
 					[X] snap
 			[_] 0% actions
 				[_] 0% .scrollTo(target)

layout-iscroll2.html

@@ -115,6 +115,7 @@ $(document).ready(function(){
 
 	window.CLICK_THRESHOLD = 10
 	window.SNAP_TO_PAGES_IN_RIBBON = false
+	window.INITIAL_TIME = 200
 
 	// XXX make this a default setup in the lib...
 	window.MagazineScroller = makeScrollHandler($('.viewer'), {
@@ -149,23 +150,89 @@ $(document).ready(function(){
 				return
 			}
 
+			var pages = $('.page')
+			var mag = $('.magazine')
+
 			// swipe left/right...
 			// XXX add swipe up/down...
 			if(!isNavigationViewRelative()){
 				var cur = $('.current.page')
 				if(distance >= CLICK_THRESHOLD){
+					setTransitionDuration(mag, INITIAL_TIME)
 					return nextPage(cur)
 				} else if(distance <= -CLICK_THRESHOLD){
+					setTransitionDuration(mag, INITIAL_TIME)
 					return prevPage(cur)
 				}
 			}
 
 			// this makes things snap...
-			// XXX add innertia if we are not snapping...
+			if(SNAP_TO_PAGES_IN_RIBBON){
-			SNAP_TO_PAGES_IN_RIBBON && setCurrentPage()
+				return setCurrentPage()
+			}
+
+			// innertial scroll...
+			var t = INITIAL_TIME * (1+Math.abs(speed))
+			// XXX this is only horisontal at this point...
+			var at = getElementShift(mag).left
+			var to = at + (t*speed)
+			var first = getMagazineOffset(pages.first(), null, 'center')
+			var last = getMagazineOffset(pages.last(), null, 'center')
+
+			// filter out really small speeds...
+			if(Math.abs(speed) > 0.5){
+				// check bounds...
+				if(to > first){
+					// trim the time proportionally...
+					var _t = t
+					t = Math.abs(t * ((at-first)/(at-to)))
+					console.log(_t, t)
+					to = first
+					setTransitionEasing(mag, 'linear')
+				} else if(to < last){
+					// trim the time proportionally...
+					var _t = t
+					t = Math.abs(t * ((at-last)/(at-to)))
+					console.log(_t, t)
+					to = last
+					setTransitionEasing(mag, 'linear')
+
+				} else {
+					setTransitionEasing(mag, 'ease-out')
+				}
+
+				setTransitionDuration(mag, t)
+				setElementTransform(mag, to)
+
+				// restore defaults...
+				// XXX this is a bit dumb at this point...
+				// XXX run this as a transition end handler...
+				setTimeout(function(){
+					setTransitionEasing(mag, 'ease-out')
+					setTransitionDuration(mag, INITIAL_TIME)
+				}, t+10)
+
+			// do not let the user scroll out of view...
+			} else {
+				if(at > first){
+					setTransitionEasing(mag, 'ease-in')
+					setTransitionDuration(mag, INITIAL_TIME)
+					//setCurrentPage(0)
+					setElementTransform(mag, first)
+
+				} else if(at < last){
+					setTransitionEasing(mag, 'ease-in')
+					setTransitionDuration(mag, INITIAL_TIME)
+					//setCurrentPage(-1)
+					setElementTransform(mag, last)
+				}
+			}
 		},
 	}).start()
 
+	// XXX stub...
+	setTransitionEasing($('.magazine'), 'ease-out')
+
 	// expand the templates...
 	runMagazineTemplates()
 

lib/jli.js

@@ -315,6 +315,19 @@ function getElementShift(elem){
 }
 
 
+function setTransitionEasing(elem, ease){
+	if(typeof(ms) == typeof(0)){
+		ms = ms + 'ms'
+	}
+	return elem.css({
+		'transition-timing-function': ease, 
+		'-moz-transition-timing-function': ease,
+		'-o-transition-timing-function': ease,
+		'-ms-transition-timing-function': ease,
+		'-webkit-transition-timing-function': ease
+	})
+}
+
 function setTransitionDuration(elem, ms){
 	if(typeof(ms) == typeof(0)){
 		ms = ms + 'ms'
@@ -611,7 +624,7 @@ function makeScrollHandler(root, config){
 			return
 		}
 		// XXX get real transition duration...
-		setTransitionDuration($('.magazine'), 200)
+		setTransitionDuration(scrolled, 200)
 
 		x = touch ? event.changedTouches[0].pageX : evt.clientX
 		y = touch ? event.changedTouches[0].pageY : evt.clientY