pages wip

app/views/posts/show.html.haml

@@ -19,29 +19,7 @@
           %i.icon-time
           = time_ago_in_words(@post.created_at) + ' ago'
 
-
-#post-content
-
-- if current_user
-  #user-controls
-    = link_to "#", :class => "label",  do
-      %i.icon-user.icon-white
-
-    = link_to "#", :class => "label" do
-      %i.icon-heart.icon-white
-
-    = link_to "#", :class => "label" do
-      %i.icon-plus.icon-white
-
-    = link_to "#", :class => "label" do
-      %i.icon-retweet.icon-white
-
-    = link_to "#", :class => "label",  do
-      %i.icon-comment.icon-white
-
-
-= link_to image_tag('arrow-left.png'), '#', :class => 'nav-arrow left', :id => 'forward'
-= link_to image_tag('arrow-right.png'), '#', :class => 'nav-arrow right', :id => 'back'
+#container
 
 #comment.modal.fade
   .modal-header

config/assets.yml

@@ -24,6 +24,7 @@ javascripts:
     - public/javascripts/app/views.js
     - public/javascripts/app/models/post.js
     - public/javascripts/app/models/*
+    - public/javascripts/app/pages/*
     - public/javascripts/app/collections/*
     - public/javascripts/app/views/stream_object_view.js
     - public/javascripts/app/views/content_view.js

public/javascripts/app/app.js

@@ -3,6 +3,7 @@ var app = {
   models: {},
   helpers: {},
   views: {},
+  pages: {},
 
   user: function(userAttrs) {
     if(userAttrs) { return this._user = new app.models.User(userAttrs) }

public/javascripts/app/views/single_post_view.js → public/javascripts/app/pages/post-viewer.js

-app.views.SinglePost = app.views.Post.extend({
+app.pages.PostViewer = app.views.Base.extend({
 
-  /* SINGLE POST SHOULD BE BROKEN OUT INTO A PAGE VIEW!!!! */
+  templateName: "post-viewer",
 
-  className : "loaded",
-
-  postRenderTemplate : function() {
-    /* nav should be a subview! and tested! (this is some prototyping stuff right here... */
-    this.setNav();
-
-    /* post author info should be a subview!  and tested! */
-    this.setAuthor();
-
-    /* post author info should be a subview!  and tested! */
-    this.setFeedback();
+  subviews : {
+    "#post-content" : "postView",
+    "#post-nav" : "navView",
+    "#post-feedback" : "feedbackView"
+    // "#post-author" : "authorView"
   },
 
-  setNav : function() {
-    var mappings = {"#forward" : "next_post",
-                    "#back" : "previous_post"};
+  postView : function(){
+    return new app.views.Post({
+      model : this.model,
+      className : "loaded",
+      templateName : this.options.postTemplateName
+    })
+  },
 
-    _.each(mappings, function(attribute, selector){
-      this.setArrow($(selector), this.model.get(attribute))
-    }, this);
+  navView : function() {
+    return new app.views.PostViewerNav({ model : this.model })
+  },
 
-    this.setMappings();
+  feedbackView : function() {
+    if(!window.app.user()) { return null }
+    return new app.views.PostViewerFeedback({ model : this.model })
   },
 
-  setArrow : function(arrow, loc) {
-    loc ? arrow.attr('href', loc) : arrow.remove()
+  postRenderTemplate : function() {
+    this.setKeyMappings();
   },
 
-  setMappings : function() {
+  setKeyMappings : function() {
     var nextPostLocation = this.model.get("next_post");
     var previousPostLocation = this.model.get("previous_post");
     var doc = $(document);
 
     /* focus modal */
-    doc.keypress(function(event){
+    doc.keypress(function(){
       $('#text').focus();
       $('#comment').modal();
     });
@@ -50,20 +50,6 @@ app.views.SinglePost = app.views.Post.extend({
         window.location = previousPostLocation
       }
     })
-  },
-
-  setAuthor : function() {
-    // author avatar
-    // time of post
-    // reshared via... (if appliciable)
-  },
-
-  setFeedback : function() {
-    // go back to profile (app.user())
-    // liking
-    // following
-    // resharing
-    // commenting
   }
 
-});
+})

public/javascripts/app/router.js

@@ -41,14 +41,13 @@ app.Router = Backbone.Router.extend({
   singlePost : function(id) {
     new app.models.Post({id : id}).fetch({success : function(resp){
       var postAttrs = resp.get("post");
-      var templateName = resp.get("templateName");
 
-      var view = new app.views.SinglePost({
+      var page = new app.pages.PostViewer({
         model : new app.models.Post(postAttrs),
-        templateName : templateName
+        postTemplateName : resp.get("templateName")
       }).render();
 
-      $("#post-content").html(view.el);
+      $("#container").html(page.el);
     }})
   }
 });

public/javascripts/app/templates/post-viewer-feedback.handlebars

+<div id="user-controls">
+  <a href="#" class="label">
+    <i class="icon-user icon-white"></i>
+  </a>
+  <a href="#" class="label">
+    <i class="icon-heart icon-white"></i>
+  </a>
+  <a href="#" class="label">
+    <i class="icon-plus icon-white"></i>
+  </a>
+  <a href="#" class="label">
+    <i class="icon-retweet icon-white"></i>
+  </a>
+  <a href="#" class="label">
+    <i class="icon-comment icon-white"></i>
+  </a>
+</div>

public/javascripts/app/templates/post-viewer-nav.handlebars

+<a href="#" class="nav-arrow left" id="forward">
+  <img src="/images/arrow-left.png" />
+</a>
+
+<a href="#" class="nav-arrow right" id="back">
+  <img src="/images/arrow-right.png" />
+</a>

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

+<div id="post-content"></div>
+<div id="post-nav"></div>
+<div id="post-feedback"></div>

public/javascripts/app/views/post_feedback_view.js

+app.views.PostViewerFeedback = app.views.Base.extend({
+
+  templateName: "post-viewer-feedback"
+
+})
+

public/javascripts/app/views/post_nav_view.js

+app.views.PostViewerNav = app.views.Base.extend({
+
+  templateName: "post-viewer-nav",
+
+  postRenderTemplate : function() {
+    var mappings = {"#forward" : "next_post",
+                    "#back" : "previous_post"};
+
+    _.each(mappings, function(attribute, selector){
+      this.setArrow(this.$(selector), this.model.get(attribute))
+    }, this);
+  },
+
+  setArrow : function(arrow, loc) {
+    loc ? arrow.attr('href', loc) : arrow.remove()
+  }
+
+})
+