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