started work on flipping...

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

ui/base.js

@@ -877,27 +877,79 @@ function rotateImage(direction, image){
 	})
 
 	$('.viewer').trigger('rotating' + direction.capitalize(), [image])
+
+	return image
 }
 
 
 function rotateLeft(image){
-	rotateImage('left', image)
+	return rotateImage('left', image)
 }
 function rotateRight(image){
-	rotateImage('right', image)
+	return rotateImage('right', image)
 }
 
 
 
 /******************************************************** Flipping ***/
 
-function flipVertical(image){
-	// XXX
+function getImageFlipState(image){
+	image = image == null ? getImage() : $(image)
+	var state = image.attr('flipped')
+
+	if(state == null){
+		return []
+	}
+
+	state = state.split(',').map(function(e){ return e.trim() })
+
+	return state
+}
+function setImageFlipState(image, state){
+	image = image == null ? getImage() : $(image)
+	
+	if(state.length == 0){
+		image.removeAttr('flipped')
+	} else if(state != null){
+		image.attr('flipped', state.join(', '))
+	}
+
+	return image
+}
+
+// XXX not yet implemented...
+// 		...mostly because it will conflict with turning and require a
+// 		very tightly woven with rotation code, both JS and CSS...
+// 		i.e. requiring two sets of rotation styles, one for flipped 
+// 		and another for horizontally flipped image.
+// 		...at least flipping will not affect the square/viewer aspect 
+// 		ratio of images.
+function flipImage(direction, image){
+	image = image == null ? getImage() : $(image)
+	image.each(function(i, e){
+		var img = $(this)
+		var state = getImageFlipState(img)
+		var i = state.indexOf(direction)
+
+		if(i >= 0){
+			state.splice(i, 1)
+		} else {
+			state.push(direction)
+		}
+		setImageFlipState(image, state)
+	})
+
+	$('.viewer').trigger('flipping' + direction.capitalize(), [image])
+
+	return image
 }
 
 
+function flipVertical(image){
+	return flipImage('vertical')
+}
 function flipHorizontal(image){
-	// XXX
+	return flipImage('horizontal')
 }
 
 

ui/data.js

@@ -1425,6 +1425,8 @@ function updateRibbonsFromFavDirs(){
 * Actions...
 */
 
+/******************************************************** Extension **/
+
 // Open image in an external editor/viewer
 //
 // NOTE: this will open the default editor/viewer.
@@ -1438,6 +1440,9 @@ function openImage(){
 }
 
 
+
+/********************************************************** Sorting **/
+
 function reverseImageOrder(){
 	DATA.order.reverse()
 	updateRibbonOrder()
@@ -1466,6 +1471,9 @@ function sortImagesByName(reverse){
 }
 
 
+
+/*************************************************** Manual sorting **/
+
 // Ordering images...
 // NOTE: this a bit more complicated than simply shifting an image 
 // 		left/right the DATA.order, we have to put it before or after

ui/index.html

@@ -4,6 +4,8 @@
 
 
 <link rel="stylesheet" href="layout.css">
+<!-- use only for devel... -->
+<link rel="stylesheet/less" href="layout.less">
 
 <style>
 
@@ -12,6 +14,38 @@
 </style>
 
 
+<script>
+less = {
+	 // or "production"
+	env: "development", 
+
+	// load imports async
+	async: false,
+
+	// load imports async when in a page under
+	// a file protocol
+	fileAsync: false,
+
+	// when in watch mode, time in ms between polls
+	//poll: 1000,
+
+	// user functions, keyed by name
+	//functions: {},
+
+	// or "mediaQuery" or "all"
+	//dumpLineNumbers: "comments",
+
+	// whether to adjust url's to be relative
+	// if false, url's are already relative to the
+	// entry less file
+	//relativeUrls: false,
+
+	// a path to add on to the start of every url
+	//resource
+	//rootpath: ":/a.com/"
+}
+</script>
+<script src="ext-lib/less.js"></script>
 <script src="ext-lib/jquery.js"></script>
 
 <script src="lib/jli.js"></script>

ui/layout.less

@@ -122,18 +122,10 @@ body {
 	.rotate(90deg);
 }
 .image[orientation="180"] {
-	-webkit-transform: rotate(180deg);
-	-moz-transform: rotate(180deg);
-	-o-transform: rotate(180deg);
-	-ms-transform: rotate(180deg);
-	transform: rotate(180deg);
+	.rotate(180deg);
 }
 .image[orientation="270"] {
-	-webkit-transform: rotate(270deg);
-	-moz-transform: rotate(270deg);
-	-o-transform: rotate(270deg);
-	-ms-transform: rotate(270deg);
-	transform: rotate(270deg);
+	.rotate(270deg);
 }
 
 

ui/setup.js

@@ -16,7 +16,7 @@ function setupIndicators(){
 		.click(function(){ toggleMarkesView() })
 	showGlobalIndicator(
 			'marked-only-visible', 
-			'Marked only images visible (alt-F2)')
+			'Marked only images visible (shift-F2)')
 		.css('cursor', 'hand')
 		.click(function(){ toggleMarkedOnlyView() })
 

ui/ui.js

@@ -175,9 +175,15 @@ function updateStatus(message){
 
 
 // Same as updateInfo(...) but will aslo show and animate-close the message
+//
+// XXX the next call will not reset the animation of the previous, rather 
+// 		it will pause it and rezume...
+// 		...not sure if this is correct.
 function showStatus(message){
 	return updateStatus.apply(null, arguments)
-		.stop()
+		//.stop()
+		.stop(true, false)
+		//.finish()
 		.show()
 		.delay(500)
 		.fadeOut(800)
@@ -193,7 +199,9 @@ function showErrorStatus(message){
 	message.splice(0, 0, 'Error:')
 	return updateStatus.apply(null, message)
 		.one('click', function(){ $(this).fadeOut() })
-		.stop()
+		//.stop()
+		.stop(true, false)
+		//.finish()
 		.show()
 }