added single image mode transition control...

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

ui/TODO.otl

@@ -1,5 +1,5 @@
 Priority work
-	[_] 72% Preview II
+	[_] 73% Preview II
 		[X] 100% sorted images in ribbons
 			[X] 100% stage I: position the promoted/demoted image correctly
 			| and correct positioning on promote/demote
@@ -58,7 +58,7 @@ Priority work
 				[X] one (with zooming)
 			[X] single image mode with zooming
 			| ribbons are hidden
-		[_] 60% UI
+		[_] 66% UI
 			[X] fix single image mode
 			| need to center the image correctly...
 			[X] 100% add screen buttons for all actions...
@@ -70,6 +70,9 @@ Priority work
 					[X] three
 					[X] wide
 					| toggle...
+			[X] 100% control single-image mode animations
+				[X] scroll
+				[X] switch (no transition)
 			[_] 0% layout
 				[_] tablet
 				| - buttons at sides
@@ -99,7 +102,7 @@ Priority work
 				| before starting on a fix, need to cleanup the code from old hacks and workarounds...
 		[_] 0% native client
 			[_] android
-	[_] 10% Preview II (optional features)
+	[_] 8% Preview II (optional features)
 		[_] 80% drag/move action...
 			[X] basic infrastructure
 			[X] action: center current image
@@ -128,6 +131,7 @@ Priority work
 		[_] tap image to return from large magnification
 		[_] pinch to zoom
 		[_] slideshow...
+		[_] fade animation is single image mode...
 		[_] add sort/re-sort capability...
 		[_] make scrolling of other ribbons proportional to the gap...
 		[_] 0% refactoring (low priority)

ui/gallery-prototype.js

@@ -6,6 +6,7 @@
 var keys = {
 	toggleHelp: [72],
 	toggleSingleImageMode: [70, 13],	// ???, Enter
+	toggleSingleImageModeTransitions: [65],	// a
 	close: [27, 88, 67],
 
 	// zooming...
@@ -232,6 +233,7 @@ function handleKeys(event){
 		: (fn(code, keys.moveViewRight) >= 0) ? moveViewRight()
 
 		: (fn(code, keys.toggleSingleImageMode) >= 0) ? toggleSingleImageMode()
+		: (fn(code, keys.toggleSingleImageModeTransitions) >= 0) ? toggleSingleImageModeTransitions()
 		: (fn(code, keys.ignore) >= 0) ? false
 		// XXX
 		: (keys.helpShowOnUnknownKey) ? function(){alert(code)}()
@@ -547,6 +549,16 @@ function mergeRibbons(direction){
 }
 
 
+function toggleSingleImageModeTransitions(){
+	if( $('.no-single-image-transitions').length > 0 ){
+
+		$('.no-single-image-transitions').removeClass('no-single-image-transitions')
+	} else {
+		$('.viewer').addClass('no-single-image-transitions')
+	}
+}
+
+
 
 /*************************************************** Editor Actions **/
 

ui/gallery.css

@@ -9,7 +9,7 @@
 .unanimated {
 	-webkit-transition: none;
 	-moz-transition: none;
-	-o-transition: none;
+	-o-transition: all 0 ease;
 	-ms-transition: none;	
 	transition: none;
 }

ui/gallery.html

@@ -101,6 +101,10 @@ $(document).ready(setup);
 
 	<br><br>
 
+	<button onclick="toggleSingleImageModeTransitions()">toggle single image mode transitions (a)</button>
+
+	<br><br>
+
 	<button onclick="firstImage()">first (home)</button>
 	<button onclick="prevImage()">prev (left)</button>
 	<button onclick="nextImage()">next (right)</button>

ui/single-image-mode.css

@@ -32,3 +32,13 @@
 	opacity: 1.0;
 }
 
+
+/* disabled animations */
+.single-image-mode.no-single-image-transitions .image, .single-image-mode.no-single-image-transitions .ribbon {
+	-webkit-transition: none;
+	-moz-transition: none;
+	-o-transition: all 0 ease;
+	-ms-transition: none;	
+	transition: none;
+}
+