Refactored DiscussionThreadInlineView to inherit from DiscussionThreadView and

use subviews for rendering. Functionality should be the same. Changed a few things in DiscussionThreadView to make this a little easier.

Refactored DiscussionThreadInlineView to inherit from DiscussionThreadView and
use subviews for rendering. Functionality should be the same. Changed a few things in DiscussionThreadView to make this a little easier.
768c7f6d · Ibrahim Awwal · 29b020b8 · 29b020b8 · 768c7f6d · 768c7f6d
Commit 768c7f6d authored Sep 13, 2012 by Ibrahim Awwal
6 changed files
--- a/lms/static/coffee/src/discussion/views/discussion_thread_inline_view.coffee
+++ b/lms/static/coffee/src/discussion/views/discussion_thread_inline_view.coffee
-if Backbone?
-  class @DiscussionThreadInlineView extends DiscussionContentView
-    expanded = false
-    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 .expand-post": "expandPost"
-      "click .collapse-post": "collapsePost"
-    initLocal: ->
-      @$local = @$el.children(".discussion-article").children(".local")
-      @$delegateElement = @$local
-    initialize: ->
-      super()
-      @model.on "change", @updateModelDetails
-    render: ->
-      @template = DiscussionUtil.getTemplate("_inline_thread")
-      if not @model.has('abbreviatedBody')
-        @abbreviateBody()
-      params = $.extend(@model.toJSON(),{expanded: @expanded})
-      if not @model.get('anonymous')
-        params = $.extend(params, user:{username: @model.username, user_url: @model.user_url})
-      @$el.html(Mustache.render(@template, params))
-      @initLocal()
-      @delegateEvents()
-      @renderDogear()
-      @renderVoted()
-      @renderAttrs()
-      @$("span.timeago").timeago()
-      @convertMath()
-      if @expanded
-        @makeWmdEditor "reply-body"
-        @renderResponses()
-      @
-    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 DiscussionUtil.markdownWithHighlight 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}"
-        $loading: @$el
-        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)
-    abbreviateBody: ->
-      abbreviated = DiscussionUtil.abbreviateString @model.get('body'), 140
-      @model.set('abbreviatedBody', abbreviated)
-    expandPost: (event) ->
-      @expanded = true
-      @$el.addClass('expanded')
-      @$el.find('.post-body').html(@model.get('body'))
-      @convertMath()
-      @$el.find('.expand-post').css('display', 'none')
-      @$el.find('.collapse-post').css('display', 'block')
-      @$el.find('.post-extended-content').show()
-      @makeWmdEditor "reply-body"
-      if @$el.find('.loading').length
-        @renderResponses()
-    collapsePost: (event) ->
-      @expanded = false
-      @$el.removeClass('expanded')
-      @$el.find('.post-body').html(@model.get('abbreviatedBody'))
-      @convertMath()
-      @$el.find('.collapse-post').css('display', 'none')
-      @$el.find('.post-extended-content').hide()
-      @$el.find('.expand-post').css('display', 'block')
--- a/lms/static/coffee/src/discussion/views/discussion_thread_show_view.coffee
+++ b/lms/static/coffee/src/discussion/views/discussion_thread_show_view.coffee
@@ -14,9 +14,11 @@ class @DiscussionThreadShowView extends DiscussionContentView
    super()
    @model.on "change", @updateModelDetails
-  render: ->
+  renderTemplate: ->
    @template = _.template($("#thread-show-template").html())
-    @$el.html(@template(@model.toJSON()))
+    @template(@model.toJSON())
+  render: ->
+    @$el.html(@renderTemplate())
    @delegateEvents()
    @renderDogear()
    @renderVoted()
@@ -24,7 +26,7 @@ class @DiscussionThreadShowView extends DiscussionContentView
    @$("span.timeago").timeago()
    @convertMath()
    @highlight @$(".post-body")
-    @highlight @$("h1")
+    @highlight @$("h1,h3")
    @
  renderDogear: ->
@@ -89,28 +91,6 @@ class @DiscussionThreadShowView extends DiscussionContentView
        if textStatus == 'success'
          @model.set(response, {silent: true})
-  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: (event) ->
    @trigger "thread:edit", event
@@ -146,3 +126,11 @@ class @DiscussionThreadShowView extends DiscussionContentView
  highlight: (el) ->
    el.html(el.html().replace(/&lt;mark&gt;/g, "<mark>").replace(/&lt;\/mark&gt;/g, "</mark>"))
