Extract MergeRequest tab behavior to its own JS class

2 files changed, 115 insertions, 88 deletions

diff --git a/app/assets/javascripts/merge_request.js.coffee b/app/assets/javascripts/merge_request.js.coffee
index 25a7815dba2..5c0bc686111 100644
--- a/app/assets/javascripts/merge_request.js.coffee
+++ b/app/assets/javascripts/merge_request.js.coffee
@@ -1,29 +1,25 @@
 #= require jquery.waitforimages
 #= require task_list
 
+#= require merge_request_tabs
+
 class @MergeRequest
   # Initialize MergeRequest behavior
   #
   # Options:
-  #   action         - String, current controller action
-  #   diffs_loaded   - Boolean, have diffs been pre-rendered server-side?
-  #                    (default: true if `action` is 'diffs', otherwise false)
-  #   commits_loaded - Boolean, have commits been pre-rendered server-side?
-  #                    (default: false)
+  #   action - String, current controller action
   #
   constructor: (@opts) ->
     @initContextWidget()
     this.$el = $('.merge-request')
 
-    @diffs_loaded = @opts.diffs_loaded or @opts.action == 'diffs'
-    @commits_loaded = @opts.commits_loaded or false
-
-    this.bindEvents()
-    this.activateTabFromPath()
-
     this.$('.show-all-commits').on 'click', =>
       this.showAllCommits()
 
+    # `MergeRequests#new` has no tab-persisting or lazy-loading behavior
+    unless @opts.action == 'new'
+      new MergeRequestTabs(@opts)
+
     # Prevent duplicate event bindings
     @disableTaskList()
 
@@ -52,83 +48,6 @@ class @MergeRequest
     $(".context .inline-update").on "change", "#merge_request_assignee_id", ->
       $(this).submit()
 
-
-  bindEvents: ->
-    this.$('.merge-request-tabs a[data-toggle="tab"]').on 'shown.bs.tab', (e) =>
-      $target = $(e.target)
-      tab_action = $target.data('action')
-
-      # Lazy-load diffs
-      if tab_action == 'diffs'
-        this.loadDiff() unless @diffs_loaded
-        $('.diff-header').trigger('sticky_kit:recalc')
-
-      # Skip tab-persisting behavior on MergeRequests#new
-      unless @opts.action == 'new'
-        @setCurrentAction(tab_action)
-
-  # Activate a tab based on the current URL path
-  #
-  # If the current action is 'show' or 'new' (i.e., initial page load),
-  # activates the first tab, otherwise activates the tab corresponding to the
-  # current action (diffs, commits).
-  activateTabFromPath: ->
-    if @opts.action == 'show' || @opts.action == 'new'
-      this.$('.merge-request-tabs a[data-toggle="tab"]:first').tab('show')
-    else
-      this.$(".merge-request-tabs a[data-action='#{@opts.action}']").tab('show')
-
-  # Replaces the current Merge Request-specific action in the URL with a new one
-  #
-  # If the action is "notes", the URL is reset to the standard
-  # `MergeRequests#show` route.
-  #
-  # Examples:
-  #
-  #   location.pathname # => "/namespace/project/merge_requests/1"
-  #   setCurrentAction('diffs')
-  #   location.pathname # => "/namespace/project/merge_requests/1/diffs"
-  #
-  #   location.pathname # => "/namespace/project/merge_requests/1/diffs"
-  #   setCurrentAction('notes')
-  #   location.pathname # => "/namespace/project/merge_requests/1"
-  #
-  #   location.pathname # => "/namespace/project/merge_requests/1/diffs"
-  #   setCurrentAction('commits')
-  #   location.pathname # => "/namespace/project/merge_requests/1/commits"
-  setCurrentAction: (action) ->
-    # Normalize action, just to be safe
-    action = 'notes' if action == 'show'
-
-    # Remove a trailing '/commits' or '/diffs'
-    new_state = location.pathname.replace(/\/(commits|diffs)\/?$/, '')
-
-    # Append the new action if we're on a tab other than 'notes'
-    unless action == 'notes'
-      new_state += "/#{action}"
-
-    # Ensure parameters and hash come along for the ride
-    new_state += location.search + location.hash
-
-    # Replace the current history state with the new one without breaking
-    # Turbolinks' history.
-    #
-    # See https://github.com/rails/turbolinks/issues/363
-    history.replaceState {turbolinks: true, url: new_state}, '', new_state
-
-  loadDiff: (event) ->
-    $.ajax
-      type: 'GET'
-      url: this.$('.merge-request-tabs .diffs-tab a').attr('href') + ".json"
-      beforeSend: =>
-        this.$('.mr-loading-status .loading').show()
-      complete: =>
-        @diffs_loaded = true
-        this.$('.mr-loading-status .loading').hide()
-      success: (data) =>
-        this.$(".diffs").html(data.html)
-      dataType: 'json'
-
   showAllCommits: ->
     this.$('.first-commits').remove()
     this.$('.all-commits').removeClass 'hide'
