Reduce jank

[picsort] / picsorter.js

var picinfo = {};
if ("picsorter_picinfo" in localStorage) {
  picinfo = JSON.parse(localStorage.picsorter_picinfo);
}
$.each(files, function(i, f) {
  if (!(f in picinfo)) {
    picinfo[f] = {};
  }
});
function save_picinfo() {
  localStorage.picsorter_picinfo = JSON.stringify(picinfo);
}
save_picinfo();

var exposure = 20;
var zoom = "sm/";
var input_index = -1;

function endsWith(str, suffix) {
  return str.indexOf(suffix, str.length - suffix.length) !== -1;
}

function stripFromEnd(str, suffix) {
  if (endsWith(str, suffix)) {
    return str.substr(0, str.length - suffix.length);
  }
  return str;
}

function setpic() {
  var display_filename;
  if (endsWith(files[input_index], ".NEF")) {
    if ("exposure" in picinfo[files[input_index]]) {
      exposure = picinfo[files[input_index]].exposure;
    } else {
      picinfo[files[input_index]].exposure = exposure;
      save_picinfo();
    }
    display_filename = zoom + exposure + "/" + stripFromEnd(files[input_index], ".NEF") + ".jpeg";
  } else {
    display_filename = zoom + files[input_index];
  }
  var $pic = $("#pic");
  $pic.on("load", function() {
    $pic.removeClass("rot90 rot180 rot270");
    if ("rotate" in picinfo[files[input_index]]) {
      $pic.addClass("rot" + picinfo[files[input_index]].rotate);
    }
  });
  $pic.attr("src", display_filename);
}

function say(message) {
  $("#message").text(message).removeClass("fade");
  setTimeout(function() { $("#message").addClass("fade"); }, 1);
}

function toggle_zoom() {
  if (zoom) {
    zoom = "";
  } else {
    zoom = "sm/";
  }
  setpic();
}

function move_by_filter(direction, filter) {
  // Keep moving in direction until filter is satisfied
  var new_index = input_index;
  while (true) {
    var next = new_index + direction;
    if (next < 0) {
      say("At beginning");
      return;
    }
    if (next >= files.length) {
      say("At end");
      return;
    }
    new_index = next;
    if (filter(new_index)) {
      break;
    }
  }
  input_index = new_index;
  say(input_index + " " + (picinfo[files[input_index]].name || ""));
  setpic();
}
function move(direction) {
  move_by_filter(direction, function() { return true; });
}
function move_to_nondeleted(direction) {
  move_by_filter(direction, function(i) {
    return !("deleted" in picinfo[files[i]]); });
}
function move_to_unnamed(direction) {
  move_by_filter(direction, function(i) {
    return !("deleted" in picinfo[files[i]]) &&
           !("name" in picinfo[files[i]]); });
}

function mark_deleted() {
  picinfo[files[input_index]].deleted = 1;
  save_picinfo();
  say("Deleted");
}

function mark_not_deleted() {
  delete picinfo[files[input_index]].deleted;
  save_picinfo();
  say("Undeleted");
}

function change_exposure(amount) {
  if (!endsWith(files[input_index], ".NEF")) {
    say("Exposure adjustment not available");
    return;
  }
  exposure += amount;
  picinfo[files[input_index]].exposure = exposure;
  save_picinfo();
  setpic();
  var display_exposure = (exposure / 4) - 3.5;
  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;
  name_input.value = "";
  picinfo[files[input_index]].name = name;
  save_picinfo();
  say("Named " + name);
}

$(function() {
  $("#name").hide().on("keyup", function(e) { e.which == 13 && set_name(); });
  move_to_nondeleted(1);
});

Mousetrap.bind('z', toggle_zoom);
Mousetrap.bind('Z', function() { $("#pic").toggleClass("fit_view"); });
Mousetrap.bind(['n', 'l'], function() { move_to_nondeleted(1); });
Mousetrap.bind(['p', 'h'], function() { move_to_nondeleted(-1); });
Mousetrap.bind(['N', 'L'], function() { move_to_unnamed(1); });
Mousetrap.bind(['P', 'H'], function() { move_to_unnamed(-1); });
Mousetrap.bind(['m n', 'm l'], function() { move(1); });
Mousetrap.bind(['m n', 'm h'], function() { move(-1); });
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; });