+class @DiscussionThreadInlineShowView extends DiscussionThreadShowView
+  renderTemplate: ->
+    @template = DiscussionUtil.getTemplate('_inline_thread_show')
+    params = @model.toJSON()
+    if not @model.get('anonymous')
+      params = $.extend(params, user:{username: @model.username, user_url: @model.user_url})
+    Mustache.render(@template, params)
--- a/lms/static/coffee/src/discussion/views/discussion_thread_view.coffee
+++ b/lms/static/coffee/src/discussion/views/discussion_thread_view.coffee
@@ -12,9 +12,12 @@ if Backbone?
      super()
      @createShowView()
-    render: ->
+    renderTemplate: ->
      @template = _.template($("#thread-template").html())
-      @$el.html(@template(@model.toJSON()))
+      @template(@model.toJSON())
+    render: ->
+      @$el.html(@renderTemplate())
      @$el.find(".loading").hide()
      @delegateEvents()
@@ -39,13 +42,12 @@ if Backbone?
    tagSelected: (e) ->
      @trigger "tag:selected", $(e.target).html()
+    renderResponses: ->
-    renderResponses: ->      
      setTimeout(=>
        @$el.find(".loading").show()
      , 200)
      @responsesRequest = DiscussionUtil.safeAjax
-        url: "/courses/#{$$course_id}/discussion/forum/#{@model.get('commentable_id')}/threads/#{@model.id}"
+        url: DiscussionUtil.urlFor('retrieve_single_thread', @model.get('commentable_id'), @model.id)
        success: (data, textStatus, xhr) =>
          @responsesRequest = null
          @$el.find(".loading").remove()
@@ -144,10 +146,13 @@ if Backbone?
      @editView.bind "thread:update", @update
      @editView.bind "thread:cancel_edit", @cancelEdit
+    renderSubView: (view) ->
+      view.setElement(@$('.thread-content-wrapper'))
+      view.render()
+      view.delegateEvents()
    renderEditView: () ->
-      @editView.setElement(@$('.thread-content-wrapper'))
+      @renderSubView(@editView)
-      @editView.render()
-      @editView.delegateEvents()
    createShowView: () ->
@@ -161,9 +166,7 @@ if Backbone?
      @showView.bind "thread:edit", @edit
    renderShowView: () ->
-      @showView.setElement(@$('.thread-content-wrapper'))
+      @renderSubView(@showView)
-      @showView.render()
-      @showView.delegateEvents()
    cancelEdit: (event) =>
      @createShowView()

--- a/lms/static/coffee/src/discussion/views/discussion_thread_view_inline.coffee
+++ b/lms/static/coffee/src/discussion/views/discussion_thread_view_inline.coffee
+if Backbone?
+  class @DiscussionThreadInlineView extends DiscussionThreadView
+    expanded = false
+    events:
+      "click .discussion-submit-post": "submitComment"
+      "click .expand-post": "expandPost"
+      "click .collapse-post": "collapsePost"
+    initLocal: ->
+      @$local = @$el.children(".discussion-article").children(".local")
+      if not @$local.length
+        @$local = @$el
+      @$delegateElement = @$local
+    render: ->
+      @template = DiscussionUtil.getTemplate("_inline_thread")
+      if not @model.has('abbreviatedBody')
+        @abbreviateBody()
+      params = @model.toJSON()
+      @$el.html(Mustache.render(@template, params))
+      #@createShowView()
+      @initLocal()
+      @delegateEvents()
+      @renderShowView()
+      @renderAttrs()
+      #@renderTags()  #TODO: Decide if we want tags on inline threads
+      @$("span.timeago").timeago()
+      @$el.find('.post-extended-content').hide()
+      if @expanded
+        @makeWmdEditor "reply-body"
+        @renderResponses()
+      @
+    createShowView: () ->
+      @showView = new DiscussionThreadInlineShowView(model: @model)
+      @showView.bind "thread:delete", @delete
+      @showView.bind "thread:edit", @edit
+    renderResponses: ->
+      #TODO: threadview
+      DiscussionUtil.safeAjax
+        url: "/courses/#{$$course_id}/discussion/forum/#{@model.get('commentable_id')}/threads/#{@model.id}"
+        $loading: @$el
+        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"
+          @$('.loading').remove()
+    edit: ->
+    toggleClosed: (event) ->
+      #TODO: showview
+      $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) ->
+      #TODO: showview
+      $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)
+    abbreviateBody: ->
+      abbreviated = DiscussionUtil.abbreviateString @model.get('body'), 140
+      @model.set('abbreviatedBody', abbreviated)
+    expandPost: (event) ->
+      @expanded = true
+      @$el.addClass('expanded')
+      @$el.find('.post-body').html(@model.get('body'))
+      @showView.convertMath()
+      @$el.find('.expand-post').css('display', 'none')
+      @$el.find('.collapse-post').css('display', 'block')
+      @$el.find('.post-extended-content').show()
+      @makeWmdEditor "reply-body"
+      if @$el.find('.loading').length
+        @renderResponses()
+    collapsePost: (event) ->
+      @expanded = false
+      @$el.removeClass('expanded')
+      @$el.find('.post-body').html(@model.get('abbreviatedBody'))
+      @showView.convertMath()
+      @$el.find('.collapse-post').css('display', 'none')
+      @$el.find('.post-extended-content').hide()
+      @$el.find('.expand-post').css('display', 'block')
--- a/lms/templates/discussion/mustache/_inline_thread.mustache
+++ b/lms/templates/discussion/mustache/_inline_thread.mustache
 <article class="discussion-article" data-id="{{id}}">
