Wallpaper Mood

app/assets/javascripts/app/models/post.js

@@ -107,7 +107,8 @@ app.models.Post = Backbone.Model.extend({
 
   frameMoods : [
     "Day",
-    "Night"
+    "Night",
+    "Wallpaper"
   ],
 
   legacyTemplateNames : [

app/assets/javascripts/app/views/post/mood_view.js

@@ -35,3 +35,8 @@ app.views.Post.Day = app.views.Post.Mood.extend({
 app.views.Post.Night = app.views.Post.Mood.extend({
   mood : "night"
 })
+
+app.views.Post.Wallpaper = app.views.Post.Mood.extend({
+  mood : "wallpaper",
+  templateName : "wallpaper-mood"
+})

app/assets/javascripts/app/views/template_picker_view.js

@@ -19,7 +19,7 @@ app.views.TemplatePicker = app.views.Base.extend({
 
   presenter : function() {
     return _.extend(this.defaultPresenter(), {
-      templates : _.union(app.models.Post.frameMoods, _.without(app.models.Post.legacyTemplateNames, ["status"]))
+      templates : _.union(app.models.Post.frameMoods, _.without(app.models.Post.legacyTemplateNames, ["status", "status-with-photo-backdrop", "photo-backdrop", "activity-streams-photo"])) //subtract re-implemented templates
     })
   }
 })

app/assets/stylesheets/new-templates.css.scss

@@ -833,4 +833,8 @@ article { //mood posts
     background-color : $night-background-color;
     color : $night-text-color;
   }
+
+  &.wallpaper{
+    color : #fff;
+  }
 }

app/assets/templates/wallpaper-mood.jst.hbs

@@ -0,0 +1,10 @@
+{{#each photos}}
+  <div class="photo-fill" data-img-src="{{sizes.large}}" style="background-image: url({{sizes.large}})">
+    <div class="darken">
+      <div class="darken-content">
+        <header>{{../headline}}</header>
+        <section class="body">{{../body}}</section>
+      </div>
+    </div>
+  </div>
+{{/each}}

features/step_definitions/trumpeter_steps.rb

@@ -29,14 +29,17 @@ def assert_post_renders_with(mood)
   find(".post.#{mood.downcase}").should be_present
 end
 
-def find_image_by_filename(filename)
+def get_image_filename(filename)
-  find("img[src='#{@image_sources[filename]}']")
+  @image_sources[filename].tap {|src| src.should be_present}
 end
 
-def store_image_filename(file_name)
+def set_image_filename(file_name)
   @image_sources ||= {}
-  @image_sources[file_name] = all(".photos img").last["src"]
+  @image_sources[file_name] = all(".photos img").last["src"].tap {|src| src.should be_present}
-  @image_sources[file_name].should be_present
+end
+
+def find_image_by_filename(filename)
+  find("img[src='#{get_image_filename(filename)}']")
 end
 
 def upload_photo(file_name)
@@ -47,15 +50,15 @@ def upload_photo(file_name)
     wait_until { all(".photos img").size == orig_photo_count + 1 }
   end
 
-  store_image_filename(file_name)
+  set_image_filename(file_name)
 end
 
 When /^I trumpet$/ do
   visit new_post_path
 end
 
-When /^I write "([^"]*)"$/ do |text|
+When /^I write "([^"]*)"(?:| with body "([^"]*)")$/ do |headline, body|
-  fill_in 'text', :with => text
+  fill_in 'text', :with => [headline, body].join("\n")
 end
 
 Then /I mention "([^"]*)"$/ do |text|
@@ -105,12 +108,12 @@ Then /^I should see "([^"]*)" in the framer preview$/ do |post_text|
   within(find(".post")) { page.should have_content(post_text) }
 end
 
-When /^I select the mood "([^"]*)"$/ do |template_name|
+When /^I select the mood "([^"]*)"$/ do |mood|
-  select template_name, :from => 'template'
+  select mood, :from => 'template'
 end
 
-Then /^the post's mood should (?:still |)be "([^"]*)"$/ do |template_name|
+Then /^the post's mood should (?:still |)be "([^"]*)"$/ do |mood|
-  assert_post_renders_with(template_name)
+  assert_post_renders_with(mood)
 end
 
 When /^"([^"]*)" should be in the post's picture viewer$/ do |file_name|
@@ -118,3 +121,16 @@ When /^"([^"]*)" should be in the post's picture viewer$/ do |file_name|
     find_image_by_filename(file_name).should be_present
   end
 end
+
+Then /^it should be a wallpaper frame with the background "([^"]*)"$/ do |file_name|
+  assert_post_renders_with("Wallpaper")
+  find("div.photo-fill")["data-img-src"].should == get_image_filename(file_name)
+end
+
+When /^the frame's headline should be "([^"]*)"$/ do |header_text|
+  find("header").text.should == header_text
+end
+
+When /^the frame's body should be "([^"]*)"$/ do |body_text|
+  find("section.body").text.should == body_text
+end

features/trumpeter.feature

@@ -45,6 +45,7 @@ Feature: Creating a new post
 
     And I start the framing process
     Then I should see "This is hella customized" in the framer preview
+  #### Will test the template picker being ported to JS ####
   # Then the default mood for the post should be "Wallpaper"
   # And I should see the image "button.gif" background
     When I select the mood "Day"
@@ -57,3 +58,12 @@ Feature: Creating a new post
     Then "This is hella customized" should be post 1
     And I click the show page link for "This is hella customized"
     And the post's mood should still be "Day"
+
+  Scenario: The Wallpaper mood
+    When I write "This is a pithy status" with body "And this is a long body"
+    And I upload a fixture picture with filename "button.gif"
+    And I start the framing process
+    When I select the mood "Wallpaper"
+    Then it should be a wallpaper frame with the background "button.gif"
+    And the frame's headline should be "This is a pithy status"
+    And the frame's body should be "And this is a long body"

spec/javascripts/app/views/post/wallpaper_view_spec.js

@@ -0,0 +1,14 @@
+describe("app.views.Post.Wallpaper", function(){
+  beforeEach(function(){
+    this.post = factory.post({photos : [factory.photoAttrs({sizes :{large : "http://omgimabackground.com/wow.gif"}})]})
+    this.view = new app.views.Post.Wallpaper({model : this.post})
+  })
+
+  describe("rendering", function(){
+    it("has the image as the photo-fill", function(){
+      this.view.render()
+      expect(this.view.$(".photo-fill").data("img-src")).toBe("http://omgimabackground.com/wow.gif") //for the cuke
+      expect(this.view.$(".photo-fill").css("background-image")).toBe("url(http://omgimabackground.com/wow.gif)")
+    })
+  })
+})