Move progress bar to separate component

Signed-off-by: Tomasz Grobelny <tomasz@grobelny.net>

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('<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();
 			});
 

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'),

apps/files/js/merged-index.json

@@ -22,6 +22,7 @@
   "sidebarpreviewtext.js",
   "detailtabview.js",
   "mainfileinfodetailview.js",
+  "operationprogressbar.js",
   "detailsview.js",
   "fileactions.js",
   "fileactionsmenu.js",

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);

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;
 

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>

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>