From 4add7f65bc925fac3f6380f896fb2eccd236b2f7 Mon Sep 17 00:00:00 2001
From: Sean McGivern <sean@gitlab.com>
Date: Wed, 6 Jul 2016 13:54:38 +0100
Subject: 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.
---
 app/assets/javascripts/single_diff.js.coffee | 49 +++++++++++++---------------
 1 file 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'
-- 
cgit v1.2.1