added EditbaleSmallFrame class; frame on framer second step is partially editable

app/assets/javascripts/app/pages/framer.js

@@ -1,3 +1,5 @@
+//= require ../views/post/small_frame
+
 app.pages.Framer = app.views.Base.extend({
   templateName : "flow",
 
@@ -62,7 +64,7 @@ app.views.framerContent = app.views.Base.extend({
   },
 
   smallFrameView : function() {
-    return new app.views.Post.SmallFrame({model : this.model})
+    return new app.views.Post.EditableSmallFrame({model : this.model})
   },
 
   presenter : function() {
@@ -80,6 +82,20 @@ app.views.framerContent = app.views.Base.extend({
   }
 });
 
+app.views.Post.EditableSmallFrame = app.views.Post.SmallFrame.extend({
+  events : {
+    "keyup [contentEditable]" : "setFormAttrs"
+  },
+
+  formAttrs : {
+    ".text-content p" : "text"
+  },
+
+  postRenderTemplate : function(){
+    this.$(".text-content p").attr("contentEditable", true)
+  }
+});
+
 app.views.framerControls = app.views.Base.extend({
   templateName : 'framer-controls',
 

app/assets/javascripts/app/views.js

@@ -80,7 +80,7 @@ app.views.Base = Backbone.View.extend({
       if(attribute.slice("-2") === "[]") {
         memo[attribute.slice(0, attribute.length - 2)] = _.pluck(this.$el.find(selector).serializeArray(), "value")
       } else {
-        memo[attribute] = this.$el.find(selector).val();
+        memo[attribute] = this.$el.find(selector).val() || this.$el.find(selector).text();
       }
       return memo
     }

app/assets/stylesheets/new_styles/_composer.scss

@@ -86,7 +86,6 @@
         height : 54px;
         width : 54px;
       }
-
     }
 
     input:checked + label {
@@ -100,6 +99,20 @@
     }
   }
 
+  .preview {
+    .content {
+      cursor : auto;
+
+      &:active {
+        -webkit-transform : none;
+      }
+
+      .info {
+        display : none;
+      }
+    }
+  }
+
   .flow-controls {
     padding: 20px 0;
     max-height: 68px;

spec/javascripts/app/pages/framer_spec.js

@@ -31,7 +31,6 @@ describe("app.pages.Framer", function(){
     })
   })
 
-
   describe("rendering", function(){
     beforeEach(function(){
       this.page.render();