From 296e69fe045363286cacdf37feccfde70d4f2444 Mon Sep 17 00:00:00 2001 From: Tomasz Grobelny Date: Mon, 12 Nov 2018 22:18:45 +0100 Subject: Restructuring code in file-upload.js Signed-off-by: Tomasz Grobelny --- apps/files/js/file-upload.js | 64 +++++++++++++++++++++++++------------------- 1 file changed, 37 insertions(+), 27 deletions(-) (limited to 'apps/files/js/file-upload.js') diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index 8d18761acc8..c16e734ac0a 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -757,14 +757,6 @@ OC.Uploader.prototype = _.extend({ callbacks.onNoConflicts(selection); }, - _hideProgressBar: function() { - var self = this; - $('#uploadprogresswrapper .stop').fadeOut(); - $('#uploadprogressbar').fadeOut(function() { - self.$uploadEl.trigger(new $.Event('resized')); - }); - }, - _updateProgressBarOnUploadStop: function() { if (this._pendingUploadDoneCount === 0) { // All the uploads ended and there is no pending operation, so hide @@ -778,19 +770,49 @@ OC.Uploader.prototype = _.extend({ return; } - $('#uploadprogressbar .label .mobile').text(t('core', '…')); - $('#uploadprogressbar .label .desktop').text(t('core', 'Processing files …')); + this._setProgressBarText(t('core', 'Processing files …'), t('core', '…')); // Nothing is being uploaded at this point, and the pending operations // can not be cancelled, so the cancel button should be hidden. + this._hideCancelButton(); + }, + + _hideProgressBar: function() { + var self = this; + $('#uploadprogresswrapper .stop').fadeOut(); + $('#uploadprogressbar').fadeOut(function() { + self.$uploadEl.trigger(new $.Event('resized')); + }); + }, + + _hideCancelButton: function() { $('#uploadprogresswrapper .stop').fadeOut(); }, _showProgressBar: function() { + $('#uploadprogresswrapper .stop').show(); + $('#uploadprogresswrapper .label').show(); $('#uploadprogressbar').fadeIn(); this.$uploadEl.trigger(new $.Event('resized')); }, + _setProgressBarValue: function(value) { + $('#uploadprogressbar').progressbar({value: value}); + }, + + _setProgressBarText: function(textDesktop, textMobile, title) { + $('#uploadprogressbar .ui-progressbar-value'). + html('' + + textDesktop + + '' + + textMobile + + ''); + $('#uploadprogressbar').tooltip({placement: 'bottom'}); + if(title) { + $('#uploadprogressbar').attr('original-title', title); + } + }, + /** * Returns whether the given file is known to be a received shared file * @@ -1096,16 +1118,8 @@ OC.Uploader.prototype = _.extend({ // add progress handlers fileupload.on('fileuploadstart', function(e, data) { self.log('progress handle fileuploadstart', e, data); - $('#uploadprogresswrapper .stop').show(); - $('#uploadprogresswrapper .label').show(); - $('#uploadprogressbar').progressbar({value: 0}); - $('#uploadprogressbar .ui-progressbar-value'). - html('' - + t('files', 'Uploading …') - + '' - + t('files', '…') - + ''); - $('#uploadprogressbar').tooltip({placement: 'bottom'}); + self._setProgressBarText(t('files', 'Uploading …'), t('files', '…')); + self._setProgressBarValue(0); self._showProgressBar(); // initial remaining time variables lastUpdate = new Date().getTime(); @@ -1155,16 +1169,12 @@ OC.Uploader.prototype = _.extend({ // show "Uploading ..." for durations longer than 4 hours h = t('files', 'Uploading …'); } - $('#uploadprogressbar .label .mobile').text(h); - $('#uploadprogressbar .label .desktop').text(h); - $('#uploadprogressbar').attr('original-title', - t('files', '{loadedSize} of {totalSize} ({bitrate})' , { + self._setProgressBarText(h, h, t('files', '{loadedSize} of {totalSize} ({bitrate})' , { loadedSize: humanFileSize(data.loaded), totalSize: humanFileSize(data.total), bitrate: humanFileSize(data.bitrate / 8) + '/s' - }) - ); - $('#uploadprogressbar').progressbar('value', progress); + })); + self._setProgressBarValue(progress); self.trigger('progressall', e, data); }); fileupload.on('fileuploadstop', function(e, data) { -- cgit v1.2.3 From e99340dc4da5f3a86ae32a14ef318b0d8b8f20fd Mon Sep 17 00:00:00 2001 From: Tomasz Grobelny Date: Tue, 13 Nov 2018 18:30:32 +0100 Subject: Move progress bar to separate component Signed-off-by: Tomasz Grobelny --- apps/files/js/file-upload.js | 34 ++++------ apps/files/js/filelist.js | 5 ++ apps/files/js/merged-index.json | 1 + apps/files/js/operationprogressbar.js | 73 ++++++++++++++++++++++ apps/files/js/templates.js | 11 ++++ .../js/templates/operationprogressbar.handlebars | 6 ++ apps/files/templates/list.php | 6 -- 7 files changed, 108 insertions(+), 28 deletions(-) create mode 100644 apps/files/js/operationprogressbar.js create mode 100644 apps/files/js/templates/operationprogressbar.handlebars (limited to 'apps/files/js/file-upload.js') diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index c16e734ac0a..741a6517af9 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -428,6 +428,11 @@ OC.Uploader.prototype = _.extend({ */ fileList: null, + /** + * @type OCA.Files.OperationProgressBar + */ + progressBar: null, + /** * @type OC.Files.Client */ @@ -778,39 +783,23 @@ OC.Uploader.prototype = _.extend({ }, _hideProgressBar: function() { - var self = this; - $('#uploadprogresswrapper .stop').fadeOut(); - $('#uploadprogressbar').fadeOut(function() { - self.$uploadEl.trigger(new $.Event('resized')); - }); + this.progressBar.hideProgressBar(); }, _hideCancelButton: function() { - $('#uploadprogresswrapper .stop').fadeOut(); + this.progressBar.hideCancelButton(); }, _showProgressBar: function() { - $('#uploadprogresswrapper .stop').show(); - $('#uploadprogresswrapper .label').show(); - $('#uploadprogressbar').fadeIn(); - this.$uploadEl.trigger(new $.Event('resized')); + this.progressBar.showProgressBar(); }, _setProgressBarValue: function(value) { - $('#uploadprogressbar').progressbar({value: value}); + this.progressBar.setProgressBarValue(value); }, _setProgressBarText: function(textDesktop, textMobile, title) { - $('#uploadprogressbar .ui-progressbar-value'). - html('' - + textDesktop - + '' - + textMobile - + ''); - $('#uploadprogressbar').tooltip({placement: 'bottom'}); - if(title) { - $('#uploadprogressbar').attr('original-title', title); - } + this.progressBar.setProgressBarText(textDesktop, textMobile, title); }, /** @@ -846,6 +835,7 @@ OC.Uploader.prototype = _.extend({ options = options || {}; this.fileList = options.fileList; + this.progressBar = options.progressBar; this.filesClient = options.filesClient || OC.Files.getClient(); this.davClient = new OC.Files.Client({ host: this.filesClient.getHost(), @@ -859,7 +849,7 @@ OC.Uploader.prototype = _.extend({ this.$uploadEl = $uploadEl; if ($uploadEl.exists()) { - $('#uploadprogresswrapper .stop').on('click', function() { + this.progressBar.on('cancel', function() { self.cancelUploads(); }); diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index bcecdb697fe..3ee5286a3db 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -379,11 +379,16 @@ }); } + this._operationProgressBar = new OCA.Files.OperationProgressBar(); + this._operationProgressBar.render(); + this.$el.find('#uploadprogresswrapper').replaceWith(this._operationProgressBar.$el); + if (options.enableUpload) { // TODO: auto-create this element var $uploadEl = this.$el.find('#file_upload_start'); if ($uploadEl.exists()) { this._uploader = new OC.Uploader($uploadEl, { + progressBar: this._operationProgressBar, fileList: this, filesClient: this.filesClient, dropZone: $('#content'), diff --git a/apps/files/js/merged-index.json b/apps/files/js/merged-index.json index e891d10bdae..bc505e76034 100644 --- a/apps/files/js/merged-index.json +++ b/apps/files/js/merged-index.json @@ -22,6 +22,7 @@ "sidebarpreviewtext.js", "detailtabview.js", "mainfileinfodetailview.js", + "operationprogressbar.js", "detailsview.js", "fileactions.js", "fileactionsmenu.js", diff --git a/apps/files/js/operationprogressbar.js b/apps/files/js/operationprogressbar.js new file mode 100644 index 00000000000..1d96c2374d4 --- /dev/null +++ b/apps/files/js/operationprogressbar.js @@ -0,0 +1,73 @@ +/* + * Copyright (c) 2018 + * + * This file is licensed under the Affero General Public License version 3 + * or later. + * + * See the COPYING-README file. + * + */ + +(function() { + var OperationProgressBar = OC.Backbone.View.extend({ + tagName: 'div', + id: 'uploadprogresswrapper', + events: { + 'click button.stop': '_onClickCancel' + }, + + render: function() { + this.$el.html(OCA.Files.Templates['operationprogressbar']({ + textDesktop: t('Uploading …'), + textMobile: t('…'), + textCancelButton: t('Cancel operation') + })); + }, + + hideProgressBar: function() { + var self = this; + $('#uploadprogresswrapper .stop').fadeOut(); + $('#uploadprogressbar').fadeOut(function() { + self.$el.trigger(new $.Event('resized')); + }); + }, + + hideCancelButton: function() { + $('#uploadprogresswrapper .stop').fadeOut(function() { + this.$el.trigger(new $.Event('resized')); + }); + }, + + showProgressBar: function() { + $('#uploadprogresswrapper .stop').show(); + $('#uploadprogresswrapper .label').show(); + $('#uploadprogressbar').fadeIn(); + this.$el.trigger(new $.Event('resized')); + }, + + setProgressBarValue: function(value) { + $('#uploadprogressbar').progressbar({value: value}); + }, + + setProgressBarText: function(textDesktop, textMobile, title) { + $('#uploadprogressbar .ui-progressbar-value'). + html('' + + textDesktop + + '' + + textMobile + + ''); + $('#uploadprogressbar').tooltip({placement: 'bottom'}); + if(title) { + $('#uploadprogressbar').attr('original-title', title); + } + $('#uploadprogresswrapper .stop').show(); + }, + + _onClickCancel: function (event) { + this.trigger('cancel'); + return false; + } + }); + + OCA.Files.OperationProgressBar = OperationProgressBar; +})(OC, OCA); diff --git a/apps/files/js/templates.js b/apps/files/js/templates.js index a2bdae5b3c4..0d41c52797f 100644 --- a/apps/files/js/templates.js +++ b/apps/files/js/templates.js @@ -245,6 +245,17 @@ templates['newfilemenu_filename_form'] = template({"compiler":[7,">= 4.0.0"],"ma + alias4(((helper = (helper = helpers.fileName || (depth0 != null ? depth0.fileName : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"fileName","hash":{},"data":data}) : helper))) + "\" autocomplete=\"off\" autocapitalize=\"off\">\n \n\n"; },"useData":true}); +templates['operationprogressbar'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { + var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression; + + return "
\n " + + alias4(((helper = (helper = helpers.textDesktop || (depth0 != null ? depth0.textDesktop : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"textDesktop","hash":{},"data":data}) : helper))) + + "" + + alias4(((helper = (helper = helpers.textMobile || (depth0 != null ? depth0.textMobile : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"textMobile","hash":{},"data":data}) : helper))) + + "\n
\n\n"; +},"useData":true}); templates['template_addbutton'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression; diff --git a/apps/files/js/templates/operationprogressbar.handlebars b/apps/files/js/templates/operationprogressbar.handlebars new file mode 100644 index 00000000000..5d6a7e860f0 --- /dev/null +++ b/apps/files/js/templates/operationprogressbar.handlebars @@ -0,0 +1,6 @@ +
+ +
+ diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php index 75dc2bee26f..8b20c84e008 100644 --- a/apps/files/templates/list.php +++ b/apps/files/templates/list.php @@ -1,12 +1,6 @@
-- cgit v1.2.3