forked from kmayo-ss/externallinks
-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #38 from creative-commoners/pulls/2.0/ux-improvement
NEW Add loading animation to Create Report button, fix bug in CurlLinkChecker
- Loading branch information
Showing
7 changed files
with
158 additions
and
92 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| .external-links-report__create-report, | ||
| .external-links-report__report-progress { | ||
| margin-top: 20px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,135 @@ | ||
| (function($) { | ||
| $.entwine('ss', function($) { | ||
| $('#externalLinksReport').entwine({ | ||
| PollTimeout: null, | ||
| onclick: function() { | ||
| this.start(); | ||
| }, | ||
| onmatch: function() { | ||
| // poll the current job and update the front end status | ||
| $('#externalLinksReport').hide(); | ||
| this.poll(); | ||
| }, | ||
| start: function() { | ||
| // initiate a new job | ||
| $('#ReportHolder').empty(); | ||
| $('#ReportHolder').text('Running report 0%'); | ||
| $('#ReportHolder').append('<span class="ss-ui-loading-icon"></span>'); | ||
| $('#externalLinksReport').hide(); | ||
| $.ajax({url: "admin/externallinks/start", async: false, timeout: 3000 }); | ||
| this.poll(); | ||
| }, | ||
| poll: function() { | ||
| var self = this; | ||
|
|
||
| $.ajax({ | ||
| url: "admin/externallinks/getJobStatus", | ||
| async: true, | ||
| success: function(data) { | ||
| // No report, so let user create one | ||
| if (!data) { | ||
| $('#externalLinksReport').show(); | ||
| return; | ||
| } | ||
|
|
||
| // Parse data | ||
| var completed = data.Completed ? data.Completed : 0; | ||
| var total = data.Total ? data.Total : 0; | ||
|
|
||
| // If complete status | ||
| if (data.Status === 'Completed') { | ||
| $('#ReportHolder').text('Report Finished ' + completed + '/' + total); | ||
| $('#externalLinksReport').show(); | ||
| return; | ||
| } | ||
|
|
||
| // If incomplete update status | ||
| if (completed < total) { | ||
| var percent = (completed / total) * 100; | ||
| $('#ReportHolder') | ||
| .text('Running report ' + completed + '/' + total + ' (' + percent.toFixed(2) + '%)') | ||
| .append('<span class="ss-ui-loading-icon"></span>'); | ||
| } | ||
|
|
||
| // Ensure the regular poll method is run | ||
| // kill any existing timeout | ||
| if(self.getPollTimeout() !== null) { | ||
| clearTimeout(self.getPollTimeout()); | ||
| } | ||
|
|
||
| self.setPollTimeout(setTimeout(function() { $('#externalLinksReport').poll(); }, 1000)); | ||
| }, | ||
| error: function(e) { | ||
| if(typeof console !== 'undefined') console.log(e); | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
| }); | ||
| $.entwine('ss', function($) { | ||
| $('.external-links-report__create-report').entwine({ | ||
| PollTimeout: null, | ||
| ButtonIsLoading: false, | ||
|
|
||
| onclick: function(e) { | ||
| e.preventDefault(); | ||
|
|
||
| this.buttonLoading(); | ||
| this.start(); | ||
| }, | ||
|
|
||
| onmatch: function() { | ||
| // poll the current job and update the front end status | ||
| this.poll(); | ||
| }, | ||
|
|
||
| start: function() { | ||
| // initiate a new job | ||
| $('.external-links-report__report-progress') | ||
| .empty() | ||
| .text('Running report 0%'); | ||
|
|
||
| $.ajax({ | ||
| url: "admin/externallinks/start", | ||
| async: true, | ||
| timeout: 3000 | ||
| }); | ||
|
|
||
| this.poll(); | ||
| }, | ||
|
|
||
| /** | ||
| * Get the "create report" button selector | ||
| * | ||
| * @return {Object} | ||
| */ | ||
| getButton: function() { | ||
| return $('.external-links-report__create-report'); | ||
| }, | ||
|
|
||
| /** | ||
| * Sets the button into a loading state. See LeftAndMain.js. | ||
| */ | ||
| buttonLoading: function() { | ||
| if (this.getButtonIsLoading()) { | ||
| return; | ||
| } | ||
| this.setButtonIsLoading(true); | ||
|
|
||
| var $button = this.getButton(); | ||
|
|
||
| // set button to "submitting" state | ||
| $button.addClass('btn--loading loading'); | ||
|
|
||
| if ($button.is('button')) { | ||
| $button.append($( | ||
| '<div class="btn__loading-icon">'+ | ||
| '<span class="btn__circle btn__circle--1" />'+ | ||
| '<span class="btn__circle btn__circle--2" />'+ | ||
| '<span class="btn__circle btn__circle--3" />'+ | ||
| '</div>')); | ||
|
|
||
| $button.css($button.outerWidth() + 'px'); | ||
| } | ||
| }, | ||
|
|
||
| /** | ||
| * Reset the button back to its original state after loading. See LeftAndMain.js. | ||
| */ | ||
| buttonReset: function() { | ||
| this.setButtonIsLoading(false); | ||
|
|
||
| var $button = this.getButton(); | ||
|
|
||
| $button.removeClass('btn--loading loading'); | ||
| $button.find('.btn__loading-icon').remove(); | ||
| $button.css('width', 'auto'); | ||
| }, | ||
|
|
||
| poll: function() { | ||
| var self = this; | ||
| this.buttonLoading(); | ||
|
|
||
| $.ajax({ | ||
| url: "admin/externallinks/getJobStatus", | ||
| async: true, | ||
| success: function(data) { | ||
| // No report, so let user create one | ||
| if (!data) { | ||
| this.buttonReset(); | ||
| return; | ||
| } | ||
|
|
||
| // Parse data | ||
| var completed = data.Completed ? data.Completed : 0; | ||
| var total = data.Total ? data.Total : 0; | ||
|
|
||
| // If complete status | ||
| if (data.Status === 'Completed') { | ||
| $('.external-links-report__report-progress') | ||
| .text('Report finished ' + completed + '/' + total); | ||
|
|
||
| self.buttonReset(); | ||
| return; | ||
| } | ||
|
|
||
| // If incomplete update status | ||
| if (completed < total) { | ||
| var percent = (completed / total) * 100; | ||
| $('.external-links-report__report-progress') | ||
| .text('Running report ' + completed + '/' + total + ' (' + percent.toFixed(2) + '%)'); | ||
| } | ||
|
|
||
| // Ensure the regular poll method is run | ||
| // kill any existing timeout | ||
| if (self.getPollTimeout() !== null) { | ||
| clearTimeout(self.getPollTimeout()); | ||
| } | ||
|
|
||
| self.setPollTimeout(setTimeout(function() { | ||
| $('.external-links-report__create-report').poll(); | ||
| }, 1000)); | ||
| }, | ||
| error: function(e) { | ||
| if (typeof console !== 'undefined') { | ||
| console.log(e); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
| }); | ||
| }(jQuery)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters