moved curring image indicator handling to current image + some fixes and refactoring...

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

ui (gen4)/features/ui-chrome.js

@@ -153,6 +153,8 @@ var CurrentImageIndicatorActions = actions.Actions({
 
 		'current-image-indicator-hide-timeout': 250,
 
+		'current-image-indicator-restore-delay': 500,
+
 		// this can be:
 		// 	'hide'			- simply hide on next/prev screen action
 		// 					  and show on focus image.
@@ -337,6 +339,33 @@ module.CurrentImageIndicator = core.ImageGridFeatures.Feature({
 					}, this.config['current-image-shift-timeout'])
 				}
 			}],
+
+		// hide and remove current image indicator...
+		// NOTE: it will be reconstructed on 
+		// 		next .focusImage(..)
+		['ribbonPanning.pre',
+			function(){
+				this.__current_image_indicator_restore_timeout
+					&& clearTimeout(this.__current_image_indicator_restore_timeout)
+				delete this.__current_image_indicator_restore_timeout
+
+				var m = this.ribbons.viewer
+					.find('.current-marker')
+						.velocity({opacity: 0}, {
+							duration: 100,
+							complete: function(){
+								m.remove()
+							},
+						})
+
+			}],
+		['ribbonPanning.post',
+			function(){
+				var that = this
+				this.__current_image_indicator_restore_timeout = setTimeout(function(){
+					that.updateCurrentImageIndicator()
+				}, this.config['current-image-indicator-restore-delay'] || 500)
+			}],
 	],
 })
 

ui (gen4)/features/ui.js

@@ -1823,6 +1823,16 @@ var ControlActions = actions.Actions({
 		})],
 
 	// XXX still a bit lagging behind in chrome -- can we go faster??
+	// XXX idea: can we use scroll to place ribbons horizontally?
+	// 		...the bad side to this is that it will require us to add an
+	// 		extra container per ribbon and somehow disable the scrollbar
+	// 		without disabling scrolling...
+	// 		...this can also be applied to ribbon-set for vertical 
+	// 		scrolling...
+	// 		...setting margins would control the limits to scrolling...
+	// 		...the main advantage here is that the browser will do all 
+	// 		the heavy lifting and do it faster than we can ever hope to
+	// 		do it in JS...
 	// XXX this is really slow/buggy on IE and odd on FF...
 	toggleRibbonPanHandling: ['Interface/Toggle ribbon pan handling',
 		toggler.Toggler(null,
@@ -1859,7 +1869,7 @@ var ControlActions = actions.Actions({
 					var r = this.ribbons.getRibbon(target)
 					var rgid = this.ribbons.getElemGID(r)
 
-					var data
+					var data = false
 					var post_handlers
 
 					// setup dragging...
@@ -1891,18 +1901,6 @@ var ControlActions = actions.Actions({
 								that.__control_in_progress = (that.__control_in_progress || 0) + 1
 								post_handlers = that.ribbonPanning.pre(that, [rgid])
 
-								// hide and remove current image indicator...
-								// NOTE: it will be reconstructed on 
-								// 		next .focusImage(..)
-								var m = that.ribbons.viewer
-									.find('.current-marker')
-										.velocity({opacity: 0}, {
-											duration: 100,
-											complete: function(){
-												m.remove()
-											},
-										})
-
 								// store initial position...
 								data = {
 									//left: d.getOffset(this).left,
@@ -1961,33 +1959,37 @@ var ControlActions = actions.Actions({
 
 							// we are done...
 							if(g.isFinal){
+								data = false
+
+								// XXX is this the correct way to do this???
+								requestAnimationFrame(function(){
 									var central = that.ribbons.getImageByPosition('center', r)
 
+									var rl = r.offset().left
+									var cl = central && central.offset().left
+									var w = central && central.width()
+									var W = that.ribbons.viewer.width()
+
 									// check if central if off screen, if yes, 
 									// nudge it into user-accessible area...
 									//
 									// we are fully off screen -- focus first/last image...
 									if(central == null){
-									var gid = that.data.getImage(
+										var gid = that.data.getImage(rl < 0 ? -1 : 0, rgid)
-											r.offset().left < 0 ? -1 : 0, rgid)
 
 										that.centerImage(gid)
 										central = that.ribbons.getImage(gid)
 
 									// partly out the left -- show last image...
-								} else if(central.offset().left < 0){
+									} else if(cl < 0){
 										r.transform({ 
-										x: r.transform('x') - (central.offset().left / s)
+											x: r.transform('x') - (cl / s) 
 										})
 
 									// partly out the right -- show first image...
-								} else if(central.offset().left + (central.width()*s) 
+									} else if(cl + (w*s) > W){
-										> that.ribbons.viewer.width()){
 										r.transform({
-										x: r.transform('x') 
+											x: r.transform('x') + (W - (cl + w*s)) / s
-											+ (that.ribbons.viewer.width() 
-												- (central.offset().left 
-													+ central.width()*s)) / s
 										})
 									}
 
@@ -2017,9 +2019,11 @@ var ControlActions = actions.Actions({
 										}
 									}
 
-								data = false
+									// this is not time-critical so do it outside the animation...
-
+									setTimeout(function(){
 										that.ribbonPanning.post(that, post_handlers)
+									}, 0)
+								})
 
 								setTimeout(function(){
 									that.__control_in_progress -= 1