Skip to content

E
edx-platform
Commit d393481b by Rocky Duan
Options

some basic functionalities of discussion

parent fb408a99
Showing with 252 additions and 29 deletions
lms/static/coffee/src/discussion.coffee 0 → 100644
$ ->
DEBUG = true
$(".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)
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 : "TODO" # TODO
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]
renderComment = (comment) ->
"""
<div class="comment" _id="#{comment['id']}">
<div class="discussion-content">
<div class="discussion-content-view">
<div class="comment-body">#{comment['body']}</div>
<div class="info">
less than a minute ago by user No.#{comment['user_id']}
<a class="discussion-link discussion-reply" href="javascript:void(0)">Reply</a>
<a class="discussion-link discussion-edit" href="javascript:void(0)">Edit</a>
</div>
</div>
</div>
<div class="comments">
</div>
</div>
"""
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}, (response, textStatus) ->
if textStatus == "success"
if not DEBUG
window.location = window.location.pathname + "#" + response['id']
window.location.reload()
console.log response
console.log textStatus
, 'json'
handleSubmitNewThread = (elem) ->
handleSubmitUpdate = (elem) ->
handleSubmitVote = (elem) ->
console.log window.location.pathname
lms/static/sass/_discussion.scss
$comment_margin_left: 20px;
$discussion_title_size: 1.6em;
$comment_title_size: 1.2em;
$comment_body_size: 1.0em;
$comment_info_size: 0.75em;
@mixin discussion-font {
font-family: "Comic Sans MS", cursive, sans-serif !important;
}
@mixin discussion-clickable {
color: black;
&:hover {
text-decoration: none;
}
}
.discussion {
.title {
font-size: 20px;
line-height: 20px;
.discussion-title {
@include discussion-font;
@include discussion-clickable;
font-size: $discussion_title_size;
font-weight: bold;
margin-bottom: 20px;
display: block;
}
.thread {
margin-top: 10px;
margin-bottom: 10px;
.title {
font-size: 16px;
line-height: 16px;
//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;
}
}
.body {
font-size: 14px;
line-height: 14px;
.discussion-content {
.discussion-content-edit {
.comment-edit {
@include discussion-font;
margin-left: $comment_margin_left;
font-size: $comment_body_size;
margin-top: 10px;
}
}
}
.comments {
margin-left: 20px;
//display: none;
margin-left: $comment_margin_left;
.comment {
.body {
}
.subcomments {
margin-left: 20px;
.comment-body {
@include discussion-font;
font-size: $comment_body_size;
margin-top: 10px;
display: block;
color: black;
}
}
}
......
lms/static/sass/application.scss
......@@ -27,3 +27,4 @@
@import 'multicourse/password_reset';
@import 'multicourse/error-pages';
@import 'multicourse/help';
@import 'discussion';
lms/templates/discussion.html
<section class="discussion">
<div class="title">
Discussion
</div>
<a class="discussion-title" href="javascript:void(0)">Discussion</a>
% for thread in threads:
<div class="thread">
<div class="title">${thread['title']}</div>
<div class="body">${thread['body']}</div>
<div class="info">
${time_ago_in_words(parse(thread['updated_at']))} ago by user No.${thread['user_id']}
<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'])}
......@@ -18,14 +22,32 @@
<%def name="render_comments(comments)">
% for comment in comments:
<div class="comment">
<div class="body">${comment['body']}</div>
<div class="info">
${time_ago_in_words(parse(comment['updated_at']))} ago by user No.${comment['user_id']}
<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="subcomments">
<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