ng2-modal-dialog
Version:
AngularX Factory Made Modal Dialog
184 lines • 7.99 kB
JavaScript
import { Component, NgModule, ViewChild, ViewContainerRef, Compiler, ReflectiveInjector, Injectable, Injector } from "@angular/core";
import { ReplaySubject } from "rxjs/Rx";
// the modalservice
var ModalService = /** @class */ (function () {
function ModalService(compiler) {
this.compiler = compiler;
this.activeInstances = 0;
}
ModalService.prototype.registerViewContainerRef = function (vcRef) {
this.vcRef = vcRef;
};
ModalService.prototype.registerInjector = function (injector) {
this.injector = injector;
};
ModalService.prototype.create = function (component, parameters) {
var _this = this;
var DynamicModule = /** @class */ (function () {
function DynamicModule() {
}
return DynamicModule;
}());
// we return a stream so we can access the componentref
var componentRef$ = new ReplaySubject();
// compile the component based on its type and
// create a component factory
this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
.then(function (factory) {
// look for the componentfactory in the modulefactory
var componentFactory = factory.componentFactories
.filter(function (item) { return item.componentType === component; })[0];
// the injector will be needed for DI in
// the custom component
var childInjector = ReflectiveInjector
.resolveAndCreate([], _this.injector);
// create the actual component
var componentRef = _this.vcRef
.createComponent(componentFactory, 0, childInjector);
// pass the @Input parameters to the instance
Object.assign(componentRef.instance, parameters);
_this.activeInstances++;
// add a destroy method to the modal instance
componentRef.instance.destroy = function () {
_this.activeInstances--;
// this will destroy the component
componentRef.destroy();
};
// the component is rendered into the ViewContainerRef
// so we can update and complete the stream
componentRef$.next(componentRef);
componentRef$.complete();
}, function (err) {
console.log(err);
});
return componentRef$.asObservable();
};
ModalService.prototype.createFromFactory = function (componentFactory, parameters) {
var _this = this;
var componentRef$ = new ReplaySubject();
var childInjector = ReflectiveInjector.resolveAndCreate([], this.injector);
var componentRef = this.vcRef.createComponent(componentFactory, 0, childInjector);
// pass the @Input parameters to the instance
Object.assign(componentRef.instance, parameters);
this.activeInstances++;
componentRef.instance.destroy = function () {
_this.activeInstances--;
componentRef.destroy();
};
componentRef$.next(componentRef);
componentRef$.complete();
return componentRef$.asObservable();
};
ModalService.decorators = [
{ type: Injectable },
];
/** @nocollapse */
ModalService.ctorParameters = function () { return [
{ type: Compiler, },
]; };
return ModalService;
}());
export { ModalService };
// this is the modal-placeholder, it will contain the created modals
var ModalPlaceholderComponent = /** @class */ (function () {
function ModalPlaceholderComponent(modalService, injector) {
this.modalService = modalService;
this.injector = injector;
}
ModalPlaceholderComponent.prototype.ngOnInit = function () {
this.modalService.registerViewContainerRef(this.viewContainerRef);
this.modalService.registerInjector(this.injector);
};
ModalPlaceholderComponent.decorators = [
{ type: Component, args: [{
selector: "app-root",
template: "<div class='ng2-modal'>" +
"<div class='ng2-modal-content'>" +
"<div #modalplaceholder></div>" +
"</div></div>" +
"<div class='ng2-modal-overlay'></div>",
styles: [
".ng2-modal {" +
"/* This way it could be display flex or grid or whatever also. */" +
"display: block;" +
"/* Probably need media queries here */" +
"width: 600px;" +
"max-width: 100%;" +
"height: 400px;" +
"max - height: 100%;" +
"position: fixed;" +
"z-index: 9000;" +
"left: 50 %;" +
"top: 50 %;" +
"/* Use this for centering if unknown width/height */" +
"transform: translate(-50 %, -50 %);" +
"/* If known, negative margins are probably better (less chance of blurry text). */" +
"/* margin: -200px 0 0 -200px; */" +
"background: white;" +
"box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);" +
"}",
".ng2 - modal - content {" +
"position: absolute;" +
"top: 10 %;" +
"left: 0;" +
"width: 100 %;" +
"height: 100 %;" +
"overflow: auto;" +
"padding: 20px 50px 20px 20px;" +
"}",
".ng2 - modal - overlay {" +
"position: fixed;" +
"top: 0;" +
"left: 0;" +
"width: 100 %;" +
"height: 100 %;" +
"z-index: 8000;" +
"background: rgba(0, 0, 0, 0.6);" +
"}"
]
},] },
];
/** @nocollapse */
ModalPlaceholderComponent.ctorParameters = function () { return [
{ type: ModalService, },
{ type: Injector, },
]; };
ModalPlaceholderComponent.propDecorators = {
'viewContainerRef': [{ type: ViewChild, args: ["approot", { read: ViewContainerRef },] },],
};
return ModalPlaceholderComponent;
}());
export { ModalPlaceholderComponent };
// these 2 items will make sure that you can annotate
// a modalcomponent with @Modal()
var ModalContainer = /** @class */ (function () {
function ModalContainer() {
}
ModalContainer.prototype.closeModal = function () {
this.destroy();
};
return ModalContainer;
}());
export { ModalContainer };
export function Modal() {
return function (target) {
Object.assign(target.prototype, ModalContainer.prototype);
};
}
// module definition
var ModalModule = /** @class */ (function () {
function ModalModule() {
}
ModalModule.decorators = [
{ type: NgModule, args: [{
declarations: [ModalPlaceholderComponent],
exports: [ModalPlaceholderComponent],
providers: [ModalService]
},] },
];
/** @nocollapse */
ModalModule.ctorParameters = function () { return []; };
return ModalModule;
}());
export { ModalModule };
//# sourceMappingURL=modal.module.js.map