diff options
Diffstat (limited to 'apps/files')
| -rw-r--r-- | apps/files/js/file-upload.js | 34 | ||||
| -rw-r--r-- | apps/files/js/filelist.js | 5 | ||||
| -rw-r--r-- | apps/files/js/merged-index.json | 1 | ||||
| -rw-r--r-- | apps/files/js/operationprogressbar.js | 73 | ||||
| -rw-r--r-- | apps/files/js/templates.js | 11 | ||||
| -rw-r--r-- | apps/files/js/templates/operationprogressbar.handlebars | 6 | ||||
| -rw-r--r-- | apps/files/templates/list.php | 6 |
7 files changed, 108 insertions, 28 deletions
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 @@ -429,6 +429,11 @@ OC.Uploader.prototype = _.extend({ fileList: null, /** + * @type OCA.Files.OperationProgressBar + */ + progressBar: null, + + /** * @type OC.Files.Client */ filesClient: null, @@ -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('<em class="label inner"><span class="desktop">' - + textDesktop - + '</span><span class="mobile">' - + textMobile - + '</span></em>'); - $('#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('<em class="label inner"><span class="desktop">' + + textDesktop + + '</span><span class="mobile">' + + textMobile + + '</span></em>'); + $('#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 <input type=\"submit\" value=\" \" class=\"icon-confirm\" />\n</form>\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 "<div id=\"uploadprogressbar\">\n <em class=\"label outer\" style=\"display:none\"><span class=\"desktop\">" + + 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))) + + "</span><span class=\"mobile\">" + + 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))) + + "</span></em>\n</div>\n<button class=\"stop icon-close\" style=\"display:none\">\n <span class=\"hidden-visually\">" + + alias4(((helper = (helper = helpers.textCancelButton || (depth0 != null ? depth0.textCancelButton : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"textCancelButton","hash":{},"data":data}) : helper))) + + "</span>\n</button>\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 @@ +<div id="uploadprogressbar"> + <em class="label outer" style="display:none"><span class="desktop">{{textDesktop}}</span><span class="mobile">{{textMobile}}</span></em> +</div> +<button class="stop icon-close" style="display:none"> + <span class="hidden-visually">{{textCancelButton}}</span> +</button> 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 @@ <div id="controls"> <div class="actions creatable hidden"> <div id="uploadprogresswrapper"> - <div id="uploadprogressbar"> - <em class="label outer" style="display:none"><span class="desktop"><?php p($l->t('Uploading …'));?></span><span class="mobile"><?php p($l->t('…'));?></span></em> - </div> - <button class="stop icon-close" style="display:none"> - <span class="hidden-visually"><?php p($l->t('Cancel upload')) ?></span> - </button> </div> </div> <div id="file_action_panel"></div> |