minor tweaks and fixes...

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

ui (gen4)/index.html

@@ -36,9 +36,16 @@
 
 	-webkit-transition: all 0.1s ease-in;
 	-moz-transition: all 0.1s ease-in;
+	-ms-transition: all 0.1s ease-in;
+	-o-transition: all 0.1s ease-in;
 	transition: all 0.1s ease-in;
 }
+.shadow,
 .shadow .image {
+	-webkit-transform-origin: 0 0;
+	-moz-transform-origin: 0 0;
+	-ms-transform-origin: 0 0;
+	-o-transform-origin: 0 0;
 	transform-origin: 0 0;
 }
 .image.moving {
@@ -49,18 +56,24 @@
 .viewer:not(.no-transitions) .ribbon-set {
 	-webkit-transition: all 0.2s linear, transform 0.2s linear;
 	-moz-transition: all 0.2s linear, transform 0.2s linear;
+	-ms-transition: all 0.2s linear, transform 0.2s linear;
+	-o-transition: all 0.2s linear, transform 0.2s linear;
 	transition: all 0.2s linear, transform 0.2s linear;
 }
 
 .viewer:not(.no-transitions) .ribbon {
 	-webkit-transition: all 0.2s ease-out;
 	-moz-transition: all 0.2s ease-out;
+	-ms-transition: all 0.2s ease-out;
+	-o-transition: all 0.2s ease-out;
 	transition: all 0.2s ease-out;
 }
 
 .no-transitions {
 	-webkit-transition: none;
 	-moz-transition: none;
+	-ms-transition: none;
+	-o-transition: none;
 	transition: none;
 }
 

ui (gen4)/ribbons.js

@@ -339,17 +339,17 @@ module.RibbonsPrototype = {
 		var img = this.getImage(target)
 		var gid = this.getElemGID(img)
 		var s = this.getScale()
-		var shadow = $('<div>')
+		var shadow = setElementScale($('<div>')
 				.addClass('shadow')
-				.append(setElementScale(
+				.append(
 					img
 						.clone()
 						.removeClass('current')
-						.attr('gid', null), s))
+						.attr('gid', null))
 				.css({
-					width: img.width()*s,
-					height: img.height()*s,
-				})
+					width: img.width(),
+					height: img.height(),
+				}), s)
 				.css(img.offset())
 			.appendTo(this.viewer)
 		img.addClass('moving')

ui (gen4)/viewer.js

@@ -190,15 +190,19 @@ actions.Actions({
 	// basic ribbon editing...
 	//
 	// NOTE: for all of these, current/ribbon image is a default...
-	//
-	// XXX move this out to a mixin...
+
+	// XXX to be used for things like mark/place and dragging...
+	shiftImageTo: ['',
+		function(target, to){
+			// XXX
+		}],
 	
 	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){ 
-			// by default we need to update the current position...
+			// by default we need to focus another image in the same ribbon...
 			if(target == null){
 				var direction = this.direction == 'right' ? 'next' : 'prev'
 
@@ -221,7 +225,7 @@ actions.Actions({
 			+'will shift to the next or previous image in the current '
 			+'ribbon depending on current direction.',
 		function(target){ 
-			// by default we need to update the current position...
+			// by default we need to focus another image in the same ribbon...
 			if(target == null){
 				var direction = this.direction == 'right' ? 'next' : 'prev'
 
@@ -506,22 +510,28 @@ actions.Actions(Client, {
 		function(){  }],
 
 
-	// XXX these are cheating...
+	// XXX are these cheating???
 	shiftImageUp: [
 		function(target){
+			// prevent animations form adding/removing ribbons...
 			this.ribbons.preventTransitions()
 
 			return function(){
 				this.ribbons.restoreTransitions()
+				// NOTE: this may seem like cheating, but .reload() should
+				// 		be very efficient, reusing all of the items loaded...
 				this.reload()
 			}
 		}],
 	shiftImageDown: [
 		function(target){
+			// prevent animations form adding/removing ribbons...
 			this.ribbons.preventTransitions()
 
 			return function(){
 				this.ribbons.restoreTransitions()
+				// NOTE: this may seem like cheating, but .reload() should
+				// 		be very efficient, reusing all of the items loaded...
 				this.reload()
 			}
 		}],