some basic functionalities of discussion
This commit is contained in:
Rocky Duan
135
lms/static/coffee/src/discussion.coffee
Normal file
135
lms/static/coffee/src/discussion.coffee
Normal file
@@ -0,0 +1,135 @@
|
||||
$ ->
|
||||
|
||||
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
|
||||
@@ -1,27 +1,92 @@
|
||||
$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;
|
||||
}
|
||||
.body {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
@import 'jobs';
|
||||
@import 'about_pages';
|
||||
@import 'press_release';
|
||||
@import 'discussion';
|
||||
|
||||
|
||||
// Courseware styles
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user