raonkupload-angular
Version:
Angular component for RAON K Upload.
348 lines (342 loc) • 13 kB
JavaScript
import { EventEmitter, Component, forwardRef, ElementRef, NgZone, Input, Output, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { getRaonwizComponentNamespace } from 'raonwiz-integrations-common';
/**
* @license Copyright (c) 2003-2022, RAONWIZ DevTeam. All rights reserved.
*/
class RaonkUploadComponent {
constructor(elementRef, ngZone) {
this.elementRef = elementRef;
this.ngZone = ngZone;
/**
* The id of the component
*/
this.id = "";
/**
* The component type
*/
this.componentType = 'RAONKUPLOAD';
/**
* RAON K Upload script url address. Script will be loaded only if RAONKUPLOAD namespace is missing.
*/
this.componentUrl = '/raonkupload/js/raonkupload.js';
/**
* Tag name of the component.
*
* The default tag is `div`.
*/
this.tagName = 'div';
/**
* The runtimes of the component interface.
*/
this.runtimes = "html5" /* HTML5 */;
/**
* Fired when the component namespace
* is loaded. It only triggers once, no matter how many components are initialised.
*/
this.namespaceLoaded = new EventEmitter();
this.change = new EventEmitter();
/**
* event.
*/
this.creationComplete = new EventEmitter();
this.beforeAddFile = new EventEmitter();
this.afterAddFile = new EventEmitter();
this.afterAddAllFile = new EventEmitter();
this.beforeDeleteFile = new EventEmitter();
this.afterDeleteFile = new EventEmitter();
this.deleteAllFile = new EventEmitter();
this.beforeUpload = new EventEmitter();
this.uploadComplete = new EventEmitter();
this.beforeDownloadFile = new EventEmitter();
this.beforeOpenFile = new EventEmitter();
this.downloadCompleteFile = new EventEmitter();
this.downloadCompleteAllFile = new EventEmitter();
this.onError = new EventEmitter();
this.uploadingCancel = new EventEmitter();
this.downloadCancel = new EventEmitter();
this.selectItem = new EventEmitter();
this.customAction = new EventEmitter();
this.alert = new EventEmitter();
/**
* If the component is view-mode before the component instance is created, it remembers that state,
* so the component can become view-mode once it is ready.
*/
this._viewMode = null;
this._data = null;
this._destroyed = false;
}
/**
* Keeps track of the component's data.
*
* It's also decorated as an input which is useful when not using the ngModel.
*
* See https://angular.io/api/forms/NgModel to learn more.
*/
set data(data) {
if (data === this._data) {
return;
}
if (this.instance) {
// not supported set data
// Data may be changed by ACF.
this._data = RAONKUPLOAD.GetListInfo('array', this.id);
return;
}
this._data = data;
}
get data() {
return this._data;
}
/**
* When set to `true`, the editor becomes view mode.
*/
set viewMode(isViewMode) {
if (this.instance) {
RAONKUPLOAD.SetUploadMode(isViewMode ? 'view' : 'edit', this.id);
return;
}
// Delay setting mode
this._viewMode = isViewMode;
}
get viewMode() {
if (this.instance) {
let retValue;
switch (RAONKUPLOAD.GetUploadByName(this.id)._config.mode.toLowerCase()) {
case 'upload':
case 'edit':
retValue = false;
break;
default:
retValue = true;
break;
}
return retValue;
}
return this._viewMode;
}
ngAfterViewInit() {
getRaonwizComponentNamespace(this.componentType, this.componentUrl, namespace => {
this.namespaceLoaded.emit(namespace);
}).then((namespace) => {
// Check if component instance was destroyed before `ngAfterViewInit` call (#110).
// Here, `this.instance` is still not initialized and so additional flag is needed.
if (this._destroyed) {
return;
}
this.ngZone.runOutsideAngular(this.createComponent.bind(this, namespace));
}).catch(window.console.error);
}
ngOnDestroy() {
this._destroyed = true;
this.ngZone.runOutsideAngular(() => {
if (this.instance) {
if (RAONKUPLOAD._ExternalComponentMap.has(this.id)) {
RAONKUPLOAD._ExternalComponentMap.delete(this.id);
}
if (RAONKUPLOAD._ExternalEventRetValueMap.has(this.id)) {
RAONKUPLOAD._ExternalEventRetValueMap.delete(this.id);
}
RAONKUPLOAD.Destroy(this.id, true);
this.instance = null;
}
});
}
writeValue(value) {
this.data = value;
}
registerOnChange(callback) {
this.onChange = callback;
}
registerOnTouched(callback) {
this.onTouched = callback;
}
getComponentUniqueName() {
return "raonkupload_" + Math.random()
.toString(36)
.replace(/[^a-z]+/g, '')
.substr(0, 5);
}
createComponent(namespace) {
let _uniqueName = this.getComponentUniqueName();
(typeof this.id === 'undefined') && (this.id = _uniqueName);
const element = document.createElement(this.tagName);
element.id = "componentHolder_" + _uniqueName;
this.elementRef.nativeElement.appendChild(element);
// view state may change during instance initialization.
(this._viewMode !== null) && (this.viewMode = this._viewMode);
// default config
let _compConfig = {
Id: this.id,
UploadHolder: element.id,
Runtimes: this.runtimes,
Mode: this._viewMode ? 'view' : 'edit',
Event: this.subscribe()
};
_compConfig = namespace.util.objectExtend(true, this.config, _compConfig);
// for event callback
(typeof namespace._ExternalComponentMap === 'undefined') && (namespace._ExternalComponentMap = new Map());
namespace._ExternalComponentMap.set(this.id, this);
(typeof namespace._ExternalEventRetValueMap === 'undefined') && (namespace._ExternalEventRetValueMap = new Map());
var _componentObject = new RAONKUpload(_compConfig);
_componentObject.name = element.id;
this.instance = _componentObject;
}
subscribe() {
let _configEvent = {};
const ComponentEvents = [
'CreationComplete',
'BeforeAddFile',
'AfterAddFile',
'AfterAddAllFile',
'BeforeDeleteFile',
'AfterDeleteFile',
'DeleteAllFile',
'BeforeUpload',
'UploadComplete',
'BeforeDownloadFile',
'BeforeOpenFile',
'DownloadCompleteFile',
'DownloadCompleteAllFile',
'OnError',
'UploadingCancel',
'DownloadCancel',
'SelectItem',
'CustomAction',
'Alert'
];
ComponentEvents.forEach(function (evtName) {
_configEvent[evtName] = (componentName, paramObj) => {
// Set default value
switch (evtName) {
case 'BeforeUpload':
case 'BeforeDownloadFile':
case 'BeforeOpenFile':
case 'BeforeAddFile':
case 'BeforeDeleteFile':
RAONKUPLOAD._ExternalEventRetValueMap.set(componentName, true);
break;
}
if (RAONKUPLOAD._ExternalComponentMap.has(componentName)) {
let _this = RAONKUPLOAD._ExternalComponentMap.get(componentName);
_this.ngZone.run(() => {
switch (evtName) {
case 'AfterAddAllFile':
case 'DeleteAllFile':
if (_this.onTouched) {
_this.onTouched();
}
break;
case 'UploadComplete':
_this.propagateChange(evtName, { componentName: componentName, paramObj: paramObj });
break;
}
_this[_this.capitalize(evtName)].emit({ componentName: componentName, paramObj: paramObj });
});
// Set default value
// return event
let _retValue = "";
switch (evtName) {
case 'BeforeUpload':
case 'BeforeDownloadFile':
case 'BeforeOpenFile':
case 'BeforeAddFile':
case 'BeforeDeleteFile':
if (RAONKUPLOAD._ExternalEventRetValueMap.has(componentName)) {
_retValue = RAONKUPLOAD._ExternalEventRetValueMap.get(componentName);
RAONKUPLOAD._ExternalEventRetValueMap.delete(componentName); // Initialization
return _retValue;
}
break;
}
}
};
});
return _configEvent;
}
capitalize(str) {
return str.charAt(0).toLowerCase() + str.slice(1);
}
propagateChange(eventName, eventParams) {
this.ngZone.run(() => {
const newData = RAONKUPLOAD.GetListInfo('array', this.id);
this.change.emit(eventParams);
if (newData === this.data) {
return;
}
this._data = newData;
if (this.onChange) {
this.onChange(newData);
}
});
}
}
RaonkUploadComponent.decorators = [
{ type: Component, args: [{
selector: 'RaonkUpload',
template: '<ng-template></ng-template>',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RaonkUploadComponent),
multi: true,
}
]
},] }
];
RaonkUploadComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: NgZone }
];
RaonkUploadComponent.propDecorators = {
id: [{ type: Input }],
config: [{ type: Input }],
componentType: [{ type: Input }],
componentUrl: [{ type: Input }],
tagName: [{ type: Input }],
runtimes: [{ type: Input }],
data: [{ type: Input }],
viewMode: [{ type: Input }],
namespaceLoaded: [{ type: Output }],
change: [{ type: Output }],
creationComplete: [{ type: Output }],
beforeAddFile: [{ type: Output }],
afterAddFile: [{ type: Output }],
afterAddAllFile: [{ type: Output }],
beforeDeleteFile: [{ type: Output }],
afterDeleteFile: [{ type: Output }],
deleteAllFile: [{ type: Output }],
beforeUpload: [{ type: Output }],
uploadComplete: [{ type: Output }],
beforeDownloadFile: [{ type: Output }],
beforeOpenFile: [{ type: Output }],
downloadCompleteFile: [{ type: Output }],
downloadCompleteAllFile: [{ type: Output }],
onError: [{ type: Output }],
uploadingCancel: [{ type: Output }],
downloadCancel: [{ type: Output }],
selectItem: [{ type: Output }],
customAction: [{ type: Output }],
alert: [{ type: Output }]
};
/**
* @license Copyright (c) 2003-2022, RAONWIZ DevTean. All rights reserved.
*/
/**
* @license Copyright (c) 2003-2022, RAONWIZ DevTeam. All rights reserved.
*/
class RaonkUploadModule {
}
RaonkUploadModule.decorators = [
{ type: NgModule, args: [{
imports: [FormsModule, CommonModule],
declarations: [RaonkUploadComponent],
exports: [RaonkUploadComponent]
},] }
];
/**
* Generated bundle index. Do not edit.
*/
export { RaonkUploadComponent, RaonkUploadModule };
//# sourceMappingURL=raonkupload-angular.js.map