-    <div class="local"><a href="javascript:void(0)" class="dogear action-follow"></a></div>
-    <div class="discussion-post local">
-        <header>
-            <a href="#" class="vote-btn discussion-vote discussion-vote-up" data-role="discussion-vote"><span class="plus-icon">+</span> <span class='votes-count-number'>{{votes.up_count}}</span></a>
-            <h3>{{title}}</h3>
-            <p class="posted-details">
-                {{#user}}
-                <a href="{{user_url}}" class="username">{{username}}</a>
-                {{/user}}
-                {{^user}}
-                anonymous
-                {{/user}}
-                <span class="timeago" title="{{created_at}}">{{created_at}}</span>
+    <div class="thread-content-wrapper"></div>
-                <span class="post-status-closed top-post-status" style="display: none">
-                    &bull; This thread is closed.
-                </span>
-            </p>
-        </header>
-        <div class="post-body">{{abbreviatedBody}}</div>
-        <ul class="moderator-actions post-extended-content">
-            <li style="display: none"><a class="action-edit" href="javascript:void(0)"><span class="edit-icon"></span> Edit</a></li>
-            <li style="display: none"><a class="action-delete" href="javascript:void(0)"><span class="delete-icon"></span> Delete</a></li>
-            <li style="display: none"><a class="action-openclose" href="javascript:void(0)"><span class="edit-icon"></span> Close</a></li>
-        </ul>
-    </div>
    <ol class="responses post-extended-content">
        <li class="loading"><div class="loading-animation"></div></li>
    </ol>

--- a/lms/templates/discussion/mustache/_inline_thread_show.mustache
+++ b/lms/templates/discussion/mustache/_inline_thread_show.mustache
+<div class="discussion-post local">
+    <div><a href="javascript:void(0)" class="dogear action-follow"></a></div>
+    <header>
+        <a href="#" class="vote-btn discussion-vote discussion-vote-up" data-role="discussion-vote"><span class="plus-icon">+</span> <span class='votes-count-number'>{{votes.up_count}}</span></a>
+        <h3>{{title}}</h3>
+        <p class="posted-details">
+            {{#user}}
+            <a href="{{user_url}}" class="username">{{username}}</a>
+            {{/user}}
+            {{^user}}
+            anonymous
+            {{/user}}
+            <span class="timeago" title="{{created_at}}">{{created_at}}</span>
+                <span class="post-status-closed top-post-status" style="display: none">
+                    &bull; This thread is closed.
+                </span>
+        </p>
+    </header>
+    <div class="post-body">{{abbreviatedBody}}</div>
+    <ul class="moderator-actions post-extended-content">
+        <li style="display: none"><a class="action-edit" href="javascript:void(0)"><span class="edit-icon"></span> Edit</a></li>
+        <li style="display: none"><a class="action-delete" href="javascript:void(0)"><span class="delete-icon"></span> Delete</a></li>
+        <li style="display: none"><a class="action-openclose" href="javascript:void(0)"><span class="edit-icon"></span> Close</a></li>
+    </ul>
+</div>