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>Cropper</title>
</head>
<body>
<h1>image cropper</h1>
<form id="form">
<div class="header">url</div>
<input id="url" name="cropper-url" type="text"/>
<div class="header">json</div>
<input id="json" type="text"/>
<div class="header">css</div>
<input id="css" type="text" readonly="readonly"/>
</form>
<div id="thumbnails">&nbsp;</div>
<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));
      var cssParts = [selection.top,
                      selection.left + selection.width,
                      selection.top + selection.height,
                      selection.left];
      $("#css").val("rect(" + cssParts.join(", ") + ")");
    });
  }

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

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

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

  newInterface();
  newSelection();
});
</script>
</html>
author	Atul Varma <varmaa@toolness.com>
date	Mon, 14 Dec 2009 11:35:38 -0800
parents	6ceda2358036
children