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 = '
'
LOADING_HTML = ''
ERROR_HTML = ' Could not load diff
'
COLLAPSED_HTML = 'This diff is collapsed. Click to expand it.
'
@@ -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
+
+ if @diffForPath
+ @collapsedContent = @content
+ @loadingContent = $(WRAPPER).addClass('loading').html(LOADING_HTML).hide()
+ @content = null
+ @collapsedContent.after(@loadingContent)
+ else
+ @collapsedContent = $(WRAPPER).html(COLLAPSED_HTML).hide()
+ @content.after(@collapsedContent)
+
+ @collapsedContent.on 'click', @toggleDiff
$('.file-title > a', @file).on 'click', @toggleDiff
- @enableToggleOnContent()
-
- setOpenState: ->
- if @diffForPath
- @isOpen = false
- else
- @isOpen = true
- @contentHTML = @content.html()
- return
-
- enableToggleOnContent: ->
- @content.find('.nothing-here-block.diff-collapsed').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'