main.html

{% extends 'base.html' %}
{% block content %}

<div style="text-align:right;"><a href="http://en.gravatar.com/" style="color:#777777; text-decoration:none">To change your avatar, click here to up an Gravatar with your hackerdojo.com email</a></div>
<h3>What are you doing?</h3>
<form method="post">
  <textarea name="body" class="update-input" ></textarea>
  <input type="submit" value="Update" /><span class="meta-right">Max 500 chars</span>
</form>
<div id="updates">
  {% for update in updates %}
    <div class="update">
      <span class="avatar"><img class="update-image-avatar" src="{{update.image_url}}"/></span>
      <span class="update-body">
        <span class="update-content">
          <span class="user-fullname">{{update.user_fullname}}</span>
          <span class="body">{{update.body|urlize}}</span>  
        </span>
        <span class="update-meta">
          <span class="since">{{update.created|timesince}} ago</span> | 
          <a class="comment-link" href="javascript:void(0);" onClick="toggleComment({{update.key.id}})" id="comment-link-{{update.key.id}}">Comment</a>
        </span>
      </span>
      <div class="comments">
        {% for comment in update.comment_set %}
          <div class="comment">
            <span class="small-avatar"><img class="comment-image-avatar"  src="{{comment.image_url}}"/></span>
            <span class="comment-content">
              <span class="comment-fullname">{{comment.user_fullname}}</span> 
              <span class="comment-body">{{comment.body|urlize}}</span>
            </span> 
            <span class="comment-meta"> {{comment.created|timesince}} ago</span> 
          </div>
        {% endfor %}
      </div>
      <form class="comment-form" action="/comment/{{update.key.id}}" method="post" id="comment-form-{{update.key.id}}" style="display: none;">
        <textarea class="comment-form-textarea" id="comment-form-textarea-{{update.key.id}}" name="body"></textarea> 
        <div class="comment-form-controls">
          <input type="submit" value="Comment" />
          <button type="button" class="comment-link-cancel" onclick="toggleComment({{update.key.id}})">Cancel</button>
          <span class="meta-left">max 500 chars</span>
        </div>
      </form>
    </div>
    <hr size="1" style="color:#979fc8; margin:1.5em">

 {% endfor %}
</div>
<div>
  <a id="load-more" href="javascript:loadMoreUpdates('{{updates_query.cursor}}')">More</a>
</div>

<!-- required if there is no comments on the first page and we are pulling a second page -->
<div class="comment" style="display:none">
  <span class="small-avatar"><img class="comment-image-avatar"  src=""/></span>
  <span class="comment-content">
    <span class="comment-fullname"></span> 
    <span class="comment-body"></span>
  </span> 
  <span class="comment-meta"></span> 
</div>
 
 
<script type="text/javascript">
  function toggleComment(id) {
    if ($('#comment-form-'+id).css('display') == 'inline') {
      $('#comment-form-'+id).css('display', 'none');
      $('#comment-link-'+id).css('display', 'inline');
    } else {
      $('#comment-form-'+id).css('display', 'inline');
      $('#comment-link-'+id).css('display', 'none');
      $.scrollTo('#comment-form-textarea-'+id);
    }
  }

  function loadMoreUpdates(cursor){
    $.get('/updates/' + cursor, function(data) {
      var foo = JSON.parse(data);
      for(var i=0; i<foo[0].messages.length;i++){
        $("#updates")[0].appendChild(updateNode(foo[0].messages[i]));
      }
      $("#load-more")[0].href = 'javascript:loadMoreUpdates("' + foo[1].cursor + '")';
    });
  }

  function updateNode(update){
    var newNode = $(".update")[0].cloneNode(true);
    $(".body",newNode)[0].innerHTML = update.body;
    $(".since",newNode)[0].innerHTML = update.ago;
    $(".user-fullname",newNode)[0].innerHTML = update.user_fullname;
    $(".update-image-avatar",newNode)[0].src = update.image_url;
    $(".comment-link",newNode)[0].onclick = function(){toggleComment(update.id)};
    $(".comment-link",newNode)[0].id = "comment-link-" + update.id;
    $(".comment-form-textarea",newNode)[0].id = "comment-form-textarea-" + update.id;
    $(".comment-form",newNode)[0].action = "/comment/" + update.id;
    $(".comment-form",newNode)[0].id ="comment-form-" + update.id;
    $(".comment-link-cancel",newNode)[0].onclick = function(){toggleComment(update.id)};
    $(".comments",newNode)[0].innerHTML = "";
    for(var i=0; i < update.comments.length; i++){$(".comments",newNode)[0].appendChild(commentNode(update.comments[i]));}
    return newNode;
  }

  function commentNode(comment){
    var newNode = $(".comment")[0].cloneNode(true);
    $(".comment-body",newNode)[0].innerHTML = comment.body;
    $(".comment-meta",newNode)[0].innerHTML = comment.ago;
    $(".comment-fullname",newNode)[0].innerHTML = comment.user_fullname;
    $(".comment-image-avatar",newNode)[0].src = comment.image_url;
    newNode.style.display = "block";
    return newNode;
  }
</script>
{% endblock %}