Expanding and collapsing threads on inline forums works, but it could use a…

Expanding and collapsing threads on inline forums works, but it could use a little styling. Also fixed responding to threads which I may have broken in the commit prior to this one.

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

@@ -153,11 +153,13 @@ class @DiscussionUtil
     editor
 
   @getWmdEditor: ($content, $local, cls_identifier) ->
-    id = $content.attr("_id")
+    elem = $local(".#{cls_identifier}")
+    id = elem.data("id")
     @wmdEditors["#{cls_identifier}-#{id}"]
 
   @getWmdInput: ($content, $local, cls_identifier) ->
-    id = $content.attr("_id")
+    elem = $local(".#{cls_identifier}")
+    id = elem.data("id")
     $local("#wmd-input-#{cls_identifier}-#{id}")
 
   @getWmdContent: ($content, $local, cls_identifier) ->
@@ -265,3 +267,13 @@ class @DiscussionUtil
   @markdownWithHighlight: (text) ->
     converter = Markdown.getMathCompatibleConverter()
     @unescapeHighlightTag @stripLatexHighlight converter.makeHtml text
+
+  @abbreviateString: (text, minLength) ->
+    # Abbreviates a string to at least minLength characters, stopping at word boundaries
+    if text.length<100
+      return text
+    else
+      while minLength < text.length && text[minLength] != ' '
+        minLength++
+      return text.substr(0, minLength) + '...'
+

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

@@ -72,6 +72,7 @@ class @DiscussionContentView extends Backbone.View
     @$delegateElement = @$local
 
   makeWmdEditor: (cls_identifier) =>
+    if not @$el.find(".wmd-panel").length
       DiscussionUtil.makeWmdEditor @$el, $.proxy(@$, @), cls_identifier
 
   getWmdEditor: (cls_identifier) =>

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

 class @DiscussionThreadInlineView extends DiscussionContentView
-
+  expanded = false
   events:
     "click .discussion-vote": "toggleVote"
     "click .action-follow": "toggleFollowing"
@@ -7,7 +7,8 @@ class @DiscussionThreadInlineView extends DiscussionContentView
     "click .action-edit": "edit"
     "click .action-delete": "delete"
     "click .action-openclose": "toggleClosed"
-    "click .show-reply": "toggleReply"
+    "click .expand-post": "expandPost"
+    "click .collapse-post": "collapsePost"
 
   template: -> DiscussionUtil.getTemplate("_inline_thread")
 
@@ -24,16 +25,19 @@ class @DiscussionThreadInlineView extends DiscussionContentView
     if not window.$disc
       window.$disc = []
     window.$disc.push(@)
-    @$el.html(Mustache.render(@template(), @model.toJSON()))
+    if not @model.has('abbreviatedBody')
+      @abbreviateBody()
+    @$el.html(Mustache.render(@template(), $.extend(@model.toJSON(),{expanded: @expanded}) ))
     @initLocal()
     @delegateEvents()
     @renderDogear()
     @renderVoted()
     @renderAttrs()
     @$("span.timeago").timeago()
-    @makeWmdEditor "reply-body"
     @convertMath()
-    # @renderResponses()
+    if @expanded
+      @makeWmdEditor "reply-body"
+      @renderResponses()
 #    @highlight @$(".post-body")
 #    @highlight @$("h1")
     @
@@ -190,9 +194,24 @@ class @DiscussionThreadInlineView extends DiscussionContentView
 
   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)
+
+  abbreviateBody: ->
+    abbreviated = DiscussionUtil.abbreviateString @model.get('body'), 140 # Because twitter
+    @model.set('abbreviatedBody', abbreviated)
+
+  expandPost: (event) ->
+    @expanded = true
+    @$el.find('.post-body').html(@model.get('body'))
+    @$el.find('.expand-post').hide()
+    @$el.find('.collapse-post').show()
+    @$el.find('.post-extended-content').show()
+    @makeWmdEditor "reply-body"
+    if @$el.find('.loading').length
+      @renderResponses()
+
+  collapsePost: (event) ->
+    @expanded = false
+    @$el.find('.post-body').html(@model.get('abbreviatedBody'))
+    @$el.find('.collapse-post').hide()
+    @$el.find('.post-extended-content').hide()
+    @$el.find('.expand-post').show()

lms/static/sass/_discussion.scss

@@ -1480,7 +1480,8 @@ body.discussion {
         border: 1px solid;
         border-radius: 3px;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-
+        min-height: 0;
+        padding: 1em;
         .discussion-post {
           header {
             padding-bottom: 0.1em;
@@ -1508,12 +1509,21 @@ body.discussion {
           }
 
         }
+        .discussion-reply-new {
+          .wmd-input {
+            height: 120px;
+          }
+        }
+        // Content that is hidden by default in the inline view
+        .post-extended-content{
+          display: none;
+        }
+        .collapse-post{
+          display:none;
+        }
       }
     }
   }
 
-  //.discussion-reply-new {
-  //  display:none;
-  //}
 
 }

lms/templates/discussion/mustache/_inline_thread.mustache

@@ -8,15 +8,19 @@
                 <span class="timeago" title="{{created_at}}">sometime</span> by
                 <a href="{{user_url}}">{{username}}</a>
             </p>
+            <div class="local post-tools">
+                <a href="javascript:void(0)" class="expand-post">Expand...</a>
+                <a href="javascript:void(0)" class="collapse-post">Collapse...</a>
+            </div>
         </header>
         <div class="post-body">
-            {{body}}
+            {{abbreviatedBody}}
         </div>
     </div>
-    <ol class="responses">
+    <ol class="responses post-extended-content">
         <li class="loading"><div class="loading-animation"></div></li>
     </ol>
-    <form class="local discussion-reply-new"  data-id="{{id}}">
+    <form class="local discussion-reply-new post-extended-content"  data-id="{{id}}">
         <h4>Post a response:</h4>
         <ul class="discussion-errors"></ul>
         <div class="reply-body" data-id="{{id}}"></div>
@@ -24,4 +28,5 @@
             <a class="discussion-submit-post control-button" href="#">Submit</a>
         </div>
     </form>
+
 </article>