MS DC Post framer process init

features/step_definitions/trumpeter_steps.rb

@@ -17,6 +17,14 @@ def select_from_dropdown(option_text, dropdown)
   #assert dropdown text is link
 end
 
+def go_to_framer
+  click_button "Next"
+end
+
+def finalize_frame
+  click_button "done"
+end
+
 When /^I trumpet$/ do
   visit new_post_path
 end
@@ -59,6 +67,23 @@ Then /^"([^"]*)" should have the "([^"]*)" picture$/ do |post_text, file_name|
   image.should be_present
 end
 
+When /^I go through the default composer$/ do
+  go_to_framer
+  finalize_frame
+end
+
+When /^I start the framing process$/ do
+  go_to_framer
+end
+
+When /^I finalize my frame$/ do
+  finalize_frame
+end
+
 Then /^"([^"]*)" should have (\d+) pictures$/ do |post_text, number_of_pictures|
   find_post_by_text(post_text).all(".photo_attachments img").size.should == number_of_pictures.to_i
 end
+
+Then /^I should see "([^"]*)" in the framer preview$/ do |post_text|
+  pending
+end

features/trumpeter.feature

@@ -9,7 +9,7 @@ Feature: Creating a new post
     And I write "I love RMS"
     When I select "Public" in my aspects dropdown
     And I upload a fixture picture with filename "button.gif"
-    When I press "Share"
+    When I go through the default composer
     When I go to "/stream"
     Then I should see "I love RMS" as the first post in my stream
     And "I love RMS" should be a public post in my stream
@@ -18,7 +18,7 @@ Feature: Creating a new post
   Scenario: Posting to Aspects
     And I write "This is super skrunkle"
     When I select "All Aspects" in my aspects dropdown
-    And I press "Share"
+    And I go through the default composer
     When I go to "/stream"
     Then I should see "This is super skrunkle" as the first post in my stream
     Then "This is super skrunkle" should be a limited post in my stream
@@ -27,7 +27,7 @@ Feature: Creating a new post
    Given a user named "Alice Smith" with email "alice@alice.alice"
    And a user with email "bob@bob.bob" is connected with "alice@alice.alice"
    And I mention "alice@alice.alice"
-   And I press "Share"
+   And I go through the default composer
    And I go to "/stream"
    Then I follow "Alice Smith"
 
@@ -35,6 +35,15 @@ Feature: Creating a new post
     When I write "check out these pictures"
     And I upload a fixture picture with filename "button.gif"
     And I upload a fixture picture with filename "button.gif"
-    And I press "Share"
+    And I go through the default composer
     And I go to "/stream"
     Then "check out these pictures" should have 2 pictures
+
+  Scenario: Framing your frame
+    When I write "This shit is super customized"
+    And I upload a fixture picture with filename "button.gif"
+    And I start the framing process
+    Then I should see "This shit is super customized" in the framer preview
+    When I finalize my frame
+    Then "This is super skrunkle" should be the first post in my stream
+

public/javascripts/app/forms/picture_form.js

