Ajax support

.gitignore

@@ -9,3 +9,4 @@ test_app/Gemfile.lock
 test_app/db/*.sqlite3
 test_app/log/*.log
 test_app/tmp
+test_app/public/assets

README.md

@@ -46,11 +46,13 @@ Both helpers accept a :width option to customize their dimensions. The preview b
       <%= f.submit 'Save' %>
     <% end %>
 
-Regardless of the width, the preview box and the cropping area will have the aspect ratio defined in the model (1:1 by default)
+Regardless of the width, the preview box and the cropping area will have the aspect ratio defined in the model (1:1 by default)  
+
+If you're rendering it on ajax ensure to call init_papercrop() in js after loading the crop form to make things work properly.  
 
 That's all!
 
-#### Credits and resources
+### Credits and resources
 * [Thoughtbot's Paperclip](https://github.com/thoughtbot/paperclip/)
 * [Deep Liquid's JCrop](http://deepliquid.com/content/Jcrop.html)
 * And Ryan Bates' [Railscast#182](http://railscasts.com/episodes/182-cropping-images/), which has inspired this gem

lib/assets/javascripts/papercrop.js

@@ -1,6 +1,6 @@
 var jcrop_api;
 
-(function() {
+var init_papercrop = function() {
   $(document).ready(function() {
     $('div[id$=_cropbox]').each(function() {
       var aspect, attachment, preview, update_crop;
@@ -40,4 +40,8 @@ var jcrop_api;
       }, function(){ jcrop_api = this; });
     });
   });
-}).call(this); 
+}
+
+$(document).ready(function() {
+  init_papercrop();
+});

papercrop.gemspec

@@ -1,8 +1,8 @@
 
 Gem::Specification.new do |s|
   s.name          = 'papercrop'
-  s.version       = '0.0.5'
-  s.date          = '2012-08-12'
+  s.version       = '0.0.7'
+  s.date          = '2012-10-12'
   s.summary       = "Paperclip extension for cropping images"
   s.description   = "An easy extension for Paperclip to crop your image uploads using jCrop"
   s.authors       = ["Ruben Santamaria"]
@@ -22,4 +22,5 @@ Gem::Specification.new do |s|
   s.add_development_dependency "rmagick"
   s.add_development_dependency "sass"
   s.add_development_dependency "sqlite3"
+  s.add_development_dependency "database_cleaner"
 end

spec/integration/papercrop_js_spec.rb

@@ -2,12 +2,28 @@
 
 describe "Image crop with JS", :js => true do
 
-  after do
-    Landscape.destroy_all
+  it "crops an image with javascript" do
+    visit landscapes_path
+
+    click_link "New Landscape"
+
+    fill_in "Name", :with => "Mountains"
+    find("#landscape_picture").native.send_keys(File.expand_path("../../../test_app/test/fixtures/matterhorn.jpg", __FILE__))
+    click_button "Create Landscape"
+
+    sleep 2
+    page.execute_script("jcrop_api.setSelect([300, 200, 700, 500])")
+    page.execute_script('if ($("#picture_crop_y").val() == "199"){$("#picture_crop_y").val("200")}')
+    page.execute_script('if ($("#picture_crop_w").val() == "399"){$("#picture_crop_w").val("400")}')
+
+    click_button "Crop image"
+
+    sleep 1
+    compare_images(CROPPED_IMG_PATH, Landscape.last.picture.path(:medium)).should eq(0.0)
   end
 
 
-  it "crops an image with javascript" do
+  it "crops an image by ajax call" do
     visit landscapes_path
 
     click_link "New Landscape"
@@ -16,6 +32,11 @@
     find("#landscape_picture").native.send_keys(File.expand_path("../../../test_app/test/fixtures/matterhorn.jpg", __FILE__))
     click_button "Create Landscape"
 
+    click_button "Crop image"
+    click_link "Back"
+
+    click_link "Crop"
+
     sleep 2
     page.execute_script("jcrop_api.setSelect([300, 200, 700, 500])")
     page.execute_script('if ($("#picture_crop_y").val() == "199"){$("#picture_crop_y").val("200")}')

spec/integration/papercrop_spec.rb

@@ -1,11 +1,6 @@
 require "spec_helper"
 
 describe "Image crop" do
-
-  after do
-    Landscape.destroy_all
-  end
-
 
   it "crops an image" do
     visit landscapes_path

spec/spec_helper.rb

@@ -3,6 +3,7 @@
 require File.expand_path("../../test_app/config/environment", __FILE__)
 require 'rspec/rails'
 require 'rspec/autorun'
+require 'database_cleaner'
 
 # Requires supporting ruby files with custom matchers and macros, etc,
 # in spec/support/ and its subdirectories.
@@ -38,4 +39,15 @@
   # the seed, which is printed after each run.
   #     --seed 1234
   config.order = "random"
+
+
+  config.before(:suite) do
+    DatabaseCleaner.strategy = :transaction
+    DatabaseCleaner.clean_with(:truncation)
+  end
+
+
+  config.after(:each) do
+    DatabaseCleaner.clean
+  end
 end

test_app/app/controllers/landscapes_controller.rb

@@ -69,6 +69,14 @@ def update
     end
   end
 
+
+  # POST /landscapes/1/crop
+  # POST /landscapes/1/crop.json
+  def crop
+    @landscape = Landscape.find(params[:id])
+  end
+
+
   # DELETE /landscapes/1
   # DELETE /landscapes/1.json
   def destroy

test_app/app/views/landscapes/_crop_form.html.erb

@@ -0,0 +1,16 @@
+<%= form_for(@landscape) do |f| %>
+
+  <div class="landscape-crop-preview">
+    <% # Will show a preview box with width=100, height is calculated by the aspect ratio. see model Landscape %>
+    <%= f.crop_preview :picture %>
+  </div>
+  <div class="landscape-crop-area">
+    <% # Crop area. Mantains original image proportions. Crop area takes the aspect ratio  %>
+    <%= f.cropbox :picture, :width => 600 %>
+  </div>
+  <div class="clear"></div>
+
+  <div class="actions">
+    <%= f.submit 'Crop image' %>
+  </div>
+<% end %>

test_app/app/views/landscapes/crop.html.erb

@@ -1,16 +1 @@
-<%= form_for(@landscape) do |f| %>
-
-  <div class="landscape-crop-preview">
-    <% # Will show a preview box with width=100, height is calculated by the aspect ratio. see model Landscape %>
-    <%= f.crop_preview :picture %>
-  </div>
-  <div class="landscape-crop-area">
-    <% # Crop area. Mantains original image proportions. Crop area takes the aspect ratio  %>
-    <%= f.cropbox :picture, :width => 600 %>
-  </div>
-  <div class="clear"></div>
-
-  <div class="actions">
-    <%= f.submit 'Crop image' %>
-  </div>
-<% end %>
+<%= render "crop_form" %>

test_app/app/views/landscapes/crop.js.erb

@@ -0,0 +1,2 @@
+$('body').html($('<%= escape_javascript(render("crop_form"))%>'));
+init_papercrop();

test_app/app/views/landscapes/index.html.erb

@@ -15,6 +15,7 @@
     <td><%= landscape.name %></td>
     <td><%= link_to 'Show', landscape %></td>
     <td><%= link_to 'Edit', edit_landscape_path(landscape) %></td>
+    <td><%= link_to 'Crop', crop_landscape_path(landscape), :remote => true, :method => :post %></td>
     <td><%= link_to 'Destroy', landscape, method: :delete, data: { confirm: 'Are you sure?' } %></td>
   </tr>
 <% end %>

test_app/config/routes.rb

@@ -1,5 +1,7 @@
 TestApp::Application.routes.draw do
-  resources :landscapes
+  resources :landscapes do
+    post 'crop', :on => :member
+  end
 
   root :to => 'landscapes#index'
 end