ngx-smart-loader
Version:
Smart loader handler to manage loaders everywhere in Angular apps.
608 lines (598 loc) • 19.7 kB
JavaScript
/**
* @license ngx-smart-loader
* MIT license
*/
import { ChangeDetectorRef, Component, EventEmitter, Injectable, Input, NgModule, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var NgxSmartLoaderService = (function () {
function NgxSmartLoaderService() {
this._loaderStack = [];
this._actions = [];
}
/**
* Add a new loader instance. This step is essential and allows to retrieve any loader at any time.
* It stores an object that contains the given loader identifier and the loader itself directly in the `loaderStack`.
*
* @param {?} loaderInstance The object that contains the given loader identifier and the loader itself.
* @param {?=} force Optional parameter that forces the overriding of loader instance if it already exists.
* @return {?} Returns nothing special.
*/
NgxSmartLoaderService.prototype.addLoader = /**
* Add a new loader instance. This step is essential and allows to retrieve any loader at any time.
* It stores an object that contains the given loader identifier and the loader itself directly in the `loaderStack`.
*
* @param {?} loaderInstance The object that contains the given loader identifier and the loader itself.
* @param {?=} force Optional parameter that forces the overriding of loader instance if it already exists.
* @return {?} Returns nothing special.
*/
function (loaderInstance, force) {
if (force) {
var /** @type {?} */ i = this._loaderStack.findIndex(function (o) {
return o.id === loaderInstance.id;
});
if (i > -1) {
this._loaderStack[i].component = loaderInstance.component;
}
else {
this._loaderStack.push(loaderInstance);
}
return;
}
var /** @type {?} */ loader;
if (loader = this._getLoader(loaderInstance.id)) {
throw (new Error('Loader with ' + loaderInstance.id + ' identifier already exist'));
}
else {
this._loaderStack.push(loaderInstance);
}
};
/**
* Remove a loader instance from the loader stack.
*
* @param {?} id The loader identifier.
* @return {?}
*/
NgxSmartLoaderService.prototype.removeLoader = /**
* Remove a loader instance from the loader stack.
*
* @param {?} id The loader identifier.
* @return {?}
*/
function (id) {
this._loaderStack = this._loaderStack.filter(function (loader) { return loader.id !== id; });
this._removeAction(id, '*');
};
/**
* Retrieve all the created loaders.
*
* @return {?} Returns an array that contains all loader instances.
*/
NgxSmartLoaderService.prototype.getLoaderStack = /**
* Retrieve all the created loaders.
*
* @return {?} Returns an array that contains all loader instances.
*/
function () {
return this._loaderStack;
};
/**
* It gives the number of loader instances. It's helpful to know if the loader stack is empty or not.
*
* @return {?} Returns the number of loader instances.
*/
NgxSmartLoaderService.prototype.getLoaderStackCount = /**
* It gives the number of loader instances. It's helpful to know if the loader stack is empty or not.
*
* @return {?} Returns the number of loader instances.
*/
function () {
return this._loaderStack.length;
};
/**
* Retrieve all the opened loaders. It looks for all loader instances with their `visible` property set to `true`.
*
* @return {?} Returns an array that contains all the opened loaders.
*/
NgxSmartLoaderService.prototype.getOpenedLoaders = /**
* Retrieve all the opened loaders. It looks for all loader instances with their `visible` property set to `true`.
*
* @return {?} Returns an array that contains all the opened loaders.
*/
function () {
return this._loaderStack.filter(function (loader) { return loader.component.visible; });
};
/**
* Retrieve all the active loaders. It looks for all loader instances with their `loading` property set to `true`.
*
* @return {?} Returns an array that contains all the active loaders.
*/
NgxSmartLoaderService.prototype.getActiveLoaders = /**
* Retrieve all the active loaders. It looks for all loader instances with their `loading` property set to `true`.
*
* @return {?} Returns an array that contains all the active loaders.
*/
function () {
return this._loaderStack.filter(function (loader) { return loader.component.loading; });
};
/**
* Get the higher `z-index` value between all the loader instances. It iterates over the `LoaderStack` array and
* calculates a higher value (it takes the highest index value between all the loader instances and adds 1).
* Use it to make a loader appear foreground.
*
* @return {?} Returns a higher index from all the existing loader instances.
*/
NgxSmartLoaderService.prototype.getHigherIndex = /**
* Get the higher `z-index` value between all the loader instances. It iterates over the `LoaderStack` array and
* calculates a higher value (it takes the highest index value between all the loader instances and adds 1).
* Use it to make a loader appear foreground.
*
* @return {?} Returns a higher index from all the existing loader instances.
*/
function () {
var /** @type {?} */ index = this.getOpenedLoaders().map(function (loader) { return loader.component.layerPosition; });
return Math.max.apply(Math, index) + 1;
};
/**
* Enable loading state to one or several loaders.
*
* @param {?} id The loader identifier.
* @return {?}
*/
NgxSmartLoaderService.prototype.start = /**
* Enable loading state to one or several loaders.
*
* @param {?} id The loader identifier.
* @return {?}
*/
function (id) {
var _this = this;
var /** @type {?} */ loader;
if (Array.isArray(id)) {
id.forEach(function (i) {
_this.start(i);
});
}
else if (loader = this._getLoader(id)) {
loader.component.start();
this._removeAction(id, 'start');
}
else {
this._addAction(id, 'start');
}
};
/**
* Enable loading state to all loaders.
* @return {?}
*/
NgxSmartLoaderService.prototype.startAll = /**
* Enable loading state to all loaders.
* @return {?}
*/
function () {
var _this = this;
this._loaderStack.forEach(function (loader) { return _this.start(loader.id); });
};
/**
* Disable loading state to one or several loaders.
*
* @param {?} id The loader identifier.
* @return {?}
*/
NgxSmartLoaderService.prototype.stop = /**
* Disable loading state to one or several loaders.
*
* @param {?} id The loader identifier.
* @return {?}
*/
function (id) {
var _this = this;
var /** @type {?} */ loader;
if (Array.isArray(id)) {
id.forEach(function (i) {
_this.stop(i);
});
}
else if (loader = this._getLoader(id)) {
loader.component.stop();
this._removeAction(id, 'stop');
}
else {
this._addAction(id, 'stop');
}
};
/**
* Disable loading state to all loaders.
* @return {?}
*/
NgxSmartLoaderService.prototype.stopAll = /**
* Disable loading state to all loaders.
* @return {?}
*/
function () {
var _this = this;
this._loaderStack.forEach(function (loader) { return _this.stop(loader.id); });
};
/**
* @param {?} id
* @return {?}
*/
NgxSmartLoaderService.prototype.isLoading = /**
* @param {?} id
* @return {?}
*/
function (id) {
var _this = this;
var /** @type {?} */ loader;
if (Array.isArray(id)) {
var /** @type {?} */ tmp_1 = [];
id.forEach(function (i) {
_this._loaderStack.forEach(function (load) {
if (load.id === i) {
tmp_1.push(load.component.loading);
}
});
});
return tmp_1.indexOf(false) === -1;
}
else if (loader = this._getLoader(id)) {
return loader.component.loading;
}
else {
return false;
}
};
/**
* Execute an action on loaders
*
* @param {?} id The loader identifier.
* @param {?} action Name of the action.
* @return {?}
*/
NgxSmartLoaderService.prototype.executeAction = /**
* Execute an action on loaders
*
* @param {?} id The loader identifier.
* @param {?} action Name of the action.
* @return {?}
*/
function (id, action) {
if (this._actions.find(function (act) { return act.identifier === id && act.action === action; })) {
switch (action) {
case 'start':
this.start(id);
break;
case 'stop':
this.stop(id);
break;
}
}
};
/**
* Retrieve a loader instance by its identifier.
* If there's several loaders with same identifier, the first is returned.
*
* @param {?} id The loader identifier used at creation time.
* @return {?}
*/
NgxSmartLoaderService.prototype._getLoader = /**
* Retrieve a loader instance by its identifier.
* If there's several loaders with same identifier, the first is returned.
*
* @param {?} id The loader identifier used at creation time.
* @return {?}
*/
function (id) {
return this._loaderStack.find(function (load) { return load.id === id; }) || null;
};
/**
* Adds an action on one or more loaders
*
* @param {?} id The loader identifier.
* @param {?} action Name of the action.
* @return {?}
*/
NgxSmartLoaderService.prototype._addAction = /**
* Adds an action on one or more loaders
*
* @param {?} id The loader identifier.
* @param {?} action Name of the action.
* @return {?}
*/
function (id, action) {
var _this = this;
if (Array.isArray(id)) {
id.forEach(function (i) {
_this._addAction(i, action);
});
}
else {
this._actions.push({ identifier: id, action: action });
}
};
/**
* Remove an action on one or more loaders
*
* @param {?} id The loader identifier.
* @param {?} action Name of the action.
* @return {?}
*/
NgxSmartLoaderService.prototype._removeAction = /**
* Remove an action on one or more loaders
*
* @param {?} id The loader identifier.
* @param {?} action Name of the action.
* @return {?}
*/
function (id, action) {
var _this = this;
if (Array.isArray(id)) {
id.forEach(function (i) {
_this._removeAction(i, action);
});
}
else {
this._actions = this._actions.filter(function (act) { return act.identifier !== id || (act.action !== action && action !== '*'); });
}
};
NgxSmartLoaderService.decorators = [
{ type: Injectable },
];
/** @nocollapse */
NgxSmartLoaderService.ctorParameters = function () { return []; };
return NgxSmartLoaderService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var LoaderInstance = (function () {
function LoaderInstance(component) {
this.id = component.identifier;
this.component = component;
}
return LoaderInstance;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var NgxSmartLoaderComponent = (function () {
function NgxSmartLoaderComponent(ngxSmartLoaderService, changeDetectorRef) {
this.ngxSmartLoaderService = ngxSmartLoaderService;
this.changeDetectorRef = changeDetectorRef;
this.identifier = '';
this.customClass = '';
this.force = false;
this.delayIn = 0;
this.delayOut = 0;
this.autostart = false;
this.onStart = new EventEmitter();
this.onStop = new EventEmitter();
this.onVisibleChange = new EventEmitter();
this.loading = false;
this.visible = false;
this.layerPosition = 999;
this._isProcessing = false;
this._loaderBodyClass = 'loader-open';
this._enterClass = 'enter';
this._leaveClass = 'leave';
}
/**
* @return {?}
*/
NgxSmartLoaderComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
try {
var /** @type {?} */ loader = new LoaderInstance(this);
this.ngxSmartLoaderService.addLoader(loader, this.force);
this.layerPosition += this.ngxSmartLoaderService.getLoaderStackCount();
this.addCustomClass(this.identifier.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase());
if (this.autostart) {
this.ngxSmartLoaderService.start(this.identifier);
}
else {
this.ngxSmartLoaderService.executeAction(this.identifier, 'start');
}
}
catch (/** @type {?} */ error) {
throw (error);
}
};
/**
* @return {?}
*/
NgxSmartLoaderComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.ngxSmartLoaderService.removeLoader(this.identifier);
};
/**
* @param {?=} top
* @return {?}
*/
NgxSmartLoaderComponent.prototype.start = /**
* @param {?=} top
* @return {?}
*/
function (top) {
var _this = this;
this._isProcessing = true;
clearInterval(this._debouncer);
this.visible = true;
setTimeout(function () {
_this.addCustomClass(_this._enterClass);
});
this._debouncer = setTimeout(function () {
if (top) {
_this.layerPosition = _this.ngxSmartLoaderService.getHigherIndex();
}
if (!document.body.classList.contains(_this._loaderBodyClass)) {
document.body.classList.add(_this._loaderBodyClass);
}
_this.loading = true;
_this.onStart.emit(_this);
_this.onVisibleChange.emit(_this);
_this.removeCustomClass(_this._enterClass);
_this._isProcessing = false;
}, this.delayIn);
};
/**
* @return {?}
*/
NgxSmartLoaderComponent.prototype.stop = /**
* @return {?}
*/
function () {
var _this = this;
if (this._isProcessing) {
this.visible = false;
this.loading = false;
}
clearInterval(this._debouncer);
this.addCustomClass(this._leaveClass);
this.loading = false;
this._debouncer = setTimeout(function () {
if (document.body.classList.contains(_this._loaderBodyClass)) {
document.body.classList.remove(_this._loaderBodyClass);
}
_this.visible = false;
_this.onStop.emit(_this);
_this.onVisibleChange.emit(_this);
_this.removeCustomClass(_this._leaveClass);
setTimeout(function () {
_this.changeDetectorRef.markForCheck();
});
}, this.delayOut);
};
/**
* @param {?} className
* @return {?}
*/
NgxSmartLoaderComponent.prototype.addCustomClass = /**
* @param {?} className
* @return {?}
*/
function (className) {
if (!this.customClass.length) {
this.customClass = className;
}
else {
if (this.customClass.indexOf(className) === -1) {
this.customClass += ' ' + className;
}
}
};
/**
* @param {?=} className
* @return {?}
*/
NgxSmartLoaderComponent.prototype.removeCustomClass = /**
* @param {?=} className
* @return {?}
*/
function (className) {
if (className) {
this.customClass = this.customClass.replace(className, '').trim();
}
else {
this.customClass = '';
}
};
NgxSmartLoaderComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-smart-loader',
template: "\n <div class=\"loader-container {{customClass}}\" [ngClass]=\"{'active': loading}\"\n [style.z-index]=\"layerPosition - 1\" *ngIf=\"visible\">\n <ng-content></ng-content>\n </div>\n "
},] },
];
/** @nocollapse */
NgxSmartLoaderComponent.ctorParameters = function () { return [
{ type: NgxSmartLoaderService, },
{ type: ChangeDetectorRef, },
]; };
NgxSmartLoaderComponent.propDecorators = {
"identifier": [{ type: Input },],
"customClass": [{ type: Input },],
"force": [{ type: Input },],
"delayIn": [{ type: Input },],
"delayOut": [{ type: Input },],
"autostart": [{ type: Input },],
"onStart": [{ type: Output },],
"onStop": [{ type: Output },],
"onVisibleChange": [{ type: Output },],
};
return NgxSmartLoaderComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var NgxSmartLoaderModule = (function () {
function NgxSmartLoaderModule() {
}
/**
* Use in AppModule: new instance of NgxSmartLoader.
* @return {?}
*/
NgxSmartLoaderModule.forRoot = /**
* Use in AppModule: new instance of NgxSmartLoader.
* @return {?}
*/
function () {
return {
ngModule: NgxSmartLoaderModule,
providers: [NgxSmartLoaderService]
};
};
/**
* Use in features modules with lazy loading: new instance of NgxSmartLoader.
* @return {?}
*/
NgxSmartLoaderModule.forChild = /**
* Use in features modules with lazy loading: new instance of NgxSmartLoader.
* @return {?}
*/
function () {
return {
ngModule: NgxSmartLoaderModule,
providers: [NgxSmartLoaderService]
};
};
NgxSmartLoaderModule.decorators = [
{ type: NgModule, args: [{
declarations: [NgxSmartLoaderComponent],
exports: [NgxSmartLoaderComponent],
imports: [CommonModule]
},] },
];
/** @nocollapse */
NgxSmartLoaderModule.ctorParameters = function () { return []; };
return NgxSmartLoaderModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
// Public classes.
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Entry point for all public APIs of the package.
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxSmartLoaderService, NgxSmartLoaderComponent, NgxSmartLoaderModule };
//# sourceMappingURL=ngx-smart-loader.js.map