Skip to content

E
edx-platform
Commit f861f996 by Rocky Duan
Options

refactored out thread rendering; vote

parent 214416a6
Showing with 146 additions and 125 deletions
lms/static/coffee/src/discussion.coffee
......@@ -9,6 +9,7 @@ $ ->
$('#open_close_accordion a').click @toggle
$('#accordion').show()
$("section.discussion").each (index, discussion) ->
Discussion.bindDiscussionEvents(discussion)
......@@ -32,7 +33,7 @@ Discussion =
}[name]
handleAnchorAndReload: (response) ->
window.location = window.location.pathname + "#" + response['id']
#window.location = window.location.pathname + "#" + response['id']
window.location.reload()
bindContentEvents: (content) ->
......@@ -100,12 +101,26 @@ Discussion =
Discussion.handleAnchorAndReload(response)
, 'json'
handleVote = (elem, value) ->
contentType = if $content.hasClass("thread") then "thread" else "comment"
url = Discussion.urlFor("#{value}vote_#{contentType}", $content.attr("_id"))
$.post url, {}, (response, textStatus) ->
if textStatus == "success"
Discussion.handleAnchorAndReload(response)
, 'json'
$local(".discussion-reply").click ->
handleReply(this)
$local(".discussion-cancel-reply").click ->
handleCancelReply(this)
$local(".discussion-vote-up").click ->
handleVote(this, "up")
$local(".discussion-vote-down").click ->
handleVote(this, "down")
bindDiscussionEvents: (discussion) ->
$discussion = $(discussion)
$discussionNonContent = $discussion.children(".discussion-non-content")
......
lms/static/sass/_discussion.scss
$comment_margin_left: 20px;
$comment_margin_left: 30px;
$discussion_title_size: 1.6em;
$comment_title_size: 1.2em;
$comment_body_size: 1.0em;
......@@ -45,6 +45,33 @@ $discussion_input_width: 60%;
margin-bottom: 20px;
display: block;
}
.discussion-votes {
margin-right: 8px;
margin-top: 5px;
text-align: center;
height: 40px;
float: left;
.discussion-vote-count {
font-size: $comment_body_size;
@include discussion-font;
}
a.discussion-vote {
display: block;
color: black;
font-weight: bold;
font-size: 15px;
&.discussion-vote-up {
margin-bottom: 3px;
}
&.discussion-vote-down {
margin-top: 3px;
}
}
}
.discussion-right-wrapper {
min-height: 40px;
float: left;
}
.new-post-form {
.new-post-title, .new-post-body {
@include discussion-font;
......@@ -105,6 +132,8 @@ $discussion_input_width: 60%;
}
}
.discussion-content {
margin-top: 10px;
overflow: hidden;
.discussion-content-edit {
.comment-edit {
@include discussion-font;
......@@ -118,16 +147,20 @@ $discussion_input_width: 60%;
.comments {
//display: none;
margin-left: $comment_margin_left;
overflow: hidden;
.comment {
.comment-body {
@include discussion-font;
font-size: $comment_body_size;
margin-top: 10px;
margin-top: 3px;
display: block;
color: black;
}
}
.discussion-votes {
margin-right: 6px;
margin-top: 6px;
}
}
}
......
lms/templates/discussion/inline.html
<%! from django.core.urlresolvers import reverse %>
<%
def url_for(thread_id):
return reverse('django_comment_client.forum.views.single_thread', args=[thread_id])
%>
<%namespace name="renderer" file="thread.html"/>
<section class="discussion">
<div class="discussion-non-content">
......@@ -18,61 +11,6 @@ def url_for(thread_id):
</form>
</div>
% for thread in threads:
${render_thread(thread)}
${renderer.render_thread(thread, edit_thread=False, show_comments=False)}
% endfor
</section>
<%def name="render_thread(thread, edit_thread=False, show_comments=False)">
<div class="thread" _id="${thread['id']}">
<div class="discussion-content">
<a class="thread-title" name="${thread['id']}" href="${url_for(thread['id'])}">${thread['title']}</a>
<div class="discussion-content-view">
<div class="thread-body">${thread['body']}</div>
<div class="info">
${render_info(thread)}
% if edit_thread:
${render_reply('')}
${render_edit('')}
% endif
</div>
</div>
</div>
% if show_comments:
<div class="comments">
${render_comments(thread['children'])}
</div>
% endif
</div>
</%def>
<%def name="render_comments(comments)">
% for comment in comments:
<div class="comment" _id="${comment['id']}">
<div class="discussion-content">
<div class="discussion-content-view">
<a class="comment-body" name="${comment['id']}">${comment['body']}</a>
<div class="info">
${render_info(comment)}
${render_reply('')}
${render_edit('')}
</div>
</div>
</div>
<div class="comments">
${render_comments(comment['children'])}
</div>
</div>
% endfor
</%def>
<%def name="render_info(content)">
${time_ago_in_words(parse(content['updated_at']))} ago by user No.${content['user_id']}
</%def>
<%def name="render_reply(url)">
<a class="discussion-link discussion-reply" href="javascript:void(0)">Reply</a>
</%def>
<%def name="render_edit(url)">
<a class="discussion-link discussion-edit" href="javascript:void(0)">Edit</a>
</%def>
lms/templates/discussion/single_thread.html
<%! from django.core.urlresolvers import reverse %>
<%namespace name="renderer" file="thread.html"/>
<section class="discussion">
<a class="discussion-title" href="javascript:void(0)">Discussion</a>
${render_thread(thread, edit_thread=True, show_comments=True)}
${renderer.render_thread(thread, edit_thread=True, show_comments=True)}
</section>
<%def name="render_thread(thread, edit_thread=False, show_comments=False)">
<div class="thread" _id="${thread['id']}">
<div class="discussion-content">
<a class="thread-title" name="${thread['id']}" href="javascript:void(0)">${thread['title']}</a>
<div class="discussion-content-view">
<div class="thread-body">${thread['body']}</div>
<div class="info">
${render_info(thread)}
% if edit_thread:
${render_reply('')}
${render_edit('')}
% endif
</div>
</div>
</div>
% if show_comments:
<div class="comments">
${render_comments(thread['children'])}
</div>
% endif
</div>
</%def>
<%def name="render_comments(comments)">
% for comment in comments:
<div class="comment" _id="${comment['id']}">
<div class="discussion-content">
<div class="discussion-content-view">
<a class="comment-body" name="${comment['id']}">${comment['body']}</a>
<div class="info">
${render_info(comment)}
${render_reply('')}
${render_edit('')}
</div>
</div>
</div>
<div class="comments">
${render_comments(comment['children'])}
</div>
</div>
% endfor
</%def>
<%def name="render_info(content)">
${time_ago_in_words(parse(content['updated_at']))} ago by user No.${content['user_id']}
</%def>
<%def name="render_reply(url)">
<a class="discussion-link discussion-reply" href="javascript:void(0)">Reply</a>
</%def>
<%def name="render_edit(url)">
<a class="discussion-link discussion-edit" href="javascript:void(0)">Edit</a>
</%def>
lms/templates/discussion/thread.html 0 → 100644
<%! from django.core.urlresolvers import reverse %>
<%! from datehelper import time_ago_in_words %>
<%! from dateutil.parser import parse %>
<%def name="render_thread(thread, edit_thread=False, show_comments=False)">
<%
if show_comments:
url_for_thread = ""
else:
thread_id = thread['id']
url_for_thread = reverse('django_comment_client.forum.views.single_thread', args=[thread_id])
%>
<div class="thread" _id="${thread['id']}">
<div class="discussion-content">
${render_vote(thread)}
<div class="discussion-right-wrapper clearfix">
<a class="thread-title" name="${thread['id']}" href="${url_for_thread}">${thread['title']}</a>
<div class="discussion-content-view">
<div class="thread-body">${thread['body']}</div>
<div class="info">
${render_info(thread)}
% if edit_thread:
${render_reply()}
${render_edit()}
${render_watch_thread()}
% endif
</div>
</div>
</div>
</div>
% if show_comments:
<div class="comments">
${render_comments(thread['children'])}
</div>
% endif
</div>
</%def>
<%def name="render_comments(comments)">
% for comment in comments:
<div class="comment" _id="${comment['id']}">
<div class="discussion-content">
${render_vote(comment)}
<div class="discussion-right-wrapper">
<div class="discussion-content-view">
<a class="comment-body" name="${comment['id']}">${comment['body']}</a>
<div class="info">
${render_info(comment)}
${render_reply()}
${render_edit()}
</div>
</div>
</div>
</div>
<div class="comments">
${render_comments(comment['children'])}
</div>
</div>
% endfor
</%def>
<%def name="render_info(content)">
${time_ago_in_words(parse(content['updated_at']))} ago by user No.${content['user_id']}
</%def>
<%def name="render_reply()">
<a class="discussion-link discussion-reply" href="javascript:void(0)">Reply</a>
</%def>
<%def name="render_edit()">
<a class="discussion-link discussion-edit" href="javascript:void(0)">Edit</a>
</%def>
<%def name="render_watch_thread()">
<a class="discussion-link discussion-watch-thread" href="javascript:void(0)">Watch</a>
</%def>
<%def name="render_vote(content)">
<%
upvote = "&#x2C4;"
downvote = "&#x2C5;"
%>
<div class="discussion-votes" title="Current votes: ${content['votes']['point']}">
<a class="discussion-vote discussion-vote-up" href="javascript:void(0)" title="Current votes: ${content['votes']['point']}">${upvote}</a>
<a class="discussion-vote discussion-vote-down" href="javascript:void(0)" title="Current votes: ${content['votes']['point']}">${downvote}</a>
</div>
</%def>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment