Mercurial > mozilla-the-big-picture

changeset 9:d56f9cc6f699

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
added 'css' entry to cropper
author Atul Varma <varmaa@toolness.com>
date Sat, 28 Nov 2009 00:06:56 -0500
parents cd71f59b38f4
children acef8b34542f
files cropper.css cropper.html
diffstat 2 files changed, 11 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/cropper.css	Fri Nov 27 23:39:25 2009 -0500
+++ b/cropper.css	Sat Nov 28 00:06:56 2009 -0500
@@ -20,6 +20,8 @@
 
 #thumbnails {
     float: left;
+    width: 100px;
+    height: 100px;
 }
 
 #pics {
--- a/cropper.html	Fri Nov 27 23:39:25 2009 -0500
+++ b/cropper.html	Sat Nov 28 00:06:56 2009 -0500
@@ -6,13 +6,15 @@
   <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>
+<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>
@@ -33,6 +35,11 @@
     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(", ") + ")");
     });
   }
 
@@ -44,7 +51,6 @@
     iface.selectableImage.setSelection(sel);
   }
 
-  $("#thumbnails").width($("#form").height());
   $("#form").submit(function(evt) { evt.preventDefault(); });
   $("#url").change(newInterface);
   $("#json").change(newSelection);