added relative ribbon alignment, needs more testing...

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

ui/ImageGrid.js

@@ -60,12 +60,14 @@ function getScreenWidthInImages(){
 }
 
 
+// NOTE: in strict mode this will return null if no image is before the
+// 		target...
 // NOTE: if this can't find an image if an order less, it will return 
 // 		the first image in ribbon...
 // NOTE: this might return an empty target if the ribbon is empty...
 // XXX need tp make this loadable ribbon compatible -- the target may 
 // 		not be loaded...
-function getImageBefore(image, ribbon, mode){
+function getImageBefore(image, ribbon, mode, strict){
 	if(mode == null){
 		mode = NAV_DEFAULT
 	}
@@ -76,7 +78,7 @@ function getImageBefore(image, ribbon, mode){
 	var images = $(ribbon).find('.image').filter(mode)
 	// XXX need to process/format this correctly...
 	var order = JSON.parse(image.attr('order'))
-	var prev = images.first()
+	var prev = strict ? [] : images.first()
 
 	images.each(function(){
 		if(order < $(this).attr('order')){
@@ -293,9 +295,9 @@ function centerImage(image, mode){
 
 	// zero out top/left if set to anything other than a specific number...
 	var t = parseFloat(ribbons.css('top'))
-	t = t ? t : 0
+	t = !isNaN(t) ? t : 0
 	var l = parseFloat(ribbons.css('left'))
-	l = l ? l : 0
+	l = !isNaN(l) ? l : 0
 
 
 	var res = {
@@ -312,6 +314,51 @@ function centerImage(image, mode){
 	return image
 }
 
+// XXX this produces errors in marked-only mode...
+function centerRibbon(ribbon, mode){
+	if(mode == null){
+		//mode = 'css'
+		mode = 'animate'
+	}
+	ribbon = $(ribbon)
+	var cur = $('.current.image')
+
+	// if centering current ribbon, just center the image...
+	if(ribbon.find('.current.image').length > 0){
+		centerImage(cur, mode)
+		return ribbon
+	}
+
+	var scale = getElementScale($('.ribbon-set'))
+	var target = getImageBefore(null, ribbon, null, true)
+
+	if(target.length > 0){
+		var dl = getRelativeVisualPosition(target, $('.current.image')).left/scale
+		var l = parseFloat(ribbon.css('left'))
+		l = !isNaN(l) ? l : 0
+		l = {left: l + dl - ($('.image').outerWidth()/2)}
+
+	} else {
+		var dl = getRelativeVisualPosition(ribbon.find('.image').filter(NAV_DEFAULT).first(), $('.current.image')).left/scale
+		var l = parseFloat(ribbon.css('left'))
+		l = !isNaN(l) ? l : 0
+		l = {left: l + dl + ($('.image').outerWidth()/2)}
+	}
+
+	if(mode == 'animate'){
+		ribbon.stop().animate(l, 100, 'linear')
+	} else {
+		ribbons.css(res)
+	}
+
+	return ribbon
+}
+
+// a shorthand...
+function centerRibbons(mode){
+	return $('.ribbon').each(function(){ centerRibbon($(this), mode) })
+}
+
 
 
 /**********************************************************************

ui/keybindings3.js

@@ -32,10 +32,12 @@ var KEYBOARD_CONFIG = {
 							_STEPS_LEFT_TO_CHANGE_DIRECTION = 2
 					}
 					prevImage() 
+					centerRibbons()
 				},
 				// XXX prevScreenImages...
 				ctrl: function(){ 
 					prevScreenImages()
+					centerRibbons()
 				},
 				// XXX need to keep shift explicitly clear for editor...
 				/*
@@ -61,10 +63,12 @@ var KEYBOARD_CONFIG = {
 							_STEPS_LEFT_TO_CHANGE_DIRECTION = 2
 					}
 					nextImage() 
+					centerRibbons()
 				},
 				// XXX nextScreenImages...
 				ctrl: function(){ 
 					nextScreenImages()
+					centerRibbons()
 				},
 				// XXX need to keep shift explicitly clear for editor...
 				/*
@@ -95,22 +99,42 @@ var KEYBOARD_CONFIG = {
 		*/
 		Home: function(){
 				firstImage()
+				centerRibbons()
 			},
 		End: function(){
 				lastImage()
+				centerRibbons()
 			},
 
 
 		// combined navigation and editor actions...
 		Up: {
-				default: function(){ prevRibbon(DIRECTION) },
+				default: function(){ 
-				shift: function(){ shiftImageUp(null, DIRECTION) },
+					prevRibbon(DIRECTION) 
-				'ctrl+shift': function(){ shiftImageUpNewRibbon(null, DIRECTION) },
+					centerRibbons()
+				},
+				shift: function(){ 
+					shiftImageUp(null, DIRECTION) 
+					centerRibbons()
+				},
+				'ctrl+shift': function(){
+					shiftImageUpNewRibbon(null, DIRECTION) 
+					centerRibbons()
+				},
 			},
 		Down: {
-				default: function(){ nextRibbon(DIRECTION) },
+				default: function(){
-				shift: function(){ shiftImageDown(null, DIRECTION) },
+					nextRibbon(DIRECTION) 
-				'ctrl+shift': function(){ shiftImageDownNewRibbon(null, DIRECTION) },
+					centerRibbons()
+				},
+				shift: function(){
+					shiftImageDown(null, DIRECTION) 
+					centerRibbons()
+				},
+				'ctrl+shift': function(){
+					shiftImageDownNewRibbon(null, DIRECTION) 
+					centerRibbons()
+				},
 			},
 
 
@@ -130,7 +154,10 @@ var KEYBOARD_CONFIG = {
 
 		// XXX this is temporary, combine this with single image mode...
 		// XXX this should only work on single image mode...
-		F: function(){ toggleImageProportions() },
+		F: function(){ 
+				toggleImageProportions() 
+				centerRibbons()
+			},
 
 
 		// marking...
@@ -196,7 +223,10 @@ var KEYBOARD_CONFIG = {
 				ctrl: function(){ removeImageMarks('ribbon') },
 				shift: function(){ removeImageMarks('all') },
 			},
-		F2: function(){ toggleMarkedOnlyView() },
+		F2: function(){ 
+				toggleMarkedOnlyView() 
+				centerRibbons()
+			},
 	}
 }