added basic/experimental animations, started work on propper zooming...

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

ui (gen4)/index.html

@@ -26,11 +26,26 @@
 	border-color: red;
 }
 
+.shadow {
+	position: absolute;
+	overflow: visible;
+	width: auto;
+	height: auto;
+	background: black;
+
+	-webkit-transition: all 0.2s ease-in;
+	-moz-transition: all 0.2s ease-in;
+	transition: all 0.2s ease-in;
+}
+.image.moving {
+	visibility: hidden;
+}
+
 /* basic animation... */
 .viewer:not(.no-transitions) .ribbon-set {
-  -webkit-transition: all 0.2s ease;
-  -moz-transition: all 0.2s ease;
-  transition: all 0.2s ease;
+	-webkit-transition: all 0.2s ease, transform 0.2s linear;
+	-moz-transition: all 0.2s ease, transform 0.2s linear;
+	transition: all 0.2s ease, transform 0.2s linear;
 }
 
 .viewer:not(.no-transitions) .ribbon {

ui (gen4)/ribbons.js

@@ -239,11 +239,73 @@ module.RibbonsPrototype = {
 	getScale: function(){
 		return getElementScale(this.viewer.find('.ribbon-set'))
 	},
-	setScale: function(scale){
-		setElementScale(this.viewer.find('.ribbon-set'), scale)
+	// XXX need work on alignment after scaling...
+	// 		...this may require:
+	// 			- setting origin
+	// 			- using translate instead of top to position ribbon-set...
+	//
+	// 		Origin needs to be at the point on .ribbon-set that coresponds 
+	// 		to the point on screen that we need to scale relative to (i.e. 
+	// 		a fixed point).
+	//
+	// 		The problem here is that setting the origin messes up the 
+	// 		positioning (removing the top/left css attrs), thus a different
+	// 		strategy is needed to control positioning...
+	//
+	// 		One of the folowing approaches might work:
+	// 			- use translate for placement of the .ribbon-set (prefered)
+	// 			- use an extra eleemnt for positioning and keep the 
+	// 			  .ribbon-set at (0,0)
+	setScale: function(scale, t, l){
+		var ribbon_set = this.viewer.find('.ribbon-set')
+
+		var s = this.getScale()
+
+		if(t == null){
+			var img = this.getImage()
+			t = img.offset()
+			l = t.left + (img.width()/s)/2
+			t = t.top + (img.height()/s)/2
+		}
+
+		var ro = ribbon_set.offset()
+
+		var ot = t - ro.top
+		var ol = l - ro.left
+		setElementOrigin(ribbon_set, ol+'px', ot+'px')
+			
+		setElementScale(ribbon_set, scale)
 		return this
 	},
 
+	makeShadow: function(target, animate){
+		var img = this.getImage(target)
+		var gid = this.getElemGID(img)
+		var shadow = $('<div>')
+			.addClass('shadow')
+			.append(img
+					.clone()
+					.removeClass('current')
+					.attr('gid', null))
+			.css(img.offset())
+			.appendTo(this.viewer)
+		img.addClass('moving')
+		var that = this
+
+		return function(){
+			var img = that.getImage(gid)
+			if(animate){
+				shadow.css(img.offset())
+			}
+			setTimeout(function(){
+				img.removeClass('moving')
+				shadow.remove()
+			}, 200)
+			return img
+		}
+	},
+
+
 
 	// Contextual getters...
 	
@@ -1333,7 +1395,10 @@ module.RibbonsPrototype = {
 		return this
 	},
 
-	// XXX
+	// XXX need work on alignment after scaling...
+	// 		...this may require:
+	// 			- setting origin
+	// 			- using translate instead of top to position ribbon-set...
 	fitImage: function(n){
 		n = n == null ? 1 : n
 

ui (gen4)/ui.js

@@ -114,11 +114,17 @@ module.GLOBAL_KEYBOARD = {
 		End: function(){ a.lastImage() },
 		Left: {
 			default: function(){ a.prevImage() },
-			alt: function(){ a.shiftImageLeft() },
+			alt: function(){ 
+				event.preventDefault()
+				a.shiftImageLeft() 
+			},
 		},
 		Right: {
 			default: function(){ a.nextImage() },
-			alt: function(){ a.shiftImageRight() },
+			alt: function(){ 
+				event.preventDefault()
+				a.shiftImageRight() 
+			},
 		},
 		Up: {
 			default: function(){ a.prevRibbon() },
@@ -156,6 +162,8 @@ $(function(){
 				}))
 
 	window.a = testing.setupActions()
+
+	viewer.setupAnimation(a)
 })
 
 

ui (gen4)/viewer.js

@@ -262,7 +262,6 @@ actions.Actions({
 			this.data.newRibbon(target, 'below')
 			this.shiftImageDown(target)
 		}],
-	// XXX is tracking direction here correct???
 	shiftImageLeft: ['Shift image left',
 		function(target){ 
 			if(target == null){
@@ -271,7 +270,6 @@ actions.Actions({
 			this.data.shiftImageLeft(target) 
 			this.focusImage()
 		}],
-	// XXX is tracking direction here correct???
 	shiftImageRight: ['Shift image right',
 		function(target){ 
 			if(target == null){
@@ -438,16 +436,28 @@ actions.Actions(Client, {
 		function(){  }],
 
 	fitOrig: ['Fit to original scale',
-		function(){ this.ribbons.setScale(1) }],
+		function(){ 
+			//this.ribbons.preventTransitions()
+
+			this.ribbons.setScale(1) 
+			this.ribbons.updateImage('*')
+
+			//this.focusImage()
+			//this.ribbons.restoreTransitions()
+		}],
 
 	// 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()
+
 			this.ribbons.fitImage(count)
 			this.ribbons.updateImage('*')
+
 			//this.focusImage()
+			//this.ribbons.restoreTransitions()
 		}],
 
 	// XXX should these be relative to screen rather than actual image counts?
@@ -523,10 +533,41 @@ actions.Actions(Client, {
 		}],
 
 
+	// basic image editing...
+	//
+	// XXX
+	rotateCW: [ 
+		function(){  }],
+	rotateCCW: [ 
+		function(){  }],
+	flipVertical: [ 
+		function(){  }],
+	flipHorizontal: [
+		function(){  }],
+
 })
 
 
 
+var setupAnimation =
+module.setupAnimation =
+function setupAnimation(actions){
+	var animate = function(target){
+			var s = this.ribbons.makeShadow(target, true)
+			return function(){ s() }
+		}
+	var noanimate = function(target){
+			var s = this.ribbons.makeShadow(target)
+			return function(){ s() }
+		}
+	return actions
+		.on('shiftImageUp.pre', animate)
+		.on('shiftImageDown.pre', animate)
+		.on('shiftImageLeft.pre', noanimate)
+		.on('shiftImageRight.pre', noanimate)
+}
+
+
 /**********************************************************************
 * vim:set ts=4 sw=4 :                                                */
 return module })