From 3d43ba81ce47454083977e7f80dc060d585cfea9 Mon Sep 17 00:00:00 2001
From: Rocky Duan <dementrock@gmail.com>
Date: Fri, 20 Jul 2012 12:19:20 -0400
Subject: [PATCH] some basic functionalities of discussion

---
 lms/static/coffee/src/discussion.coffee | 135 ++++++++++++++++++++++++
 lms/static/sass/_discussion.scss        |  97 ++++++++++++++---
 lms/static/sass/application.scss        |   1 +
 lms/templates/discussion.html           |  48 ++++++---
 4 files changed, 252 insertions(+), 29 deletions(-)
 create mode 100644 lms/static/coffee/src/discussion.coffee

diff --git a/lms/static/coffee/src/discussion.coffee b/lms/static/coffee/src/discussion.coffee
new file mode 100644
index 0000000000..aaefa7deb4
--- /dev/null
+++ b/lms/static/coffee/src/discussion.coffee
@@ -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
diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss
index f2f40a307d..cced505eb4 100644
--- a/lms/static/sass/_discussion.scss
+++ b/lms/static/sass/_discussion.scss
@@ -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;
         }
       }
     }
diff --git a/lms/static/sass/application.scss b/lms/static/sass/application.scss
index 2daa0da8e9..4267c8f351 100644
--- a/lms/static/sass/application.scss
+++ b/lms/static/sass/application.scss
@@ -32,6 +32,7 @@
 @import 'jobs';
 @import 'about_pages';
 @import 'press_release';
+@import 'discussion';
 
 
 // Courseware styles
diff --git a/lms/templates/discussion.html b/lms/templates/discussion.html
index 07a2afe0c3..1702f60f0d 100644
--- a/lms/templates/discussion.html
+++ b/lms/templates/discussion.html
@@ -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>