raonkupload-angular
Version:
Angular component for RAON K Upload.
365 lines (358 loc) • 16.6 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('raonwiz-integrations-common')) :
typeof define === 'function' && define.amd ? define('raonkupload-angular', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'raonwiz-integrations-common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["raonkupload-angular"] = {}, global.ng.core, global.ng.common, global.ng.forms, global.raonwizIntegrationsCommon));
})(this, (function (exports, core, common, forms, raonwizIntegrationsCommon) { 'use strict';
/**
* @license Copyright (c) 2003-2022, RAONWIZ DevTeam. All rights reserved.
*/
var RaonkUploadComponent = /** @class */ (function () {
function RaonkUploadComponent(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 core.EventEmitter();
this.change = new core.EventEmitter();
/**
* event.
*/
this.creationComplete = new core.EventEmitter();
this.beforeAddFile = new core.EventEmitter();
this.afterAddFile = new core.EventEmitter();
this.afterAddAllFile = new core.EventEmitter();
this.beforeDeleteFile = new core.EventEmitter();
this.afterDeleteFile = new core.EventEmitter();
this.deleteAllFile = new core.EventEmitter();
this.beforeUpload = new core.EventEmitter();
this.uploadComplete = new core.EventEmitter();
this.beforeDownloadFile = new core.EventEmitter();
this.beforeOpenFile = new core.EventEmitter();
this.downloadCompleteFile = new core.EventEmitter();
this.downloadCompleteAllFile = new core.EventEmitter();
this.onError = new core.EventEmitter();
this.uploadingCancel = new core.EventEmitter();
this.downloadCancel = new core.EventEmitter();
this.selectItem = new core.EventEmitter();
this.customAction = new core.EventEmitter();
this.alert = new core.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;
}
Object.defineProperty(RaonkUploadComponent.prototype, "data", {
get: function () {
return this._data;
},
/**
* 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: function (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;
},
enumerable: false,
configurable: true
});
Object.defineProperty(RaonkUploadComponent.prototype, "viewMode", {
get: function () {
if (this.instance) {
var retValue = void 0;
switch (RAONKUPLOAD.GetUploadByName(this.id)._config.mode.toLowerCase()) {
case 'upload':
case 'edit':
retValue = false;
break;
default:
retValue = true;
break;
}
return retValue;
}
return this._viewMode;
},
/**
* When set to `true`, the editor becomes view mode.
*/
set: function (isViewMode) {
if (this.instance) {
RAONKUPLOAD.SetUploadMode(isViewMode ? 'view' : 'edit', this.id);
return;
}
// Delay setting mode
this._viewMode = isViewMode;
},
enumerable: false,
configurable: true
});
RaonkUploadComponent.prototype.ngAfterViewInit = function () {
var _this_1 = this;
raonwizIntegrationsCommon.getRaonwizComponentNamespace(this.componentType, this.componentUrl, function (namespace) {
_this_1.namespaceLoaded.emit(namespace);
}).then(function (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_1._destroyed) {
return;
}
_this_1.ngZone.runOutsideAngular(_this_1.createComponent.bind(_this_1, namespace));
}).catch(window.console.error);
};
RaonkUploadComponent.prototype.ngOnDestroy = function () {
var _this_1 = this;
this._destroyed = true;
this.ngZone.runOutsideAngular(function () {
if (_this_1.instance) {
if (RAONKUPLOAD._ExternalComponentMap.has(_this_1.id)) {
RAONKUPLOAD._ExternalComponentMap.delete(_this_1.id);
}
if (RAONKUPLOAD._ExternalEventRetValueMap.has(_this_1.id)) {
RAONKUPLOAD._ExternalEventRetValueMap.delete(_this_1.id);
}
RAONKUPLOAD.Destroy(_this_1.id, true);
_this_1.instance = null;
}
});
};
RaonkUploadComponent.prototype.writeValue = function (value) {
this.data = value;
};
RaonkUploadComponent.prototype.registerOnChange = function (callback) {
this.onChange = callback;
};
RaonkUploadComponent.prototype.registerOnTouched = function (callback) {
this.onTouched = callback;
};
RaonkUploadComponent.prototype.getComponentUniqueName = function () {
return "raonkupload_" + Math.random()
.toString(36)
.replace(/[^a-z]+/g, '')
.substr(0, 5);
};
RaonkUploadComponent.prototype.createComponent = function (namespace) {
var _uniqueName = this.getComponentUniqueName();
(typeof this.id === 'undefined') && (this.id = _uniqueName);
var 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
var _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;
};
RaonkUploadComponent.prototype.subscribe = function () {
var _configEvent = {};
var 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] = function (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)) {
var _this_2 = RAONKUPLOAD._ExternalComponentMap.get(componentName);
_this_2.ngZone.run(function () {
switch (evtName) {
case 'AfterAddAllFile':
case 'DeleteAllFile':
if (_this_2.onTouched) {
_this_2.onTouched();
}
break;
case 'UploadComplete':
_this_2.propagateChange(evtName, { componentName: componentName, paramObj: paramObj });
break;
}
_this_2[_this_2.capitalize(evtName)].emit({ componentName: componentName, paramObj: paramObj });
});
// Set default value
// return event
var _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;
};
RaonkUploadComponent.prototype.capitalize = function (str) {
return str.charAt(0).toLowerCase() + str.slice(1);
};
RaonkUploadComponent.prototype.propagateChange = function (eventName, eventParams) {
var _this_1 = this;
this.ngZone.run(function () {
var newData = RAONKUPLOAD.GetListInfo('array', _this_1.id);
_this_1.change.emit(eventParams);
if (newData === _this_1.data) {
return;
}
_this_1._data = newData;
if (_this_1.onChange) {
_this_1.onChange(newData);
}
});
};
return RaonkUploadComponent;
}());
RaonkUploadComponent.decorators = [
{ type: core.Component, args: [{
selector: 'RaonkUpload',
template: '<ng-template></ng-template>',
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef(function () { return RaonkUploadComponent; }),
multi: true,
}
]
},] }
];
RaonkUploadComponent.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: core.NgZone }
]; };
RaonkUploadComponent.propDecorators = {
id: [{ type: core.Input }],
config: [{ type: core.Input }],
componentType: [{ type: core.Input }],
componentUrl: [{ type: core.Input }],
tagName: [{ type: core.Input }],
runtimes: [{ type: core.Input }],
data: [{ type: core.Input }],
viewMode: [{ type: core.Input }],
namespaceLoaded: [{ type: core.Output }],
change: [{ type: core.Output }],
creationComplete: [{ type: core.Output }],
beforeAddFile: [{ type: core.Output }],
afterAddFile: [{ type: core.Output }],
afterAddAllFile: [{ type: core.Output }],
beforeDeleteFile: [{ type: core.Output }],
afterDeleteFile: [{ type: core.Output }],
deleteAllFile: [{ type: core.Output }],
beforeUpload: [{ type: core.Output }],
uploadComplete: [{ type: core.Output }],
beforeDownloadFile: [{ type: core.Output }],
beforeOpenFile: [{ type: core.Output }],
downloadCompleteFile: [{ type: core.Output }],
downloadCompleteAllFile: [{ type: core.Output }],
onError: [{ type: core.Output }],
uploadingCancel: [{ type: core.Output }],
downloadCancel: [{ type: core.Output }],
selectItem: [{ type: core.Output }],
customAction: [{ type: core.Output }],
alert: [{ type: core.Output }]
};
/**
* @license Copyright (c) 2003-2022, RAONWIZ DevTeam. All rights reserved.
*/
var RaonkUploadModule = /** @class */ (function () {
function RaonkUploadModule() {
}
return RaonkUploadModule;
}());
RaonkUploadModule.decorators = [
{ type: core.NgModule, args: [{
imports: [forms.FormsModule, common.CommonModule],
declarations: [RaonkUploadComponent],
exports: [RaonkUploadComponent]
},] }
];
/**
* Generated bundle index. Do not edit.
*/
exports.RaonkUploadComponent = RaonkUploadComponent;
exports.RaonkUploadModule = RaonkUploadModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=raonkupload-angular.umd.js.map