Make class methods actual class methods instead of setting them in the constructor
This commit is contained in:
Max Berger
@@ -37,202 +37,208 @@ export class UploadCollectionScene {
|
||||
* @param {Collection} collection parent collection
|
||||
*/
|
||||
constructor(user, password, collection) {
|
||||
/** @type {HTMLElement} */ let html_scene = get_element_by_id("uploadcollectionscene");
|
||||
/** @type {HTMLElement} */ let template = get_element(html_scene, "[data-name=filetemplate]");
|
||||
/** @type {HTMLElement} */ let upload_btn = get_element(html_scene, "[data-name=submit]");
|
||||
/** @type {HTMLElement} */ let close_btn = get_element(html_scene, "[data-name=close]");
|
||||
/** @type {HTMLInputElement} */ let uploadfile_form = /** @type {HTMLInputElement} */ (get_element(html_scene, "[data-name=uploadfile]"));
|
||||
/** @type {HTMLElement} */ let uploadfile_lbl = get_element(html_scene, "label[for=uploadfile]");
|
||||
/** @type {HTMLInputElement} */ let href_form = /** @type {HTMLInputElement} */ (get_element(html_scene, "[data-name=href]"));
|
||||
/** @type {HTMLElement} */ let href_label = get_element(html_scene, "label[for=href]");
|
||||
/** @type {HTMLElement} */ let hreflimitmsg_html = get_element(html_scene, "[data-name=hreflimitmsg]");
|
||||
/** @type {HTMLElement} */ let pending_html = get_element(html_scene, "[data-name=pending]");
|
||||
/** @type {HTMLElement} */ let error_form = get_element(html_scene, ":scope > span[data-name=error]");
|
||||
this._user = user;
|
||||
this._password = password;
|
||||
this._collection = collection;
|
||||
|
||||
let files = uploadfile_form.files;
|
||||
href_form.addEventListener("input", onCleanHREFinput);
|
||||
upload_btn.onclick = upload_start;
|
||||
uploadfile_form.onchange = onfileschange;
|
||||
this._html_scene = get_element_by_id("uploadcollectionscene");
|
||||
this._template = get_element(this._html_scene, "[data-name=filetemplate]");
|
||||
this._upload_btn = get_element(this._html_scene, "[data-name=submit]");
|
||||
this._close_btn = get_element(this._html_scene, "[data-name=close]");
|
||||
this._uploadfile_form = /** @type {HTMLInputElement} */ (get_element(this._html_scene, "[data-name=uploadfile]"));
|
||||
this._uploadfile_lbl = get_element(this._html_scene, "label[for=uploadfile]");
|
||||
this._href_form = /** @type {HTMLInputElement} */ (get_element(this._html_scene, "[data-name=href]"));
|
||||
this._href_label = get_element(this._html_scene, "label[for=href]");
|
||||
this._hreflimitmsg_html = get_element(this._html_scene, "[data-name=hreflimitmsg]");
|
||||
this._pending_html = get_element(this._html_scene, "[data-name=pending]");
|
||||
this._error_form = get_element(this._html_scene, ":scope > span[data-name=error]");
|
||||
|
||||
href_form.value = "";
|
||||
let href = "";
|
||||
this._files = this._uploadfile_form.files;
|
||||
this._href_form.addEventListener("input", onCleanHREFinput);
|
||||
this._upload_btn.onclick = () => this._upload_start();
|
||||
this._uploadfile_form.onchange = () => this._onfileschange();
|
||||
|
||||
let errorHandler = new ErrorHandler(error_form);
|
||||
let validator = new FormValidator(errorHandler);
|
||||
this._href_form.value = "";
|
||||
this._href = "";
|
||||
|
||||
validator.addValidator(href_form, validate_href(href_form, "HREF"));
|
||||
validator.addValidator(uploadfile_form, validate_files(uploadfile_form, "file"));
|
||||
this._errorHandler = new ErrorHandler(this._error_form);
|
||||
this._validator = new FormValidator(this._errorHandler);
|
||||
|
||||
/** @type {?XMLHttpRequest} */ let upload_req = null;
|
||||
/** @type {Array<?string>} */ let results = [];
|
||||
/** @type {?Array<HTMLElement>} */ let nodes = null;
|
||||
this._validator.addValidator(this._href_form, validate_href(this._href_form, "HREF"));
|
||||
this._validator.addValidator(this._uploadfile_form, validate_files(this._uploadfile_form, "file"));
|
||||
|
||||
function upload_start() {
|
||||
try {
|
||||
if (!validator.validate()) {
|
||||
return false;
|
||||
}
|
||||
if (!files) {
|
||||
return false;
|
||||
}
|
||||
read_form();
|
||||
uploadfile_form.classList.add("hidden");
|
||||
uploadfile_lbl.classList.add("hidden");
|
||||
href_form.classList.add("hidden");
|
||||
href_label.classList.add("hidden");
|
||||
hreflimitmsg_html.classList.add("hidden");
|
||||
upload_btn.classList.add("hidden");
|
||||
close_btn.classList.add("hidden");
|
||||
/** @type {?XMLHttpRequest} */ this._upload_req = null;
|
||||
/** @type {Array<?string>} */ this._results = [];
|
||||
/** @type {?Array<HTMLElement>} */ this._nodes = null;
|
||||
}
|
||||
|
||||
pending_html.classList.remove("hidden");
|
||||
|
||||
nodes = [];
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
let file = files[i];
|
||||
let node = /** @type {HTMLElement} */ (template.cloneNode(true));
|
||||
node.classList.remove("hidden");
|
||||
let name_form = get_element(node, "[data-name=name]");
|
||||
name_form.textContent = file.name;
|
||||
node.classList.remove("hidden");
|
||||
nodes.push(node);
|
||||
updateFileStatus(i);
|
||||
if (template.parentNode) {
|
||||
template.parentNode.insertBefore(node, template);
|
||||
}
|
||||
}
|
||||
upload_next();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
_upload_start() {
|
||||
try {
|
||||
if (!this._validator.validate()) {
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
if (!this._files) {
|
||||
return false;
|
||||
}
|
||||
this._read_form();
|
||||
this._uploadfile_form.classList.add("hidden");
|
||||
this._uploadfile_lbl.classList.add("hidden");
|
||||
this._href_form.classList.add("hidden");
|
||||
this._href_label.classList.add("hidden");
|
||||
this._hreflimitmsg_html.classList.add("hidden");
|
||||
this._upload_btn.classList.add("hidden");
|
||||
this._close_btn.classList.add("hidden");
|
||||
|
||||
function upload_next() {
|
||||
if (!files) {
|
||||
this._pending_html.classList.remove("hidden");
|
||||
|
||||
this._nodes = [];
|
||||
for (let i = 0; i < this._files.length; i++) {
|
||||
let file = this._files[i];
|
||||
let node = /** @type {HTMLElement} */ (this._template.cloneNode(true));
|
||||
node.classList.remove("hidden");
|
||||
let name_form = get_element(node, "[data-name=name]");
|
||||
name_form.textContent = file.name;
|
||||
node.classList.remove("hidden");
|
||||
this._nodes.push(node);
|
||||
this._updateFileStatus(i);
|
||||
if (this._template.parentNode) {
|
||||
this._template.parentNode.insertBefore(node, this._template);
|
||||
}
|
||||
}
|
||||
this._upload_next();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
_upload_next() {
|
||||
if (!this._files) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (this._files.length === this._results.length) {
|
||||
this._pending_html.classList.add("hidden");
|
||||
this._close_btn.classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (files.length === results.length) {
|
||||
pending_html.classList.add("hidden");
|
||||
close_btn.classList.remove("hidden");
|
||||
return;
|
||||
} else {
|
||||
let file = files[results.length];
|
||||
if (files.length > 1 || href.length == 0) {
|
||||
href = random_uuid();
|
||||
}
|
||||
let upload_href = collection.href + href + "/";
|
||||
upload_req = upload_collection(user, password, upload_href, file, function (result) {
|
||||
upload_req = null;
|
||||
results.push(result);
|
||||
updateFileStatus(results.length - 1);
|
||||
upload_next();
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
function onclose() {
|
||||
try {
|
||||
if (results.length > 0) {
|
||||
collectionsCache.invalidate();
|
||||
}
|
||||
pop_scene();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} i
|
||||
*/
|
||||
function updateFileStatus(i) {
|
||||
if (nodes === null) {
|
||||
return;
|
||||
}
|
||||
/** @type {HTMLElement} */ let file_success_form = get_element(nodes[i], "[data-name=success]");
|
||||
/** @type {HTMLElement} */ let file_error_form = get_element(nodes[i], "[data-name=error]");
|
||||
if (results.length > i) {
|
||||
if (results[i]) {
|
||||
file_success_form.classList.add("hidden");
|
||||
file_error_form.textContent = "Error: " + results[i];
|
||||
error_form.classList.remove("hidden");
|
||||
} else {
|
||||
file_success_form.classList.remove("hidden");
|
||||
file_error_form.classList.add("hidden");
|
||||
}
|
||||
} else {
|
||||
let file = this._files[this._results.length];
|
||||
if (this._files.length > 1 || this._href.length == 0) {
|
||||
this._href = random_uuid();
|
||||
}
|
||||
let upload_href = this._collection.href + this._href + "/";
|
||||
this._upload_req = upload_collection(this._user, this._password, upload_href, file, (result) => {
|
||||
this._upload_req = null;
|
||||
this._results.push(result);
|
||||
this._updateFileStatus(this._results.length - 1);
|
||||
this._upload_next();
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
_onclose() {
|
||||
try {
|
||||
if (this._results.length > 0) {
|
||||
collectionsCache.invalidate();
|
||||
}
|
||||
pop_scene();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} i
|
||||
*/
|
||||
_updateFileStatus(i) {
|
||||
if (this._nodes === null) {
|
||||
return;
|
||||
}
|
||||
/** @type {HTMLElement} */ let file_success_form = get_element(this._nodes[i], "[data-name=success]");
|
||||
/** @type {HTMLElement} */ let file_error_form = get_element(this._nodes[i], "[data-name=error]");
|
||||
if (this._results.length > i) {
|
||||
if (this._results[i]) {
|
||||
file_success_form.classList.add("hidden");
|
||||
file_error_form.textContent = "Error: " + this._results[i];
|
||||
this._error_form.classList.remove("hidden");
|
||||
} else {
|
||||
file_success_form.classList.remove("hidden");
|
||||
file_error_form.classList.add("hidden");
|
||||
}
|
||||
} else {
|
||||
file_success_form.classList.add("hidden");
|
||||
file_error_form.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
function read_form() {
|
||||
cleanHREFinput(href_form);
|
||||
href = href_form.value.trim().toLowerCase();
|
||||
files = uploadfile_form.files;
|
||||
return true;
|
||||
}
|
||||
_read_form() {
|
||||
cleanHREFinput(this._href_form);
|
||||
this._href = this._href_form.value.trim().toLowerCase();
|
||||
this._files = this._uploadfile_form.files;
|
||||
return true;
|
||||
}
|
||||
|
||||
function onfileschange() {
|
||||
files = uploadfile_form.files;
|
||||
if (files && files.length > 1) {
|
||||
hreflimitmsg_html.classList.remove("hidden");
|
||||
href_form.classList.add("hidden");
|
||||
href_label.classList.add("hidden");
|
||||
href_form.value = random_uuid(); // fake HREF, will be replaced on upload
|
||||
_onfileschange() {
|
||||
this._files = this._uploadfile_form.files;
|
||||
if (this._files && this._files.length > 1) {
|
||||
this._hreflimitmsg_html.classList.remove("hidden");
|
||||
this._href_form.classList.add("hidden");
|
||||
this._href_label.classList.add("hidden");
|
||||
this._href_form.value = random_uuid(); // fake HREF, will be replaced on upload
|
||||
} else {
|
||||
this._hreflimitmsg_html.classList.add("hidden");
|
||||
this._href_form.classList.remove("hidden");
|
||||
this._href_label.classList.remove("hidden");
|
||||
if (this._files && this._files.length > 0) {
|
||||
this._href_form.value = this._files[0].name.replace(/\.(ics|vcf)$/, '');
|
||||
} else {
|
||||
hreflimitmsg_html.classList.add("hidden");
|
||||
href_form.classList.remove("hidden");
|
||||
href_label.classList.remove("hidden");
|
||||
if (files && files.length > 0) {
|
||||
href_form.value = files[0].name.replace(/\.(ics|vcf)$/, '');
|
||||
} else {
|
||||
href_form.value = "";
|
||||
}
|
||||
this._href_form.value = "";
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
this.show = function () {
|
||||
html_scene.classList.remove("hidden");
|
||||
close_btn.onclick = onclose;
|
||||
};
|
||||
show() {
|
||||
this._html_scene.classList.remove("hidden");
|
||||
this._close_btn.onclick = () => this._onclose();
|
||||
}
|
||||
|
||||
this.hide = function () {
|
||||
html_scene.classList.add("hidden");
|
||||
close_btn.classList.remove("hidden");
|
||||
upload_btn.classList.remove("hidden");
|
||||
uploadfile_form.classList.remove("hidden");
|
||||
uploadfile_lbl.classList.remove("hidden");
|
||||
href_form.classList.remove("hidden");
|
||||
href_label.classList.remove("hidden");
|
||||
hreflimitmsg_html.classList.add("hidden");
|
||||
pending_html.classList.add("hidden");
|
||||
errorHandler.clearError();
|
||||
close_btn.onclick = null;
|
||||
upload_btn.onclick = null;
|
||||
href_form.value = "";
|
||||
uploadfile_form.value = "";
|
||||
if (nodes == null) {
|
||||
return;
|
||||
hide() {
|
||||
this._html_scene.classList.add("hidden");
|
||||
this._close_btn.classList.remove("hidden");
|
||||
this._upload_btn.classList.remove("hidden");
|
||||
this._uploadfile_form.classList.remove("hidden");
|
||||
this._uploadfile_lbl.classList.remove("hidden");
|
||||
this._href_form.classList.remove("hidden");
|
||||
this._href_label.classList.remove("hidden");
|
||||
this._hreflimitmsg_html.classList.add("hidden");
|
||||
this._pending_html.classList.add("hidden");
|
||||
this._errorHandler.clearError();
|
||||
this._close_btn.onclick = null;
|
||||
this._upload_btn.onclick = null;
|
||||
this._href_form.value = "";
|
||||
this._uploadfile_form.value = "";
|
||||
if (this._nodes == null) {
|
||||
return;
|
||||
}
|
||||
this._nodes.forEach(function (node) {
|
||||
if (node.parentNode) {
|
||||
node.parentNode.removeChild(node);
|
||||
}
|
||||
nodes.forEach(function (node) {
|
||||
if (node.parentNode) {
|
||||
node.parentNode.removeChild(node);
|
||||
}
|
||||
});
|
||||
nodes = null;
|
||||
};
|
||||
this.is_transient = function () { return false; };
|
||||
this.release = function () {
|
||||
if (upload_req !== null) {
|
||||
upload_req.abort();
|
||||
upload_req = null;
|
||||
}
|
||||
};
|
||||
});
|
||||
this._nodes = null;
|
||||
}
|
||||
|
||||
is_transient() { return false; }
|
||||
|
||||
release() {
|
||||
if (this._upload_req !== null) {
|
||||
this._upload_req.abort();
|
||||
this._upload_req = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user