From: Scott Worley Date: Fri, 28 Feb 2014 21:22:24 +0000 (-0800) Subject: 'r' to Rotate. X-Git-Url: http://git.scottworley.com/picsort/commitdiff_plain/59a0fba182b1c592474e3c3c01730917b51828ea?ds=sidebyside '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 78e0d79..943bbd3 100644 --- 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 ec63cbc..24cc893 100644 --- 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; });