started implementing new actions...

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

ui (gen4)/data.js

@@ -312,6 +312,13 @@ module.DataPrototype = {
 	// 		NOTE: in both the above cases if gid|order is found explicitly
 	// 			it will be returned.
 	//
+	// 	Get next/prev image (offset of 1):
+	// 	.getImage('next')
+	// 	.getImage('prev')
+	// 	.getImage(gid|order, 'next'[, list|ribbon])
+	// 	.getImage(gid|order, 'prev'[, list|ribbon])
+	// 		-> gid
+	//
 	// 	Get image at an offset from a given image:
 	// 	.getImage(gid|order, offset[, list|ribbon])
 	// 		-> gid
@@ -398,6 +405,10 @@ module.DataPrototype = {
 				: offset > 0 ? 'after'
 				: mode
 			offset = Math.abs(offset)
+		} else if(mode == 'next'){
+			offset = 1
+		} else if(mode == 'prev'){
+			offset = -1
 		} else {
 			var offset = 0 
 			mode = mode == null ? 'before' : mode
@@ -620,6 +631,11 @@ module.DataPrototype = {
 	//	.getRibbon('current')
 	//		-> ribbon gid
 	//
+	//	Get first/last ribbon:
+	//	.getRibbon('first')
+	//	.getRibbon('last')
+	//		-> ribbon gid
+	//
 	//	Get base ribbon:
 	//	.getRibbon('base')
 	//		-> base ribbon gid
@@ -652,6 +668,13 @@ module.DataPrototype = {
 	getRibbon: function(target, offset){
 		target = target == null ? this.current : target
 
+		if(target == 'first'){
+			return this.ribbon_order[0]
+
+		} else if(target == 'last'){
+			return this.ribbon_order.slice(-1)[0]
+		}
+
 		if(target == 'before' || target == 'after'){
 			offset = target
 			target = 'current'

ui (gen4)/index.html

@@ -5,9 +5,9 @@
 <link rel="stylesheet" href="css/layout.css">
 <link rel="stylesheet" href="css/editor.css">
 
-<script>
+<!--script>
 require('nw.gui').Window.get().showDevTools()
-</script>
+</script-->
 
 
 <script src="ext-lib/jquery.js"></script>

ui (gen4)/lib/actions.js

@@ -201,7 +201,7 @@ function Action(name, doc, ldoc, func){
 		// 		...searching the inheritance chain is not reliable as a
 		// 		method can be referenced more than once, both with the 
 		// 		same as well as under different names...
-		var handlers = getHandlers(name)
+		var handlers = getHandlers.call(this, name)
 			.map(function(h){ return h.apply(that, args) })
 
 		// NOTE: this action will get included and called by the code 
@@ -250,6 +250,10 @@ module.MetaActions = {
 	get actions(){
 		var res = []
 		for(var k in this){
+			// avoid recursion...
+			if(k == 'actions' || k == 'length'){
+				continue
+			}
 			// get only actions...
 			if(this[k] instanceof Action){
 				res.push(k)
@@ -269,15 +273,16 @@ module.MetaActions = {
 	getDoc: function(actions){
 		var res = {}
 		var that = this
-		actions = actions == null ? this.actions() 
+		actions = actions == null ? this.actions
 			: arguments.length > 1 ? args2array(arguments)
 			: typeof(actions) == typeof('str') ? [actions]
 			: actions
 		// get the first defined set of docs in the inheritance chain...
 		actions.forEach(function(n){
 			var cur = that
+			res[n] = []
 			while(cur.__proto__ != null){
-				if(cur[n].doc != null){
+				if(cur[n] != null && cur[n].doc != null){
 					res[n] = [ cur[n].doc, cur[n].long_doc ]
 					break
 				}

ui (gen4)/ribbons.js

@@ -855,6 +855,10 @@ module.RibbonsPrototype = {
 		// clear all...
 		if(gids == null || gids == '*'){
 			this.viewer.find('.ribbon').remove()
+			// reset offsets...
+			this.viewer.find('.ribbon-set').css({
+				top: '',
+			})
 
 		// clear one or more gids...
 		} else {
@@ -888,23 +892,13 @@ module.RibbonsPrototype = {
 	// NOTE: overflowing offset will focus first/last image.
 	//
 	// XXX interaction animation...
-	focusImage: function(gid){
+	focusImage: function(target){
 		var cur = this.viewer
 			.find('.current.image')
-
+		var next = this.getImage(target)
-		// relative keywords...
-		gid = gid == 'next' ? 1
-			: gid == 'prev' ? -1
-			: gid
-
-		// offset...
-		if(typeof(gid) == typeof(123)){
-			return this.focusImage(this.getImage(gid))
-		}
 
 		cur.removeClass('current')
-		return this.getImage(gid)
+		return next.addClass('current')
-			.addClass('current')
 	},
 
 	// Set base ribbon...
@@ -1259,7 +1253,7 @@ module.RibbonsPrototype = {
 	// center an image horizontally...
 	// XXX
 	centerImage: function(target, mode, offset){
-		offset = offset == null ? this._getOffset(target) : offset
+		offset = offset == null ? this._getOffset(target, 'center', 'center', mode) : offset
 
 		// horizontal offset, current ribbon...
 		this.getRibbon(target)
@@ -1303,26 +1297,6 @@ Ribbons.prototype.constructor = Ribbons
 
 
 
-/*********************************************************************/
-
-// XXX keep this here or move this to a different module???
-module.setupActionHandlers = function(ribbons, context, actions){
-
-	context.on('focusImage', function(evt, img){ 
-		img = ribbons.focusImage(img)
-		ribbons
-			.centerImage(img)
-			.centerRibbon(img)
-	})
-
-
-	// XXX this does not need focus ribbon handlers as the Data will 
-	// 		get those, chose an image and trigger the appropriate 
-	// 		focusImage event...
-}
-
-
-
 /**********************************************************************
 * vim:set ts=4 sw=4 :                                                */
 return module })

ui (gen4)/testing.js

@@ -22,9 +22,9 @@ var ribbons =
 module.ribbons = 
 	require('ribbons')
 
-var actions =
+var v =
-module.actions = 
+module.v = 
-	require('actions')
+	require('viewer')
 
 
 
@@ -77,17 +77,19 @@ module.loadTestRibbons = function(ribbons, data, images, viewer){
 
 
 var setupActions =
-module.setupActions = function(viewer, r){
+module.setupActions = function(viewer){
 	viewer = viewer == null ? $('.viewer') : viewer
-	r = r == null ? makeTestRibbons(viewer, images) : r
+	//r = r == null ? makeTestRibbons(viewer, images) : r
 
-	/*
+	var vv = Object.create(v.Viewer)
-	var a = actions.setupBaseActions(viewer, {})
-	actions.setupUIActions(viewer, a)
-	ribbons.setupActionHandlers(r, viewer, a)
 
-	return a
+	vv.load({
-	*/
+		data: data.Data(module.mock_data),
+		viewer: viewer,
+		images: makeTestImages(),
+	})
+
+	return vv
 }
 
 

ui (gen4)/ui.js

@@ -35,6 +35,8 @@ var testing = require('testing')
 
 var client = require('client')
 
+var viewer = require('viewer')
+
 
 
 /*********************************************************************/
@@ -117,9 +119,7 @@ $(function(){
 					window.DEBUG && console.log(k)
 				}))
 
-	// XXX 
+	window.a = testing.setupActions()
-	window.r = testing.loadTestRibbons()
-	window.a = testing.setupActions(null, r)
 })
 
 

ui (gen4)/viewer.js

@@ -9,6 +9,11 @@ console.log('>>> viewer')
 
 //var DEBUG = DEBUG != null ? DEBUG : true
 
+var actions = require('lib/actions')
+
+var data = require('data')
+var ribbons = require('ribbons')
+
 
 /*********************************************************************/
 //
@@ -20,12 +25,147 @@ console.log('>>> viewer')
 //
 //
 
-var Client = {
+var Client = 
+module.Client = 
+actions.Actions({
+	// basic life-cycle actions...
+	load: [
+		function(d){
+			this.data = data.Data(d.data)
+		}],
+	clear: [
+		function(){
+			delete this.data
+		}],
+
+
+	focusImage: ['Focus image',
+		function(img){
+			this.data.focusImage(img)
+		}],
+	focusRibbon: ['Focus Ribbon',
+		function(target){
+			var data = this.data
+			var r = data.getRibbon(target)
+			var t = data.getImage('current', r)
+			// XXX is there a 'last' special case???
+			t = t == null ? data.getImage('first', r) : t
+
+			this.focusImage(t, r)
+		}],
+
+	// shorthands for .focusImage(..) and .focusRibbon(..)...
+	firstImage: ['Focus first image in current ribbon',
+		function(){ this.focusImage('first') }],
+	lastImage: ['Focus last image in current ribbon',
+		function(){ this.focusImage('last') }],
+
+	prevImage: ['Focus previous image',
+		function(){ this.focusImage('prev') }],
+	nextImage: ['Focus next image',
+		function(){ this.focusImage('next') }],
+
+	firstRibbon: ['Focus previous ribbon',
+		function(){ this.focusRibbon('fisrt') }],
+	lastRibbon: ['Focus next ribbon',
+		function(){ this.focusRibbon('last') }],
+
+	prevRibbon: ['Focus previous ribbon',
+		function(){ this.focusRibbon('before') }],
+	nextRibbon: ['Focus next ribbon',
+		function(){ this.focusRibbon('after') }],
+
+})
+
+
+// XXX do partial loading...
+var Viewer = 
+module.Viewer = 
+actions.Actions(Client, {
+	load: [
+		function(data){
+			// recycle the viewer...
+			var viewer = data.viewer
+			viewer = viewer == null && this.ribbons != null 
+				? this.ribbons.viewer 
+				: viewer
+
+			this.ribbons = ribbons.Ribbons(viewer, data.images)
+
+			return function(){
+				// XXX do a partial load...
+				this.ribbons.updateData(this.data)
+				this.focusImage()
+			}
+		}],
+	clear: [
+		// XXX do we need to delete the ribbons???
+		function(){
+			this.ribbons.clear()
+			delete this.ribbons
+		}],
+
+
+	focusImage: [
+		// XXX skip invisible ribbons (???)
+		// XXX load data chunks...
+		function(target){
+			var ribbons = this.ribbons
+			var data = this.data
+
+			if(data != null){
+				var gid = data.getImage(target)
+				gid = gid == null ? data.getImage('current') : gid
+
+				// XXX see if we need to load a new data set...
+				// XXX
+		
+				target = ribbons.focusImage(gid)
+
+			} else {
+				target = ribbons.focusImage(target)
+				var gid = ribbons.getElemGID(target)
 			}
 
-var Viewer = {
+			// align current ribbon...
+			ribbons
+				.centerRibbon(target)
+				.centerImage(target)
+
+			// align other ribbons...
+			if(data != null){
+				var ribbon = data.getRibbon(gid)
+				for(var r in data.ribbons){
+					// skip the current ribbon...
+					if(r == ribbon){
+						continue
 					}
 
+					// XXX skip off-screen ribbons...
+					// XXX
+
+					// center...
+					// XXX is there a 'last' special case here???
+					var t = data.getImage(gid, r)
+					if(t == null){
+						ribbons.centerImage(data.getImage('first', r), 'before')
+					} else {
+						ribbons.centerImage(t, 'after')
+					}
+				}
+			}
+		}],
+
+	// XXX
+	prevScreen: ['Focus previous image one screen width away',
+		function(){
+		}],
+	// XXX
+	nextScreen: ['Focus next image one screen width away',
+		function(){
+		}],
+})
+
 
 
 /**********************************************************************