From 52d59a4e5108d2ffd6f2bc543ee9aef1a87a8f14 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 25 Apr 2017 15:25:20 +0100 Subject: Load milestone tabs asynchronously --- app/assets/javascripts/milestone.js | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) (limited to 'app/assets/javascripts/milestone.js') diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index 38c673e8907..1026f458733 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -81,9 +81,7 @@ }; function Milestone() { - var oldMouseStart; this.bindIssuesSorting(); - this.bindMergeRequestSorting(); this.bindTabsSwitching(); } @@ -100,13 +98,14 @@ }; Milestone.prototype.bindTabsSwitching = function() { - return $('a[data-toggle="tab"]').on('show.bs.tab', function(e) { - var currentTabClass, previousTabClass; - currentTabClass = $(e.target).data('show'); - previousTabClass = $(e.relatedTarget).data('show'); - $(previousTabClass).hide(); - $(currentTabClass).removeClass('hidden'); - return $(currentTabClass).show(); + return $('a[data-toggle="tab"]').on('show.bs.tab', (e) => { + const $target = $(e.target); + const endpoint = $target.data('endpoint'); + + if (endpoint && !$target.hasClass('is-loaded')) { + this.loadMergeRequests($target.attr('href'), endpoint) + .done(() => $target.addClass('is-loaded')); + } }); }; @@ -169,6 +168,18 @@ }); }; + Milestone.prototype.loadMergeRequests = function(elId, url) { + return $.ajax({ + url, + dataType: 'JSON', + }) + .fail(() => new Flash('Error loading merge requests')) + .done((data) => { + $(elId).html(data.html); + this.bindMergeRequestSorting(); + }); + }; + return Milestone; })(); }).call(window); -- cgit v1.2.1 From 79c7188a870bbbf4fba294a8d88530fcfe2403be Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 25 Apr 2017 16:06:17 +0100 Subject: Change the hash when changing tab This allows the tab to be loaded by default when the page loads & the hash is present --- app/assets/javascripts/milestone.js | 54 +++++++++++++++++++++++++------------ 1 file changed, 37 insertions(+), 17 deletions(-) (limited to 'app/assets/javascripts/milestone.js') diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index 1026f458733..cd6f94e1365 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -21,7 +21,7 @@ Milestone.sortIssues = function(data) { var sort_issues_url; - sort_issues_url = location.href + "/sort_issues"; + sort_issues_url = location.pathname + "/sort_issues"; return $.ajax({ type: "PUT", url: sort_issues_url, @@ -38,7 +38,7 @@ Milestone.sortMergeRequests = function(data) { var sort_mr_url; - sort_mr_url = location.href + "/sort_merge_requests"; + sort_mr_url = location.pathname + "/sort_merge_requests"; return $.ajax({ type: "PUT", url: sort_mr_url, @@ -83,6 +83,12 @@ function Milestone() { this.bindIssuesSorting(); this.bindTabsSwitching(); + + this.loadInitialTab(); + + // Load merge request tab if it is active + // merge request tab is active based on different conditions in the backend + this.loadTab($('.js-milestone-tabs .active a')); } Milestone.prototype.bindIssuesSorting = function() { @@ -100,12 +106,9 @@ Milestone.prototype.bindTabsSwitching = function() { return $('a[data-toggle="tab"]').on('show.bs.tab', (e) => { const $target = $(e.target); - const endpoint = $target.data('endpoint'); - if (endpoint && !$target.hasClass('is-loaded')) { - this.loadMergeRequests($target.attr('href'), endpoint) - .done(() => $target.addClass('is-loaded')); - } + location.hash = $target.attr('href'); + this.loadTab($target); }); }; @@ -168,16 +171,33 @@ }); }; - Milestone.prototype.loadMergeRequests = function(elId, url) { - return $.ajax({ - url, - dataType: 'JSON', - }) - .fail(() => new Flash('Error loading merge requests')) - .done((data) => { - $(elId).html(data.html); - this.bindMergeRequestSorting(); - }); + Milestone.prototype.loadInitialTab = function() { + const $target = $(`.js-milestone-tabs a[href="${location.hash}"]`); + + if ($target.length) { + $target.tab('show'); + } + }; + + Milestone.prototype.loadTab = function($target) { + const endpoint = $target.data('endpoint'); + const tabElId = $target.attr('href'); + + if (endpoint && !$target.hasClass('is-loaded')) { + $.ajax({ + url: endpoint, + dataType: 'JSON', + }) + .fail(() => new Flash('Error loading milestone tab')) + .done((data) => { + $(tabElId).html(data.html); + $target.addClass('is-loaded'); + + if (tabElId === '#tab-merge-requests') { + this.bindMergeRequestSorting(); + } + }); + } }; return Milestone; -- cgit v1.2.1 From 3c077fad8367264bed3b33fafa537d5c75c4c249 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 25 Apr 2017 17:45:11 +0100 Subject: Fixed tabs loading the ajax request twice --- app/assets/javascripts/milestone.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets/javascripts/milestone.js') diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index cd6f94e1365..cd2bd976160 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -84,11 +84,11 @@ this.bindIssuesSorting(); this.bindTabsSwitching(); - this.loadInitialTab(); - // Load merge request tab if it is active // merge request tab is active based on different conditions in the backend this.loadTab($('.js-milestone-tabs .active a')); + + this.loadInitialTab(); } Milestone.prototype.bindIssuesSorting = function() { -- cgit v1.2.1 From 471888d60e0d91f4ab75e5d773bd69dee85e6cea Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 28 Apr 2017 11:08:18 +0100 Subject: Moved sort endpoints into data attributes --- app/assets/javascripts/milestone.js | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) (limited to 'app/assets/javascripts/milestone.js') diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js index cd2bd976160..841b24a60a3 100644 --- a/app/assets/javascripts/milestone.js +++ b/app/assets/javascripts/milestone.js @@ -19,12 +19,10 @@ }); }; - Milestone.sortIssues = function(data) { - var sort_issues_url; - sort_issues_url = location.pathname + "/sort_issues"; + Milestone.sortIssues = function(url, data) { return $.ajax({ type: "PUT", - url: sort_issues_url, + url, data: data, success: function(_data) { return Milestone.successCallback(_data); @@ -36,12 +34,10 @@ }); }; - Milestone.sortMergeRequests = function(data) { - var sort_mr_url; - sort_mr_url = location.pathname + "/sort_merge_requests"; + Milestone.sortMergeRequests = function(url, data) { return $.ajax({ type: "PUT", - url: sort_mr_url, + url, data: data, success: function(_data) { return Milestone.successCallback(_data); @@ -81,6 +77,9 @@ }; function Milestone() { + this.issuesSortEndpoint = $('#tab-issues').data('sort-endpoint'); + this.mergeRequestsSortEndpoint = $('#tab-merge-requests').data('sort-endpoint'); + this.bindIssuesSorting(); this.bindTabsSwitching(); @@ -92,12 +91,16 @@ } Milestone.prototype.bindIssuesSorting = function() { + if (!this.issuesSortEndpoint) return; + $('#issues-list-unassigned, #issues-list-ongoing, #issues-list-closed').each(function (i, el) { this.createSortable(el, { group: 'issue-list', listEls: $('.issues-sortable-list'), fieldName: 'issue', - sortCallback: Milestone.sortIssues, + sortCallback: (data) => { + Milestone.sortIssues(this.issuesSortEndpoint, data); + }, updateCallback: Milestone.updateIssue, }); }.bind(this)); @@ -113,12 +116,16 @@ }; Milestone.prototype.bindMergeRequestSorting = function() { + if (!this.mergeRequestsSortEndpoint) return; + $("#merge_requests-list-unassigned, #merge_requests-list-ongoing, #merge_requests-list-closed").each(function (i, el) { this.createSortable(el, { group: 'merge-request-list', listEls: $(".merge_requests-sortable-list:not(#merge_requests-list-merged)"), fieldName: 'merge_request', - sortCallback: Milestone.sortMergeRequests, + sortCallback: (data) => { + Milestone.sortMergeRequests(this.mergeRequestsSortEndpoint, data); + }, updateCallback: Milestone.updateMergeRequest, }); }.bind(this)); -- cgit v1.2.1