Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 0fb6a77eda
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 111 lines (103 sloc) 4.729 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
{% extends 'base.html' %}
{% block content %}

<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}}</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}}</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>
 {% 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 %}
Something went wrong with that request. Please try again.