added basic image rotation, still not working correctly with screen proportions (single image mode)...

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

ui/base.js

@@ -782,6 +782,75 @@ function nextRibbon(mode){
 
 
 
+/******************************************************** Rotating ***/
+
+var cw = {
+	null: 0,
+	0: 90,
+	90: 180,
+	180: 270,
+	270: 0,
+}
+
+var ccw = {
+	null: 0,
+	0: 270,
+	90: 0,
+	180: 90,
+	270: 180,
+}
+
+// XXX need to account for proportions...
+function rotateImage(direction, image){
+	var r_table = direction == 'Left' ? cw : ccw
+	image = image == null ? $('.current.image') : $(image)
+	image.each(function(i, e){
+		var img = $(this)
+		var o = img.attr('orientation')
+		img.attr('orientation', r_table[o])
+
+		// XXX account for proportions...
+		/*
+		//var w = image.css('width')
+		//var h = image.css('height')
+		var w = image.outerWidth()
+		var h = image.outerHeight()
+
+		if(w != h){
+			image.css({
+				width: h,
+				height: w,
+			})
+		}
+		*/
+	})
+
+	$('.viewer').trigger('rotating' + direction.capitalize(), [image])
+}
+
+
+function rotateLeft(image){
+	rotateImage('left', image)
+}
+function rotateRight(image){
+	rotateImage('right', image)
+}
+
+
+
+/******************************************************** Flipping ***/
+
+function flipVertical(image){
+	// XXX
+}
+
+
+function flipHorizontal(image){
+	// XXX
+}
+
+
+
 /********************************************************* Zooming ***/
 
 function fitNImages(n){

ui/data.js

@@ -27,6 +27,7 @@ var STUB_IMAGE_DATA = {
 		'900px': './images/sizes/900px/SIZE.jpg',
 	},
 	classes: '',
+	orientation: 0,
 }
 
 // Data format...
@@ -316,7 +317,7 @@ function updateImage(image, gid, size){
 
 	// update image order...
 	image.attr({
-		order: DATA.order.indexOf(gid)
+		order: DATA.order.indexOf(gid),
 	})
 
 	// setup marks...
@@ -333,9 +334,13 @@ function updateImage(image, gid, size){
 
 	// get the url...
 	var preview = getBestPreview(gid, size)
-	image.css({
+	image
-		'background-image': 'url('+ preview.url +')',
+		.css({
-	})
+			'background-image': 'url('+ preview.url +')',
+		})
+		.attr({
+			orientation: img_data.orientation == null ? 0 : img_data.orientation,
+		})
 
 	html = window.DEBUG ? 
 			DATA.order.indexOf(gid) +'<br>'+ gid +'<br>'+ preview.size 
@@ -919,6 +924,18 @@ function setupDataBindings(viewer){
 			DATA.current = getImageGID($(image))
 		})
 
+		// basic image manipulation...
+		// XXX after this we need to save the images...
+		.on('rotatingLeft rotatingRight', function(evt, image){
+			$(image).each(function(i, e){
+				var img = $(this)
+				var gid = getImageGID(img) 
+				var orientation = img.attr('orientation')
+
+				IMAGES[gid].orientation = orientation
+			})
+		})
+
 
 		// marks...
 		// XXX toggle marking a block is not yet supported...

ui/index.html

@@ -106,6 +106,31 @@ body {
 	border: solid red 5px;
 }
 
+/* image turning... */
+/* NOTE: need to account for proportions after turning... */
+.image[orientation="90"] {
+	-webkit-transform: rotate(90deg);
+	-moz-transform: rotate(90deg);
+	-o-transform: rotate(90deg);
+	-ms-transform: rotate(90deg);
+	transform: rotate(90deg);
+}
+.image[orientation="180"] {
+	-webkit-transform: rotate(180deg);
+	-moz-transform: rotate(180deg);
+	-o-transform: rotate(180deg);
+	-ms-transform: rotate(180deg);
+	transform: rotate(180deg);
+}
+.image[orientation="270"] {
+	-webkit-transform: rotate(270deg);
+	-moz-transform: rotate(270deg);
+	-o-transform: rotate(270deg);
+	-ms-transform: rotate(270deg);
+	transform: rotate(270deg);
+}
+
+
 /* dot mark... */
 .marks-visible.viewer .marked.image:after {
 	display: block;
@@ -123,10 +148,22 @@ body {
 	border-radius: 50%;
 	background: blue;
 }
+.marks-visible.viewer .marked.image[orientation="90"]:after {
+	top: 5px;
+	right: 5px;
+}
+.marks-visible.viewer .marked.image[orientation="180"]:after {
+	top: 5px;
+	left: 5px;
+}
+.marks-visible.viewer .marked.image[orientation="270"]:after {
+	bottom: 5px;
+	left: 5px;
+}
 
 /* corner mark... (a-la bookmarks in PortableMag) */
 /*
-.marked.image:after {
+.marks-visible.viewer .marked.image:after {
 	display: block;
 	position: absolute;
 	content: "";
@@ -147,6 +184,18 @@ body {
 	-ms-transform: rotate(45deg);
 	transform: rotate(45deg);
 }
+.marks-visible.viewer .marked.image[orientation="90"]:after {
+	top: -15px;
+	left: -15px;
+}
+.marks-visible.viewer .marked.image[orientation="180"]:after {
+	bottom: -15px;
+	left: -15px;
+}
+.marks-visible.viewer .marked.image[orientation="270"]:after {
+	bottom: -15px;
+	right: -15px;
+}
 */
 
 

ui/keybindings3.js

@@ -32,7 +32,8 @@ var KEYBOARD_CONFIG = {
 	},
 
 
-	'.help-mode':{
+	// help mode...
+	'.help-mode': {
 		title: 'Help',
 		doc: 'NOTE: In this mode all other key bindings are disabled, except '+
 			'the ones explicitly defined here.',
@@ -170,6 +171,9 @@ var KEYBOARD_CONFIG = {
 					}),
 			},
 
+		L: doc('Rotate image left', function(){ rotateLeft() }),
+		R: doc('Rotate image left', function(){ rotateRight() }),
+
 
 		// zooming...
 		'#1': doc('Fit one image', function(){ fitNImages(1) }),