Fix WMD editor reply boxes on embedded discussions, although I think the way…

Fix WMD editor reply boxes on embedded discussions, although I think the way it's implemented is something of a hack.

lms/static/coffee/src/customwmd.coffee

@@ -112,7 +112,7 @@ $ ->
       (text) -> _this.replaceMath(text)
 
   if Markdown?
-    
+
     Markdown.getMathCompatibleConverter = (postProcessor) ->
       postProcessor ||= ((text) -> text)
       converter = Markdown.getSanitizingConverter()
@@ -124,11 +124,9 @@ $ ->
 
     Markdown.makeWmdEditor = (elem, appended_id, imageUploadUrl, postProcessor) ->
       $elem = $(elem)
-
       if not $elem.length
         console.log "warning: elem for makeWmdEditor doesn't exist"
         return
-
       if not $elem.find(".wmd-panel").length
         initialText = $elem.html()
         $elem.empty()
@@ -163,7 +161,7 @@ $ ->
             alert(e)
             if startUploadHandler
               $('#file-upload').unbind('change').change(startUploadHandler)
-              
+
       imageUploadHandler = (elem, input) ->
         ajaxFileUpload(imageUploadUrl, input, imageUploadHandler)
 

lms/static/coffee/src/discussion/discussion_module.coffee

@@ -32,7 +32,7 @@ if Backbone?
               $(".discussion-module").append($discussion)
               discussion.each (thread) ->
                 element = $("article#thread_#{thread.id}")
-                dtv = new DiscussionThreadView el: element, model: thread
+                dtv = new DiscussionThreadInlineView el: element, model: thread
                 dtv.render()
               DiscussionUtil.bulkUpdateContentInfo(window.$$annotated_content_info)
               @retrieved = true

lms/static/coffee/src/discussion/main.coffee

@@ -2,7 +2,6 @@ DiscussionApp =
   start: (elem)->
     # TODO: Perhaps eliminate usage of global variables when possible
     element = $(elem)
-    window.$$contents = {}
     window.$$course_id = element.data("course-id")
     user_info = element.data("user-info")
     threads = element.data("threads")

lms/static/coffee/src/discussion/utils.coffee

@@ -18,7 +18,7 @@ class @DiscussionUtil
   @addContent: (id, content) -> window.$$contents[id] = content
 
   @getContent: (id) -> window.$$contents[id]
-  
+
   @bulkUpdateContentInfo: (infos) ->
     for id, info of infos
       @getContent(id).updateInfo(info)
@@ -28,7 +28,7 @@ class @DiscussionUtil
             .attr("href", "javascript:void(0)")
             .addClass(cls).html(txt)
             .click -> handler(this)
