started ribbon editing actions...

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

ui (gen4)/data.js

@@ -642,7 +642,9 @@ module.DataPrototype = {
 	//
 	//	Get ribbon before/after current 
 	//	.getRibbon('before')
+	//	.getRibbon('prev')
 	//	.getRibbon('after')
+	//	.getRibbon('next')
 	//		-> gid
 	//		-> null
 	//
@@ -675,6 +677,9 @@ module.DataPrototype = {
 			return this.ribbon_order.slice(-1)[0]
 		}
 
+		target = target == 'next' ? 'after' : target
+		target = target == 'prev' ? 'before' : target
+
 		if(target == 'before' || target == 'after'){
 			offset = target
 			target = 'current'

ui (gen4)/lib/actions.js

@@ -169,6 +169,10 @@ function args2array(args){
 // 		object the action was called from.
 //
 // XXX do we need to return something from an action ever?
+// XXX add more metadata/docs:
+// 		.section
+// 		.category
+// 		...
 var Action =
 module.Action =
 function Action(name, doc, ldoc, func){
@@ -462,7 +466,8 @@ function Actions(a, b){
 		var args = obj[k]
 
 		// skip non-arrays...
-		if(args.constructor !== Array 
+		if(args == null 
+				|| args.constructor !== Array 
 				// and arrays the last element of which is not a function...
 				|| !(args[args.length-1] instanceof Function)){
 			return

ui (gen4)/viewer.js

@@ -28,7 +28,80 @@ var ribbons = require('ribbons')
 var Client = 
 module.Client = 
 actions.Actions({
+
+	config: {
+		'steps-to-change-direction': 3,
+	},
+
+	// basic state...
+	// NOTE: the setters in the following use the appropriate actions
+	// 		so to avoid recursion do not use these in the specific 
+	// 		actions...
+	get base(){
+		return this.data == null ? null : this.data.base
+	},
+	set base(value){
+		this.setBaseRibbon(value)
+	},
+
+	get current(){
+		return this.data == null ? null : this.data.current
+	},
+	set current(value){
+		this.focusImage(value)
+	},
+
+	get currentRibbon(){
+		return this.data == null ? null : this.data.getRibbon()
+	},
+	set currentRibbon(value){
+		this.focusRibbon(value)
+	},
+
+	// default direction
+	//
+	// NOTE: the system has inertial direction change, after >N steps of 
+	// 		movement in one direction it takes N steps to reverse the
+	// 		default direction.
+	// 		the number of steps (N) is set in:
+	// 			.config['steps-to-change-direction']
+	// NOTE: to force direction change append a '!' to the direction.
+	// NOTE: values other than 'left'/'right' are ignored...
+	get direction(){
+		return this._direction >= 0 ? 'right'
+			: this._direction < 0 ? 'left'
+			: 'right'
+	},
+	set direction(value){
+		// force direction change...
+		if(value.slice(-1) == '!'){
+			this._direction = value == 'left!' ? -1
+				: value == 'right!' : 0
+				: this._direction
+
+		// 'update' direction...
+		} else {
+			value = value == 'left' ? -1 
+				: value == 'right' : 1
+				: 0
+			var d = (this._direction || 0) + value
+			var s = this.config['steps-to-change-direction']
+			s = s < 1 ? 1 : s
+			// cap the direction value between -s and s-1...
+			// NOTE: we use s-1 instead of s as 0/null is a positive 
+			// 		direction...
+			d = d >= s ? s-1 : d
+			d = d < -s ? -s : d
+			this._direction = d
+		}
+	}
+
+
 	// basic life-cycle actions...
+	ready: [
+		function(){
+			// XXX setup empty state...
+		}],
 	load: [
 		function(d){
 			this.data = data.Data(d.data)
@@ -39,6 +112,7 @@ actions.Actions({
 		}],
 
 
+	// basic navigation...
 	focusImage: ['Focus image',
 		function(img){
 			this.data.focusImage(img)
@@ -53,6 +127,8 @@ actions.Actions({
 
 			this.focusImage(t, r)
 		}],
+	setBaseRibbon: ['',
+		function(target){ this.data.setBase(target) }],
 
 	// shorthands for .focusImage(..) and .focusRibbon(..)...
 	firstImage: ['Focus first image in current ribbon',
@@ -61,9 +137,17 @@ actions.Actions({
 		function(){ this.focusImage('last') }],
 
 	prevImage: ['Focus previous image',
-		function(){ this.focusImage('prev') }],
+		function(){ 
+			// keep track of traverse direction...
+			this.direction = 'left'
+			this.focusImage('prev') 
+		}],
 	nextImage: ['Focus next image',
-		function(){ this.focusImage('next') }],
+		function(){ 
+			// keep track of traverse direction...
+			this.direction = 'right'
+			this.focusImage('next') 
+		}],
 
 	firstRibbon: ['Focus previous ribbon',
 		function(){ this.focusRibbon('fisrt') }],
@@ -75,25 +159,120 @@ actions.Actions({
 	nextRibbon: ['Focus next ribbon',
 		function(){ this.focusRibbon('after') }],
 
+
+	// basic editing...
+	//
+	// NOTE: for all of these, current/ribbon image is a default...
+	//
+	// XXX move this out to a mixin...
+	shiftImageUp: ['Shift image up',
+		'If implicitly shifting current image (i.e. no arguments), focus '
+			+'will shift to the next or previous image in the current '
+			+'ribbon depending on current direction.',
+		function(target){ 
+			// by default we need to update the current position...
+			if(target == null){
+				var direction = this.direction == 'right' ? 'next' : 'prev'
+
+				var cur = this.data.getImage()
+				var next = this.data.getImage(direction)
+
+				this.data.shiftImageUp(cur)
+				this.focusImage(next)
+
+			// if a specific target is given, just shift it...
+			} else {
+				this.data.shiftImageUp(target)
+			}
+		}],
+	shiftImageDown: ['Shift image down',
+		function(target){ 
+			// by default we need to update the current position...
+			if(target == null){
+				var direction = this.direction == 'right' ? 'next' : 'prev'
+
+				var cur = this.data.getImage()
+				var next = this.data.getImage(direction)
+
+				this.data.shiftImageDown(cur)
+				this.focusImage(next)
+
+			// if a specific target is given, just shift it...
+			} else {
+				this.data.shiftImageDown(target)
+			}
+		}],
+	shiftImageUpNewRibbon: ['',
+		function(target){
+			this.data.newRibbon(target)
+			this.shiftImageUp(target)
+		}],
+	shiftImageDownNewRibbon: ['',
+		function(target){
+			this.data.newRibbon(target, 'below')
+			this.shiftImageUp(target)
+		}],
+	// XXX is tracking direction here correct???
+	shiftImageLeft: ['',
+		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: ['',
+		function(target){ 
+			if(target == null){
+				this.direction = 'right'
+			}
+			this.data.shiftImageLeft(target) 
+			// XXX is this the right way to go/???
+			this.focusImage()
+		}],
+
+	shiftRibbonUp: ['',
+		function(target){ 
+			this.data.shiftRibbonUp(target) 
+			// XXX is this the right way to go/???
+			this.focusImage()
+		}],
+	shiftRibbonDown: ['',
+		function(target){ 
+			this.data.shiftRibbonDown(target)
+			// XXX is this the right way to go/???
+			this.focusImage()
+		}],
 })
 
 
+
 // XXX do partial loading...
 var Viewer = 
 module.Viewer = 
 actions.Actions(Client, {
+
+	ready: [
+		function(){
+			// XXX setup empty state...
+		}],
 	load: [
 		function(data){
-			// recycle the viewer...
+			// recycle the viewer if one is not given specifically...
 			var viewer = data.viewer
 			viewer = viewer == null && this.ribbons != null 
 				? this.ribbons.viewer 
 				: viewer
+			// XXX do we need to recycle the images???
 
 			this.ribbons = ribbons.Ribbons(viewer, data.images)
 
 			return function(){
 				// XXX do a partial load...
+				// XXX
+
 				this.ribbons.updateData(this.data)
 				this.focusImage()
 			}
@@ -155,14 +334,58 @@ actions.Actions(Client, {
 				}
 			}
 		}],
+	setBaseRibbon: ['',
+		function(target){
+			var r = this.data.getRibbon(target)
+			r =  r == null ? this.ribbons.getRibbon(target) : r
+			this.ribbons.setBaseRibbon(r)
+		}],
 
 	// XXX
 	prevScreen: ['Focus previous image one screen width away',
 		function(){
+			// XXX
 		}],
 	// XXX
 	nextScreen: ['Focus next image one screen width away',
 		function(){
+			// XXX
+		}],
+
+
+	// XXX
+	shiftImageUp: [
+		function(){
+			// XXX
+		}],
+	shiftImageDown: [
+		function(){
+			// XXX
+		}],
+	shiftImageUpNewRibbon: [
+		function(){
+			// XXX
+		}],
+	shiftImageDownNewRibbon: [
+		function(){
+			// XXX
+		}],
+	shiftImageLeft: [
+		function(){
+			// XXX
+		}],
+	shiftImageRight: [
+		function(){
+			// XXX
+		}],
+
+	shiftRibbonUp: [
+		function(){
+			// XXX
+		}],
+	shiftRibbonDown: [
+		function(){
+			// XXX
 		}],
 })