diff --git a/app/assets/javascripts/merge_request_tabs.js.coffee b/app/assets/javascripts/merge_request_tabs.js.coffee
new file mode 100644
index 00000000000..b5793d7cae5
--- /dev/null
+++ b/app/assets/javascripts/merge_request_tabs.js.coffee
@@ -0,0 +1,108 @@
+class @MergeRequestTabs
+  diffsLoaded: false
+  commitsLoaded: false
+
+  constructor: (@opts) ->
+    @bindEvents()
+    @activateTabFromPath()
+
+    switch @opts.action
+      when 'commits' then @commitsLoaded = true
+      when 'diffs'   then @diffsLoaded = true
+
+  bindEvents: ->
+    $(document).on 'shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', @tabShow
+
+  tabShow: (event) =>
+    $target = $(event.target)
+    action = $target.data('action')
+
+    # Lazy-load commits
+    if action == 'commits' and not @commitsLoaded
+      @loadCommits()
+
+    # Lazy-load diffs
+    if action == 'diffs' and not @diffsLoaded
+      @loadDiff()
+
+    @setCurrentAction(action)
+
+  # Activate a tab based on the current URL path
+  #
+  # If the current action is 'show' or 'new' (i.e., initial page load),
+  # activates the first tab, otherwise activates the tab corresponding to the
+  # current action (diffs, commits).
+  activateTabFromPath: ->
+    if @opts.action == 'show' || @opts.action == 'new'
+      $('.merge-request-tabs a[data-toggle="tab"]:first').tab('show')
+    else
+      $(".merge-request-tabs a[data-action='#{@opts.action}']").tab('show')
+
+  # Replaces the current Merge Request-specific action in the URL with a new one
+  #
+  # If the action is "notes", the URL is reset to the standard
+  # `MergeRequests#show` route.
+  #
+  # Examples:
+  #
+  #   location.pathname # => "/namespace/project/merge_requests/1"
+  #   setCurrentAction('diffs')
+  #   location.pathname # => "/namespace/project/merge_requests/1/diffs"
+  #
+  #   location.pathname # => "/namespace/project/merge_requests/1/diffs"
+  #   setCurrentAction('notes')
+  #   location.pathname # => "/namespace/project/merge_requests/1"
+  #
+  #   location.pathname # => "/namespace/project/merge_requests/1/diffs"
+  #   setCurrentAction('commits')
+  #   location.pathname # => "/namespace/project/merge_requests/1/commits"
+  setCurrentAction: (action) ->
+    # Normalize action, just to be safe
+    action = 'notes' if action == 'show'
+
+    # Remove a trailing '/commits' or '/diffs'
+    new_state = location.pathname.replace(/\/(commits|diffs)\/?$/, '')
+
+    # Append the new action if we're on a tab other than 'notes'
+    unless action == 'notes'
+      new_state += "/#{action}"
+
+    # Ensure parameters and hash come along for the ride
+    new_state += location.search + location.hash
+
+    # Replace the current history state with the new one without breaking
+    # Turbolinks' history.
+    #
+    # See https://github.com/rails/turbolinks/issues/363
+    history.replaceState {turbolinks: true, url: new_state}, document.title, new_state
+
+  loadCommits: ->
+    $.ajax
+      type: 'GET'
+      dataType: 'json'
+      url: $('.merge-request-tabs .commits-tab a').attr('href') + ".json"
+      beforeSend: @toggleLoading
+      complete: =>
+        @commits_loaded = true
+        @toggleLoading()
+      success: (data) =>
+        document.getElementById('commits').innerHTML = data.html
+
+        $('.js-timeago').timeago()
+
+  loadDiff: ->
+    $.ajax
+      type: 'GET'
+      dataType: 'json'
+      url: $('.merge-request-tabs .diffs-tab a').attr('href') + ".json"
+      beforeSend: => @toggleLoading()
+      complete: =>
+        @diffs_loaded = true
+        @toggleLoading()
+      success: (data) =>
+        document.getElementById('diffs').innerHTML = data.html
+
+        $('.diff-header').trigger('sticky_kit:recalc')
+
+  toggleLoading: ->
+    $('.mr-loading-status .loading').toggle()