-    
+
   @urlFor: (name, param, param1, param2) ->
     {
       follow_discussion       : "/courses/#{$$course_id}/discussion/#{param}/follow"
@@ -127,7 +127,7 @@ class @DiscussionUtil
 
   @clearFormErrors: (errorsField) ->
     errorsField.empty()
-    
+
   @postMathJaxProcessor: (text) ->
     RE_INLINEMATH = /^\$([^\$]*)\$/g
     RE_DISPLAYMATH = /^\$\$([^\$]*)\$\$/g
@@ -144,6 +144,7 @@ class @DiscussionUtil
   @makeWmdEditor: ($content, $local, cls_identifier) ->
     elem = $local(".#{cls_identifier}")
     id = $content.attr("_id")
+    #TODO: I think this is kind of a hack. At the least it should use data-id instead of _id
     appended_id = "-#{cls_identifier}-#{id}"
     imageUploadUrl = @urlFor('upload')
     _processor = (_this) ->
@@ -198,9 +199,9 @@ class @DiscussionUtil
         unfollowLink()
     else
       followLink()
-    
+
   @processEachMathAndCode: (text, processor) ->
-  
+
     codeArchive = []
 
     RE_DISPLAYMATH = /^([^\$]*?)\$\$([^\$]*?)\$\$(.*)$/m

lms/static/coffee/src/discussion/views/discussion_thread_inline_view.coffee

+class @DiscussionThreadInlineView extends DiscussionContentView
+
+  events:
+    "click .discussion-vote": "toggleVote"
+    "click .action-follow": "toggleFollowing"
+    "click .discussion-submit-post": "submitComment"
+    "click .action-edit": "edit"
+    "click .action-delete": "delete"
+    "click .action-openclose": "toggleClosed"
+    "click .show-reply": "toggleReply"
+
+  template: -> DiscussionUtil.getTemplate("_inline_thread")
+
+  initLocal: ->
+    @$local = @$el.children(".discussion-article").children(".local")
+    @$delegateElement = @$local
+
+  initialize: ->
+    super()
+    @model.on "change", @updateModelDetails
+
+  render: ->
+    #TODO: Debugging, remove when done
+    if not window.$disc
+      window.$disc = []
+    window.$disc.push(@)
+    @$el.html(Mustache.render(@template(), @model.toJSON()))
+    @initLocal()
+    @delegateEvents()
+    @renderDogear()
+    @renderVoted()
+    @renderAttrs()
+    @$("span.timeago").timeago()
+    @makeWmdEditor "reply-body"
+    @convertMath()
+    # @renderResponses()
+#    @highlight @$(".post-body")
+#    @highlight @$("h1")
+    @
+
+  renderDogear: ->
+    if window.user.following(@model)
+      @$(".dogear").addClass("is-followed")
+
+  renderVoted: =>
+    if window.user.voted(@model)
+      @$("[data-role=discussion-vote]").addClass("is-cast")
+    else
+      @$("[data-role=discussion-vote]").removeClass("is-cast")
+
+  updateModelDetails: =>
+    @renderVoted()
+    @$("[data-role=discussion-vote] .votes-count-number").html(@model.get("votes")["up_count"])
+
+  convertMath: ->
+    element = @$(".post-body")
+    element.html DiscussionUtil.postMathJaxProcessor(element.html())
+    MathJax.Hub.Queue ["Typeset", MathJax.Hub, element[0]]
+
+  renderResponses: ->
+    DiscussionUtil.safeAjax
+      url: "/courses/#{$$course_id}/discussion/forum/#{@model.get('commentable_id')}/threads/#{@model.id}"
+      success: (data, textStatus, xhr) =>
+        @$el.find(".loading").remove()
+        Content.loadContentInfos(data['annotated_content_info'])
+        comments = new Comments(data['content']['children'])
+        comments.each @renderResponse
+        @trigger "thread:responses:rendered"
+
+  renderResponse: (response) =>
+    response.set('thread', @model)
+    view = new ThreadResponseView(model: response)
+    view.on "comment:add", @addComment
+    view.render()
+    @$el.find(".responses").append(view.el)
+
+  addComment: =>
+    @model.comment()
+
+  toggleVote: (event) ->
+    event.preventDefault()
+    if window.user.voted(@model)
+      @unvote()
+    else
+      @vote()
+
+  toggleFollowing: (event) ->
+    $elem = $(event.target)
+    url = null
+    console.log "follow"
+    if not @model.get('subscribed')
+      @model.follow()
+      url = @model.urlFor("follow")
+    else
+      @model.unfollow()
+      url = @model.urlFor("unfollow")
+    DiscussionUtil.safeAjax
+      $elem: $elem
+      url: url
+      type: "POST"
+
+  vote: ->
+    window.user.vote(@model)
+    url = @model.urlFor("upvote")
+    DiscussionUtil.safeAjax
+      $elem: @$(".discussion-vote")
+      url: url
+      type: "POST"
+      success: (response, textStatus) =>
+        if textStatus == 'success'
+          @model.set(response)
+
+  unvote: ->
+    window.user.unvote(@model)
+    url = @model.urlFor("unvote")
+    DiscussionUtil.safeAjax
+      $elem: @$(".discussion-vote")
+      url: url
+      type: "POST"
+      success: (response, textStatus) =>
+        if textStatus == 'success'
+          @model.set(response)
+
+  submitComment: (event) ->
+    event.preventDefault()
+    url = @model.urlFor('reply')
+    body = @getWmdContent("reply-body")
+    return if not body.trim().length
+    @setWmdContent("reply-body", "")
+    comment = new Comment(body: body, created_at: (new Date()).toISOString(), username: window.user.get("username"), votes: { up_count: 0 }, endorsed: false, user_id: window.user.get("id"))
+    comment.set('thread', @model.get('thread'))
+    @renderResponse(comment)
+    @model.addComment()
+
+    DiscussionUtil.safeAjax
+      $elem: $(event.target)
+      url: url
+      type: "POST"
+      dataType: 'json'
+      data:
+        body: body
+      success: (data, textStatus) =>
+        comment.updateInfo(data.annotated_content_info)
+        comment.set(data.content)
+
+  edit: ->
+
+
+  delete: (event) ->
+    url = @model.urlFor('delete')
+    if not @model.can('can_delete')
+      return
+    if not confirm "Are you sure to delete thread \"#{@model.get('title')}\"?"
+      return
+    @model.remove()
+    @$el.empty()
+    $elem = $(event.target)
+    DiscussionUtil.safeAjax
+      $elem: $elem
+      url: url
+      type: "POST"
+      success: (response, textStatus) =>
+
+  toggleClosed: (event) ->
+    $elem = $(event.target)
+    url = @model.urlFor('close')
+    closed = @model.get('closed')
+    data = { closed: not closed }
+    DiscussionUtil.safeAjax
+      $elem: $elem
+      url: url
+      data: data
+      type: "POST"
+      success: (response, textStatus) =>
+        @model.set('closed', not closed)
+        @model.set('ability', response.ability)
+
+  toggleEndorse: (event) ->
+    $elem = $(event.target)
+    url = @model.urlFor('endorse')
+    endorsed = @model.get('endorsed')
+    data = { endorsed: not endorsed }
+    DiscussionUtil.safeAjax
+      $elem: $elem
+      url: url
+      data: data
+      type: "POST"
+      success: (response, textStatus) =>
+        @model.set('endorsed', not endorsed)
+
+  highlight: (el) ->
+    el.html(el.html().replace(/&lt;mark&gt;/g, "<mark>").replace(/&lt;\/mark&gt;/g, "</mark>"))
+  toggleReply: ->
+    $('.discussion-reply-new').each (index, elem)->
+      $(elem).hide()
+      $(elem).find('.reply-body').empty()
+    @$el.find('.discussion-reply-new').show()
+    Markdown.makeWmdEditor @$el.find(".reply-body"), "", DiscussionUtil.urlFor("upload"), (text) -> DiscussionUtil.postMathJaxProcessor(text)

lms/static/sass/_discussion.scss

@@ -1512,8 +1512,8 @@ body.discussion {
     }
   }
 