@@ -18,7 +18,6 @@ app.forms.Picture = app.forms.Base.extend({
   },
 
   submitForm : function (){
-    console.log("meow")
     this.$("form").submit();
   },
 

public/javascripts/app/models/status_message.js

@@ -3,16 +3,14 @@ app.models.StatusMessage = app.models.Post.extend({
     return this.isNew() ? '/status_messages' : '/posts/' + this.get("id");
   },
 
-  mungeAndSave : function(){
-    var mungedAttrs = {
+  toJSON : function(){
+    return {
       status_message : _.clone(this.attributes),
-      'aspect_ids[]' : this.get("aspect_ids"),
-      photos : this.photos.pluck("id"),
+      'aspect_ids' : this.get("aspect_ids").split(","),
+      photos : this.photos && this.photos.pluck("id"),
       services : mungeServices(this.get("services"))
     }
 
-    this.save(mungedAttrs)
-
     function mungeServices (values) {
       if(!values) { return; }
       return values.length > 1 ?  values :  [values]

public/javascripts/app/pages/framer.js

@@ -0,0 +1,12 @@
+app.pages.Framer = app.views.Base.extend({
+  templateName : "framer",
+
+  events : {
+    "click button.done" : "saveFrame"
+  },
+
+  saveFrame : function(){
+    console.log(app.frame.toJSON(), app.frame)
+    app.frame.save()
+  }
+})

public/javascripts/app/pages/post-new.js

@@ -3,14 +3,18 @@ app.pages.PostNew = app.views.Base.extend({
 
   subviews : { "#new-post" : "postForm"},
 
+  events : {
+    "click button.next" : "navigateNext"
+  },
+
   initialize : function(){
     this.model = new app.models.StatusMessage()
     this.postForm = new app.forms.Post({model : this.model})
-
-    this.model.bind("setFromForm", this.saveModel, this)
   },
 
-  saveModel : function(){
-    this.model.mungeAndSave();
+  navigateNext : function(){
+    this.postForm.setModelAttributes()
+    app.frame = this.model;
+    app.router.navigate("framer", true)
   }
 });

public/javascripts/app/router.js

@@ -18,25 +18,25 @@ app.Router = Backbone.Router.extend({
 
     "posts/new" : "newPost",
     "posts/:id": "singlePost",
-    "p/:id": "singlePost"
+    "p/:id": "singlePost",
+    "framer": "framer"
   },
 
   stream : function() {
     app.stream = new app.models.Stream();
-    app.page = new app.views.Stream({model : app.stream}).render();
+    app.page = new app.views.Stream({model : app.stream});
     app.publisher = app.publisher || new app.views.Publisher({collection : app.stream.posts});
 
-    var streamFacesView = new app.views.StreamFaces({collection : app.stream.posts}).render();
+    var streamFacesView = new app.views.StreamFaces({collection : app.stream.posts});
 
-    $("#main_stream").html(app.page.el);
-    $('#selected_aspect_contacts .content').html(streamFacesView.el);
+    $("#main_stream").html(app.page.render().el);
+    $('#selected_aspect_contacts .content').html(streamFacesView.render().el);
   },
 
   photos : function() {
     app.photos = new app.models.Photos();
-    app.page = new app.views.Photos({model : app.photos}).render();
-
-    $("#main_stream").html(app.page.el);
+    app.page = new app.views.Photos({model : app.photos});
+    $("#main_stream").html(app.page.render().el);
   },
 
   newPost : function(){
@@ -44,6 +44,11 @@ app.Router = Backbone.Router.extend({
     $("#container").html(page.render().el)
   },
 
+  framer : function(){
+    var page = new app.pages.Framer();
+    $("#container").html(page.render().el)
+  },
+
   singlePost : function(id) {
     var page = new app.pages.PostViewer({ id: id });
     $("#container").html(page.el);

public/javascripts/app/templates/framer.handlebars

@@ -0,0 +1 @@
+<button class="done btn-primary">done</button>

public/javascripts/app/templates/post-new.handlebars

@@ -1,3 +1,4 @@
 <div class="container">
   <div id="new-post"></div>
+  <button class="btn-primary next">Next</button>
 </div>

public/javascripts/app/views.js

@@ -21,7 +21,7 @@ app.views.Base = Backbone.View.extend({
   },
 
   defaultPresenter : function(){
-    var modelJson = this.model ? this.model.toJSON() : {}
+    var modelJson = this.model ? _.clone(this.model.attributes) : {}
     return _.extend(modelJson, {
       current_user : app.currentUser.attributes,
       loggedIn : app.currentUser.authenticated()

public/javascripts/app/views/publisher_view.js

@@ -22,8 +22,9 @@ app.views.Publisher = Backbone.View.extend({
 
     var serializedForm = $(evt.target).closest("form").serializeObject();
 
-    // save status message
-    var statusMessage = new app.models.StatusMessage();
+    // lulz this code should be killed.
+    var statusMessage = new app.models.Post();
+
     statusMessage.save({
       "status_message" : {
         "text" : serializedForm["status_message[text]"]

spec/javascripts/app/forms/post_form_spec.js

@@ -9,6 +9,7 @@ describe("app.forms.Post", function(){
       this.view.render()
     })
 
+
     describe("submitting a valid form", function(){
       beforeEach(function(){
         this.view.$("form #text_with_markup").val("Oh My")

spec/javascripts/app/pages/framer_spec.js

@@ -0,0 +1,18 @@
+describe("app.pages.Framer", function(){
+  beforeEach(function(){
+    app.frame = new app.models.StatusMessage();
+    this.page = new app.pages.Framer();
+  });
+
+  describe("rendering", function(){
+    beforeEach(function(){
+      this.page.render();
+    });
+
+    it("saves the model when you click done",function(){
+      spyOn(app.frame, "save");
+      this.page.$("button.done").click();
+      expect(app.frame.save).toHaveBeenCalled();
+    });
+  });
+});

spec/javascripts/app/pages/post_new_spec.js

@@ -3,15 +3,30 @@ describe("app.pages.PostNew", function(){
     this.page = new app.pages.PostNew()
   })
 
-  it("renders", function(){
+  describe("rendering", function(){
+    beforeEach(function(){
       this.page.render();
     })
 
-  context("when the model receives setFromForm", function(){
-    it("it calls mungeAndSave", function(){
-      spyOn(this.page.model, "mungeAndSave")
-      this.page.model.trigger("setFromForm")
-      expect(this.page.model.mungeAndSave).toHaveBeenCalled();
+    describe("clicking next", function(){
+      beforeEach(function(){
+        spyOn(app.router, "navigate")
+        spyOn(this.page.postForm, "setModelAttributes")
+        this.page.$("button.next").click()
+      })
+
+      it("calls tells the form to set the models attributes", function(){
+        expect(this.page.postForm.setModelAttributes).toHaveBeenCalled();
+      });
+
+      it("stores a reference to the form as app.composer" , function(){
+        expect(this.page.model).toBeDefined()
+        expect(app.frame).toBe(this.page.model)
+      });
+
+      it("navigates to the framer", function(){
+        expect(app.router.navigate).toHaveBeenCalledWith("framer", true)
+      });
     })
   })
 });

spec/javascripts/support/jasmine.yml

@@ -18,8 +18,8 @@ src_files:
   - public/javascripts/vendor/underscore.js
   - public/javascripts/vendor/jquery-1.7.1.min.js
   - public/javascripts/vendor/jquery-ui-1.8.9.custom.min.js
-  - public/javascripts/vendor/bootstrap/bootstrap-popover.js
   - public/javascripts/vendor/bootstrap/bootstrap-twipsy.js
+  - public/javascripts/vendor/bootstrap/bootstrap-popover.js
   - public/javascripts/vendor/jquery.tipsy.js
   - public/javascripts/vendor/jquery.infinitescroll.min.js
   - public/javascripts/vendor/jquery.autoresize.js