From e99340dc4da5f3a86ae32a14ef318b0d8b8f20fd Mon Sep 17 00:00:00 2001 From: Tomasz Grobelny Date: Tue, 13 Nov 2018 18:30:32 +0100 Subject: [PATCH] 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 +++ .../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 diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index c16e734ac0..741a6517af 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 bcecdb697f..3ee5286a3d 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 e891d10bda..bc505e7603 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 0000000000..1d96c2374d --- /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 a2bdae5b3c..0d41c52797 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 0000000000..5d6a7e860f --- /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 75dc2bee26..8b20c84e00 100644 --- a/apps/files/templates/list.php +++ b/apps/files/templates/list.php @@ -1,12 +1,6 @@