Fix comments on collapsed and expanded diffs

We can't save the HTML as it was on page load, because comments etc. add
content that we would lose if we kept the initial HTML. Instead, shuffle
elements around.

1 files changed, 23 insertions, 26 deletions

diff --git a/app/assets/javascripts/single_diff.js.coffee b/app/assets/javascripts/single_diff.js.coffee
index 76db716317b..884d5d43d03 100644
--- a/app/assets/javascripts/single_diff.js.coffee
+++ b/app/assets/javascripts/single_diff.js.coffee
@@ -1,5 +1,6 @@
 class @SingleDiff
 
+  WRAPPER = '<div class="diff-content diff-wrap-lines"></div>'
   LOADING_HTML = '<i class="fa fa-spinner fa-spin"></i>'
   ERROR_HTML = '<div class="nothing-here-block"><i class="fa fa-warning"></i> Could not load diff</div>'
   COLLAPSED_HTML = '<div class="nothing-here-block diff-collapsed">This diff is collapsed. Click to expand it.</div>'
@@ -7,51 +8,47 @@ class @SingleDiff
   constructor: (@file) ->
     @content = $('.diff-content', @file)
     @diffForPath = @content.find('[data-diff-for-path]').data 'diff-for-path'
-    @setOpenState()
+    @isOpen = !@diffForPath
 
-    $('.file-title > a', @file).on 'click', @toggleDiff
-    @enableToggleOnContent()
-
-  setOpenState: ->
     if @diffForPath
-      @isOpen = false
+      @collapsedContent = @content
+      @loadingContent = $(WRAPPER).addClass('loading').html(LOADING_HTML).hide()
+      @content = null
+      @collapsedContent.after(@loadingContent)
     else
-      @isOpen = true
-      @contentHTML = @content.html()
-    return
+      @collapsedContent = $(WRAPPER).html(COLLAPSED_HTML).hide()
+      @content.after(@collapsedContent)
 
-  enableToggleOnContent: ->
-    @content.find('.nothing-here-block.diff-collapsed').on 'click', @toggleDiff
+    @collapsedContent.on 'click', @toggleDiff
+
+    $('.file-title > a', @file).on 'click', @toggleDiff
 
   toggleDiff: (e) =>
     e.preventDefault()
     @isOpen = !@isOpen
     if not @isOpen and not @hasError
-      @content.html COLLAPSED_HTML
-      @enableToggleOnContent
-      return
-    if @contentHTML
-      @setContentHTML()
+      @content.hide()
+      @collapsedContent.show()
+    else if @content
+      @collapsedContent.hide()
+      @content.show()
     else
       @getContentHTML()
-    return
 
   getContentHTML: ->
-    @content.html(LOADING_HTML).addClass 'loading'
+    @collapsedContent.hide()
+    @loadingContent.show()
     $.get @diffForPath, (data) =>
+      @loadingContent.hide()
       if data.html
-        @setContentHTML data.html
+        @content = $(data.html)
+        @content.syntaxHighlight()
       else
         @hasError = true
-        @content.html ERROR_HTML
-      @content.removeClass 'loading'
+        @content = $(ERROR_HTML)
+      @collapsedContent.after(@content)
     return
 
-  setContentHTML: (contentHTML) ->
-    @contentHTML = contentHTML if contentHTML
-    @content.html @contentHTML
-    @content.syntaxHighlight()
-
 $.fn.singleDiff = ->
   return @each ->
     if not $.data this, 'singleDiff'