some refactoring...

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

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

@@ -153,8 +153,8 @@ Guides:
 <br>
 
 Zoom:
-<button onclick="zoomContainerBy(2)">+</button>
-<button onclick="zoomContainerBy(0.5)">-</button>
+<button onclick="scaleContainerBy(2)">+</button>
+<button onclick="scaleContainerBy(0.5)">-</button>
 <button onclick="setContainerZoom(1)">Original</button>
 <button onclick="fitImage()">Image</button>
 <button onclick="fitThreeImages()">Three</button>

ui/gallery-prototype.js

@@ -42,7 +42,7 @@ function setupControlElements(){
 	$('.demote').click(shiftImageUp)
 	$('.promote').click(shiftImageDown)
 	$('.toggle-wide').click(toggleWideView)
-	$('.toggle-single').click(toggleRibbonView)
+	$('.toggle-single').click(toggleSingleImageMode)
 }
 
 
@@ -111,7 +111,7 @@ var ZOOM_FACTOR = 2
 // XXX need to make this handle modifiers gracefully...
 var keys = {
 	toggleHelp: [72],
-	toggleRibbonView: [70],
+	toggleSingleImageMode: [70],
 	close: [27, 88, 67],
 
 	// zooming...
@@ -187,10 +187,10 @@ function handleKeys(event){
 			}
 		}()
 		// zooming...
-		: (fn(code, keys.zoomIn) >= 0) ? zoomContainerBy(ZOOM_FACTOR)
-		: (fn(code, keys.zoomOut) >= 0) ? zoomContainerBy(1/ZOOM_FACTOR)
+		: (fn(code, keys.zoomIn) >= 0) ? scaleContainerBy(ZOOM_FACTOR)
+		: (fn(code, keys.zoomOut) >= 0) ? scaleContainerBy(1/ZOOM_FACTOR)
 		// zoom presets...
-		: (fn(code, keys.zoomOriginal) >= 0) ? setContainerZoom(1)
+		: (fn(code, keys.zoomOriginal) >= 0) ? setContainerScale(1)
 		: (fn(code, keys.fitOne) >= 0) ? fitImage()
 		: (fn(code, keys.fitThree) >= 0) ? fitThreeImages()
 
@@ -200,7 +200,7 @@ function handleKeys(event){
 		: (fn(code, keys.moveViewLeft) >= 0) ? moveViewLeft()
 		: (fn(code, keys.moveViewRight) >= 0) ? moveViewRight()
 
-		: (fn(code, keys.toggleRibbonView) >= 0) ? toggleRibbonView()
+		: (fn(code, keys.toggleSingleImageMode) >= 0) ? toggleSingleImageMode()
 		: (fn(code, keys.ignore) >= 0) ? false
 		// XXX
 		: (keys.helpShowOnUnknownKey) ? function(){alert(code)}()
@@ -236,12 +236,18 @@ function setViewerMode(mode){
 
 
 // ribbon/single view modes...
+
+var ORIGINAL_FIELD_SCALE = 1
+
 // XXX CSS broken...
-function toggleRibbonView(){
+function toggleSingleImageMode(){
 	if($('.single-image-mode').length > 0){
 		unsetViewerMode('single-image-mode')
+		setContainerScale(ORIGINAL_FIELD_SCALE)
 	} else {
 		setViewerMode('single-image-mode')
+		ORIGINAL_FIELD_SCALE = getElementScale($('.field'))
+		fitImage()
 	}
 }
 
@@ -250,10 +256,10 @@ function toggleRibbonView(){
 // wide view mode toggle...
 function toggleWideView(){
 	if($('.wide-view-mode').length > 0){
-		setContainerZoom(1)
+		setContainerScale(1)
 		$('.viewer').removeClass('wide-view-mode')
 	} else {
-		setContainerZoom(0.1)
+		setContainerScale(0.1)
 		$('.viewer').addClass('wide-view-mode')
 	}
 }

ui/gallery.html

@@ -124,7 +124,7 @@ $(document).ready(setup);
 
 	<button onclick="zoomContainerBy(2)">Zoom in (+)</button>
 	<button onclick="zoomContainerBy(0.5)">Zoom out (-)</button>
-	<button onclick="setContainerZoom(1)">Original (0)</button>
+	<button onclick="setContainerScale(1)">Original (0)</button>
 	<button onclick="fitImage()">Image (1)</button>
 	<button onclick="fitThreeImages()">Three (3)</button>
 

ui/ui.js

@@ -37,8 +37,7 @@ function getCurrentVerticalOffset(image){
 		image = $('.image.current')
 	}
 
-	//var zoom = $('.field').css('zoom')
-	var zoom = getElementScale($('.field'))
+	var scale = getElementScale($('.field'))
 
 	var ribbons = $('.ribbon')
 	var ribbon = image.parents('.ribbon')
@@ -68,8 +67,7 @@ function getCurrentHorizontalOffset(image){
 		image = $('.image.current')
 	}
 
-	//var zoom = $('.field').css('zoom')
-	var zoom = getElementScale($('.field'))
+	var scale = getElementScale($('.field'))
 
 	var ribbon = image.parents('.ribbon')
 	var images = ribbon.children('.image')
@@ -175,13 +173,12 @@ function centerOrigin(){
 
 // XXX need to make this work for % values...
 // XXX make this usable as an event handler for .resize(...) event...
-// XXX this does not account for zoom correctly...
+// XXX this does not account for scale correctly...
 function fieldSize(W, H){
 	var oW = $('.container').width()
 	var oH = $('.container').height()
 
-	//var zoom = $('.field').css('zoom')
-	var zoom = getElementScale($('.field'))
+	var scale = getElementScale($('.field'))
 
 	$('.container').css({
 		'width': W,
@@ -240,22 +237,22 @@ function setElementScale(elem, scale){
 }
 
 // XXX this appears to be broken -- for some reason the current scale does not change...
-function zoomContainerBy(factor){
-	var zoom = getElementScale($('.field'))*factor 
+function scaleContainerBy(factor){
+	var scale = getElementScale($('.field'))*factor 
 
-	setContainerZoom(zoom)
+	setContainerScale(scale)
 }
 
-function setContainerZoom(zoom){
+function setContainerScale(scale){
 	var H = $('.container').height()
 	var W = $('.container').width()
 
 	$('.field').css({
-		'transform': 'scale('+zoom+', '+zoom+')',
-		'-moz-transform': 'scale('+zoom+', '+zoom+')',
-		'-o-transform': 'scale('+zoom+', '+zoom+')',
-		'-ms-transform': 'scale('+zoom+', '+zoom+')',
-		'-webkit-transform': 'scale('+zoom+', '+zoom+')',
+		'transform': 'scale('+scale+', '+scale+')',
+		'-moz-transform': 'scale('+scale+', '+scale+')',
+		'-o-transform': 'scale('+scale+', '+scale+')',
+		'-ms-transform': 'scale('+scale+', '+scale+')',
+		'-webkit-transform': 'scale('+scale+', '+scale+')',
 	})
 }
 
@@ -268,7 +265,7 @@ function fitImage(){
 
 	var f = Math.min(H/h, W/w)
 
-	setContainerZoom(f)
+	setContainerScale(f)
 }
 
 function fitThreeImages(){
@@ -281,6 +278,6 @@ function fitThreeImages(){
 
 	var f = Math.min(H/h, W/w)
 
-	setContainerZoom(f)
+	setContainerScale(f)
 }