some testing an bugfixing...

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

ui (gen4)/image.js

@@ -7,12 +7,14 @@
 define(function(require){ var module = {}
 console.log('>>> image')
 
+var images = require('images')
 
 
 /*********************************************************************/
 
 // A stub image, also here for documentation...
-var STUB_IMAGE_DATA = {
+var STUB_IMAGE_DATA =
+module.STUB_IMAGE_DATA = {
 	// Entity GID...
 	id: 'STUB-GID',
 
@@ -101,7 +103,8 @@ var STUB_IMAGE_DATA = {
 // each function must be of the form:
 // 	updateImage(gid, image) -> image
 //
-var IMAGE_UPDATERS = []
+var IMAGE_UPDATERS =
+module.IMAGE_UPDATERS = []
 
 
 
@@ -110,6 +113,22 @@ var IMAGE_UPDATERS = []
 // XXX Constructors...
 
 
+/*********************************************************************/
+
+// XXX is this the right place for this???
+var getImageGID =
+module.getImageGID =
+function(img){
+	return JSON.parse('"'+$(img).attr('gid')+'"')
+}
+
+// XXX getImage(...)
+// XXX getVisibleImageSize(...)
+// XXX getBestPreview(...) 
+// XXX setImageFlipState(...)
+
+
+
 /*********************************************************************/
 
 // Run all the image update functions registered in IMAGE_UPDATERS, on 

ui (gen4)/loader.js

@@ -13,24 +13,19 @@ var data = require('data')
 
 /*********************************************************************/
 
-module.loadData = function(target, callback){
+module.loadDir = function(url){
-	// Data...
-	if(target instanceof data.Data){
-		callback(target)
-	
-	// Object...
-	} else if(typeof(target) == typeof({})){
-		callback(data.Data(target))
-
-	// String...
-	} else if(typeof(target) == typeof('str')){
-		// url...
-		if(/^(http:|file:|app:|embed:)/.test(target)){
-		} 
-	}
 }
 
 
+// Load data from url...
+//
+// Supported protocols:
+// 	- http:
+// 	- file:
+//
+module.loadURL = function(url){
+}
+
 
 
 /**********************************************************************

ui (gen4)/ribbons.js

@@ -62,19 +62,21 @@ module.RibbonsClassPrototype = {
 	},
 	// XXX NOTE: quots removal might render this incompatible with older data formats...
 	createRibbon: function(gid){
+		gid = gid != null ? gid+'' : gid
 		return $('<div>')
 			.addClass('ribbon')
 			.attr('gid', JSON.stringify(gid)
 					// this removes the extra quots...
-					.slice(1,-1))
+					.replace(/^"(.*)"$/g, '$1'))
 	},
 	// XXX NOTE: quots removal might render this incompatible with older data formats...
 	createImage: function(gid){
+		gid = gid != null ? gid+'' : gid
 		return $('<div>')
 			.addClass('image')
 			.attr('gid', JSON.stringify(gid)
 					// this removes the extra quots...
-					.slice(1,-1))
+					.replace(/^"(.*)"$/g, '$1'))
 	},
 } 
 
@@ -92,6 +94,10 @@ module.RibbonsPrototype = {
 	createRibbon: RibbonsClassPrototype.createRibbon,
 	createImage: RibbonsClassPrototype.createImage,
 
+	getElemGID: function(elem){
+		return JSON.parse('"' + elem.attr('gid') + '"')
+	},
+
 	// NOTE: these accept gids or jQuery objects...
 	getRibbon: function(target){
 		if(target == null) {
@@ -125,6 +131,7 @@ module.RibbonsPrototype = {
 	// 	- index
 	// 	- ribbon gid
 	// 	- ribbon
+	// 	- null			- append the ribbon to the end
 	//
 	// NOTE: if ribbon does not exist a new ribbon will be created...
 	// XXX these will place at current loaded position rather than the 
@@ -140,16 +147,14 @@ module.RibbonsPrototype = {
 		// normalize the position...
 		var p = this.getRibbon(position)
 		position = p.hasClass('ribbon') ? ribbons.index(p) : position
-		position = position < 0 ? (ribbons.length - position)+1 : position
+		position = position == null ? -1 : position
+		position = position < 0 ? ribbons.length + position + 1 : position
 		position = position < 0 ? 0 : position
 
 		// place the ribbon...
-		if(ribbons.length == 0){
+		if(ribbons.length == 0 || ribbons.length <= position){
 			this.viewer.find('.ribbon-set').append(ribbon)
 
-		} else if(ribbons.length <= position){
-			ribbons.last().after(ribbon)
-
 		} else {
 			ribbons.eq(position).before(ribbon)
 		}
@@ -181,8 +186,8 @@ module.RibbonsPrototype = {
 	// XXX interaction animation...
 	placeImage: function(gid, ribbon, position){
 		// get/create the image...
-		var image = this.getImage(gid)
+		var img = this.getImage(gid)
-		image = image.length == 0 ? this.createImage(gid) : image
+		img = img.length == 0 ? this.createImage(gid) : img
 
 		// normalize the position, ribbon and images...
 		if(position == null){
@@ -195,22 +200,122 @@ module.RibbonsPrototype = {
 			: this.getRibbon(ribbon)
 		var images = ribbon.find('.image')
 		position = p.hasClass('image') ? images.index(p) : position
-		position = position < 0 ? (images.length - position)+1 : position
+		position = position < 0 ? images.length + position + 1 : position
 		position = position < 0 ? 0 : position
 
 		// place the image...
 		if(images.length == 0 || images.length <= position){
-			ribbon.append(image)
+			ribbon.append(img)
 
 		} else {
-			images.eq(position).before(image)
+			images.eq(position).before(img)
 		}
 
-		return image.updateImage(image)
+		//return image.updateImage(img)
+		return img
 	},
 
 	// XXX do we need shorthands like shiftImageUp/shiftImageDown/... here?
 
+
+	// Bulk manipulation...
+
+	// NOTE: gids and ribbon must be .getImage(..) and .getRibbon(..) 
+	// 		compatible...
+	// XXX do we need an image pool here???
+	showImagesInRibbon: function(gids, ribbon){
+		// get/create the ribbon...
+		var r = this.getRibbon(ribbon)
+		if(r.length == 0){
+			// no such ribbon exists, then create and append it...
+			r = this.placeRibbon(ribbon, this.viewer.find('.ribbon').length)
+		}
+
+		var loaded = r.find('.image')
+
+		var that = this
+		$(gids).each(function(i, gid){
+			// get/create image...
+			var img = that.getImage(gid)
+			img = img.length == 0 ? that.createImage(gid) : img
+
+			// clear images that are not in gids...
+			var g = loaded.length > i ? that.getElemGID(loaded.eq(i)) : null
+			while(g != null && gids.indexOf(g) < 0){
+				that.clear(g)
+				loaded.splice(i, 1)
+				g = loaded.length > i ? that.getElemGID(loaded.eq(i)) : null
+			}
+
+			// check if we need to reattach the image...
+			if(gid != g){
+				// append the image to set...
+				if(loaded.length == 0 || loaded.length <= i){
+					r.append(img.detach())
+
+				// attach the image at i...
+				} else {
+					// update the DOM...
+					loaded.eq(i).before(img.detach())
+
+					// update the loaded list...
+					var l = loaded.index(img)
+					if(l >= 0){
+						loaded.splice(l, 1)
+					}
+					loaded.splice(i, 0, img)
+				}
+			}
+
+			//image.updateImage(img)
+		})
+
+		// remove the rest of the stuff in ribbon... 
+		if(loaded.length > gids.length){
+			loaded.eq(gids.length).nextAll().remove()
+			loaded.eq(gids.length).remove()
+		}
+
+		return this
+	},
+	// XXX do we need anything else here? ..seems too simple :)
+	loadData: function(data){
+		var that = this
+		data.ribbon_order.forEach(function(gid){
+			that.showImagesInRibbon(data.ribbons[gid], gid)
+		})
+		return this
+	},
+	clear: function(gids){
+		// clear all...
+		if(gids == null || gids == '*'){
+			this.viewer.find('.ribbon').remove()
+
+		// clear one or more gids...
+		} else {
+			gids = gids.constructor.name != 'Array' ? [gids] : gids
+			var that = this
+			gids.forEach(function(g){
+				that.viewer.find('[gid='+JSON.stringify(g)+']').remove()
+			})
+		}
+		return this
+	},
+
+
+	// UI manipulation...
+	
+	// XXX if target is an image align the ribbon both vertically and horizontally...
+	alignRibbon: function(target, mode){
+		// XXX
+	},
+
+	// XXX
+	fitNImages: function(n){
+		// XXX
+	},
+
+
 	// XXX this does not align anything, it's just a low level focus...
 	// XXX interaction animation...
 	focusImage: function(gid){
@@ -314,85 +419,6 @@ module.RibbonsPrototype = {
 	//flipHorizontal: function(target){ return this.flipImage(target, this.HORIZONTAL) },
 
 
-	// Bulk manipulation...
-
-	// NOTE: gids and ribbon must be .getImage(..) and .getRibbon(..) 
-	// 		compatible...
-	// XXX do we need an image pool here???
-	showImagesInRibbon: function(gids, ribbon){
-		// get/create the ribbon...
-		var r = this.getRibbon(ribbon)
-		if(r.length == 0){
-			r = this.createRibbon(ribbon)
-		}
-
-		var loaded = r.find('.image')
-
-		var that = this
-		$(gids).each(function(gid, i){
-			// get/create image...
-			var img = that.getImage(gid)
-			if(img.length == 0){
-				img = that.createImage(gid)
-			}
-
-			// clear images that are not in gids...
-			var g = JSON.parse(loaded.eq(i).attr('gid'))
-			while(gids.indexOf(g) < 0){
-				//r.find('[gid='+JSON.stringify(g)+']')
-				//	.remove()
-				that.clear(g)
-				loaded.splice(i, 1)
-				g = JSON.parse(loaded.eq(i).attr('gid'))
-			}
-
-			// check if we need to reattach the image...
-			if(gid != g){
-				// attach the image at i...
-				loaded.eq(i).before(img.detach())
-			}
-
-			image.updateImage(img)
-		})
-
-		// remove the rest of the stuff in ribbon... 
-		if(loaded.length > gids.length){
-			loaded.eq(gids.length).nextAll().remove()
-			loaded.eq(gids.length).remove()
-		}
-
-		return this
-	},
-	clear: function(gids){
-		// clear all...
-		if(gids == null){
-			this.viewer.find('.ribbon').remove()
-
-		// clear one or more gids...
-		} else {
-			gids = gids.constructor.name != 'Array' ? [gids] : gids
-			var that = this
-			gids.forEach(function(g){
-				that.viewer.find('[gid='+JSON.stringify(g)+']').remove()
-			})
-		}
-		return this
-	},
-
-
-	// UI manipulation...
-	
-	// XXX if target is an image align the ribbon both vertically and horizontally...
-	alignRibbon: function(target, mode){
-		// XXX
-	},
-
-	// XXX
-	fitNImages: function(n){
-		// XXX
-	},
-
-
 	_setup: function(viewer){
 		this.viewer = $(viewer)
 	},