added offset calculation + more experimenting...

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

ui (gen4)/features/ui-partial-ribbons-vdom.js

@@ -124,30 +124,30 @@ var VirtualDOMRibbonsPrototype = {
 			ribbons)
 		])
 	},
-	// XXX calc offset (x) -- the only thing left to be fully usable...
 	// XXX setup handlers (???)
 	// XXX current image marker (???)
 	makeRibbon: function(gid, count, state){
 		state = state || {}
 		var that = this
 		var ig = this.imagegrid
+		var current = ig.current
+		var size = this.state.tile_size = state.tile_size
+			|| this.state.tile_size 
+			|| ig.ribbons.getVisibleImageSize('max')
+		var scale = state.scale = state.scale 
+			|| ig.scale
 		var data = ig.data
 		var images = ig.images
+		var ribbons = ig.ribbons
 		var base = data.base == gid ? '.base' : ''
 		var imgs = []
 
 		this.state = this.state || {}
 		this.state.ribbons = this.state.ribbons || {}
 
-		var x = this.state.ribbons[gid] = 
+		// build the images...
-			(state.ribbons && state.ribbons[gid])
+		var gids = data.getImages(gid, count, 'total')
-				|| this.state.ribbons[gid]
+		gids
-				// XXX calculate new offset
-				// 		...this will work only for cases where nothing 
-				// 		changes...
-				|| parseFloat(ig.ribbons.getRibbon(gid).transform('x'))
-
-		data.getImages(gid, count, 'total')
 			.forEach(function(gid){
 				// image...
 				imgs.push(that.makeImage(gid))
@@ -157,6 +157,23 @@ var VirtualDOMRibbonsPrototype = {
 					.forEach(function(mark){ imgs.push(mark) })
 			})
 
+		// calculate offset...
+		// XXX this accounts for only one offset mode...
+		// 		...make this extensible...
+		// XXX this only aligns to .current...
+		size = ribbons.px2vmin(size / scale)
+		var ref = data.getImage(current, 'before', gids)
+		var offset = ref == current ? size / 2 
+			: ref != null ? size 
+			: 0
+		ref = ref || data.getImage(current, 'after', gids)
+		var l = gids.indexOf(ref)
+		var x = //this.state.ribbons[gid] = 
+			(state.ribbons && state.ribbons[gid])
+				|| this.state.ribbons[gid]
+				//|| parseFloat(ig.ribbons.getRibbon(gid).transform('x'))
+				|| (-(l * size) - offset)
+
 		return vdom.h('div.ribbon'+base, {
 			key: 'ribbon-'+gid,
 
@@ -233,7 +250,7 @@ var VirtualDOMRibbonsPrototype = {
 	},
 	makeImageMark: function(gid, type){
 		return vdom.h('div.mark.'+(type || ''), {
-			key: 'mark-'+gid,
+			key: 'mark-'+type+'-'+gid,
 			attributes: {
 				gid: JSON.stringify(gid)
 					.replace(/^"(.*)"$/g, '$1'),

ui (gen4)/imagegrid/ribbons.js

@@ -211,6 +211,26 @@ module.DOMAdapter = {
 /*********************************************************************/
 
 var RibbonsClassPrototype = {
+	// utils...
+	px2v: function(px, mode){
+		var ref = mode == 'vw' ? 
+				document.body.offsetWidth
+			: mode == 'vh' ? 
+				document.body.offsetHeight
+			: mode == 'vmin' ? 
+				Math.min(document.body.offsetWidth, document.body.offsetHeight)
+			: mode == 'vmax' ? 
+				Math.max(document.body.offsetWidth, document.body.offsetHeight)
+			: null
+		return ref ? 
+			(px / ref) * 100 
+			: ref
+	},
+	px2vw: function(px){ return this.px2v(px, 'vw') },
+	px2vh: function(px){ return this.px2v(px, 'vh') },
+	px2vmin: function(px){ return this.px2v(px, 'vmin') },
+	px2vmax: function(px){ return this.px2v(px, 'vmax') },
+
 	// Generic getters...
 	getElemGID: function(elem){
 		return JSON.parse('"' 
@@ -267,6 +287,7 @@ var RibbonsClassPrototype = {
 		return this.setElemGID($('<div class="mark">')
 			.addClass(cls), gid)
 	},
+
 } 
 
 
@@ -301,6 +322,13 @@ var RibbonsPrototype = {
 	// DOM Adapter...
 	dom: DOMAdapter,
 	
+	// utils...
+	px2v: RibbonsClassPrototype.px2v,
+	px2vw: RibbonsClassPrototype.px2vw,
+	px2vh: RibbonsClassPrototype.px2vh,
+	px2vmin: RibbonsClassPrototype.px2vmin,
+	px2vmax: RibbonsClassPrototype.px2vmax,
+	
 	// Constructors...
 	createViewer: RibbonsClassPrototype.createViewer,
 	createRibbon: RibbonsClassPrototype.createRibbon,
@@ -2574,8 +2602,7 @@ var RibbonsPrototype = {
 			: w/2
 
 		// relative offset to vmin...
-		var W = Math.min(document.body.offsetWidth, document.body.offsetHeight)
+		var x = -this.px2vmin(l + image_offset) + 'vmin'
-		var x = (-(l + image_offset)/W)*100 + 'vmin'
 
 		// absolute offset...
 		//var x = -(l + image_offset)