migrated to CSS transform/scale from zoom, zoomContainerBy still broken.

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

ui/experiment-ribbon-navigation-n-zoom.html

@@ -51,6 +51,31 @@ function imageClick(){
 	transition: all 0.5s ease;
 }
 
+.origin-marker {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 5px;
+	height: 5px;
+
+	border-top: solid blue 1px;
+	border-left: solid blue 1px;
+
+	z-index: 9999;
+}
+.origin-marker-2 {
+	position: relative;
+	top: -6px;
+	left: -6px;
+	width: 5px;
+	height: 5px;
+
+	border-bottom: solid blue 1px;
+	border-right: solid blue 1px;
+
+	z-index: 9999;
+}
+
 .container {
 	position: relative;
 	border: solid gray 5px;
@@ -73,7 +98,11 @@ function imageClick(){
 	-ms-transition: all 0.5s ease;	
 	transition: all 0.5s ease;
 
-	zoom: 1;
+	-webkit-transform: scale(1, 1);
+	-moz-transform: scale(1, 1);
+	-o-transform: scale(1, 1);
+	-ms-transform: scale(1, 1);
+	transform: scale(1, 1);
 }
 
 .ribbon {
@@ -141,6 +170,10 @@ Size:
 
 <div class="container animated">
 	<div class="field">
+		<div class="origin-marker animated">
+			<div class="origin-marker-2">
+			</div>
+		</div>
 		<div class="ribbon">
 			<div class="image">1</div>
 			<div class="image">2</div>

ui/ui.js

@@ -37,7 +37,8 @@ function getCurrentVerticalOffset(image){
 		image = $('.image.current')
 	}
 
-	var zoom = $('.field').css('zoom')
+	//var zoom = $('.field').css('zoom')
+	var zoom = getElementScale($('.field'))
 
 	var ribbons = $('.ribbon')
 	var ribbon = image.parents('.ribbon')
@@ -67,7 +68,8 @@ function getCurrentHorizontalOffset(image){
 		image = $('.image.current')
 	}
 
-	var zoom = $('.field').css('zoom')
+	//var zoom = $('.field').css('zoom')
+	var zoom = getElementScale($('.field'))
 
 	var ribbon = image.parents('.ribbon')
 	var images = ribbon.children('.image')
@@ -92,6 +94,8 @@ function centerSquare(){
 
 	// horizontal...
 	alignRibbon()
+
+	centerOrigin()
 }
 
 function alignRibbon(image, position){
@@ -129,6 +133,42 @@ function alignRibbon(image, position){
 	return false
 }
 
+/* Set the transform-origin to the center of the current view...
+ */
+// XXX this appears to be wrong....
+function centerOrigin(){
+	var mt = parseFloat($('.field').css('margin-top'))
+	var ml = parseFloat($('.field').css('margin-left'))
+	var cml = parseFloat($('.current.ribbon').css('margin-left'))
+
+	var t = parseFloat($('.field').css('top'))
+	var l = parseFloat($('.field').css('left'))
+	var w = $('.field').width()
+	var h = $('.field').height()
+	var W = $('.container').width()
+	var H = $('.container').height()
+
+	//var ot = mt + H/2 + t
+	//var ol = ml + W/2 + l
+	
+	var ot = -getCurrentVerticalOffset() + H/2 - t
+	var ol = -ml + W/2 - l
+
+	$('.field').css({
+		'transform-origin': ol + 'px ' + ot + 'px',
+		'-o-transform-origin': ol + 'px ' + ot + 'px',
+		'-moz-transform-origin': ol + 'px ' + ot + 'px',
+		'-webkit-transform-origin': ol + 'px ' + ot + 'px',
+		'-ms-transform-origin': ol + 'px ' + ot + 'px'
+	})
+
+	// XXX for debugging...
+	$('.origin-marker').css({
+		'top': ot,
+		'left': ol
+	})
+}
+
 
 
 /*********************************************************************/
@@ -139,7 +179,8 @@ function fieldSize(W, H){
 	var oW = $('.container').width()
 	var oH = $('.container').height()
 
-	var zoom = $('.field').css('zoom')
+	//var zoom = $('.field').css('zoom')
+	var zoom = getElementScale($('.field'))
 
 	$('.container').css({
 		'width': W,
@@ -160,10 +201,27 @@ function fieldSize(W, H){
 
 /*********************************************************************/
 
-// XXX need to fix animation jumping around... 
+// NOTE: this will only return a single scale/zoom value...
-// XXX try transition-origin instead of compensating by moving...
+function getElementScale(elem){
+	var zoom = elem.css('zoom')
+	var transform = elem.css('transform')
+	var res
+
+	// get the scale value...
+	if( (/scale\(/).test(transform) ){
+		res = (/scale\((.*),.*\)/).exec(transform)[1]
+	} else {
+		res = zoom
+	}
+	return res
+}
+// XXX
+function setElementScale(elem, scale){
+}
+
+// XXX this appears to be broken -- for some reason the current scale does not change...
 function zoomContainerBy(factor){
-	var zoom = $('.field').css('zoom')*factor 
+	var zoom = getElementScale($('.field'))*factor 
 
 	setContainerZoom(zoom)
 }
@@ -173,11 +231,11 @@ function setContainerZoom(zoom){
 	var W = $('.container').width()
 
 	$('.field').css({
-		'zoom': zoom,
+		'transform': 'scale('+zoom+', '+zoom+')',
-		// this only shifts to account for zoom/scale change...
+		'-moz-transform': 'scale('+zoom+', '+zoom+')',
-		// ...we need to factor in the position of .current within the field
+		'-o-transform': 'scale('+zoom+', '+zoom+')',
-		'top': H/2 * 1/zoom - H/2, 
+		'-ms-transform': 'scale('+zoom+', '+zoom+')',
-		'left': W/2 * 1/zoom - W/2 
+		'-webkit-transform': 'scale('+zoom+', '+zoom+')',
 	})
 }