Merge pull request #3 from upfrontIO/set-image

peyerluk · peyerluk · commit 2d16dceb71a5 · 2015-02-12T19:18:38.000+01:00
Add setImage() method
diff --git a/Changelog.md b/Changelog.md
@@ -1,4 +1,9 @@
 
+# v0.3.0
+
+- Add setImage() method [#2](https://github.com/upfrontIO/srcissors/pull/3)
+
+
 # v0.2.0
 
 - Add actions options [#1](https://github.com/upfrontIO/srcissors/pull/1)
diff --git a/README.md b/README.md
@@ -29,11 +29,19 @@ cropper.getCrop();
 // Set a ratio
 cropper.setRatio(4/3);
 
-// Listen for events
+// Set a new url
+cropper.setImage('/images/storytelling-painting.jpg');
+
+// Listen for the ready event (only fired once)
 cropper.on('ready', function() {
     // your code
 });
 
+// Listen for image load events
+cropper.on('load', function() {
+    // your code
+});
+
 cropper.on('change', function(crop) {
     var x, y, width, height;
     x = crop.x;
diff --git a/examples/css/page.css b/examples/css/page.css
@@ -6,3 +6,18 @@
 body {
   background-color: #222;
 }
+
+.swap-image {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  margin: 10px;
+  padding: 3px 5px;
+  display: inline-block;
+
+  border-radius: 5px;
+  text-decoration: none;
+  color: #000;
+  background: rgba(255, 255, 255, 0.5);
+}
diff --git a/examples/fit-to-area.html b/examples/fit-to-area.html
@@ -34,6 +34,8 @@
       </div>
     </div>
 
+    <a class="swap-image" href="">swap image</a>
+
     <!-- jquery -->
     <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
 
@@ -66,6 +68,11 @@
           event.stopPropagation();
         });
 
+        $('.swap-image').on('click', function(event) {
+          crop.setImage('/images/storytelling-painting.jpg');
+          event.preventDefault();
+        });
+
       });
 
     </script>
diff --git a/examples/index.html b/examples/index.html
@@ -12,7 +12,6 @@
     <link rel="stylesheet" href="/css/srcissors.css">
   </head>
   <body>
-
     <div class="clip-content">
       <div class="crop-arena no-selection">
         <div class="crop-view crop-view--is-loading">
@@ -37,6 +36,8 @@
       </div>
     </div>
 
+    <a class="swap-image" href="">swap image</a>
+
     <!-- jquery -->
     <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
 
@@ -76,6 +77,19 @@
           event.stopPropagation();
         });
 
+        $('.swap-image').on('click', function(event) {
+          crop.setImage('/images/storytelling-painting.jpg');
+          event.preventDefault();
+        });
+
+        crop.on('ready', function() {
+          console.log('ready event fired');
+        });
+
+        crop.on('load', function() {
+          console.log('load event fired');
+        });
+
       });
 
     </script>
diff --git a/src/crop.coffee b/src/crop.coffee
@@ -20,15 +20,9 @@ module.exports = class Crop
 
       # Events
       @readyEvent = $.Callbacks('memory once')
+      @loadEvent = $.Callbacks()
       @changeEvent = $.Callbacks()
 
-      # Ready
-      @isReady = false
-      @view.addClass(@loadingCssClass)
-      this.on 'ready', =>
-        @isReady = true
-        @view.removeClass(@loadingCssClass)
-
       # Confguration
       @zoomInStep = zoomStep
       @zoomOutStep = 1 / @zoomInStep
@@ -46,14 +40,24 @@ module.exports = class Crop
         img: @img
         outline: @outline
 
-      @preview.setImage({ url })
+      @setImage(url)
+
+
+  setImage: (url) ->
+    return unless url != @preview.url
+
+    @preview.reset() if @isInitialized
+    @isReady = false
+    @view.addClass(@loadingCssClass)
+    @preview.setImage({ url })
 
 
   onPreviewReady: ({ width, height }) =>
-    @events = new Events
-      parent: this
-      view: @view
-      actions: @actions
+    if not @isInitialized
+      @events = new Events
+        parent: this
+        view: @view
+        actions: @actions
 
     @imageWidth = width
     @imageHeight = height
@@ -68,14 +72,19 @@ module.exports = class Crop
       height: @imageHeight
       keepDimension: keepDimension
 
-    @readyEvent.fire()
+    # ready state
+    @isReady = true
+    @view.removeClass(@loadingCssClass)
 
-    if @initialCrop?
+    if not @isInitialized && @initialCrop?
       @setCrop(@initialCrop)
     else
       @zoomAllOut()
       @center()
 
+    @isInitialized = true
+    @readyEvent.fire()
+    @loadEvent.fire()
 
 
   setCrop: ({ x, y, width, height }) ->
@@ -488,5 +497,3 @@ module.exports = class Crop
     console.log(obj)
     return obj
 
-
-
diff --git a/src/preview.coffee b/src/preview.coffee
@@ -14,8 +14,17 @@ module.exports = class Preview
       @img.show()
 
 
-  setImage: ({ url }) ->
-    @img.attr('src', url)
+  setImage: ({ @url }) ->
+    @img.attr('src', @url)
+
+
+  reset: ->
+    @url = undefined
+    @x = @y = 0
+    @width = @height = 0
+    @img.attr('src', '')
+    @img.css(width: '', height: '', transform: '')
+    @outline.css(transform: '') if @outline
 
 
   setWidth: (width) ->
diff --git a/test/images/berge.jpg b/test/images/berge.jpg
diff --git a/test/specs/srcissors_spec.coffee b/test/specs/srcissors_spec.coffee
@@ -85,6 +85,20 @@ describe 'srcissors', ->
           done()
 
 
+    describe 'setImage()', ->
+
+      beforeEach (done) ->
+        @crop.on 'load', done
+
+        # Set a different 300x400 image
+        @crop.setImage('base/test/images/berge.jpg')
+
+
+      it 'sets the new image dimensions', ->
+        expect(@crop.imageWidth).to.equal(300)
+        expect(@crop.imageHeight).to.equal(400)
+
+
   describe 'with a 100x200 arena', ->
 
     beforeEach (done) ->
