From 78a2ed28b976e5c315f99c0cb6d77f061be8c92c Mon Sep 17 00:00:00 2001
From: Dennis Collinson <dennis.collective@gmail.com>
Date: Tue, 27 Mar 2012 18:04:21 -0700
Subject: [PATCH] User can select Night and Day Moods
headline method on post
extract headline and body from post, at first newline
Night Mood
---
app/assets/javascripts/app/models/post.js | 16 ++++++++-
.../javascripts/app/views/post/day_view.js | 17 ---------
.../javascripts/app/views/post/mood_view.js | 36 +++++++++++++++++++
.../app/views/template_picker_view.js | 4 +--
app/assets/stylesheets/new-templates.css.scss | 30 ++++++++++++++--
app/assets/templates/day.jst.hbs | 2 --
app/assets/templates/mood.jst.hbs | 3 ++
spec/javascripts/app/models/post_spec.js | 27 ++++++++++----
.../app/views/post/day_view_spec.js | 16 ++++-----
.../app/views/post/night_view_spec.js | 12 +++++++
.../app/views/template_picker_view_spec.js | 8 ++---
11 files changed, 127 insertions(+), 44 deletions(-)
delete mode 100644 app/assets/javascripts/app/views/post/day_view.js
create mode 100644 app/assets/javascripts/app/views/post/mood_view.js
delete mode 100644 app/assets/templates/day.jst.hbs
create mode 100644 app/assets/templates/mood.jst.hbs
create mode 100644 spec/javascripts/app/views/post/night_view_spec.js
diff --git a/app/assets/javascripts/app/models/post.js b/app/assets/javascripts/app/models/post.js
index efe9c9a8c6..307158662b 100644
--- a/app/assets/javascripts/app/models/post.js
+++ b/app/assets/javascripts/app/models/post.js
@@ -89,11 +89,25 @@ app.models.Post = Backbone.Model.extend({
self.set(resp);
self.trigger('interacted', this)
}});
+ },
+
+ headline : function() {
+ var headline = this.get("text").trim()
+ , newlineIdx = headline.lastIndexOf("\n")
+ return (newlineIdx > 0 ) ? headline.substr(0, newlineIdx) : headline
+ },
+
+ body : function(){
+ var body = this.get("text").trim()
+ , newlineIdx = body.lastIndexOf("\n")
+ return (newlineIdx > 0 ) ? body.substr(newlineIdx+1, body.length) : ""
}
}, {
+ headlineLimit : 118,
frameMoods : [
- "Day"
+ "Day",
+ "Night"
],
legacyTemplateNames : [
diff --git a/app/assets/javascripts/app/views/post/day_view.js b/app/assets/javascripts/app/views/post/day_view.js
deleted file mode 100644
index e9245ebed2..0000000000
--- a/app/assets/javascripts/app/views/post/day_view.js
+++ /dev/null
@@ -1,17 +0,0 @@
-//= require ../post_view
-app.views.Post.Day = app.views.Post.extend({
- templateName : "day",
- className : "day post loaded",
-
- subviews : { "section.photo_viewer" : "photoViewer" },
-
- photoViewer : function(){
- return new app.views.PhotoViewer({ model : this.model })
- },
-
- postRenderTemplate : function(){
- if(this.model.get("text").length < 140){
- this.$('section.text').addClass('headline');
- }
- }
-});
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/post/mood_view.js b/app/assets/javascripts/app/views/post/mood_view.js
new file mode 100644
index 0000000000..53004e83ec
--- /dev/null
+++ b/app/assets/javascripts/app/views/post/mood_view.js
@@ -0,0 +1,36 @@
+app.views.Post.Mood = app.views.Post.extend({
+ templateName : "mood",
+ className : "post loaded",
+ tagName : "article",
+ subviews : { "section.photo_viewer" : "photoViewer" },
+
+ initialize : function(){
+ $(this.el).addClass(this.mood)
+ },
+
+ presenter : function(){
+ var model = this.model
+ return _.extend(this.defaultPresenter(), {
+ headline : model.headline(),
+ body : model.body()
+ })
+ },
+
+ photoViewer : function(){
+ return new app.views.PhotoViewer({ model : this.model })
+ },
+
+ postRenderTemplate : function(){
+ if(this.model.body().length < 200){
+ this.$('section.body').addClass('short_body');
+ }
+ }
+});
+
+app.views.Post.Day = app.views.Post.Mood.extend({
+ mood : "day"
+})
+
+app.views.Post.Night = app.views.Post.Mood.extend({
+ mood : "night"
+})
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/template_picker_view.js b/app/assets/javascripts/app/views/template_picker_view.js
index 834bd72e77..be2954ae5e 100644
--- a/app/assets/javascripts/app/views/template_picker_view.js
+++ b/app/assets/javascripts/app/views/template_picker_view.js
@@ -2,7 +2,7 @@ app.views.TemplatePicker = app.views.Base.extend({
templateName : "template-picker",
initialize : function(){
- this.model.set({frame_name : 'status'})
+ this.model.set({frame_name : 'Day'})
},
events : {
@@ -19,7 +19,7 @@ app.views.TemplatePicker = app.views.Base.extend({
presenter : function() {
return _.extend(this.defaultPresenter(), {
- templates : _.union(app.models.Post.frameMoods, app.models.Post.legacyTemplateNames)
+ templates : _.union(app.models.Post.frameMoods, _.without(app.models.Post.legacyTemplateNames, ["status"]))
})
}
})
\ No newline at end of file
diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss
index f0c0cbd251..f4f65d3050 100644
--- a/app/assets/stylesheets/new-templates.css.scss
+++ b/app/assets/stylesheets/new-templates.css.scss
@@ -3,6 +3,9 @@
$light-grey: #999;
$pane-width: 420px;
+$night-background-color : #333;
+$night-text-color : #999;
+
/* mixins */
@mixin center($orient:vertical) {
@@ -259,7 +262,7 @@ $pane-width: 420px;
left: 0;
text-align: center;
- background-color: #333;
+ background-color: $night-background-color;
p {
@include media-text();
@@ -807,6 +810,27 @@ text-rendering: optimizelegibility;
}
}
-.headline p{
- @include media-text();
+article { //mood posts
+ $big-text-size : 3em;
+ $medium-text-size : 2em;
+ $small-text-size: 1.5em;
+
+ header, header p{
+ //big text
+ @include media-text();
+ font-size: $big-text-size;
+ }
+
+ section.body{
+ font-size: $small-text-size;
+
+ &.short_body{
+ font-size: $medium-text-size;
+ }
+ }
+
+ &.night{
+ background-color : $night-background-color;
+ color : $night-text-color;
+ }
}
\ No newline at end of file
diff --git a/app/assets/templates/day.jst.hbs b/app/assets/templates/day.jst.hbs
deleted file mode 100644
index 7a9acc3fc7..0000000000
--- a/app/assets/templates/day.jst.hbs
+++ /dev/null
@@ -1,2 +0,0 @@
-<section class="text">{{{text}}}</section>
-<section class="photo_viewer"></section>
diff --git a/app/assets/templates/mood.jst.hbs b/app/assets/templates/mood.jst.hbs
new file mode 100644
index 0000000000..4c977ded4e
--- /dev/null
+++ b/app/assets/templates/mood.jst.hbs
@@ -0,0 +1,3 @@
+<header>{{headline}}</header>
+<section class="photo_viewer"></section>
+<section class="body">{{{body}}}</section>
diff --git a/spec/javascripts/app/models/post_spec.js b/spec/javascripts/app/models/post_spec.js
index dfe08bc661..6d9f750701 100644
--- a/spec/javascripts/app/models/post_spec.js
+++ b/spec/javascripts/app/models/post_spec.js
@@ -3,15 +3,30 @@ describe("app.models.Post", function() {
this.post = new app.models.Post();
})
- describe("url", function(){
- it("should be /posts when it doesn't have an id", function(){
- expect(new app.models.Post().url()).toBe("/posts")
+ describe("headline and body", function(){
+ describe("headline", function(){
+ beforeEach(function(){
+ this.post.set({text :" yes "})
+ })
+
+ it("the headline is the entirety of the post", function(){
+ expect(this.post.headline()).toBe("yes")
+ })
+
+ it("takes up until the new line", function(){
+ this.post.set({text : "love\nis avery powerful force"})
+ expect(this.post.headline()).toBe("love")
+ })
})
- it("should be /posts/id when it doesn't have an id", function(){
- expect(new app.models.Post({id: 5}).url()).toBe("/posts/5")
+ describe("body", function(){
+ it("takes after the new line", function(){
+ this.post.set({text : "Inflamatory Title\nwith text that substantiates a less absolutist view of the title."})
+ expect(this.post.body()).toBe("with text that substantiates a less absolutist view of the title.")
+ })
})
})
+
describe("createdAt", function() {
it("returns the post's created_at as an integer", function() {
var date = new Date;
@@ -99,6 +114,4 @@ describe("app.models.Post", function() {
expect(app.models.Participation.prototype.destroy).toHaveBeenCalled();
})
})
-
-
});
diff --git a/spec/javascripts/app/views/post/day_view_spec.js b/spec/javascripts/app/views/post/day_view_spec.js
index 397ac46151..cee11e33d0 100644
--- a/spec/javascripts/app/views/post/day_view_spec.js
+++ b/spec/javascripts/app/views/post/day_view_spec.js
@@ -9,17 +9,17 @@ describe("app.views.Post.Day", function(){
this.view.render()
})
- describe("when the text is under 140 characters", function(){
- it("has class headline", function(){
- this.post.set({text : "Lol this is a short headline"})
+ describe("when the body is under 200 characters", function(){
+ it("has class shortBody", function(){
+ this.post.set({text : "Headline\nLol this is a short body"})
this.view.render()
- expect(this.view.$("section.text")).toHaveClass("headline")
+ expect(this.view.$("section.body")).toHaveClass("short_body")
})
})
- describe("when the text is over 140 characters", function(){
+ describe("when the body is over 200 characters", function(){
it("has doesn't have headline", function(){
- this.post.set({text :"Vegan bushwick tempor labore. Nulla seitan anim, aesthetic ex gluten-free viral" +
+ this.post.set({text :"HEADLINE\nVegan bushwick tempor labore. Nulla seitan anim, aesthetic ex gluten-free viral" +
"thundercats street art. Occaecat carles deserunt lomo messenger bag wes anderson. Narwhal cray selvage " +
"dolor. Mixtape wes anderson american apparel, mustache readymade cred nulla squid veniam small batch id " +
"cupidatat. Pork belly high life consequat, raw denim sint terry richardson seitan single-origin coffee " +
@@ -27,8 +27,8 @@ describe("app.views.Post.Day", function(){
})
this.view.render()
- expect(this.view.$("section.text")).not.toHaveClass("headline")
+ expect(this.view.$("section.body")).not.toHaveClass("short_body")
})
})
})
-})
\ No newline at end of file
+})
diff --git a/spec/javascripts/app/views/post/night_view_spec.js b/spec/javascripts/app/views/post/night_view_spec.js
new file mode 100644
index 0000000000..20303c3c34
--- /dev/null
+++ b/spec/javascripts/app/views/post/night_view_spec.js
@@ -0,0 +1,12 @@
+describe("app.views.Post.Night", function(){
+ beforeEach(function(){
+ this.post = factory.post()
+ this.view = new app.views.Post.Night({model : this.post})
+ })
+
+ describe("rendering", function(){
+ it("is happy", function(){
+ this.view.render()
+ })
+ })
+})
\ No newline at end of file
diff --git a/spec/javascripts/app/views/template_picker_view_spec.js b/spec/javascripts/app/views/template_picker_view_spec.js
index 7b1e8ef19b..2e4c322de1 100644
--- a/spec/javascripts/app/views/template_picker_view_spec.js
+++ b/spec/javascripts/app/views/template_picker_view_spec.js
@@ -6,7 +6,7 @@ describe("app.views.TemplatePicker", function(){
describe("initialization", function(){
it("sets the frame_name of the model to 'status' by default", function(){
- expect(this.view.model.get("frame_name")).toBe("status")
+ expect(this.view.model.get("frame_name")).toBe("Day")
})
})
@@ -16,13 +16,13 @@ describe("app.views.TemplatePicker", function(){
})
it("selects the model's frame_name from the dropdown", function(){
- expect(this.view.$("select[name=template]").val()).toBe("status")
+ expect(this.view.$("select[name=template]").val()).toBe("Day")
})
it("changes the frame_name on the model when is is selected", function(){
- this.view.$("select[name=template]").val("note")
+ this.view.$("select[name=template]").val("Night")
this.view.$("select[name=template]").trigger("change")
- expect(this.model.get("frame_name")).toBe('note')
+ expect(this.model.get("frame_name")).toBe('Night')
})
})
})
\ No newline at end of file
--
GitLab