minor tweaks...

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

ui (gen4)/features/meta.js

@@ -63,10 +63,12 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 	'ui-animation',
 
 	'ui-single-image',
-	//'ui-partial-ribbons',
-	'ui-partial-ribbons-2',
-	/*/ XXX EXPERIMENTAL...
+	'ui-partial-ribbons',
+	// XXX has bugs...
+	//'ui-partial-ribbons-2',
+	// XXX EXPERIMENTAL...
 	'ui-partial-ribbons-vdom',
+		'-ui-partial-ribbons',
 		'-ui-partial-ribbons-2',
 		// XXX this conflicts with ui-partial-ribbons-vdom...
 		'-ui-current-image-indicator',

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

@@ -57,12 +57,6 @@ PREVIEW.prototype.hook = function(elem, prop){
 }
 
 
-function FORCE(value){
-	this.value = value
-}
-FORCE.prototype.hook = function(elem, prop){
-	elem.style[prop] = this.value
-}
 
 //---------------------------------------------------------------------
 //
@@ -215,7 +209,8 @@ var VirtualDOMRibbonsPrototype = {
 	// XXX setup image handlers...
 	// 		...or move them up to viewer or some other spot (viewer?)...
 	// XXX update image previews...
-	makeImage: function(gid, size){
+	// XXX update image proportions for rotation...
+	makeImage: function(gid, size, state){
 		var ig = this.imagegrid
 		//size = this.state.tile_size = size 
 		size = size 
@@ -241,6 +236,9 @@ var VirtualDOMRibbonsPrototype = {
 		var url = ig.images.getBestPreview(gid, size, image, true).url
 
 		return vdom.h('div.image'+current, {
+			// XXX BUG:
+			// 		- setting this makes the images some times not change previews...
+			// 		- removing this breaks .current class setting...
 			//key: 'image-'+gid,
 
 			attributes: {
@@ -253,6 +251,10 @@ var VirtualDOMRibbonsPrototype = {
 				//'preview-height': h,
 			},
 			style: {
+				//width: '',
+				//height: '',
+				//margin: '',
+
 				backgroundImage: 'url("'+ url +'")',
 			}
 		})
@@ -275,7 +277,7 @@ var VirtualDOMRibbonsPrototype = {
 	},
 	makeImageMark: function(gid, type){
 		return vdom.h('div.mark.'+(type || ''), {
-			//key: 'mark-'+type+'-'+gid,
+			key: 'mark-'+type+'-'+gid,
 			attributes: {
 				gid: JSON.stringify(gid)
 					.replace(/^"(.*)"$/g, '$1'),
@@ -347,7 +349,7 @@ object.makeConstructor('VirtualDOMRibbons',
 
 /*********************************************************************/
 // XXX TODO:
-// 		- shifting images
+// 		- shifting images/ribbons
 // 			- use .virtualdom.sync() + shadow animation instead of .ribbons.*
 // 			- would be nice to make this an alternative feature...
 // 				...split out ribbon editing into a feature and do two 
@@ -389,9 +391,20 @@ var PartialRibbonsActions = actions.Actions({
 				|| 9) * w
 
 			// XXX DEBUG
-			size = 5
+			//size = 5
 
+			// XXX for some reason this does not set the .current class 
+			// 		on the right image...
 			this.virtualdom.sync(target, size)
+
+			// XXX HACK: this fixes a bug in virtual-dom where .current
+			// 		is not synced correctly...
+			// 		...one theory I have is that we change the class 
+			// 		manually, dom gets diffed and no change is detected
+			// 		then the object gets recycled and the .current class
+			// 		ends up on a different element...
+			this.ribbons.focusImage(target)
+
 			this.centerViewer(target)
 		}],
 })

ui (gen4)/features/ui.js

@@ -665,27 +665,8 @@ module.ViewerActions = actions.Actions({
 
 	focusImage: [
 		function(target, list){
-			var ribbons = this.ribbons
-			var data = this.data
-
-			// NOTE: we do not need to do anything in the alternative 
-			// 		case as it's done in data/Client, so we'll just 
-			// 		peek there later...
-			if(data == null){
-				target = ribbons.focusImage(target)
-				var gid = ribbons.getElemGID(target)
-			}
-
 			return function(){
-				if(data != null){
-					// use the data for all the heavy lifting...
-					// NOTE: this will prevent sync errors...
-					var gid = data.getImage()
-
-					target = ribbons.focusImage(gid)
-				}
-			}
-		}],
+				this.ribbons.focusImage(this.data != null ? this.current : target) } }],
 	focusRibbon: [
 		function(target, mode){
 			mode = mode || this.config['ribbon-focus-mode']

ui (gen4)/imagegrid/ribbons.js

@@ -2481,8 +2481,10 @@ var RibbonsPrototype = {
 		//var s = (!w || !h) ? getComputedStyle(image) : null
 		//w = w || parseFloat(s.width)
 		//h = h || parseFloat(s.height) 
-		w = w || image.offsetWidth 
-		h = h || image.offsetHeight 
+		//w = this.px2vmin(w || image.offsetWidth)
+		//h = this.px2vmin(h || image.offsetHeight)
+		w = w || image.offsetWidth
+		h = h || image.offsetHeight
 
 		// non-square image...
 		if(w != h){
@@ -2503,15 +2505,15 @@ var RibbonsPrototype = {
 			// proportions are the same as the screen...
 			if((o == 90 || o == 270) && image_p == viewer_p){
 				return {
-					width: dfl_h ? '' : h,
-					height: dfl_w ? '' : w,
-					margin: -((w - h)/2) +'px '+ (w - h)/2 + 'px',
+					width: dfl_h ? '' : (this.px2vmin(h) + 'vmin'),
+					height: dfl_w ? '' : (this.px2vmin(w) + 'vmin'),
+					margin: this.px2vmin(-((w - h)/2)) +'vmin '+ this.px2vmin((w - h)/2) + 'vmin',
 				}
 
 			} else if((o == 0 || o == 180) && image_p != viewer_p){
 				return {
-					width: dfl_h ? '' : h,
-					height: dfl_w ? '' : w,
+					width: dfl_h ? '' : (this.px2vmin(h) + 'vmin'),
+					height: dfl_w ? '' : (this.px2vmin(w) + 'vmin'),
 					margin: '',
 				}
 			}
@@ -2563,7 +2565,12 @@ var RibbonsPrototype = {
 		var h = ribbon[0].offsetHeight
 
 		//locator.css('transform', 'translateY(-'+ (t + h/2) +'px)')
-		locator.transform({x: 0, y: -(t + h/2), z: 0}) 
+		//locator.transform({x: 0, y: -(t + h/2), z: 0}) 
+		locator.transform({
+			x: 0, 
+			y: this.px2vh(-(t + h/2)) + 'vh', 
+			z: 0,
+		}) 
 
 		return this
 	},