DEV: Remove buffered rendering from backup upload progress
This is another refactoring in the multi-step process to remove all uses
of our custom Render Buffer.
Previous commit: 54e4559aea in this
series.
This commit affects the display of the backup upload progress bar. It is
just a refactor and does not change any functionality.
This commit is contained in:
Blake Erickson
parent
d0e191a9d5
commit
da66950cf5
|
|
@ -2,7 +2,6 @@ import { schedule } from "@ember/runloop";
|
|||
import { later } from "@ember/runloop";
|
||||
import Component from "@ember/component";
|
||||
import { iconHTML } from "discourse-common/lib/icon-library";
|
||||
import { bufferedRender } from "discourse-common/lib/buffered-render";
|
||||
import {
|
||||
default as discourseComputed,
|
||||
on
|
||||
|
|
@ -20,112 +19,124 @@ import {
|
|||
uploadText="UPLOAD"
|
||||
}}
|
||||
**/
|
||||
export default Component.extend(
|
||||
bufferedRender({
|
||||
tagName: "button",
|
||||
classNames: ["btn", "ru"],
|
||||
classNameBindings: ["isUploading"],
|
||||
attributeBindings: ["translatedTitle:title"],
|
||||
resumable: null,
|
||||
isUploading: false,
|
||||
progress: 0,
|
||||
rerenderTriggers: ["isUploading", "progress"],
|
||||
export default Component.extend({
|
||||
tagName: "button",
|
||||
classNames: ["btn", "ru"],
|
||||
classNameBindings: ["isUploading"],
|
||||
attributeBindings: ["translatedTitle:title"],
|
||||
resumable: null,
|
||||
isUploading: false,
|
||||
progress: 0,
|
||||
rerenderTriggers: ["isUploading", "progress"],
|
||||
uploadingIcon: null,
|
||||
progressBar: null,
|
||||
|
||||
@on("init")
|
||||
_initialize() {
|
||||
this.resumable = new Resumable({
|
||||
target: Discourse.getURL(this.target),
|
||||
maxFiles: 1, // only 1 file at a time
|
||||
headers: {
|
||||
"X-CSRF-Token": document.querySelector("meta[name='csrf-token']")
|
||||
.content
|
||||
}
|
||||
});
|
||||
|
||||
this.resumable.on("fileAdded", () => {
|
||||
// automatically upload the selected file
|
||||
this.resumable.upload();
|
||||
|
||||
// mark as uploading
|
||||
later(() => this.set("isUploading", true));
|
||||
});
|
||||
|
||||
this.resumable.on("fileProgress", file => {
|
||||
// update progress
|
||||
later(() => this.set("progress", parseInt(file.progress() * 100, 10)));
|
||||
});
|
||||
|
||||
this.resumable.on("fileSuccess", file => {
|
||||
later(() => {
|
||||
// mark as not uploading anymore
|
||||
this._reset();
|
||||
|
||||
// fire an event to allow the parent route to reload its model
|
||||
this.success(file.fileName);
|
||||
});
|
||||
});
|
||||
|
||||
this.resumable.on("fileError", (file, message) => {
|
||||
later(() => {
|
||||
// mark as not uploading anymore
|
||||
this._reset();
|
||||
|
||||
// fire an event to allow the parent route to display the error message
|
||||
this.error(file.fileName, message);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
@on("didInsertElement")
|
||||
_assignBrowse() {
|
||||
schedule("afterRender", () =>
|
||||
this.resumable.assignBrowse($(this.element))
|
||||
);
|
||||
},
|
||||
|
||||
@on("willDestroyElement")
|
||||
_teardown() {
|
||||
if (this.resumable) {
|
||||
this.resumable.cancel();
|
||||
this.resumable = null;
|
||||
@on("init")
|
||||
_initialize() {
|
||||
this.resumable = new Resumable({
|
||||
target: Discourse.getURL(this.target),
|
||||
maxFiles: 1, // only 1 file at a time
|
||||
headers: {
|
||||
"X-CSRF-Token": document.querySelector("meta[name='csrf-token']")
|
||||
.content
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@discourseComputed("title", "text")
|
||||
translatedTitle(title, text) {
|
||||
return title ? I18n.t(title) : text;
|
||||
},
|
||||
this.resumable.on("fileAdded", () => {
|
||||
// automatically upload the selected file
|
||||
this.resumable.upload();
|
||||
|
||||
@discourseComputed("isUploading", "progress")
|
||||
text(isUploading, progress) {
|
||||
if (isUploading) {
|
||||
return progress + " %";
|
||||
} else {
|
||||
return this.uploadText;
|
||||
}
|
||||
},
|
||||
// mark as uploading
|
||||
later(() => {
|
||||
this.set("isUploading", true);
|
||||
this._updateIcon();
|
||||
});
|
||||
});
|
||||
|
||||
buildBuffer(buffer) {
|
||||
const icon = this.isUploading ? "times" : "upload";
|
||||
buffer.push(iconHTML(icon));
|
||||
buffer.push("<span class='ru-label'>" + this.text + "</span>");
|
||||
buffer.push(
|
||||
"<span class='ru-progress' style='width:" + this.progress + "%'></span>"
|
||||
);
|
||||
},
|
||||
this.resumable.on("fileProgress", file => {
|
||||
// update progress
|
||||
later(() => {
|
||||
this.set("progress", parseInt(file.progress() * 100, 10));
|
||||
this._updateProgressBar();
|
||||
});
|
||||
});
|
||||
|
||||
click() {
|
||||
if (this.isUploading) {
|
||||
this.resumable.cancel();
|
||||
later(() => this._reset());
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
this.resumable.on("fileSuccess", file => {
|
||||
later(() => {
|
||||
// mark as not uploading anymore
|
||||
this._reset();
|
||||
|
||||
_reset() {
|
||||
this.setProperties({ isUploading: false, progress: 0 });
|
||||
// fire an event to allow the parent route to reload its model
|
||||
this.success(file.fileName);
|
||||
});
|
||||
});
|
||||
|
||||
this.resumable.on("fileError", (file, message) => {
|
||||
later(() => {
|
||||
// mark as not uploading anymore
|
||||
this._reset();
|
||||
|
||||
// fire an event to allow the parent route to display the error message
|
||||
this.error(file.fileName, message);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
@on("didInsertElement")
|
||||
_assignBrowse() {
|
||||
schedule("afterRender", () => this.resumable.assignBrowse($(this.element)));
|
||||
},
|
||||
|
||||
@on("willDestroyElement")
|
||||
_teardown() {
|
||||
if (this.resumable) {
|
||||
this.resumable.cancel();
|
||||
this.resumable = null;
|
||||
}
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
@discourseComputed("title", "text")
|
||||
translatedTitle(title, text) {
|
||||
return title ? I18n.t(title) : text;
|
||||
},
|
||||
|
||||
@discourseComputed("isUploading", "progress")
|
||||
text(isUploading, progress) {
|
||||
if (isUploading) {
|
||||
return progress + " %";
|
||||
} else {
|
||||
return this.uploadText;
|
||||
}
|
||||
},
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
this._updateIcon();
|
||||
},
|
||||
|
||||
click() {
|
||||
if (this.isUploading) {
|
||||
this.resumable.cancel();
|
||||
later(() => this._reset());
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
_updateIcon() {
|
||||
const icon = this.isUploading ? "times" : "upload";
|
||||
this.set("uploadingIcon", `${iconHTML(icon)}`.htmlSafe());
|
||||
},
|
||||
|
||||
_updateProgressBar() {
|
||||
const pb = `${"width:" + this.progress + "%"}`.htmlSafe();
|
||||
this.set("progressBar", pb);
|
||||
},
|
||||
|
||||
_reset() {
|
||||
this.setProperties({ isUploading: false, progress: 0 });
|
||||
this._updateIcon();
|
||||
this._updateProgressBar();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
{{uploadingIcon}}
|
||||
<span class='ru-label'>{{text}}</span>
|
||||
<span class='ru-progress' style={{progressBar}}></span>
|
||||
Loading…
Reference in New Issue