ng2-modal-dialog
Version:
AngularX Factory Made Modal Dialog
186 lines (180 loc) • 8.12 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/Rx')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs/Rx'], factory) :
(factory((global.ng = global.ng || {}, global.ng.modal = global.ng.modal || {}, global.ng.modal.dialog = {}),global.core,global.Rx));
}(this, (function (exports,core,Rx) { 'use strict';
// 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 Rx.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 = core.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 Rx.ReplaySubject();
var childInjector = core.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: core.Injectable },
];
/** @nocollapse */
ModalService.ctorParameters = function () { return [
{ type: core.Compiler, },
]; };
return 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: core.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: core.Injector, },
]; };
ModalPlaceholderComponent.propDecorators = {
'viewContainerRef': [{ type: core.ViewChild, args: ["approot", { read: core.ViewContainerRef },] },],
};
return 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;
}());
// module definition
var ModalModule = /** @class */ (function () {
function ModalModule() {
}
ModalModule.decorators = [
{ type: core.NgModule, args: [{
declarations: [ModalPlaceholderComponent],
exports: [ModalPlaceholderComponent],
providers: [ModalService]
},] },
];
/** @nocollapse */
ModalModule.ctorParameters = function () { return []; };
return ModalModule;
}());
exports.ModalModule = ModalModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));