merge_request_tabs.js.coffee 4.4 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
# MergeRequestTabs
#
# Handles persisting and restoring the current tab selection and lazily-loading
# content on the MergeRequests#show page.
#
# ### Example Markup
#
#   <ul class="nav nav-tabs merge-request-tabs">
#     <li class="notes-tab active">
#       <a data-action="notes" data-target="#notes" data-toggle="tab" href="/foo/bar/merge_requests/1">
#         Discussion
#       </a>
#     </li>
#     <li class="commits-tab">
#       <a data-action="commits" data-target="#commits" data-toggle="tab" href="/foo/bar/merge_requests/1/commits">
#         Commits
#       </a>
#     </li>
#     <li class="diffs-tab">
#       <a data-action="diffs" data-target="#diffs" data-toggle="tab" href="/foo/bar/merge_requests/1/diffs">
#         Diffs
#       </a>
#     </li>
#   </ul>
#
#   <div class="tab-content">
#     <div class="notes tab-pane active" id="notes">
#       Notes Content
#     </div>
#     <div class="commits tab-pane" id="commits">
#       Commits Content
#     </div>
#     <div class="diffs tab-pane" id="diffs">
#       Diffs Content
#     </div>
#   </div>
#
#   <div class="mr-loading-status">
#     <div class="loading">
#       Loading Animation
#     </div>
#   </div>
#
44 45 46 47
class @MergeRequestTabs
  diffsLoaded: false
  commitsLoaded: false

48 49 50 51
  constructor: (@opts = {}) ->
    # Store the `location` object, allowing for easier stubbing in tests
    @_location = location

52
    switch @opts.action
53 54 55 56
      when 'commits'
        @commitsLoaded = true
      when 'diffs'
        @diffsLoaded = true
57

58 59 60
    @bindEvents()
    @activateTab(@opts.action)

61
  bindEvents: ->
62
    $(document).on 'shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', @tabShown
63

64
  tabShown: (event) =>
65 66 67
    $target = $(event.target)
    action = $target.data('action')

68 69 70 71
    if action == 'commits'
      @loadCommits($target.attr('href'))
    else if action == 'diffs'
      @loadDiff($target.attr('href'))
72
      @stickyDiffHeaders()
73 74 75

    @setCurrentAction(action)

76 77 78 79
  # Activate a tab based on the current action
  activateTab: (action) ->
    action = 'notes' if action == 'show'
    $(".merge-request-tabs a[data-action='#{action}']").tab('show')
80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98

  # 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"
99 100 101
  #
  # Returns the new URL String
  setCurrentAction: (action) =>
102 103 104 105
    # Normalize action, just to be safe
    action = 'notes' if action == 'show'

    # Remove a trailing '/commits' or '/diffs'
106
    new_state = @_location.pathname.replace(/\/(commits|diffs)\/?$/, '')
107 108 109 110 111 112

    # 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
113
    new_state += @_location.search + @_location.hash
114 115 116 117 118 119 120

    # 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

121 122 123 124 125 126 127
    new_state

  loadCommits: (source) ->
    return if @commitsLoaded

    @_get
      url: "#{source}.json"
128 129 130
      success: (data) =>
        document.getElementById('commits').innerHTML = data.html
        $('.js-timeago').timeago()
131
        @commitsLoaded = true
132

133 134 135 136 137
  loadDiff: (source) ->
    return if @diffsLoaded

    @_get
      url: "#{source}.json"
138 139
      success: (data) =>
        document.getElementById('diffs').innerHTML = data.html
140
        @stickyDiffHeaders()
141
        @diffsLoaded = true
142 143 144

  toggleLoading: ->
    $('.mr-loading-status .loading').toggle()
145

146 147 148
  stickyDiffHeaders: ->
    $('.diff-header').trigger('sticky_kit:recalc')

149 150 151 152 153 154 155 156 157 158 159
  _get: (options) ->
    defaults = {
      beforeSend: @toggleLoading
      complete: @toggleLoading
      dataType: 'json'
      type: 'GET'
    }

    options = $.extend({}, defaults, options)

    $.ajax(options)