Mercurial > mozilla-the-big-picture

changeset 5:491e77fe9dad

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
renamed files to 'cropper.*', made css look better
author Atul Varma <varmaa@toolness.com>
date Fri, 27 Nov 2009 13:53:35 -0500
parents 524737788e6b
children 84878cbf5cf1
files cropper.css cropper.html cropper.js mozilla-the-big-picture.css mozilla-the-big-picture.html mozilla-the-big-picture.js
diffstat 6 files changed, 273 insertions(+), 253 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cropper.css	Fri Nov 27 13:53:35 2009 -0500
@@ -0,0 +1,27 @@
+.header {
+    font-family: helvetica, sans-serif;
+    font-size: 10pt;
+}
+
+textarea, input {
+    font-family: monospace;
+    font-size: 9pt;
+    border: 1px black dotted;
+    padding: 2pt;
+    margin-top: 4pt;
+    margin-bottom: 4pt;
+    width: 20em;
+}
+
+#form {
+    float: left;
+    padding: 4pt;
+}
+
+#thumbnails {
+    float: left;
+}
+
+#pics {
+    float: left;
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cropper.html	Fri Nov 27 13:53:35 2009 -0500
@@ -0,0 +1,43 @@
+<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() {
+  function newInterface() {
+    if (!$("#url").val())
+      return;
+
+    $("#pics").empty();
+    $("#thumbnails").empty();
+    var iface = new CropperInterface({url: $("#url").val(),
+                                      selectableContainer: "#pics",
+                                      thumbnailContainer: "#thumbnails"});
+    iface.selectableImage.addObserver("selection-changed", function() {
+      var selection = iface.selectableImage.getNormalizedSelection();
+      $("#json").val(JSON.stringify(selection));
+    });
+  }
+
+  $("#thumbnails").width($("#form").height());
+  $("#form").submit(function(evt) { evt.preventDefault(); });
+  $("#url").change(newInterface);
+  newInterface();
+});
+</script>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cropper.js	Fri Nov 27 13:53:35 2009 -0500
@@ -0,0 +1,203 @@
+function ObserverManager(subject) {
+  this.subject = subject;
+  this.observers = {};
+
+  var self = this;
+  this.subject.addObserver = function() {
+    self.add.apply(self, arguments);
+  };
+}
+
+ObserverManager.prototype = {
+  add: function add(topic, observer) {
+    if (typeof(observer) == "function")
+      observer = {observe: observer};
+    if (!(topic in this.observers))
+      this.observers[topic] = [];
+    this.observers[topic].push(observer);
+  },
+
+  notify: function notify(topic) {
+    if (!(topic in this.observers))
+      this.observers[topic] = [];
+    for (var i = 0; i < this.observers[topic].length; i++)
+      this.observers[topic][i].observe(this.subject, topic);
+  }
+};
+
+function Thumbnail(selectableImage, canvas, size) {
+  canvas.width = size;
+  canvas.height = size;
+
+  this.selectableImage = selectableImage;
+  this.canvas = canvas;
+  this.size = size;
+  this.selectableImage.addObserver("selection-changed", this);
+}
+
+Thumbnail.prototype = {
+  observe: function observe(subject, topic) {
+    var selection = this.selectableImage.getNormalizedSelection();
+    var ctx = this.canvas.getContext("2d");
+    ctx.drawImage(
+      this.selectableImage.img,
+      selection.left,
+      selection.top,
+      selection.width,
+      selection.height,
+      0,
+      0,
+      this.size,
+      this.size
+    );
+  }
+};
+
+function SelectableImage(url, canvas) {
+  var img = new Image();
+  var ctx = canvas.getContext("2d");
+
+  img._parent = this;
+  img.onload = this.onImgLoad;
+  img.src = url;
+
+  canvas._parent = this;
+
+  $(canvas).mousedown(this.onDragStart);
+  $(canvas).mouseup(this.onDragStop);
+
+  this.isDirty = false;
+  this.ctx = ctx;
+  this.canvas = canvas;
+  this.img = img;
+  this.selection = {top: 0,
+                    left: 0,
+                    width: 0,
+                    height: 0};
+  this._observers = new ObserverManager(this);
+}
+
+SelectableImage.prototype = {
+  onImgLoad: function onImgLoad(evt) {
+    var self = evt.target._parent;
+
+    self.canvas.width = self.img.width;
+    self.canvas.height = self.img.height;
+    self._markDirty();
+  },
+
+  onDragStart: function onDragStart(evt) {
+    var self = evt.target._parent;
+    var point = self._getCanvasPoint(evt);
+
+    self.selection = {top: point.y,
+                      left: point.x,
+                      width: 0,
+                      height: 0};
+    $(self.canvas).bind("mousemove", self.onDragging);
+  },
+
+  onDragging: function onDragging(evt) {
+    var self = evt.target._parent;
+    var point = self._getCanvasPoint(evt);
+
+    var width = point.x - self.selection.left;
+    var height = point.y - self.selection.top;
+
+    if (evt.shiftKey) {
+      // Constrain dimensions to square.
+      var maxDiff = Math.max(Math.abs(width),
+                             Math.abs(height));
+      if (width > 0)
+        width = maxDiff;
+      else
+        width = -maxDiff;
+
+      if (height > 0)
+        height = maxDiff;
+      else
+        height = -maxDiff;
+    }
+
+    self.selection.width = width;
+    self.selection.height = height;
+    self._markDirty();
+  },
+
+  onDragStop: function onDragStop(evt) {
+    var self = evt.target._parent;
+
+    $(self.canvas).unbind("mousemove", self.onDragging);
+    self._markDirty();
+    self._observers.notify("selection-changed");
+  },
+
+  getNormalizedSelection: function getNormalizedSelection() {
+    var x = this.selection.left;
+    var y = this.selection.top;
+    var width = this.selection.width;
+    var height = this.selection.height;
+
+    if (width < 0) {
+      x = x + width;
+      width = -width;
+    }
+    if (height < 0) {
+      y = y + height;
+      height = -height;
+    }
+
+    return {top: y,
+            left: x,
+            width: width,
+            height: height};
+  },
+
+  _getCanvasPoint: function _getCanvasPoint(evt) {
+    var ofs = $(this.canvas).offset();
+    return {x: evt.pageX - ofs.left,
+            y: evt.pageY - ofs.top};
+  },
+
+  _markDirty: function _markDirty() {
+    var self = this;
+
+    if (!this._isDirty) {
+      this._isDirty = true;
+      window.setTimeout(function() { self._render(); }, 0);
+    }
+  },
+
+  _render: function _render() {
+    this._isDirty = false;
+    this.ctx.drawImage(this.img, 0, 0);
+
+    var norm = this.getNormalizedSelection();
+
+    this.ctx.fillStyle = "rgba(0,0,0,0.75)";
+    this.ctx.strokeStyle = "rgb(255,255,255)";
+    this.ctx.lineWidth = 1.0;
+    this.ctx.lineJoin = "bevel";
+    this.ctx.fillRect(norm.left, norm.top,
+                      norm.width, norm.height);
+    this.ctx.strokeRect(norm.left, norm.top,
+                        norm.width, norm.height);
+  }
+};
+
+function CropperInterface(options) {
+  var canvas = document.createElement("canvas");
+  $(options.selectableContainer).append(canvas);
+  this.selectableImage = new SelectableImage(options.url, canvas);
+
+  var thumbnailSize = (options.thumbnailSize ||
+                       $(options.thumbnailContainer).width());
+  var thumbnailCanvas = document.createElement("canvas");
+  $(options.thumbnailContainer).append(thumbnailCanvas);
+  this.thumbnail = new Thumbnail(this.selectableImage,
+                                 thumbnailCanvas,
+                                 thumbnailSize);
+}
+
+CropperInterface.prototype = {
+};
--- a/mozilla-the-big-picture.css	Fri Nov 27 13:25:43 2009 -0500
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,7 +0,0 @@
-#thumbnails canvas {
-    padding: 12px;
-}
-
-.pic-container {
-    padding: 12px;
-}
--- a/mozilla-the-big-picture.html	Fri Nov 27 13:25:43 2009 -0500
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,43 +0,0 @@
-<html>
-<head>
-  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-  <link rel="stylesheet" type="text/css" media="all"
-        href="mozilla-the-big-picture.css" />
-  <title>Mozilla: The Big Picture</title>
-</head>
-<body>
-<form id="form">
-URL: <input id="url" name="cropper-url" type="text" size="80"/>
-<br/>
-JSON: <textarea id="json" cols="40" rows="5"
-       readonly="readonly"></textarea>
-</form>
-<div id="thumbnails"></div>
-<div id="pics"></div>
-</body>
-<script src="jquery.js"></script>
-<script src="entries.js"></script>
-<script src="mozilla-the-big-picture.js"></script>
-<script>
-$(window).ready(function() {
-  function newInterface() {
-    if (!$("#url").val())
-      return;
-
-    $("#pics").empty();
-    $("#thumbnails").empty();
-    var iface = new CropperInterface({url: $("#url").val(),
-                                      selectableContainer: "#pics",
-                                      thumbnailContainer: "#thumbnails"});
-    iface.selectableImage.addObserver("selection-changed", function() {
-      var selection = iface.selectableImage.getNormalizedSelection();
-      $("#json").val(JSON.stringify(selection));
-    });
-  }
-
-  $("#form").submit(function(evt) { evt.preventDefault(); });
-  $("#url").change(newInterface);
-  newInterface();
-});
-</script>
-</html>
--- a/mozilla-the-big-picture.js	Fri Nov 27 13:25:43 2009 -0500
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,203 +0,0 @@
-function ObserverManager(subject) {
-  this.subject = subject;
-  this.observers = {};
-
-  var self = this;
-  this.subject.addObserver = function() {
-    self.add.apply(self, arguments);
-  };
-}
-
-ObserverManager.prototype = {
-  add: function add(topic, observer) {
-    if (typeof(observer) == "function")
-      observer = {observe: observer};
-    if (!(topic in this.observers))
-      this.observers[topic] = [];
-    this.observers[topic].push(observer);
-  },
-
-  notify: function notify(topic) {
-    if (!(topic in this.observers))
-      this.observers[topic] = [];
-    for (var i = 0; i < this.observers[topic].length; i++)
-      this.observers[topic][i].observe(this.subject, topic);
-  }
-};
-
-function Thumbnail(selectableImage, canvas, size) {
-  canvas.width = size;
-  canvas.height = size;
-
-  this.selectableImage = selectableImage;
-  this.canvas = canvas;
-  this.size = size;
-  this.selectableImage.addObserver("selection-changed", this);
-}
-
-Thumbnail.prototype = {
-  observe: function observe(subject, topic) {
-    var selection = this.selectableImage.getNormalizedSelection();
-    var ctx = this.canvas.getContext("2d");
-    ctx.drawImage(
-      this.selectableImage.img,
-      selection.left,
-      selection.top,
-      selection.width,
-      selection.height,
-      0,
-      0,
-      this.size,
-      this.size
-    );
-  }
-};
-
-function SelectableImage(url, canvas) {
-  var img = new Image();
-  var ctx = canvas.getContext("2d");
-
-  img._parent = this;
-  img.onload = this.onImgLoad;
-  img.src = url;
-
-  canvas._parent = this;
-
-  $(canvas).mousedown(this.onDragStart);
-  $(canvas).mouseup(this.onDragStop);
-
-  this.isDirty = false;
-  this.ctx = ctx;
-  this.canvas = canvas;
-  this.img = img;
-  this.selection = {top: 0,
-                    left: 0,
-                    width: 0,
-                    height: 0};
-  this._observers = new ObserverManager(this);
-}
-
-SelectableImage.prototype = {
-  onImgLoad: function onImgLoad(evt) {
-    var self = evt.target._parent;
-
-    self.canvas.width = self.img.width;
-    self.canvas.height = self.img.height;
-    self._markDirty();
-  },
-
-  onDragStart: function onDragStart(evt) {
-    var self = evt.target._parent;
-    var point = self._getCanvasPoint(evt);
-
-    self.selection = {top: point.y,
-                      left: point.x,
-                      width: 0,
-                      height: 0};
-    $(self.canvas).bind("mousemove", self.onDragging);
-  },
-
-  onDragging: function onDragging(evt) {
-    var self = evt.target._parent;
-    var point = self._getCanvasPoint(evt);
-
-    var width = point.x - self.selection.left;
-    var height = point.y - self.selection.top;
-
-    if (evt.shiftKey) {
-      // Constrain dimensions to square.
-      var maxDiff = Math.max(Math.abs(width),
-                             Math.abs(height));
-      if (width > 0)
-        width = maxDiff;
-      else
-        width = -maxDiff;
-
-      if (height > 0)
-        height = maxDiff;
-      else
-        height = -maxDiff;
-    }
-
-    self.selection.width = width;
-    self.selection.height = height;
-    self._markDirty();
-  },
-
-  onDragStop: function onDragStop(evt) {
-    var self = evt.target._parent;
-
-    $(self.canvas).unbind("mousemove", self.onDragging);
-    self._markDirty();
-    self._observers.notify("selection-changed");
-  },
-
-  getNormalizedSelection: function getNormalizedSelection() {
-    var x = this.selection.left;
-    var y = this.selection.top;
-    var width = this.selection.width;
-    var height = this.selection.height;
-
-    if (width < 0) {
-      x = x + width;
-      width = -width;
-    }
-    if (height < 0) {
-      y = y + height;
-      height = -height;
-    }
-
-    return {top: y,
-            left: x,
-            width: width,
-            height: height};
-  },
-
-  _getCanvasPoint: function _getCanvasPoint(evt) {
-    var ofs = $(this.canvas).offset();
-    return {x: evt.pageX - ofs.left,
-            y: evt.pageY - ofs.top};
-  },
-
-  _markDirty: function _markDirty() {
-    var self = this;
-
-    if (!this._isDirty) {
-      this._isDirty = true;
-      window.setTimeout(function() { self._render(); }, 0);
-    }
-  },
-
-  _render: function _render() {
-    this._isDirty = false;
-    this.ctx.drawImage(this.img, 0, 0);
-
-    var norm = this.getNormalizedSelection();
-
-    this.ctx.fillStyle = "rgba(0,0,0,0.75)";
-    this.ctx.strokeStyle = "rgb(255,255,255)";
-    this.ctx.lineWidth = 1.0;
-    this.ctx.lineJoin = "bevel";
-    this.ctx.fillRect(norm.left, norm.top,
-                      norm.width, norm.height);
-    this.ctx.strokeRect(norm.left, norm.top,
-                        norm.width, norm.height);
-  }
-};
-
-function CropperInterface(options) {
-  var canvas = document.createElement("canvas");
-  $(options.selectableContainer).append(canvas);
-  this.selectableImage = new SelectableImage(options.url, canvas);
-
-  var thumbnailSize = options.thumbnailSize || this.DEFAULT_THUMBNAIL_SIZE;
-  var thumbnailCanvas = document.createElement("canvas");
-  $(options.thumbnailContainer).append(thumbnailCanvas);
-  this.thumbnail = new Thumbnail(this.selectableImage,
-                                 thumbnailCanvas,
-                                 thumbnailSize);
-}
-
-CropperInterface.prototype = {
-  DEFAULT_THUMBNAIL_SIZE: 100
-};