'r' to Rotate.

This is janky.  The rotation is applied immediately, but changing the
src attribute to load new image data takes longer, so the two are not
applied at the same time.

diff --git a/picsorter.css b/picsorter.css
index 78e0d791feb9e66760f6fc9093e4599cba87609c..943bbd38f3aa0ef4e3e161c4f45b38308345c1de 100644 (file)
--- a/picsorter.css
+++ b/picsorter.css
@@ -7,6 +7,28 @@
     to { opacity: 0; }
 }
 
+.rot90 {
+  rotation: 90deg;
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+}
+.rot180 {
+  rotation: 180deg;
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+}
+.rot270 {
+  rotation: 270deg;
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+
 #message {
   position: fixed;
   font-size: 18pt;

diff --git a/picsorter.js b/picsorter.js
index ec63cbc8fd3d5a64473e0a368ed6579932685cab..24cc8938e054363048ab1159ca805662c86a70eb 100644 (file)
--- a/picsorter.js
+++ b/picsorter.js
@@ -40,7 +40,12 @@ function setpic() {
   } else {
     display_filename = zoom + files[input_index];
   }
-  $("#pic").attr("src", display_filename);
+  var $pic = $("#pic");
+  $pic.attr("src", display_filename);
+  $pic.removeClass("rot90 rot180 rot270");
+  if ("rotate" in picinfo[files[input_index]]) {
+    $pic.addClass("rot" + picinfo[files[input_index]].rotate);
+  }
 }
 
 function say(message) {
@@ -117,6 +122,18 @@ function change_exposure(amount) {
   say((display_exposure >= 0 ? "+" : "") + display_exposure);
 }
 
+function rotate() {
+  var rotation = picinfo[files[input_index]].rotate || 0;
+  rotation = (rotation + 90) % 360;
+  if (rotation > 1e-5) {
+    picinfo[files[input_index]].rotate = rotation;
+  } else {
+    delete picinfo[files[input_index]].rotate;
+  }
+  save_picinfo();
+  setpic(); 
+}
+
 function set_name() {
   var name_input = $("#name").hide().get(0);
   var name = name_input.value;
@@ -143,4 +160,5 @@ Mousetrap.bind(['b', 'k'], function() { change_exposure(1); });
 Mousetrap.bind(['d', 'j'], function() { change_exposure(-1); });
 Mousetrap.bind('x', mark_deleted);
 Mousetrap.bind('X', mark_not_deleted);
+Mousetrap.bind('r', rotate);
 Mousetrap.bind('c', function() { $("#name").show().focus(); return false; });