fixed a dependency leak in viewer.Client and did zoom actions...

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

ui (gen4)/ribbons.js

@@ -211,10 +211,10 @@ module.RibbonsPrototype = {
 	// 		gets the visible size of the image tile in pixels.
 	//
 	// XXX try and make image size the product of vmin and scale...
-	getVisibleImageSize: function(dim){
+	getVisibleImageSize: function(dim, scale){
+		scale = scale || this.getScale()
 		dim = dim == null ? 'width' : dim
 		var img = this.viewer.find('.image')
-		var scale = this.getScale()
 		if(dim == 'height'){
 			return img.outerHeight(true) * scale
 		} else if(dim == 'width'){
@@ -230,7 +230,7 @@ module.RibbonsPrototype = {
 		var scale = scale == null ? 1 : scale/this.getScale()
 
 		var W = this.viewer.width()
-		var w = this.getVisibleImageSize('width')*scale
+		var w = this.getVisibleImageSize('width') * scale
 
 		return W/w
 	},
@@ -1408,12 +1408,25 @@ module.RibbonsPrototype = {
 	//
 	// If n is given this will fit n images (default: 1)
 	//
+	// NOTE: this will never scale the view in a wat that an image 
+	// 		overflows either in height nor width.
+	//
 	// XXX might be usefull to set origin before scaling...
 	fitImage: function(n){
 		n = n == null ? 1 : n
 
+		// NOTE: this is width oriented...
 		var scale = this.getScreenWidthImages(1) / n
 
+		// check bounds...
+		var H = this.viewer.height()
+		var h = this.getVisibleImageSize('height', 1)
+
+		// n images will be higher than the viewer, adjust for height...
+		if(h*scale >= H){
+			scale = H/h 
+		}
+
 		this
 			.setScale(scale)
 			//.centerRibbon(null, null, scale)

ui (gen4)/ui.js

@@ -138,8 +138,14 @@ module.GLOBAL_KEYBOARD = {
 			shift: function(){ a.shiftImageDown() },
 			'ctrl+shift': function(){ a.shiftImageDownNewRibbon() },
 		},
-		'#0': function(){ a.fitImage(20) },
+		'#0': function(){ a.fitMax() },
-		'#1': function(){ a.fitOrig() },
+		'#1': {
+			default: function(){ a.fitImage() },
+			ctrl: function(){ 
+				event.preventDefault()
+				a.fitOrig() 
+			},
+		},
 		'#2': function(){ a.fitTwo() },
 		'#3': function(){ a.fitThree() },
 		'#4': function(){ a.fitFour() },
@@ -149,6 +155,10 @@ module.GLOBAL_KEYBOARD = {
 		'#8': function(){ a.fitEight() },
 		'#9': function(){ a.fitNine() },
 		
+		'+': function(){ a.zoomIn() },
+		'=': '+',
+		'-': function(){ a.zoomOut() },
+		
 
 	},
 }	

ui (gen4)/viewer.js

@@ -32,6 +32,8 @@ actions.Actions({
 	// XXX should this be here???
 	config: {
 		'steps-to-change-direction': 3,
+		'max-screen-images': 30,
+		'zoom-step': 1.2,
 	},
 
 
@@ -190,14 +192,12 @@ actions.Actions({
 	// NOTE: for all of these, current/ribbon image is a default...
 	//
 	// XXX move this out to a mixin...
+	
 	shiftImageUp: ['Shift image up',
 		'If implicitly shifting current image (i.e. no arguments), focus '
 			+'will shift to the next or previous image in the current '
 			+'ribbon depending on current direction.',
 		function(target){ 
-			// stop transitions...
-			this.ribbons.preventTransitions()
-
 			// by default we need to update the current position...
 			if(target == null){
 				var direction = this.direction == 'right' ? 'next' : 'prev'
@@ -215,20 +215,12 @@ actions.Actions({
 			} else {
 				this.data.shiftImageUp(target)
 			}
-
-			// restore transitions...
-			return function(){
-				this.ribbons.restoreTransitions()
-			}
 		}],
 	shiftImageDown: ['Shift image down',
 		'If implicitly shifting current image (i.e. no arguments), focus '
 			+'will shift to the next or previous image in the current '
 			+'ribbon depending on current direction.',
 		function(target){ 
-			// stop transitions...
-			this.ribbons.preventTransitions()
-
 			// by default we need to update the current position...
 			if(target == null){
 				var direction = this.direction == 'right' ? 'next' : 'prev'
@@ -246,11 +238,6 @@ actions.Actions({
 			} else {
 				this.data.shiftImageDown(target)
 			}
-		
-			// restore transitions...
-			return function(){
-				this.ribbons.restoreTransitions()
-			}
 		}],
 	shiftImageUpNewRibbon: ['Shift image up to a new empty ribbon',
 		function(target){
@@ -442,11 +429,32 @@ actions.Actions(Client, {
 		}],
 
 	// zooming...
-	// XXX
+	//
+	// Zooming is done by multiplying the current scale by config['zoom-step']
+	// and rounding to nearest discrete number of images to fit on screen.
 	zoomIn: ['Zoom in',
-		function(){  }],
+		function(){ 
+			this.ribbons.setOrigin()
+
+			//var n = Math.round(this.ribbons.getScreenWidthImages())-1
+			var d = this.config['zoom-step']
+			var s = a.ribbons.getScale() * d
+			var n = Math.floor(this.ribbons.getScreenWidthImages(s))
+		
+			this.fitImage(n <= 0 ? 1 : n)
+		}],
 	zoomOut: ['Zoom out',
-		function(){  }],
+		function(){ 
+			this.ribbons.setOrigin()
+
+			//var n = Math.round(this.ribbons.getScreenWidthImages())+1
+			var d = this.config['zoom-step']
+			var s = a.ribbons.getScale() / d
+			var n = Math.ceil(this.ribbons.getScreenWidthImages(s))
+
+			var max = this.config['max-screen-images']
+			this.fitImage(n > max ? max : n)
+		}],
 
 	fitOrig: ['Fit to original scale',
 		function(){ 
@@ -461,7 +469,6 @@ actions.Actions(Client, {
 
 	// NOTE: if this gets a count argument it will fit count images, 
 	// 		default is one.
-	// XXX animation broken for this...
 	fitImage: ['Fit image',
 		function(count){
 			//this.ribbons.preventTransitions()
@@ -473,7 +480,6 @@ actions.Actions(Client, {
 			//this.ribbons.restoreTransitions()
 		}],
 
-	// XXX should these be relative to screen rather than actual image counts?
 	fitTwo: ['Fit two images', function(){ this.fitImage(2) }],
 	fitThree: ['Fit three images', function(){ this.fitImage(3) }],
 	fitFour: ['Fit four images', function(){ this.fitImage(4) }],
@@ -486,9 +492,8 @@ actions.Actions(Client, {
 	fitEleven: ['Fit eleven images', function(){ this.fitImage(11) }],
 	fitTwelve: ['Fit twelve images', function(){ this.fitImage(12) }],
 
-	// XXX
 	fitMax: ['Fit the maximum number of images',
-		function(){  }],
+		function(){ this.fitImage(this.config['max-screen-images']) }],
 
 	// XXX
 	fitSmall: ['Show small image',
@@ -504,15 +509,19 @@ actions.Actions(Client, {
 	// XXX these are cheating...
 	shiftImageUp: [
 		function(target){
+			this.ribbons.preventTransitions()
+
 			return function(){
-				// XXX this is cheating...
+				this.ribbons.restoreTransitions()
 				this.reload()
 			}
 		}],
 	shiftImageDown: [
 		function(target){
+			this.ribbons.preventTransitions()
+
 			return function(){
-				// XXX this is cheating...
+				this.ribbons.restoreTransitions()
 				this.reload()
 			}
 		}],
@@ -566,6 +575,9 @@ actions.Actions(Client, {
 
 	// basic image editing...
 	//
+	// XXX should these call .images.* or should it be done by data...
+	// 		...I think that data is a better candidate as it should be
+	// 		standalone...
 	rotateCW: [ 
 		function(target){ this.ribbons.rotateCW(target) }],
 	rotateCCW: [