experimenting with pan rendering...

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

ui (gen4)/features/ui.js

@@ -1801,6 +1801,8 @@ var ControlActions = actions.Actions({
 
 		'ribbon-pan-threshold': 30,
 		'control-in-progress-timeout': 100,
+
+		'animation-frame-renderer': true,
 	},
 
 	// Ribbon pan "event"...
@@ -1820,6 +1822,7 @@ var ControlActions = actions.Actions({
 			// Not for direct use.
 		})],
 
+	// XXX still a bit lagging behind in chrome -- can we go faster??
 	// XXX this is really slow/buggy on IE and odd on FF...
 	toggleRibbonPanHandling: ['Interface/Toggle ribbon pan handling',
 		toggler.Toggler(null,
@@ -1830,12 +1833,33 @@ var ControlActions = actions.Actions({
 			'handling-pan',
 			function(state){
 				var that = this
+
+				// render framework...
+				// XXX make this global to handle other stuff...
+				// XXX does this offer any real advantages???
+				var render_data = {}
+				var render = function(){
+					for(var rgid in render_data){
+						var r = render_data[rgid]
+						delete render_data[rgid]
+
+						r.ribbon.transform({ x: r.x })
+					}
+					renderer = requestAnimationFrame(render)
+				}
+				var renderer
+
+
+				var stop_scroll = this.__scroll_prevnter = 
+					this.__scroll_prevnter || function(evt){ event.preventDefault() }
 				var handler = this.__pan_handler = this.__pan_handler || function(_, target){
 					// XXX
 					var that = this
+
 					var r = this.ribbons.getRibbon(target)
 					var rgid = this.ribbons.getElemGID(r)
-					var data = false
+
+					var data
 					var post_handlers
 
 					// setup dragging...
@@ -1851,6 +1875,7 @@ var ControlActions = actions.Actions({
 									threshold: this.config['ribbon-pan-threshold'],
 								})
 
+						r.on('touchmove mousemove', stop_scroll)
 						r.on('pan', function(evt){
 							//evt.stopPropagation()
 
@@ -1884,8 +1909,25 @@ var ControlActions = actions.Actions({
 									left: $(this).transform('x'),
 									pointers: g.pointers.length,
 								}
+
+								// restart the renderer...
+								renderer = renderer && cancelAnimationFrame(renderer)
+								if(that.config['animation-frame-renderer']){
+									renderer = requestAnimationFrame(render)
+								}
 							}
 
+
+							// animation frame render...
+							if(renderer){
+								// queue a render...
+								render_data[rgid] = {
+									ribbon: r,
+									x: data.left + (g.deltaX / s),
+								}
+
+							// inline render...
+							} else {
 								// do the actual move...
 								//d.setOffset(this, data.left + (g.deltaX / s))
 								r.transform({x: data.left + (g.deltaX / s)})
@@ -1893,6 +1935,7 @@ var ControlActions = actions.Actions({
 								/* XXX this seems to offer no speed advantages 
 								 * 		vs. .setOffset(..) but does not play
 								 * 		well with .updateRibbon(..)
+								 *
 								r	
 									.velocity('stop')
 									.velocity({ 
@@ -1900,7 +1943,8 @@ var ControlActions = actions.Actions({
 										translateY: 0, 
 										translateZ: 0,
 									}, 0)
-							*/
+								//*/
+							}
 
 
 							// update ribbon when "pulling" with two fingers...
@@ -1914,7 +1958,8 @@ var ControlActions = actions.Actions({
 								that.updateRibbon(that.ribbons.getImageByPosition('center', r))
 							}
 
-							// when done...
+
+							// we are done...
 							if(g.isFinal){
 								var central = that.ribbons.getImageByPosition('center', r)
 
@@ -1949,27 +1994,28 @@ var ControlActions = actions.Actions({
 								// load stuff if needed...
 								that.updateRibbon(central)
 								
-								/*
 								// XXX add inertia....
+								/*
 								r.velocity({
 									translateX: (data.left + ((g.deltaX + (g.velocityX * 10)) / s)) +'px'
 								}, 'easeInSine')
 								*/
 
+								// see if we need to change focus...
+								var current_ribbon = that.data.getRibbon()
+								if(current_ribbon == rgid){
+									var gid = that.ribbons.getElemGID(central)
 									// silently focus central image...
 									if(that.config['focus-central-image'] == 'silent'){
-									var gid = that.ribbons.getElemGID(central)
-
-									that.data.focusImage(gid, rgid)
+										that.data.focusImage(gid)
 										that.ribbons.focusImage(a.current)
 										
 									// focus central image in a normal manner...
 									} else if(that.config['focus-central-image']){
-									var gid = that.ribbons.getElemGID(central)
-
-									that.data.focusImage(gid, rgid)
+										that.data.focusImage(gid)
 										that.focusImage()
 									}
+								}
 
 								data = false
 
@@ -2012,7 +2058,11 @@ var ControlActions = actions.Actions({
 							// XXX this does not remove the hammer trigger
 							// 		...just the jQuery handler is cleared
 							.off('pan')
+							.off('touchmove mousemove', stop_scroll)
 							.removeData('hammer')
+
+						// XXX can this be a spot for a race???
+						renderer = renderer && cancelAnimationFrame(renderer)
 					})
 				}
 			})],

ui (gen4)/lib/jli.js

@@ -1046,12 +1046,11 @@ var getAnimationFrame = (window.requestAnimationFrame
 		})
 
 
-var cancelAnimationFrame = (window.cancelRequestAnimationFrame 
+var cancelAnimationFrame = (window.cancelAnimationFrame 
 		|| window.webkitCancelAnimationFrame 
-		|| window.webkitCancelRequestAnimationFrame 
-		|| window.mozCancelRequestAnimationFrame
-		|| window.oCancelRequestAnimationFrame
-		|| window.msCancelRequestAnimationFrame
+		|| window.mozCancelAnimationFrame
+		|| window.oCancelAnimationFrame
+		|| window.msCancelAnimationFrame
 		|| clearTimeout)