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){
+function getImageFlipState(image){
-	// XXX
+	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.css

@@ -1,46 +1,40 @@
 /**********************************************************************
 * 
 **********************************************************************/
-
 body {
   font-family: sans-serif;
   padding: 0px;
   margin: 0px;
 }
-
-
-
 /********************************************************** Viewer ***/
 .viewer {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
-
   /*border: solid blue 1px;*/
-	box-sizing: border-box;
 
+  box-sizing: border-box;
   -moz-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
-
-
-
 /****************************************************** Ribbon set ***/
 .ribbon-set {
   position: absolute;
   display: block;
-
   /* NOTE: this needs for scaling/zooming to behave correctly and not 
 			shift the element, when its dimensions change... 
 			...this is because .ribbon-set will both be used for scaling 
 			and aligning... */
+
   transform-origin: top left;
   -ms-transform-origin: top left;
-	-webkit-transform-origin: top left; /* Safari and Chrome */
+  -webkit-transform-origin: top left;
+  /* Safari and Chrome */
+
 }
 .ribbon-set:empty:after {
   display: block;
@@ -51,9 +45,6 @@ body {
   content: "Empty";
   text-align: center;
 }
-
-
-
 /********************************************************** Ribbon ***/
 .ribbon {
   position: relative;
@@ -63,7 +54,6 @@ body {
   overflow: visible;
   white-space: nowrap;
   font-size: 0;
-
   margin-top: 20px;
   margin-bottom: 20px;
 }
@@ -76,9 +66,6 @@ body {
 .ribbon:last-child {
   margin-bottom: 0px;
 }
-
-
-
 /*********************************************************** Image ***/
 .image {
   position: relative;
@@ -89,26 +76,22 @@ body {
   height: 300px;
   font-size: 12pt;
   overflow: hidden;
-
   box-sizing: border-box;
   color: white;
-
   text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
-
+  background: no-repeat 50% #000000;
-	background: no-repeat 50% black;
   background-size: contain;
   /* XXX do we need this? */
+
   border: solid black 5px;
 }
 .current.image {
-	background: no-repeat 50% black;
+  background: no-repeat 50% #000000;
   background-size: contain;
-
   /* XXX remove this... */
+
   border: solid red 5px;
 }
-
-
 /* image turning... */
 /* NOTE: need to account for proportions after turning... */
 .image[orientation="90"] {
@@ -132,8 +115,33 @@ body {
   -ms-transform: rotate(270deg);
   transform: rotate(270deg);
 }
-
+/* Flipped vertically only... */
-
+/* NOTE: wee need to do all possible combinations here as we can't 
+ 	combine different parts of a transform attr from different 
+ 	classes */
+.image[flipped*="vertical"] {
+  -moz-transform: scaleY(-1);
+  -o-transform: scaleY(-1);
+  -webkit-transform: scaleY(-1);
+  -ms-transform: scaleY(-1);
+  transform: scaleY(-1);
+}
+/* Flipped horizontally only... */
+.image[flipped*="horizontal"] {
+  -moz-transform: scaleX(-1);
+  -o-transform: scaleX(-1);
+  -webkit-transform: scaleX(-1);
+  -ms-transform: scaleX(-1);
+  transform: scaleX(-1);
+}
+/* Flipped vertically only... */
+.image[flipped*="vertical"][flipped*="horizontal"] {
+  -moz-transform: scaleX(-1) scaleY(-1);
+  -o-transform: scaleX(-1) scaleY(-1);
+  -webkit-transform: scaleX(-1) scaleY(-1);
+  -ms-transform: scaleX(-1) scaleY(-1);
+  transform: scaleX(-1) scaleY(-1);
+}
 /* default backgrounds */
 /* XXX not sure if we need these... */
 /*
@@ -150,9 +158,6 @@ body {
 	background-image: url(images/loading-270deg.gif);
 }
 */
-
-
-
 /***************************************************** Image marks ***/
 .marks-visible.viewer .marked.image:after {
   display: block;
@@ -160,13 +165,10 @@ body {
   content: "";
   font-size: 0pt;
   border: none;
-
   width: 15px;
   height: 15px;
-
   bottom: 5px;
   right: 5px;
-
   border-radius: 50%;
   background: blue;
 }
@@ -182,12 +184,10 @@ body {
   bottom: 5px;
   left: 5px;
 }
-
 /* XXX make the marks position relative to viewer or gidden compleatly */
 .marks-visible.single-image-mode.viewer .marked.image:after {
   display: none;
 }
-
 /* corner mark... (a-la bookmarks in PortableMag) */
 /*
 .marks-visible.viewer .marked.image:after {
@@ -224,8 +224,6 @@ body {
 	right: -15px;
 }
 */
-
-
 /*.marks-visible.viewer:not(.single-image-mode):after {*/
 /*
 .marks-visible.viewer:after {
@@ -261,18 +259,13 @@ body {
 	background: blue;
 }
 */
-
 /* XXX should we use opacity??? */
 .marked-only-view.viewer:not(.marks-visible) .image:not(.marked) {
   opacity: 0.3;
 }
-
-
-
 /****************************************************** Image info ***/
 .image .inline-image-info {
   display: none;
-
   position: absolute;
   bottom: 0px;
   width: 100%;
@@ -300,11 +293,9 @@ body {
 .image[orientation="90"] .inline-image-info {
   top: auto;
   left: 100%;
-
   -ms-transform-origin: bottom left;
   -webkit-transform-origin: bottom left;
   transform-origin: bottom left;
-
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
@@ -314,7 +305,6 @@ body {
 .image[orientation="180"] .inline-image-info {
   top: 0px;
   bottom: auto;
-
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -o-transform: rotate(180deg);
@@ -325,22 +315,18 @@ body {
   top: auto;
   left: auto;
   right: 100%;
-
   -ms-transform-origin: bottom right;
   -webkit-transform-origin: bottom right;
   transform-origin: bottom right;
-
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }
-
 .overlay-info {
   display: none;
   position: absolute;
-
   bottom: 0px;
   left: 0px;
   width: 100%;
@@ -348,10 +334,8 @@ body {
   padding-left: 10px;
   padding-right: 10px;
   box-sizing: border-box;
-
   background: black;
   color: white;
-
   opacity: 0.6;
 }
 .overlay-info:hover {
@@ -374,18 +358,12 @@ body {
   color: white;
   background: red;
 }
-
-
-
 /*************************************************** Global status ***/
 .global-status {
   display: block;
   opacity: 1;
   z-index: 1000;
 }
-
-
-
 /****************************************************** Indicators ***/
 .up-indicator,
 .down-indicator,
@@ -399,9 +377,7 @@ body {
   height: 50px;
   width: 100px;
   margin-left: -50px;
-
   overflow: hidden;
-
   cursor: hand;
 }
 .up-indicator:after,
@@ -411,12 +387,9 @@ body {
   content: "";
   width: 50px;
   height: 50px;
-
   bottom: -25px;
   left: 25px;
-
   background: yellow;
-
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
@@ -437,7 +410,6 @@ body {
   width: 10px;
   height: 100%;
   margin: 0px;
-
   background: yellow;
 }
 .end-indicator {
@@ -451,8 +423,6 @@ body {
 .end-indicator {
   display: none;
 }
-
-
 /* these are generic containers for indicators */
 .global-mode-indicators {
   position: absolute;
@@ -460,7 +430,6 @@ body {
   right: 15px;
   height: 20px;
   width: auto;
-
   font-size: small;
 }
 .global-mode-indicators > * {
@@ -485,7 +454,6 @@ body {
 .single-image-mode.viewer .global-mode-indicators:hover {
   opacity: 1;
 }
-
 /* context indicators */
 .context-mode-indicators {
   position: absolute;
@@ -493,7 +461,6 @@ body {
   bottom: 15px;
   height: 20px;
   width: auto;
-
   font-size: small;
 }
 .context-mode-indicators > * {
@@ -505,8 +472,6 @@ body {
   height: 10px;
   border-radius: 50%;
 }
-
-
 /* actual indicators */
 /* marks... */
 .global-mode-indicators .marked-only-visible,
@@ -552,27 +517,24 @@ body {
 .single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked.shown {
   display: inline-block;
 }
-
-
-
 /********************************************** Mode: single image ***/
 .single-image-mode.viewer .image {
   background-color: transparent;
   /* NOTE: need to keep a distance from screen borders... */
+
   border: solid transparent 2px;
 }
 .single-image-mode.viewer .image:not(.current) {
   /* XXX for some reason this breaks the alignment on large magnifications...
 	display: none;
 	*/
+
   /* XXX this makes images pass through the :visible filter...
 	opacity: 0;
 	*/
+
   visibility: hidden;
 }
-
-
-
 /********************************************************** Themes ***/
 /* XXX this is by no means final... */
 .viewer,
@@ -580,19 +542,14 @@ body {
 .light.viewer .overlay-block .background {
   background: white;
 }
-
 .gray.viewer,
 .gray.viewer .overlay-block .background {
   background: #333;
 }
-
 .dark.viewer,
 .dark.viewer .overlay-block .background {
   background: #0a0a0a;
 }
-
-
-
 /********************************************************* Overlay ***/
 .overlay-block {
   display: none;
@@ -605,8 +562,6 @@ body {
 .viewer.overlay .overlay-block {
   display: block;
 }
-.overlay-block .content {
-}
 .overlay-block .background {
   position: absolute:
 	top: 0px;
@@ -615,15 +570,11 @@ body {
   width: 100%;
   opacity: 0.7;
 }
-
-
-
 /************************************************************ Help ***/
 /* this is for sliding stuff */
 .viewer.drawer-mode {
   box-shadow: 0px 0px 50px 0px silver;
 }
-
 /* help */
 .keyboard-help {
   width: 80%;
@@ -657,9 +608,6 @@ body {
   padding-right: 0px;
   padding-left: 0px;
 }
-
-
-
 /********************************************************* utility ***/
 .expanding-text .hidden {
   display: none;
@@ -670,8 +618,5 @@ body {
 .expanding-text:hover .hidden {
   display: inline;
 }
-
+/**********************************************************************
-
+* vim:set spell ft=css :                                             */
-
-
-/*********************************************************************/

ui/layout.less

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