@schoolbelle/common
Version:
504 lines (494 loc) • 22.1 kB
JavaScript
import { trigger, style, transition, animate } from '@angular/animations';
import { Subscription, Subject } from 'rxjs';
import { Injectable, ApplicationRef, Component, ViewEncapsulation, Injector, ComponentFactoryResolver, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var PromiseTrackerService = /** @class */ (function () {
function PromiseTrackerService(appRef) {
this.appRef = appRef;
this.promiseList = [];
this.delayJustFinished = false;
}
/**
* @param {?} options
* @return {?}
*/
PromiseTrackerService.prototype.reset = /**
* @param {?} options
* @return {?}
*/
function (options) {
var _this = this;
this.minDuration = options.minDuration;
this.promiseList = [];
options.promiseList.forEach((/**
* @param {?} promise
* @return {?}
*/
function (promise) {
if (!promise || promise['busyFulfilled']) {
return;
}
_this.addPromise(promise, options.onActivateTick);
}));
if (this.promiseList.length === 0) {
return;
}
this.delayJustFinished = false;
if (options.delay) {
this.delayPromise = setTimeout((/**
* @return {?}
*/
function () {
_this.delayPromise = null;
_this.delayJustFinished = true;
}), options.delay);
}
if (options.minDuration) {
this.durationPromise = setTimeout((/**
* @return {?}
*/
function () {
_this.durationPromise = null;
}), options.minDuration + (options.delay || 0));
}
};
/**
* @private
* @param {?} promise
* @param {?} onActivateTick
* @return {?}
*/
PromiseTrackerService.prototype.addPromise = /**
* @private
* @param {?} promise
* @param {?} onActivateTick
* @return {?}
*/
function (promise, onActivateTick) {
var _this = this;
if (this.promiseList.indexOf(promise) !== -1) {
return;
}
this.promiseList.push(promise);
if (promise instanceof Promise) {
promise.then.call(promise, (/**
* @return {?}
*/
function () { return _this.finishPromise(promise, onActivateTick); }), (/**
* @return {?}
*/
function () { return _this.finishPromise(promise, onActivateTick); }));
}
else if (promise instanceof Subscription) {
promise.add((/**
* @return {?}
*/
function () { return _this.finishPromise(promise, onActivateTick); }));
}
};
/**
* @private
* @param {?} promise
* @param {?} onActivateTick
* @return {?}
*/
PromiseTrackerService.prototype.finishPromise = /**
* @private
* @param {?} promise
* @param {?} onActivateTick
* @return {?}
*/
function (promise, onActivateTick) {
promise['busyFulfilled'] = true;
/** @type {?} */
var index = this.promiseList.indexOf(promise);
if (index === -1) {
return;
}
this.promiseList.splice(index, 1);
if (onActivateTick === true)
this.appRef.tick();
};
/**
* @return {?}
*/
PromiseTrackerService.prototype.isActive = /**
* @return {?}
*/
function () {
if (this.delayPromise) {
return false;
}
if (!this.delayJustFinished) {
if (this.durationPromise) {
return true;
}
return this.promiseList.length > 0;
}
this.delayJustFinished = false;
if (this.promiseList.length === 0) {
this.durationPromise = null;
}
return this.promiseList.length > 0;
};
PromiseTrackerService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
PromiseTrackerService.ctorParameters = function () { return [
{ type: ApplicationRef }
]; };
return PromiseTrackerService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var inactiveStyle = style({
opacity: 0
});
/** @type {?} */
var timing = '.3s ease';
var LoadingBackdropComponent = /** @class */ (function () {
function LoadingBackdropComponent(tracker) {
this.tracker = tracker;
}
/**
* @return {?}
*/
LoadingBackdropComponent.prototype.isActive = /**
* @return {?}
*/
function () {
return this.tracker.isActive();
};
LoadingBackdropComponent.decorators = [
{ type: Component, args: [{
selector: 'div[bs-loading-backdrop]',
template: "\n <div class=\"ng-busy-backdrop\"\n @fadeInOut\n *ngIf=\"isActive()\">\n </div>\n ",
animations: [
trigger('fadeInOut', [
transition('void => *', [inactiveStyle, animate(timing)]),
transition('* => void', [animate(timing, inactiveStyle)])
])
]
}] }
];
/** @nocollapse */
LoadingBackdropComponent.ctorParameters = function () { return [
{ type: PromiseTrackerService }
]; };
return LoadingBackdropComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var inactiveStyle$1 = style({
opacity: 0,
transform: 'translateY(-40px)'
});
/** @type {?} */
var timing$1 = '.3s ease';
var LoadingComponent = /** @class */ (function () {
function LoadingComponent(tracker) {
this.tracker = tracker;
}
/**
* @return {?}
*/
LoadingComponent.prototype.ngDoCheck = /**
* @return {?}
*/
function () {
if (this.message === this.lastMessage) {
return;
}
this.lastMessage = this.message;
};
/**
* @return {?}
*/
LoadingComponent.prototype.isActive = /**
* @return {?}
*/
function () {
return this.tracker.isActive();
};
LoadingComponent.decorators = [
{ type: Component, args: [{
selector: 'div[bs-loading]',
template: "\n\n\n<div [class]=\"wrapperClass\" *ngIf=\"isActive()\" @flyInOut>\n <div class=\"ng-busy-default-wrapper\">\n <div class=\"ng-busy-default-sign\">\n <!-- <div class=\"ng-busy-default-spinner\">\n <div class=\"bar1\"></div>\n <div class=\"bar2\"></div>\n <div class=\"bar3\"></div>\n <div class=\"bar4\"></div>\n <div class=\"bar5\"></div>\n <div class=\"bar6\"></div>\n <div class=\"bar7\"></div>\n <div class=\"bar8\"></div>\n <div class=\"bar9\"></div>\n <div class=\"bar10\"></div>\n <div class=\"bar11\"></div>\n <div class=\"bar12\"></div>\n </div> -->\n <div style=\"display: flex;align-items: center;\">\n <div class=\"lds-css ng-scope\"><div style=\"width:100%;height:100%\" class=\"lds-bars\"><div></div><div></div><div></div><div></div></div><style type=\"text/css\">@keyframes lds-bars {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n 100% {\n opacity: 1;\n }\n }\n @-webkit-keyframes lds-bars {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n 100% {\n opacity: 1;\n }\n }\n .lds-bars {\n position: relative;\n }\n .lds-bars div {\n position: absolute;\n width: 30px;\n height: 80px;\n top: 60px;\n -webkit-animation: lds-bars 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n animation: lds-bars 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n }\n .lds-bars div:nth-child(1) {\n left: 25px;\n background: #ff5a29;\n -webkit-animation-delay: -0.48s;\n animation-delay: -0.48s;\n }\n .lds-bars div:nth-child(2) {\n left: 65px;\n background: #ffd000;\n -webkit-animation-delay: -0.32s;\n animation-delay: -0.32s;\n }\n .lds-bars div:nth-child(3) {\n left: 105px;\n background: #68c578;\n -webkit-animation-delay: -0.16s;\n animation-delay: -0.16s;\n }\n .lds-bars div:nth-child(4) {\n left: 145px;\n background: #1fb9ec;\n }\n .lds-bars {\n width: 50px !important;\n height: 50px !important;\n -webkit-transform: translate(-25px, -25px) scale(0.25) translate(25px, 25px);\n transform: translate(-25px, -25px) scale(0.25) translate(25px, 25px);\n }\n </style></div>\n\n\n\n <div class=\"ng-busy-default-text\">{{message}}</div>\n </div>\n </div>\n </div>\n</div>\n",
animations: [
trigger('flyInOut', [
transition('void => *', [inactiveStyle$1, animate(timing$1)]),
transition('* => void', [animate(timing$1, inactiveStyle$1)])
])
],
encapsulation: ViewEncapsulation.None,
styles: [".ng-busy,.ng-busy>*,.ng-busy>ng-component>*{position:absolute;top:0;left:0;right:0;bottom:0}.ng-busy-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;opacity:.7}.ng-busy-default-wrapper{text-align:center}.ng-busy-default-sign{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-block;z-index:1;padding:12px 14px;border:none;border-top:0;border-radius:0 0 4px 4px;box-shadow:0 0 0 rgba(255,255,255,.1);background:0 0;color:#333;width:-webkit-max-content;width:-moz-max-content;width:max-content}.ng-busy-default-text{display:inline-block;margin-left:6px;max-width:400px;font-size:14px;text-align:left}.ng-busy-default-spinner{position:relative;display:inline-block;width:25px;height:25px;vertical-align:middle}.ng-busy-default-spinner div{position:absolute;left:44.5%;top:37%;width:10%;height:26%;background:#666;border-radius:50px;box-shadow:0 0 3px rgba(0,0,0,.2);opacity:0;-webkit-animation:1s linear infinite busy-spinner-anim;animation:1s linear infinite busy-spinner-anim}.ng-busy-default-spinner .bar1{transform:rotate(0) translate(0,-142%);-webkit-animation-delay:-1s;animation-delay:-1s}.ng-busy-default-spinner .bar2{transform:rotate(30deg) translate(0,-142%);-webkit-animation-delay:-.91666667s;animation-delay:-.91666667s}.ng-busy-default-spinner .bar3{transform:rotate(60deg) translate(0,-142%);-webkit-animation-delay:-.83333333s;animation-delay:-.83333333s}.ng-busy-default-spinner .bar4{transform:rotate(90deg) translate(0,-142%);-webkit-animation-delay:-.75s;animation-delay:-.75s}.ng-busy-default-spinner .bar5{transform:rotate(120deg) translate(0,-142%);-webkit-animation-delay:-.66666667s;animation-delay:-.66666667s}.ng-busy-default-spinner .bar6{transform:rotate(150deg) translate(0,-142%);-webkit-animation-delay:-.58333333s;animation-delay:-.58333333s}.ng-busy-default-spinner .bar7{transform:rotate(180deg) translate(0,-142%);-webkit-animation-delay:-.5s;animation-delay:-.5s}.ng-busy-default-spinner .bar8{transform:rotate(210deg) translate(0,-142%);-webkit-animation-delay:-.41666667s;animation-delay:-.41666667s}.ng-busy-default-spinner .bar9{transform:rotate(240deg) translate(0,-142%);-webkit-animation-delay:-.33333333s;animation-delay:-.33333333s}.ng-busy-default-spinner .bar10{transform:rotate(270deg) translate(0,-142%);-webkit-animation-delay:-.25s;animation-delay:-.25s}.ng-busy-default-spinner .bar11{transform:rotate(300deg) translate(0,-142%);-webkit-animation-delay:-.16666667s;animation-delay:-.16666667s}.ng-busy-default-spinner .bar12{transform:rotate(330deg) translate(0,-142%);-webkit-animation-delay:-83.33333ms;animation-delay:-83.33333ms}@-webkit-keyframes busy-spinner-anim{from{opacity:1}to{opacity:.25}}@keyframes busy-spinner-anim{from{opacity:1}to{opacity:.25}}"]
}] }
];
/** @nocollapse */
LoadingComponent.ctorParameters = function () { return [
{ type: PromiseTrackerService }
]; };
return LoadingComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var LoadingConfig = /** @class */ (function () {
function LoadingConfig(config) {
if (config === void 0) { config = {}; }
for (var option in BUSY_CONFIG_DEFAULTS) {
this[option] =
config[option] != null ? config[option] : BUSY_CONFIG_DEFAULTS[option];
}
}
return LoadingConfig;
}());
/** @type {?} */
var BUSY_CONFIG_DEFAULTS = {
delay: 0,
minDuration: 0,
backdrop: true,
message: 'Please wait...',
wrapperClass: 'ng-busy',
onActivateTick: false,
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var LoadingService = /** @class */ (function () {
function LoadingService(_applicationRef, _injector, tracker, _componentFactoryResolver) {
this._applicationRef = _applicationRef;
this._injector = _injector;
this.tracker = tracker;
this._backdropFactory = _componentFactoryResolver.resolveComponentFactory(LoadingBackdropComponent);
this._loadingFactory = _componentFactoryResolver.resolveComponentFactory(LoadingComponent);
/** @type {?} */
var options = this.normalizeOptions(null);
this.tracker.reset({
promiseList: options.busy,
delay: options.delay,
minDuration: options.minDuration,
onActivateTick: options.onActivateTick,
});
/** @type {?} */
var containerEl = document.querySelector('body');
/** @type {?} */
var backdropCmptRef;
/** @type {?} */
var loadingCmptRef;
// create backdrop
backdropCmptRef = this._backdropFactory.create(this._injector);
this._applicationRef.attachView(backdropCmptRef.hostView);
containerEl.appendChild(backdropCmptRef.location.nativeElement);
// create loading
loadingCmptRef = this._loadingFactory.create(this._injector);
this._applicationRef.attachView(loadingCmptRef.hostView);
containerEl.appendChild(loadingCmptRef.location.nativeElement);
/** @type {?} */
var instance = loadingCmptRef.instance;
instance.message = options.message;
instance.wrapperClass = options.wrapperClass;
this.backdropCmptRef = backdropCmptRef;
this.loadingCmptRef = loadingCmptRef;
((/** @type {?} */ (this.backdropCmptRef.location.nativeElement))).style.position = 'relative';
((/** @type {?} */ (this.loadingCmptRef.location.nativeElement))).style.position = 'relative';
// this.backdropCmptRef.location.nativeElement.style.zIndex = 2000;
// this.loadingCmptRef.location.nativeElement.style.zIndex = 2001;
}
/**
* @param {?=} options
* @return {?}
*/
LoadingService.prototype.open = /**
* @param {?=} options
* @return {?}
*/
function (options) {
if (options === void 0) { options = undefined; }
options = this.normalizeOptions(options);
if (options.busy.length === 0) {
this._fakeBusy = new Subject().subscribe();
this._fakeBusy = new Promise((/**
* @param {?} resolve
* @return {?}
*/
function (resolve) {
if (options.maxDuration)
setTimeout((/**
* @return {?}
*/
function () { return resolve(); }), options.maxDuration);
}));
options.busy.push(this._fakeBusy);
}
else if (this._fakeBusy) {
this._fakeBusy = null;
}
this.tracker.reset({
promiseList: options.busy,
delay: options.delay,
minDuration: options.minDuration,
onActivateTick: options.onActivateTick,
});
/** @type {?} */
var instance = this.loadingCmptRef.instance;
instance.message = options.message;
instance.wrapperClass = options.wrapperClass;
if (options.onActivateTick === true)
this._applicationRef.tick();
this.zIndex(options.zIndex);
return this.loadingCmptRef;
};
/**
* @param {?} options
* @return {?}
*/
LoadingService.prototype.update = /**
* @param {?} options
* @return {?}
*/
function (options) {
options = this.normalizeOptions(options);
/** @type {?} */
var instance = this.loadingCmptRef.instance;
if (options.message)
instance.message = options.message;
if (options.wrapperClass)
instance.wrapperClass = options.wrapperClass;
if (options.onActivateTick === true)
this._applicationRef.tick();
return this.loadingCmptRef;
};
/**
* @return {?}
*/
LoadingService.prototype.close = /**
* @return {?}
*/
function () {
if (this._fakeBusy)
this._fakeBusy = null;
/** @type {?} */
var options = this.normalizeOptions(undefined);
this.tracker.reset({
promiseList: options.busy,
delay: options.delay,
minDuration: options.minDuration,
onActivateTick: options.onActivateTick,
});
/** @type {?} */
var instance = this.loadingCmptRef.instance;
instance.message = options.message;
instance.wrapperClass = options.wrapperClass;
if (options.onActivateTick === true)
this._applicationRef.tick();
return this.loadingCmptRef;
};
/**
* @param {?=} zIndex
* @return {?}
*/
LoadingService.prototype.zIndex = /**
* @param {?=} zIndex
* @return {?}
*/
function (zIndex) {
if (zIndex === void 0) { zIndex = 2000; }
this.backdropCmptRef.location.nativeElement.style.zIndex = zIndex;
this.loadingCmptRef.location.nativeElement.style.zIndex = zIndex + 1;
};
/**
* @private
* @param {?} options
* @return {?}
*/
LoadingService.prototype.normalizeOptions = /**
* @private
* @param {?} options
* @return {?}
*/
function (options) {
if (!options) {
options = { busy: null };
}
else if (Array.isArray(options) ||
options instanceof Promise ||
options instanceof Subscription) {
options = { busy: options };
}
options = Object.assign({}, new LoadingConfig(), options);
if (!Array.isArray(options.busy)) {
options.busy = options.busy ? [options.busy] : [];
}
return options;
};
LoadingService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
LoadingService.ctorParameters = function () { return [
{ type: ApplicationRef },
{ type: Injector },
{ type: PromiseTrackerService },
{ type: ComponentFactoryResolver }
]; };
return LoadingService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var LoadingModule = /** @class */ (function () {
function LoadingModule() {
}
/**
* @param {?=} config
* @return {?}
*/
LoadingModule.forRoot = /**
* @param {?=} config
* @return {?}
*/
function (config) {
if (config === void 0) { config = {}; }
return {
ngModule: LoadingModule,
providers: [
LoadingService,
PromiseTrackerService,
{ provide: LoadingConfig, useValue: config }
]
};
};
LoadingModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [LoadingComponent, LoadingBackdropComponent],
entryComponents: [LoadingComponent, LoadingBackdropComponent]
},] }
];
return LoadingModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { LoadingService, PromiseTrackerService, LoadingModule, LoadingBackdropComponent as ɵb, LoadingConfig as ɵc, LoadingComponent as ɵa };
//# sourceMappingURL=schoolbelle-common-loading.js.map