diff options
author | Robert Speicher <rspeicher@gmail.com> | 2015-06-17 23:11:57 +0300 |
---|---|---|
committer | Robert Speicher <rspeicher@gmail.com> | 2015-06-17 23:59:50 +0300 |
commit | ce20400628ca6583f132d3f370ed25dacaed0b17 (patch) | |
tree | 0cde0e5b1f6d97e7dd1d714d2554cb48e6d234f2 /app | |
parent | 5c78d7fce88457dd1ebdd53b832b15303715faa7 (diff) |
Extract MergeRequest tab behavior to its own JS class
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/merge_request.js.coffee | 95 | ||||
-rw-r--r-- | app/assets/javascripts/merge_request_tabs.js.coffee | 108 |
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() |