Use js modules

This commit is contained in:
Dennis Eichhorn 2019-04-02 22:45:23 +02:00
parent 903cf417c0
commit e084c7004a
2 changed files with 234 additions and 247 deletions

View File

@ -1,92 +1,86 @@
(function (jsOMS) import { Autoloader } from '../../jsOMS/Autoloader.js';
{ import { Application } from '../../Web/Backend/js/backend.js';
"use strict"; import { Upload } from './Models/Upload.js';
jsOMS.Autoloader.defineNamespace('jsOMS.Modules'); Autoloader.defineNamespace('jsOMS.Modules');
jsOMS.Modules.Media = class { jsOMS.Modules.Media = class {
/** /**
* @constructor * @constructor
* *
* @since 1.0.0 * @since 1.0.0
*/ */
constructor (app) constructor (app)
{ {
this.app = app; this.app = app;
}; };
bind (id) bind (id)
{ {
const e = typeof id === 'undefined' ? document.getElementsByTagName('form') : [document.getElementById(id)], const e = typeof id === 'undefined' ? document.getElementsByTagName('form') : [document.getElementById(id)],
length = e.length; length = e.length;
for (let i = 0; i < length; ++i) { for (let i = 0; i < length; ++i) {
this.bindElement(e[i]); this.bindElement(e[i]);
} }
}; };
bindElement (form) bindElement (form)
{ {
if (typeof form === 'undefined' || !form) { if (typeof form === 'undefined' || !form) {
jsOMS.Log.Logger.instance.error('Invalid form: ' + form, 'MediaController'); jsOMS.Log.Logger.instance.error('Invalid form: ' + form, 'MediaController');
return; return;
} }
const self = this; const self = this;
if (!form.querySelector('input[type=file]') if (!form.querySelector('input[type=file]')
|| !document.querySelector('input[type=file][form=' + form.id + ']') || !document.querySelector('input[type=file][form=' + form.id + ']')
) { ) {
try { try {
// Inject media upload into form view // Inject media upload into form view
this.app.uiManager.getFormManager().get(form.id).injectSubmit(function (e, requestId) this.app.uiManager.getFormManager().get(form.id).injectSubmit(function (e, requestId)
{
// todo: what if a form needs multiple different upload fields which should not be mixed
/** global: jsOMS */
const fileFields = document.querySelectorAll(
'#' + e.id + ' input[type=file], '
+ 'input[form=' + e.id + '][type=file]'
);
const uploader = new Upload(self.app.responseManager);
uploader.setSuccess(e.id, function (type, response)
{ {
// todo: what if a form needs multiple different upload fields which should not be mixed document.querySelector('input[form=' + e.id + '][type=file]+input[form=' + e.id + '][type=hidden]').value = JSON.stringify(response);
self.app.eventManager.trigger(form.id, requestId);
/** global: jsOMS */
const fileFields = document.querySelectorAll(
'#' + e.id + ' input[type=file], '
+ 'input[form=' + e.id + '][type=file]'
);
const uploader = new jsOMS.Modules.Models.Media.Upload(self.app.responseManager);
uploader.setSuccess(e.id, function (type, response)
{
document.querySelector('input[form=' + e.id + '][type=file]+input[form=' + e.id + '][type=hidden]').value = JSON.stringify(response);
self.app.eventManager.trigger(form.id, requestId);
});
uploader.setUri('{/base}/{/lang}/api/media');
const length = fileFields.length;
let fileLength = 0;
for (let i = 0; i < length; ++i) {
fileLength = fileFields[i].files.length;
for (let j = 0; j < fileLength; ++j) {
uploader.addFile(fileFields[i].files[j]);
}
}
if (uploader.count() < 1) {
self.app.eventManager.trigger(form.id, requestId);
return;
}
uploader.upload(e.id);
}); });
} catch (e) {
this.app.logger.info('Tried to add media upload support for form without an ID.'); uploader.setUri('{/base}/{/lang}/api/media');
}
const length = fileFields.length;
let fileLength = 0;
for (let i = 0; i < length; ++i) {
fileLength = fileFields[i].files.length;
for (let j = 0; j < fileLength; ++j) {
uploader.addFile(fileFields[i].files[j]);
}
}
if (uploader.count() < 1) {
self.app.eventManager.trigger(form.id, requestId);
return;
}
uploader.upload(e.id);
});
} catch (e) {
this.app.logger.info('Tried to add media upload support for form without an ID.');
} }
}; }
} };
}(window.jsOMS = window.jsOMS || {})); };
jsOMS.ready(function () window.omsApp.moduleManager.get('Media').bind();
{
"use strict";
window.omsApp.moduleManager.get('Media').bind();
});

View File

