Commit 3267aa17 by Rocky Duan

forum view for discussions

parent 846a488e
......@@ -16,13 +16,14 @@ class DiscussionModule(XModule):
'parse': dateutil.parser.parse,
'commentable_id': self.discussion_id,
}
return self.system.render_template('discussion.html', context)
return self.system.render_template('discussion/inline.html', context)
def __init__(self, system, location, definition, instance_state=None, shared_state=None, **kwargs):
XModule.__init__(self, system, location, definition, instance_state, shared_state, **kwargs)
xml_data = etree.fromstring(definition['data'])
self.discussion_id = xml_data.attrib['id']
self.title = xml_data.attrib['for']
self.category = xml_data.attrib['category']
class DiscussionDescriptor(RawDescriptor):
module_class = DiscussionModule
$ ->
#DEBUG = true
DEBUG = false
$(".discussion-title").click ->
$thread = $(this).parent().children(".thread")
if $thread.css("display") == "none"
$thread.show()
else
$thread.hide()
$(".thread-title").click ->
$comments = $(this).parent().parent().children(".comments")
if $comments.css("display") == "none"
$comments.show()
else
$comments.hide()
getDiscussionContentLink = ($elem, selector) ->
$elem.children(".discussion-content-view").children(".info").children(selector)
discussionContentHoverIn = ->
status = $(this).attr("status") || "normal"
if status == "normal"
getDiscussionContentLink($(this), ".discussion-link").show()
else if status == "reply"
getDiscussionContentLink($(this), ".discussion-cancel-reply").show()
getDiscussionContentLink($(this), ".discussion-submit-reply").show()
else if status == "edit"
getDiscussionContentLink($(this), ".discussion-cancel-edit").show()
getDiscussionContentLink($(this), ".discussion-update-edit").show()
discussionContentHoverOut = ->
getDiscussionContentLink($(this), ".discussion-link").hide()
$(".discussion-content").hover(discussionContentHoverIn, discussionContentHoverOut)
$(".discussion-reply").click ->
handleReply(this)
$(".discussion-cancel-reply").click ->
handleCancelReply(this)
$(".discussion-new-post").click ->
handleSubmitNewThread(this)
discussionLink = (cls, txt, handler) ->
$("<a>").addClass("discussion-link").
attr("href", "javascript:void(0)").
addClass(cls).html(txt).
click(-> handler(this))
handleReply = (elem) ->
discussionContent = $(elem).parents(".discussion-content")
editView = discussionContent.children(".discussion-content-edit")
if editView.length
editView.show()
else
editView = $("<div>").addClass("discussion-content-edit")
editView.append($("<textarea>").addClass("comment-edit"))
$(elem).parents(".discussion-content").append(editView)
cancelReply = discussionLink("discussion-cancel-reply", "Cancel", handleCancelReply)
submitReply = discussionLink("discussion-submit-reply", "Submit", handleSubmitReply)
$(elem).parents(".info").children(".discussion-link").hide()
$(elem).after(submitReply).replaceWith(cancelReply)
discussionContent.attr("status", "reply")
handleCancelReply = (elem) ->
discussionContent = $(elem).parents(".discussion-content")
editView = discussionContent.children(".discussion-content-edit")
if editView.length
editView.hide()
getDiscussionContentLink(discussionContent, ".discussion-submit-reply").remove()
reply = discussionLink("discussion-reply", "Reply", handleReply)
$(elem).parents(".info").children(".discussion-link").show()
$(elem).replaceWith(reply)
discussionContent.attr("status", "normal")
urlFor = (name, param) ->
{
create_thread : "/discussions/#{param}/threads/create"
update_thread : "/discussions/threads/#{param}/update"
create_comment : "/discussions/threads/#{param}/reply"
delete_thread : "/discussions/threads/#{param}/delete"
update_comment : "/discussions/comments/#{param}/update"
endorse_comment : "/discussions/comments/#{param}/endorse"
create_sub_comment : "/discussions/comments/#{param}/reply"
delete_comment : "/discussions/comments/#{param}/delete"
upvote_comment : "/discussions/comments/#{param}/upvote"
downvote_comment : "/discussions/comments/#{param}/downvote"
upvote_thread : "/discussions/threads/#{param}/upvote"
downvote_thread : "/discussions/threads/#{param}/downvote"
}[name]
handleSubmitReply = (elem) ->
$div = $(elem).parents(".discussion-content").parent()
if $div.hasClass("thread")
url = urlFor('create_comment', $div.attr("_id"))
else if $div.hasClass("comment")
url = urlFor('create_sub_comment', $div.attr("_id"))
else
return
$edit = $div.children(".discussion-content").find(".comment-edit")
body = $edit.val()
$.post url, {body: body}, handleAnchorAndReload(response, textStatus) ->
if textStatus == "success"
handleAnchorAndReload(response)
console.log response
console.log textStatus
, 'json'
handleSubmitNewThread = (elem) ->
$div = $(elem).parent()
title = $div.find(".new-post-title").val()
body = $div.find(".new-post-body").val()
url = urlFor('create_thread', $div.attr("_id"))
$.post url, {title: title, body: body}, (response, textStatus) ->
if textStatus == "success"
handleAnchorAndReload(response)
console.log response
console.log textStatus
, 'json'
handleSubmitUpdate = (elem) ->
handleSubmitVote = (elem) ->
console.log window.location.pathname
handleAnchorAndReload = (response) ->
if not DEBUG
window.location = window.location.pathname + "#" + response['id']
window.location.reload()
$comment_margin_left: 20px;
$discussion_title_size: 1.6em;
$comment_title_size: 1.2em;
$comment_body_size: 1.0em;
$comment_info_size: 0.75em;
$discussion_input_width: 60%;
@mixin discussion-font {
font-family: "Comic Sans MS", cursive, sans-serif !important;
}
@mixin discussion-clickable {
color: black;
&:hover {
text-decoration: none;
}
}
.discussion {
.discussion-title {
@include discussion-font;
@include discussion-clickable;
font-size: $discussion_title_size;
font-weight: bold;
margin-bottom: 20px;
display: block;
}
.new-post-form {
.new-post-title, .new-post-body {
@include discussion-font;
display: block !important;
width: $discussion_input_width !important;
}
.new-post-body {
margin-top: 10px;
}
.discussion-new-post {
@include discussion-font;
color: #1d9dd9;
display: block;
margin-top: 10px;
font-weight: bold;
}
}
.thread {
//display: none;
margin-top: 30px;
margin-bottom: 30px;
.thread-title {
@include discussion-font;
@include discussion-clickable;
font-size: $comment_title_size;
font-weight: bold;
display: block;
}
.thread-body {
@include discussion-font;
font-size: $comment_body_size;
margin-top: 7px;
margin-bottom: 2px;
}
.info {
@include discussion-font;
font-size: $comment_info_size;
font-style: italic;
margin-top: 5px;
color: gray;
.discussion-link {
margin-left: 2px;
}
.discussion-reply {
margin-left: 4px;
}
.discussion-link {
@include discussion-font;
display: inline-block;
color: #1d9dd9;
display: none;
}
}
.discussion-content:hover {
.discussion-link {
display: inline-block;
}
}
.discussion-content {
.discussion-content-edit {
.comment-edit {
@include discussion-font;
width: $discussion_input_width !important;
margin-left: $comment_margin_left;
font-size: $comment_body_size;
margin-top: 10px;
}
}
}
.comments {
//display: none;
margin-left: $comment_margin_left;
.comment {
.comment-body {
@include discussion-font;
font-size: $comment_body_size;
margin-top: 10px;
display: block;
color: black;
}
}
}
}
}
<%page args="active_page" />
<%
def url_class(url):
if url == active_page:
return "active"
return ""
%>
<%! from django.core.urlresolvers import reverse %>
<nav class="${active_page} course-material">
<div class="inner-wrapper">
<ol class="course-tabs">
<li class="courseware"><a href="${reverse('courseware', args=[course.id])}" class="${url_class('courseware')}">Courseware</a></li>
<li class="info"><a href="${reverse('info', args=[course.id])}" class="${url_class('info')}">Course Info</a></li>
% if user.is_authenticated():
<li class="book"><a href="${reverse('book', args=[course.id])}" class="${url_class('book')}">Textbook</a></li>
<li class="discussion"><a href="${reverse('questions')}">Discussion</a></li>
% endif
<li class="wiki"><a href="${reverse('wiki_root', args=[course.id])}" class="${url_class('wiki')}">Wiki</a></li>
% if user.is_authenticated():
<li class="profile"><a href="${reverse('profile', args=[course.id])}" class="${url_class('profile')}">Profile</a></li>
% endif
</ol>
</div>
</nav>
<section class="discussion">
<a class="discussion-title" href="javascript:void(0)">Discussion</a>
<div class="new-post-form" _id="${commentable_id}">
<input type="text" class="new-post-title" placeholder="Title"/>
<textarea class="new-post-body"></textarea>
<a class="discussion-new-post" href="javascript:void(0)">New Post</a>
</div>
% for thread in threads:
<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)}
${render_reply('')}
${render_edit('')}
</div>
</div>
</div>
<div class="comments">
${render_comments(thread['children'])}
</div>
</div>
% endfor
</section>
<%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>
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