Initial implementation of comments - in progress

app/assets/javascripts/application.js

@@ -8,6 +8,7 @@
 //= require jquery_ujs
 //= require vendor/underscore-min
 //= require vendor/backbone-min
+//= require handlebars.runtime
 //= require backbone/ascii_io
 //= require player/player
 //= require_tree .

app/assets/javascripts/backbone/ascii_io.js.coffee

@@ -8,4 +8,4 @@ window.AsciiIo =
   Models: {}
   Collections: {}
   Routers: {}
-  Views: {}
+  Views: {}

app/assets/javascripts/backbone/models/comment.js.coffee

@@ -0,0 +1,6 @@
+class AsciiIo.Models.Comment extends Backbone.Model
+
+class AsciiIo.Collections.Comments extends Backbone.Collection
+  model: AsciiIo.Models.Comment
+
+  url: '/api/asciicasts/1/comments.json'

app/assets/javascripts/backbone/templates/comments/index.jst.hbs

@@ -0,0 +1,10 @@
+<ul class="comments">
+</ul>
+
+<form id="new-comment">
+  <p>
+    <textarea type="text" name="body" id="comment-body"></textarea>
+  </p>
+
+  <input type="submit" value="Post">
+</form>

app/assets/javascripts/backbone/templates/comments/show.jst.hbs

@@ -0,0 +1,13 @@
+<div class="left">
+  <a href="#"><img src="{{user.avatar_url}}" alt="{{user.nickanme}}" class="avatar" /></a>
+</div>
+
+<div class="right">
+  <div>
+    <span class="user-name">{{user.nickname}}</span>
+    <span class="when">{{created}}</span>
+  </div>
+  <div class="body">{{body}}</div>
+</div>
+
+<div class="clear"></div>

app/assets/javascripts/backbone/views/comments/comment_entry.js.coffee

@@ -0,0 +1,10 @@
+class AsciiIo.Views.CommentEntry extends Backbone.View
+
+  template: JST['backbone/templates/comments/show']
+  tagName: 'li'
+  className: 'comment'
+
+  render: ->
+    $(@el).html(@template(@model.toJSON()))
+
+    this

app/assets/javascripts/backbone/views/comments/comments_index.js.coffee

@@ -0,0 +1,35 @@
+class AsciiIo.Views.CommentsIndex extends Backbone.View
+
+  el: '#comments'
+  template: JST['backbone/templates/comments/index']
+
+  events:
+    'submit #new-comment': 'createComment'
+
+  initialize: ->
+    @collection.on('reset', @render, this)
+    @collection.on('add', @render, this)
+
+  render: ->
+    $(@el).html @template
+    $comments = this.$('.comments')
+
+    @collection.each (comment) ->
+      view = new AsciiIo.Views.CommentEntry({ model: comment, collection: @collection})
+      $comments.append view.render().el
+
+    this
+
+  createComment: (event) ->
+    event.preventDefault()
+    attrs = body: $('#comment-body').val()
+    @collection.create attrs,
+      wait: true
+      success: -> $('#new-comment')[0].reset()
+      error: @handleError
+
+  handleError: (comment, response) ->
+    if response.status == 422
+      errors  = $.parseJSON(response.responseText).errors
+      for attribute, messages of errors
+        alert "#{attribute} #{message}" for message in messages

app/assets/javascripts/player/namespace.js

@@ -1 +1,3 @@
-window.AsciiIo = {};
+if (!window.AsciiIo){
+  window.AsciiIo = {};
+}

app/assets/stylesheets/comments.css.scss

@@ -0,0 +1,38 @@
+#comments { }
+.comments { }
+
+#new-comment {
+  padding: 10px;
+
+  textarea{
+    width: 350px;
+    height: 60px;
+  }
+}
+
+li.comment {
+  list-style-type: none;
+  margin: 20px 10px;
+
+  width: 450px;
+  .left {
+    float: left;
+    width: 100px;
+  }
+
+  .right {
+    float:right;
+    width: 350px;
+  }
+
+  .when {
+    color: #969696;
+  }
+
+  .user-name{
+    color: #2786C2;
+  }
+  .body {
+    padding: 20px 0;
+  }
+}

app/views/asciicasts/show.html.erb

@@ -14,3 +14,21 @@
 </div>
 
 <%= player_script(@asciicast) %>
+
+<h2>Comments</h2>
+
+<div id="comments"></div>
+
+<%= player_data(@asciicast) %>
+
+<script type="text/javascript">
+  jQuery(document).ready( function(){
+    var comments = new AsciiIo.Collections.Comments();
+    var asciicast_id = <%= @asciicast.id %>
+
+    comments.url = ['/api/asciicasts/', asciicast_id, '/comments.json'].join('');
+    comments.fetch();
+
+    view = new AsciiIo.Views.CommentsIndex({ collection: comments });
+  })
+</script>