Extract MergeRequest tab behavior to its own JS class
This commit is contained in:
Robert Speicher
parent
5c78d7fce8
commit
ce20400628
2 changed files with 115 additions and 88 deletions
|
|
@ -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'
|
||||
|
|
|
|||
108
app/assets/javascripts/merge_request_tabs.js.coffee
Normal file
108
app/assets/javascripts/merge_request_tabs.js.coffee
Normal file
|
|
@ -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()
|
||||
Loading…
Reference in a new issue