Mercurial > mozilla-the-big-picture

<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" media="all"
        href="cropper.css" />
  <title>Picture Cropper</title>
</head>
<body>
<div id="thumbnails">&nbsp;</div>
<form id="form">
<div class="header">url</div>
<input id="url" name="cropper-url" type="text"/>
<div class="header">json</div>
<textarea id="json"></textarea>
</form>
<div id="pics"></div>
</body>
<script src="jquery.js"></script>
<script src="cropper.js"></script>
<script>
$(window).ready(function() {
  var iface;

  function newInterface() {
    if (!$("#url").val())
      return;

    $("#pics").empty();
    $("#thumbnails").empty();
    iface = new CropperInterface({url: $("#url").val(),
                                  selectableContainer: "#pics",
                                  thumbnailContainer: "#thumbnails"});
    iface.selectableImage.addObserver("selection-changed", function() {
      var selection = iface.selectableImage.getSelection();
      $("#json").val(JSON.stringify(selection));
    });
  }

  function newSelection() {
    if (!$("#json").val())
      return;

    var sel = JSON.parse($("#json").val());
    iface.selectableImage.setSelection(sel);
  }

  $("#thumbnails").width($("#form").height());
  $("#form").submit(function(evt) { evt.preventDefault(); });
  $("#url").change(newInterface);
  $("#json").change(newSelection);

  newInterface();
  newSelection();
});
</script>
</html>
author	Atul Varma <varmaa@toolness.com>
date	Fri, 27 Nov 2009 14:20:38 -0500
parents	491e77fe9dad
children	d56f9cc6f699