reworked shift image up/down viewer actions...

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

ui (gen4)/data.js

@@ -1166,6 +1166,7 @@ module.DataPrototype = {
 	//
 	shiftImageLeft: function(gid){ return this.shiftImage(gid, -1, 'offset') }, // Gen2
 	shiftImageRight: function(gid){ return this.shiftImage(gid, 1, 'offset') }, // Gen2
+	// XXX these can remove ribbons, do we need to shift base ribbon???
 	shiftImageUp: function(gid){ 
 		var g = gid.constructor === Array ? gid[0] : gid
 		var r = this.getRibbonOrder(g)
@@ -1175,6 +1176,7 @@ module.DataPrototype = {
 		}
 		var res = this.shiftImage(gid, r-1) 
 		// clear empty ribbon...
+		r = r == 0 ? 1 : r
 		if(this.ribbons[this.ribbon_order[r]].len() == 0){
 			r = this.ribbon_order.splice(r, 1)[0]
 			delete this.ribbons[r]

ui (gen4)/ribbons.js

@@ -654,12 +654,13 @@ module.RibbonsPrototype = {
 		ribbon = ribbon.length == 0 ? this.createRibbon(target) : ribbon
 
 		var ribbons = this.viewer.find('.ribbon')
+
 		// normalize the position...
 		if(typeof(position) == typeof(123)){
 			position = position < 0 ? ribbons.length + position + 1 : position
 			position = position < 0 ? 0 : position
 		} else {
-			var p = this.getRibbonOrder(position)
+			position = this.getRibbonOrder(position)
 			// XXX what do we do if the target does not exist, i.e. p == -1 ????
 		}
 
@@ -671,7 +672,7 @@ module.RibbonsPrototype = {
 		if(ribbons.length == 0 || ribbons.length <= position){
 			this.viewer.find('.ribbon-set').append(ribbon)
 
-		} else if(i > position) {
+		} else if(i == -1 || i > position) {
 			ribbons.eq(position).before(ribbon)
 
 		// for placing after need to account for target ribbon removal...

ui (gen4)/viewer.js

@@ -30,6 +30,58 @@ function reloadAfter(transitions){
 	}
 }
 
+var updateImagePosition =
+module.updateImagePosition =
+function updateImagePosition(actions, target){
+	target = target instanceof jQuery ? actions.ribbons.getElemGID(target) : target
+	target = target || actions.current
+
+	var source_ribbon = actions.ribbons.getElemGID(actions.ribbons.getRibbon(target))
+	var source_order = actions.data.getImageOrder(target)
+
+	return function(){
+		actions.ribbons.preventTransitions()
+
+		var target_ribbon = actions.data.getRibbon(target)
+
+		// nothing changed...
+		if(source_ribbon == target_ribbon 
+				&& actions.data.getImageOrder(target) == source_order){
+			return
+		}
+
+		var to = actions.data.getImage(target, 'next')
+		if(to != null){
+			actions.ribbons.placeImage(target, to, 'before')
+
+		} else {
+			to = actions.data.getImage(target, 'prev')
+			if(to != null){
+				actions.ribbons.placeImage(target, to, 'after')
+
+			// new ribbon...
+			} else {
+				to = actions.data.getRibbon(target)
+
+				if(actions.ribbons.getRibbon(to).length == 0){
+					actions.ribbons.placeRibbon(to, actions.data.getRibbonOrder(target))
+				}
+
+				actions.ribbons.placeImage(target, to)
+			}
+		}
+
+		if(actions.data.getImages(source_ribbon).length == 0){
+			actions.ribbons.getRibbon(source_ribbon).remove()
+		}
+
+		actions.focusImage()
+
+		actions.ribbons.restoreTransitions(true)
+	}
+}
+
+
 
 /*********************************************************************/
 //
@@ -479,6 +531,11 @@ actions.Actions(Client, {
 				this.reload()
 			}
 		}],
+	// XXX make this better support partial data view...
+	// 		...at this point this first loads the full data and then 
+	// 		.focusImage(..) triggers a reload...
+	// 		.....another approach would be to avoid .reload() where 
+	// 		possible...
 	reload: ['Reload viewer',
 		function(){
 			this.ribbons.preventTransitions()
@@ -487,6 +544,7 @@ actions.Actions(Client, {
 				this.ribbons.updateData(this.data)
 				this.focusImage()
 
+				//this.ribbons.restoreTransitions(true)
 				this.ribbons.restoreTransitions()
 			}
 		}],
@@ -788,9 +846,13 @@ actions.Actions(Client, {
 		function(){  }],
 
 
-	// XXX are these cheating???
+	// NOTE: these work by getting the target position from .data...
-	shiftImageUp: [ reloadAfter() ],
+	shiftImageTo: [ 
-	shiftImageDown: [ reloadAfter() ],
+		function(target){ return updateImagePosition(this, target) }],
+	shiftImageUp: [ 
+		function(target){ return updateImagePosition(this, target) }],
+	shiftImageDown: [
+		function(target){ return updateImagePosition(this, target) }],
 
 	shiftImageLeft: [
 		function(target){
@@ -961,14 +1023,14 @@ actions.Actions({
 })
 
 
-// XXX I do not fully understand it yet, but PartialRibbons must be 
+// NOTE: I do not fully understand it yet, but PartialRibbons must be 
 // 		setup BEFORE RibbonAlignToFirst, otherwise the later will break
 // 		on shifting an image to a new ribbon...
 // 			To reproduce:
 // 				- setupe RibbonAlignToFirst first
 // 				- go to top ribbon
 // 				- shift image up
-// 		The two should be completely independent....
+// 		XXX The two should be completely independent....
 // XXX need to test and tweak with actual images...
 var PartialRibbons = 
 module.PartialRibbons = Feature({
@@ -1114,13 +1176,37 @@ module.BoundsIndicators = Feature({
 			.on('prevRibbon.pre firstRibbon.pre', tag, didAdvance('top'))
 
 			// vertical shifting...
-			.on('shiftImageUp.post', tag, 
+			.on('shiftImageUp.pre', tag, 
-				function(){ 
+				function(target){ 
-					that.flashIndicator(actions.ribbons.viewer, 'up')
+					target = target || this.current
+					var r0 = this.data.getRibbonOrder(target)
+					var l = this.data.getImages(r0).length
+
+					return function(){
+						var r1 = this.data.getRibbonOrder(target)
+						// when shifting last image of top ribbon (i.e. length == 1)
+						// up the state essentially will not change...
+						if(r0 == 0 && r1 == 0 && l == 1){
+							that.flashIndicator(this.ribbons.viewer, 'top')
+						} else {	
+							that.flashIndicator(this.ribbons.viewer, 'up')
+						}
+					}
 				})
-			.on('shiftImageDown.post', tag, 
+			.on('shiftImageDown.pre', tag, 
-				function(){ 
+				function(target){ 
-					that.flashIndicator(actions.ribbons.viewer, 'down') 
+					target = target || this.current
+					var r0 = this.data.getRibbonOrder(target)
+					var l = this.data.getImages(r0).length
+
+					return function(){
+						var r1 = this.data.getRibbonOrder(target)
+						if(r0 == r1 && r0 == this.data.ribbon_order.length-1 && l == 1){
+							that.flashIndicator(this.ribbons.viewer, 'bottom')
+						} else {
+							that.flashIndicator(this.ribbons.viewer, 'down') 
+						}
+					}
 				})
 
 			// horizontal shifting...
@@ -1128,15 +1214,15 @@ module.BoundsIndicators = Feature({
 				function(target){ 
 					if(target == null 
 							//&& actions.data.getImageOrder('ribbon') == 0){
-							&& actions.data.getImage('prev') == null){
+							&& this.data.getImage('prev') == null){
-						that.flashIndicator(actions.ribbons.viewer, 'start')
+						that.flashIndicator(this.ribbons.viewer, 'start')
 					}
 				})
 			.on('shiftImageRight.pre', tag, 
 				function(target){ 
 					if(target == null 
-							&& actions.data.getImage('next') == null){
+							&& this.data.getImage('next') == null){
-						that.flashIndicator(actions.ribbons.viewer, 'end')
+						that.flashIndicator(this.ribbons.viewer, 'end')
 					}
 				})
 	},