experementing...

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

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

@@ -9,6 +9,7 @@
 
 var vdom = require('ext-lib/virtual-dom')
 
+var object = require('lib/object')
 var actions = require('lib/actions')
 var features = require('lib/features')
 
@@ -60,10 +61,19 @@ VALUE.prototype.hook = function(elem, prop){
 
 //---------------------------------------------------------------------
 
-// XXX get vertical offset and scale...
-var makeView = 
-window.makeView =
-function(data, images, count){
+// XXX need a way to link this to the context...
+var VirtualDOMRibbonsPrototype = {
+
+	virtualdom: null,
+	// XXX this is a circular ref -- I do not like it...
+	imagegrid: null,
+
+	// constructors...
+	// XXX get vertical offset and scale...
+	makeView: function(count){
+		var data = imagegrid.data
+		var images = imagegrid.images
+
 		// XXX
 		var s = 1
 		var x = 0
@@ -86,15 +96,19 @@ function(data, images, count){
 			},
 			ribbons)
 		])
-}
+	},
+	// XXX calc/get count if not given explicitly...
+	// XXX calc offset (y)...
+	// XXX should we setup handlers here???
+	makeRibbon: function(gid, count){
+		var data = imagegrid.data
+		var images = imagegrid.images
 
-
-// XXX calc/get count...
-var makeRibbon = 
-window.makeRibbon =
-function(gid, data, images, count){
 		var imgs = []
 
+		// XXX
+		var y = 0
+
 		data.getImages(gid, count, 'total')
 			.forEach(function(gid){
 				imgs.push(makeImage(gid, data, images))
@@ -106,17 +120,22 @@ function(gid, data, images, count){
 			key: 'ribbon-'+gid,
 
 			gid: new GID(gid),
+
+			// XXX events, hammer, ...???
+
+			style: {
+				transform: 'translate3d('+ y +'px, 0px, 0px)',
+			},
 		},
 		imgs)
-}
+	},
+	// XXX handle previews -- hook???
+	// NOTE: at this point this does not account for previews at all...
+	makeImage: function(gid){
+		var data = imagegrid.data
+		var images = imagegrid.images || {}
 
-
-// XXX handle previews -- hook???
-// NOTE: at this point this does not account for previews at all...
-var makeImage = 
-window.makeImage =
-function(gid, data, images){
-	var image = (images || {})[gid] || {}
+		var image = images[gid] || {}
 		var current = data.current == gid ? '.current' : ''
 
 		// XXX stuff needed to get a preview:
@@ -140,29 +159,33 @@ function(gid, data, images){
 			//	backgroundImage: 'url('+ url +')',
 			//}
 		})
-}
-
-// XXX get marks...
-var makeImageMarks = 
-window.makeImageMarks =
-function(gid, data, images){
+	},
+	// XXX get marks...
+	makeImageMarks: function(gid){
 		// XXX get marks...
 		var marks = []
 
 		return marks
 			.map(function(type){
 				return makeImageMark(gid, type, data, images) })
-}
-
-var makeImageMark = 
-window.makeImageMark =
-function(gid, type, data, images){
+	},
+	makeImageMark: function(gid, type){
 		return vdom.h('div.mark'+(type || ''), {
 			key: 'mark-'+gid,
 			gid: new GID(gid),
 		})
+	},
+
+	
+	__init__: function(imagegrid){
+		this.imagegrid = imagegrid
+	},
 }
 
+var VirtualDOMRibbons =
+module.VirtualDOMRibbons =
+object.makeConstructor('VirtualDOMRibbons', VirtualDOMRibbonsPrototype)
+
 
 
 /*********************************************************************/
@@ -192,6 +215,10 @@ var PartialRibbonsActions = actions.Actions({
 		'ribbon-update-timeout': 120,
 	},
 
+	get virtualdom(){
+		return (this.__virtual_dom = this.__virtual_dom || VirtualDOMRibbons(this)) },
+
+
 	updateRibbon: ['- Interface/Update partial ribbon size', 
 		function(target, w, size, threshold, preload){
 			target = target instanceof jQuery