From 60420f10618b2a629c71fa053c6ea61b07ed0288 Mon Sep 17 00:00:00 2001
From: Dennis Collinson <dennis.collective@gmail.com>
Date: Thu, 15 Mar 2012 18:44:48 -0700
Subject: [PATCH] DG DC form autosubmits on file field change

---
 features/step_definitions/trumpeter_steps.rb  |  1 -
 public/javascripts/app/forms/picture_form.js  | 20 ++++++++++++-------
 .../app/templates/picture-form.handlebars     |  3 +--
 public/stylesheets/sass/new-templates.scss    |  6 ++++++
 .../app/forms/picture_form_spec.js            | 18 +++++++++++++++--
 5 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/features/step_definitions/trumpeter_steps.rb b/features/step_definitions/trumpeter_steps.rb
index 5f7434193e..378d30aeb2 100644
--- a/features/step_definitions/trumpeter_steps.rb
+++ b/features/step_definitions/trumpeter_steps.rb
@@ -43,7 +43,6 @@ end
 When /^I upload a fixture picture with filename "([^"]*)"$/ do |file_name|
   within ".new_photo" do
     attach_file "photo[user_file]", Rails.root.join("spec", "fixtures", file_name)
-    click_button :submit
   end
 
   @image_source = find(".photos img")["src"]
diff --git a/public/javascripts/app/forms/picture_form.js b/public/javascripts/app/forms/picture_form.js
index 9e1e66c773..cd16fbf841 100644
--- a/public/javascripts/app/forms/picture_form.js
+++ b/public/javascripts/app/forms/picture_form.js
@@ -2,7 +2,8 @@ app.forms.Picture = app.forms.Base.extend({
   templateName : "picture-form",
 
   events : {
-    'ajax:complete .new_photo' : "photoUploaded"
+    'ajax:complete .new_photo' : "photoUploaded",
+    "change input[name='photo[user_file]']" : "submitForm"
   },
 
   initialize : function() {
@@ -10,6 +11,17 @@ app.forms.Picture = app.forms.Base.extend({
     this.photos.bind("add", this.render, this)
   },
 
+  postRenderTemplate : function(){
+    this.$("input[name=authenticity_token]").val($("meta[name=csrf-token]").attr("content"))
+    this.$("input[name=photo_ids]").val(this.photos.pluck("id"))
+    this.renderPhotos();
+  },
+
+  submitForm : function (){
+    console.log("meow")
+    this.$("form").submit();
+  },
+
   photoUploaded : function(evt, xhr) {
     resp = JSON.parse(xhr.responseText)
     if(resp.success) {
@@ -19,12 +31,6 @@ app.forms.Picture = app.forms.Base.extend({
     }
   },
 
-  postRenderTemplate : function(){
-    this.$("input[name=authenticity_token]").val($("meta[name=csrf-token]").attr("content"))
-    this.$("input[name=photo_ids]").val(this.photos.pluck("id"))
-    this.renderPhotos();
-  },
-
   renderPhotos : function(){
     var photoContainer = this.$(".photos")
     this.photos.each(function(photo){
diff --git a/public/javascripts/app/templates/picture-form.handlebars b/public/javascripts/app/templates/picture-form.handlebars
index d48d10a7bf..665aed54fc 100644
--- a/public/javascripts/app/templates/picture-form.handlebars
+++ b/public/javascripts/app/templates/picture-form.handlebars
@@ -3,7 +3,6 @@
     <div style="margin:0;padding:0;display:inline">
         <input name="utf8" type="hidden" value="✓"/>
     </div>
-    <div class="photos"></div>
     <input name="photo[user_file]" type="file"/>
-    <input name="commit" type="submit" class="btn" value="Create Photo"/>
+    <div class="photos"></div>
 </form>
diff --git a/public/stylesheets/sass/new-templates.scss b/public/stylesheets/sass/new-templates.scss
index 6edb196b2f..a295bc8cf1 100644
--- a/public/stylesheets/sass/new-templates.scss
+++ b/public/stylesheets/sass/new-templates.scss
@@ -778,3 +778,9 @@ text-rendering: optimizelegibility;
     display : inline-block;
   }
 }
+
+.new_photo .photo{
+  display: inline;
+  max-width: 200px;
+  max-height: 200px;
+}
diff --git a/spec/javascripts/app/forms/picture_form_spec.js b/spec/javascripts/app/forms/picture_form_spec.js
index 5890b89f1a..42d53cce1e 100644
--- a/spec/javascripts/app/forms/picture_form_spec.js
+++ b/spec/javascripts/app/forms/picture_form_spec.js
@@ -6,11 +6,25 @@ describe("app.forms.Picture", function(){
     }).prependTo("head")
 
     this.form = new app.forms.Picture().render()
-  })
+  });
 
   it("sets the authenticity token from the meta tag", function(){
     expect(this.form.$("input[name='authenticity_token']").val()).toBe("supersecrettokenlol")
-  })
+  });
+
+  describe("selecting a photo", function(){
+    it("submits the form", function(){
+      var submitSpy = jasmine.createSpy();
+
+      this.form.$("form").submit(function(event){
+        event.preventDefault();
+        submitSpy();
+      });
+
+      this.form.$("input[name='photo[user_file]']").change()
+      expect(submitSpy).toHaveBeenCalled();
+    })
+  });
 
   describe("when a photo is suceessfully submitted", function(){
     beforeEach(function(){
-- 
GitLab