Mercurial > mozilla-the-big-picture
changeset 4:524737788e6b
added basic form
| author | Atul Varma <varmaa@toolness.com> |
|---|---|
| date | Fri, 27 Nov 2009 13:25:43 -0500 |
| parents | fb1ca1cf7a19 |
| children | 491e77fe9dad |
| files | mozilla-the-big-picture.html mozilla-the-big-picture.js |
| diffstat | 2 files changed, 38 insertions(+), 16 deletions(-) [+] |
line wrap: on
line diff
--- a/mozilla-the-big-picture.html Fri Nov 27 12:12:50 2009 -0500 +++ b/mozilla-the-big-picture.html Fri Nov 27 13:25:43 2009 -0500 @@ -6,6 +6,12 @@ <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> @@ -14,8 +20,24 @@ <script src="mozilla-the-big-picture.js"></script> <script> $(window).ready(function() { - var url = __entries[0].large; - makeInterface(url); + 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 12:12:50 2009 -0500 +++ b/mozilla-the-big-picture.js Fri Nov 27 13:25:43 2009 -0500 @@ -10,6 +10,8 @@ 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); @@ -183,21 +185,19 @@ } }; -function makeInterface(url, options) { - if (!options) - options = {}; - - var DEFAULT_THUMBNAIL_SIZE = 100; - - var container = $('<div class="pic-container"></div>'); +function CropperInterface(options) { var canvas = document.createElement("canvas"); - container.append(canvas); - $("#pics").append(container); - var selImg = new SelectableImage(url, canvas); + $(options.selectableContainer).append(canvas); + this.selectableImage = new SelectableImage(options.url, canvas); - var thumbnailSize = options.thumbnailSize || DEFAULT_THUMBNAIL_SIZE; + var thumbnailSize = options.thumbnailSize || this.DEFAULT_THUMBNAIL_SIZE; var thumbnailCanvas = document.createElement("canvas"); - $("#thumbnails").append(thumbnailCanvas); - var thumbnail = new Thumbnail(selImg, thumbnailCanvas, - thumbnailSize); + $(options.thumbnailContainer).append(thumbnailCanvas); + this.thumbnail = new Thumbnail(this.selectableImage, + thumbnailCanvas, + thumbnailSize); } + +CropperInterface.prototype = { + DEFAULT_THUMBNAIL_SIZE: 100 +};