@ -6,178 +6,171 @@
* @version 1.0.0 * @version 1.0.0
* @since 1.0.0 * @since 1.0.0
*/ */
(function (jsOMS) export class Upload {
{ /**
"use strict"; * @constructor
*
* @param {Object} responseManager Response manager
*
* @since 1.0.0
*/
constructor (responseManager)
{
this.responseManager = responseManager;
this.success = [];
jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Models.Media'); this.uri = '';
this.allowedTypes = [];
this.maxFileSize = 0;
this.files = [];
};
jsOMS.Modules.Models.Media.Upload = class { /**
/** * Set max allowed file size.
* @constructor *
* * @param {int} size Max file size
* @param {Object} responseManager Response manager *
* * @return {void}
* @since 1.0.0 *
*/ * @since 1.0.0
constructor (responseManager) */
setMaxFileSize (size)
{
this.maxFileSize = size;
};
/**
* Get max allowed file size.
*
* @return {int} Max file size
*
* @since 1.0.0
*/
getMaxFileSize ()
{
return this.maxFileSize;
};
/**
* Set success callback.
*
* @param {string} id Form id
* @param {function} callback Function callback on success
*
* @return {void}
*
* @since 1.0.0
*/
setSuccess (id, callback)
{
this.success[id] = callback;
};
/**
* Set upload uri.
*
* @param {string} uri Upload destination
*
* @return {void}
*
* @since 1.0.0
*/
setUri (uri)
{
this.uri = uri;
};
/**
* Set allowed upload file types.
*
* @param {array} allowed Allowed upload file types
*
* @return {void}
*
* @since 1.0.0
*/
setAllowedTypes (allowed)
{
this.allowedTypes = allowed;
};
/**
* Add allowed upload file type
*
* @param {string} allowed Allowed upload file type
*
* @return {void}
*
* @since 1.0.0
*/
addAllowedType (allowed)
{
this.allowedTypes.push(allowed);
};
/**
* Add file to upload
*
* @param {string} file File to upload
*
* @return {void}
*
* @since 1.0.0
*/
addFile (file)
{
this.files.push(file);
};
/**
* Get count of file to upload
*
* @return {int}
*
* @since 1.0.0
*/
count ()
{
return this.files.length;
};
// todo: maybe do file upload together with data upload in FormData.
// let the module forward the files to the media module?!
upload (formId)
{
// TODO: validate file type + file size
const request = new Request(),
formData = new FormData(),
self = this;
this.files.forEach(function (element, index)
{ {
this.responseManager = responseManager; formData.append('file' + index, element);
this.success = []; });
this.uri = ''; request.setData(formData);
this.allowedTypes = []; request.setType(RequestType.FILE);
this.maxFileSize = 0; request.setUri(this.uri);
this.files = []; request.setMethod(RequestMethod.POST);
}; request.setRequestHeader('HTTP_X_REQUESTED_WITH', 'XMLHttpRequest');
request.setSuccess(function (xhr)
/**
* Set max allowed file size.
*
* @param {int} size Max file size
*
* @return {void}
*
* @since 1.0.0
*/
setMaxFileSize (size)
{ {
this.maxFileSize = size; try {
}; const response = JSON.parse(xhr.response);
/** if (!self.success[formId]) {
* Get max allowed file size. self.responseManager.run(null, response);
* } else {
* @return {int} Max file size self.success[formId](null, response);
*
* @since 1.0.0
*/
getMaxFileSize ()
{
return this.maxFileSize;
};
/**
* Set success callback.
*
* @param {string} id Form id
* @param {function} callback Function callback on success
*
* @return {void}
*
* @since 1.0.0
*/
setSuccess (id, callback)
{
this.success[id] = callback;
};
/**
* Set upload uri.
*
* @param {string} uri Upload destination
*
* @return {void}
*
* @since 1.0.0
*/
setUri (uri)
{
this.uri = uri;
};
/**
* Set allowed upload file types.
*
* @param {array} allowed Allowed upload file types
*
* @return {void}
*
* @since 1.0.0
*/
setAllowedTypes (allowed)
{
this.allowedTypes = allowed;
};
/**
* Add allowed upload file type
*
* @param {string} allowed Allowed upload file type
*
* @return {void}
*
* @since 1.0.0
*/
addAllowedType (allowed)
{
this.allowedTypes.push(allowed);
};
/**
* Add file to upload
*
* @param {string} file File to upload
*
* @return {void}
*
* @since 1.0.0
*/
addFile (file)
{
this.files.push(file);
};
/**
* Get count of file to upload
*
* @return {int}
*
* @since 1.0.0
*/
count ()
{
return this.files.length;
};
// todo: maybe do file upload together with data upload in FormData.
// let the module forward the files to the media module?!
upload (formId)
{
// TODO: validate file type + file size
const request = new jsOMS.Message.Request.Request(),
formData = new FormData(),
self = this;
this.files.forEach(function (element, index)
{
formData.append('file' + index, element);
});
request.setData(formData);
request.setType(jsOMS.Message.Request.RequestType.FILE);
request.setUri(this.uri);
request.setMethod(jsOMS.Message.Request.RequestMethod.POST);
request.setRequestHeader('HTTP_X_REQUESTED_WITH', 'XMLHttpRequest');
request.setSuccess(function (xhr)
{
try {
const response = JSON.parse(xhr.response);
if (!self.success[formId]) {
self.responseManager.run(null, response);
} else {
self.success[formId](null, response);
}
} catch (e) {
console.log(e);
jsOMS.Log.Logger.instance.error(e);
jsOMS.Log.Logger.instance.error('Invalid media upload response: ' + xhr.response);
} }
}); } catch (e) {
console.log(e);
Logger.instance.error(e);
Logger.instance.error('Invalid media upload response: ' + xhr.response);
}
});
request.send(); request.send();
}; };
} };
}(window.jsOMS = window.jsOMS || {}));