more work on actions, basic editing and navigation now working...

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

ui (gen4)/data.js

@@ -247,12 +247,9 @@ module.DataPrototype = {
 		prefix = prefix == null ? 'G' : prefix
 		var gid = prefix + Date.now()
 		while(this.ribbon_order.indexOf(gid) >= 0 
-				|| this.order.indexOf(gid) >= 0
+				|| this.order.indexOf(gid) >= 0){
-				|| this._gid_cache.indexOf(gid) >= 0){
 			gid = prefix + Date.now()
 		}
-		// XXX not sure if this is a good idea...
-		this._gid_cache.push(gid)
 		return gid
 	},
 	
@@ -1019,28 +1016,42 @@ module.DataPrototype = {
 	//
 	// NOTE: shiftImageUp/shiftImageDown will create new ribbons when 
 	// 		shifting from first/last ribbons respectively.
+	// NOTE: shiftImageUp/shiftImageUp will remove an empty ribbon after
+	// 		shifting the last image out...
 	// NOTE: none of these change .current
 	//
 	// XXX should these be here??
 	shiftImageLeft: function(gid){ return this.shiftImage(gid, -1, 'offset') }, // Gen2
 	shiftImageRight: function(gid){ return this.shiftImage(gid, 1, 'offset') }, // Gen2
-	// XXX test...
 	shiftImageUp: function(gid){ 
 		var g = gid.constructor.name == 'Array' ? gid[0] : gid
+		var r = this.getRibbonOrder(g)
 		// check if we need to create a ribbon here...
-		if(this.getRibbonOrder(g) == 0){
+		if(r == 0){
 			this.newRibbon(g)
 		}
-		return this.shiftImage(gid, this.getRibbonOrder(g)-1) 
+		var res = this.shiftImage(gid, r-1) 
+		// clear empty ribbon...
+		if(this.ribbons[this.ribbon_order[r]].len() == 0){
+			r = this.ribbon_order.splice(r, 1)[0]
+			delete this.ribbons[r]
+		}
+		return res
 	},
-	// XXX test...
 	shiftImageDown: function(gid){ 
 		var g = gid.constructor.name == 'Array' ? gid[0] : gid
+		var r = this.getRibbonOrder(g)
 		// check if we need to create a ribbon here...
-		if(this.getRibbonOrder(g) == this.ribbon_order.length-1){
+		if(r == this.ribbon_order.length-1){
 			this.newRibbon(g, 'below')
 		}
-		return this.shiftImage(gid, this.getRibbonOrder(g)+1) 
+		var res = this.shiftImage(gid, r+1) 
+		// clear empty ribbon...
+		if(this.ribbons[this.ribbon_order[r]].len() == 0){
+			r = this.ribbon_order.splice(r, 1)[0]
+			delete this.ribbons[r]
+		}
+		return res
 	},
 
 	// Shift ribbon vertically...
@@ -1458,8 +1469,6 @@ module.DataPrototype = {
 		this.ribbon_order = [] 
 		this.ribbons = {}
 
-		this._gid_cache = []
-
 		return this
 	},
 

ui (gen4)/ribbons.js

@@ -448,7 +448,13 @@ module.RibbonsPrototype = {
 	//	.placeImage(target, image, 'after')
 	//		-> image
 	//
-	// NOTE: mode is defaults to 'before'.
+	// Place target at ribbon start/end:
+	//	.placeImage(target, ribbon)
+	//	.placeImage(target, ribbon, 'before')
+	//	.placeImage(target, ribbon, 'after')
+	//		-> image
+	//
+	// NOTE: mode defaults to 'before'.
 	// NOTE: if image gid does not exist it will be created.
 	//
 	// XXX interaction animation...
@@ -458,6 +464,7 @@ module.RibbonsPrototype = {
 		mode = mode == null ? 'before' : mode
 		var img = this.getImage(target)
 		img = img.length == 0 ? this.createImage(target) : img
+		var r = this.getRibbon(to)
 
 		// offset on same ribbon...
 		if(typeof(to) == typeof(123)){
@@ -470,6 +477,19 @@ module.RibbonsPrototype = {
 			to = images.length > 0 
 				? images.eq(Math.min(Math.abs(i), images.length)-1) 
 				: img
+			if(to === img){
+				return to
+			}
+
+		// append/prepend to ribbon...
+		} else if(r.length > 0 && r.hasClass('ribbon')){
+			if(mode == 'before'){
+				r.append(img)
+			} else {
+				r.prepend(img)
+			}
+			return this.updateImage(img)
+
 		// relative to image...
 		} else {
 			var i = mode == 'before' ? -1 : 1

ui (gen4)/ui.js

@@ -102,6 +102,21 @@ module.GLOBAL_KEYBOARD = {
 		F: {
 			ctrl: 'F11',
 		},
+
+		// XXX testing...
+		Home: doc('', function(){ a.firstImage() }),
+		End: doc('', function(){ a.lastImage() }),
+		Left: doc('', function(){ a.prevImage() }),
+		Right: doc('', function(){ a.nextImage() }),
+		Up: {
+			default: doc('', function(){ a.prevRibbon() }),
+			shift: doc('', function(){ a.shiftImageUp() }),
+		},
+		Down: {
+			default: doc('', function(){ a.nextRibbon() }),
+			shift: doc('', function(){ a.shiftImageDown() }),
+		}
+
 	},
 }	
 

ui (gen4)/viewer.js

@@ -165,13 +165,15 @@ actions.Actions({
 	lastRibbon: ['Focus next ribbon',
 		function(){ this.focusRibbon('last') }],
 
+	// XXX check that going up/down must be stable and not drift to 
+	// 		adjacent images...
 	prevRibbon: ['Focus previous ribbon',
 		function(){ this.focusRibbon('before') }],
 	nextRibbon: ['Focus next ribbon',
 		function(){ this.focusRibbon('after') }],
 
 
-	// basic editing...
+	// basic ribbon editing...
 	//
 	// NOTE: for all of these, current/ribbon image is a default...
 	//
@@ -187,6 +189,9 @@ actions.Actions({
 
 				var cur = this.data.getImage()
 				var next = this.data.getImage(direction)
+				next = next == null 
+					? this.data.getImage(direction == 'next' ? 'prev' : 'next') 
+					: next
 
 				this.data.shiftImageUp(cur)
 				this.focusImage(next)
@@ -207,6 +212,9 @@ actions.Actions({
 
 				var cur = this.data.getImage()
 				var next = this.data.getImage(direction)
+				next = next == null 
+					? this.data.getImage(direction == 'next' ? 'prev' : 'next') 
+					: next
 
 				this.data.shiftImageDown(cur)
 				this.focusImage(next)
@@ -216,49 +224,70 @@ actions.Actions({
 				this.data.shiftImageDown(target)
 			}
 		}],
-	shiftImageUpNewRibbon: ['',
+	shiftImageUpNewRibbon: ['Shift image up to a new empty ribbon',
 		function(target){
 			this.data.newRibbon(target)
 			this.shiftImageUp(target)
 		}],
-	shiftImageDownNewRibbon: ['',
+	shiftImageDownNewRibbon: ['Shift image down to a new empty ribbon',
 		function(target){
 			this.data.newRibbon(target, 'below')
 			this.shiftImageUp(target)
 		}],
 	// XXX is tracking direction here correct???
-	shiftImageLeft: ['',
+	shiftImageLeft: ['Shift image left',
 		function(target){ 
 			if(target == null){
 				this.direction = 'left'
 			}
 			this.data.shiftImageLeft(target) 
-			// XXX is this the right way to go/???
 			this.focusImage()
 		}],
 	// XXX is tracking direction here correct???
-	shiftImageRight: ['',
+	shiftImageRight: ['Shift image right',
 		function(target){ 
 			if(target == null){
 				this.direction = 'right'
 			}
-			this.data.shiftImageLeft(target) 
+			this.data.shiftImageRight(target) 
-			// XXX is this the right way to go/???
 			this.focusImage()
 		}],
 
-	shiftRibbonUp: ['',
+	shiftRibbonUp: ['Shift ribbon up',
 		function(target){ 
 			this.data.shiftRibbonUp(target) 
 			// XXX is this the right way to go/???
 			this.focusImage()
 		}],
-	shiftRibbonDown: ['',
+	shiftRibbonDown: ['Shift ribbon down',
 		function(target){ 
 			this.data.shiftRibbonDown(target)
 			// XXX is this the right way to go/???
 			this.focusImage()
 		}],
+	
+	// XXX
+	sortImages: [
+		function(){  }],
+	// XXX
+	reverseImages: [
+		function(){  }],
+
+
+	// basic image editing...
+	//
+	// XXX
+	rotateCW: [ 
+		function(){  }],
+	rotateCCW: [ 
+		function(){  }],
+	flipVertical: [ 
+		function(){  }],
+	flipHorizontal: [
+		function(){  }],
+
+
+	// crop...
 })
 
 
@@ -355,12 +384,12 @@ actions.Actions(Client, {
 			this.ribbons.setBaseRibbon(r)
 		}],
 
-	// XXX
+	// XXX need screen width in images...
 	prevScreen: ['Focus previous image one screen width away',
 		function(){
 			// XXX
 		}],
-	// XXX
+	// XXX need screen width in images...
 	nextScreen: ['Focus next image one screen width away',
 		function(){
 			// XXX
@@ -369,36 +398,44 @@ actions.Actions(Client, {
 
 	// XXX
 	shiftImageUp: [
-		function(){
+		function(target){
-			// XXX
+			return function(){
+				// XXX this is cheating...
+				this.ribbons.updateData(this.data)
+				this.focusImage()
+			}
 		}],
 	shiftImageDown: [
-		function(){
+		function(target){
-			// XXX
+			return function(){
+				// XXX this is cheating...
+				this.ribbons.updateData(this.data)
+				this.focusImage()
+			}
 		}],
 	shiftImageUpNewRibbon: [
-		function(){
+		function(target){
-			// XXX
+			// XXX only create a new ribbon...
 		}],
 	shiftImageDownNewRibbon: [
-		function(){
+		function(target){
-			// XXX
+			// XXX only create a new ribbon...
 		}],
 	shiftImageLeft: [
-		function(){
+		function(target){
-			// XXX
+			this.ribbons.placeImage(target, -1)
 		}],
 	shiftImageRight: [
-		function(){
+		function(target){
-			// XXX
+			this.ribbons.placeImage(target, 1)
 		}],
 
 	shiftRibbonUp: [
-		function(){
+		function(target){
 			// XXX
 		}],
 	shiftRibbonDown: [
-		function(){
+		function(target){
 			// XXX
 		}],
 })