BigW Consortium Gitlab

merge_request_tabs.js.coffee 5.14 KB
Newer Older
1 2 3 4 5 6 7
# MergeRequestTabs
#
# Handles persisting and restoring the current tab selection and lazily-loading
# content on the MergeRequests#show page.
#
# ### Example Markup
#
8
#   <ul class="nav-links merge-request-tabs">
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
#     <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
class @MergeRequestTabs
  diffsLoaded: false
46
  buildsLoaded: false
47 48
  commitsLoaded: false

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

53 54 55
    @bindEvents()
    @activateTab(@opts.action)

56
  bindEvents: ->
57
    $(document).on 'shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', @tabShown
58 59 60 61 62 63
    $(document).on 'click', '.js-show-tab', @showTab

  showTab: (event) =>
    event.preventDefault()

    @activateTab $(event.target).data('action')
64

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

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

    @setCurrentAction(action)

78 79
  scrollToElement: (container) ->
    if window.location.hash
80
      $el = $("div#{container} #{window.location.hash}")
81
      $('body').scrollTo($el.offset().top) if $el.length
82

83 84 85 86
  # Activate a tab based on the current action
  activateTab: (action) ->
    action = 'notes' if action == 'show'
    $(".merge-request-tabs a[data-action='#{action}']").tab('show')
87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

  # 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"
106 107 108
  #
  # Returns the new URL String
  setCurrentAction: (action) =>
109 110 111 112
    # Normalize action, just to be safe
    action = 'notes' if action == 'show'

    # Remove a trailing '/commits' or '/diffs'
113
    new_state = @_location.pathname.replace(/\/(commits|diffs|builds)(\.html)?\/?$/, '')
114 115 116 117 118 119

    # 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
120
    new_state += @_location.search + @_location.hash
121 122 123 124 125 126 127

    # 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

128 129 130 131 132 133 134
    new_state

  loadCommits: (source) ->
    return if @commitsLoaded

    @_get
      url: "#{source}.json"
135
      success: (data) =>
136
        document.querySelector("div#commits").innerHTML = data.html
137
        $('.js-timeago').timeago()
138
        @commitsLoaded = true
139
        @scrollToElement("#commits")
140

141 142 143 144 145 146
  loadDiff: (source) ->
    return if @diffsLoaded

    @_get
      url: "#{source}.json" + @_location.search
      success: (data) =>
147
        document.querySelector("div#diffs").innerHTML = data.html
148
        $('div#diffs .js-syntax-highlight').syntaxHighlight()
149 150 151
        @diffsLoaded = true
        @scrollToElement("#diffs")

152 153 154 155 156 157
  loadBuilds: (source) ->
    return if @buildsLoaded

    @_get
      url: "#{source}.json"
      success: (data) =>
158
        document.querySelector("div#builds").innerHTML = data.html
159 160 161 162
        $('.js-timeago').timeago()
        @buildsLoaded = true
        @scrollToElement("#builds")

163 164 165 166 167
  # Show or hide the loading spinner
  #
  # status - Boolean, true to show, false to hide
  toggleLoading: (status) ->
    $('.mr-loading-status .loading').toggle(status)
168 169 170

  _get: (options) ->
    defaults = {
171 172
      beforeSend: => @toggleLoading(true)
      complete:   => @toggleLoading(false)
173 174 175 176 177 178 179
      dataType: 'json'
      type: 'GET'
    }

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

    $.ajax(options)