-  .discussion-reply-new {
-    display:none;
-  }
+  //.discussion-reply-new {
+  //  display:none;
+  //}
 
 }

lms/templates/discussion/mustache/_inline_discussion.mustache

 <section class="discussion">
   {{#threads}}
-    <article class="discussion-thread" id="thread_{{id}}">
+    <article class="discussion-thread" id="thread_{{id}}" _id="{{id}}">
     </article>
   {{/threads}}
 </section>

lms/templates/discussion/mustache/_inline_thread.mustache

+<article class="discussion-article" data-id="{{id}}">
+    <div class="local"><a href="#" class="dogear action-follow"></a></div>
+    <div class="discussion-post local">
+        <header>
+            <a href="#" class="vote-btn discussion-vote discussion-vote-up"><span class="plus-icon">+</span> <span class='votes-count-number'>{{votes.up_count}}</span></a>
+            <h1>{{title}}</h1>
+            <p class="posted-details">
+                <span class="timeago" title="{{created_at}}">sometime</span> by
+                <a href="{{user_url}}">{{username}}</a>
+            </p>
+        </header>
+        <div class="post-body">
+            {{body}}
+        </div>
+    </div>
+    <ol class="responses">
+        <li class="loading"><div class="loading-animation"></div></li>
+    </ol>
+    <form class="local discussion-reply-new"  data-id="{{id}}">
+        <h4>Post a response:</h4>
+        <ul class="discussion-errors"></ul>
+        <div class="reply-body" _id="{{id}}"></div>
+        <div class="reply-post-control">
+            <a class="discussion-submit-post control-button" href="#">Submit</a>
+        </div>
+    </form>
+</article>