Skip to content

GitLab

N
Ng2 Bootstrap Modal
Commit fff6f02f authored by avovchuk's avatar avovchuk
Browse files
Options

v1 changes

parent a1fba3e6
Show whitespace changes
Inline Side-by-side
Showing with 229 additions and 51 deletions
.gitignore
View file @ fff6f02f
......@@ -5,6 +5,9 @@ npm-debug.log
# IDE #
.idea/
# Compiled code #
dist
# Demo app #
demo/node_modules/
README.md
View file @ fff6f02f
#Angular2 Bootstrap Modal Service
It is a library to make usage of bootstrap modal plugin easier in Angular2.
Create clear and reusable modal components.
It makes managing dialogs painless and more clear.
Library does not use bootstrap js, only css.
##Installation
```npm
npm install ng2-bootstrap-modal
```
See [Live Demo](https://plnkr.co/edit/nYqPPQe58E2RW8C2yz49)
See [Live Demo](https://plnkr.co/nYqPPQe58E2RW8C2yz49)
###Without bootstrap?
Yes, you can create your own css. Just write css for .modal and .modal-dialog classes.
```css
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.fade {
opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}
.fade.in {
opacity: 1;
}
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
.modal.in .modal-dialog {
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
}
.modal.fade .modal-dialog {
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
-webkit-transform: translate(0,-25%);
-ms-transform: translate(0,-25%);
-o-transform: translate(0,-25%);
transform: translate(0,-25%);
}
@media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
}
```
##Quickstart
### Step 1. add bootstrap css
### Step 1. import '**BootstrapModalModule**' module
app.module.ts:
......
dist/bootstrap-modal.module.js.map
View file @ fff6f02f
{"version":3,"file":"bootstrap-modal.module.js","sourceRoot":"","sources":["../src/bootstrap-modal.module.ts"],"names":[],"mappings":";;;;;;;AAAA,sCAAyC;AACzC,0CAA+C;AAC/C,qEAAkE;AAClE,uEAAoE;AACpE,mDAAiD;AAkBjD,IAAa,oBAAoB;IAAjC;IAAmC,CAAC;IAAD,2BAAC;AAAD,CAAC,AAApC,IAAoC;AAAvB,oBAAoB;IAhBhC,eAAQ,CAAC;QACN,YAAY,EAAE;YACV,+CAAqB;YACrB,iDAAsB;SACzB;QACD,SAAS,EAAE;YACP,8BAAa;SAChB;QACD,OAAO,EAAE;YACL,qBAAY;SACf;QACD,eAAe,EAAE;YACb,+CAAqB;YACrB,iDAAsB;SACzB;KACJ,CAAC;GACW,oBAAoB,CAAG;AAAvB,oDAAoB"}
\ No newline at end of file
{"version":3,"file":"bootstrap-modal.module.js","sourceRoot":"","sources":["../src/bootstrap-modal.module.ts"],"names":[],"mappings":";;;;;;;AAAA,sCAAyC;AACzC,0CAA+C;AAC/C,qEAAkE;AAClE,uEAAoE;AACpE,mDAAiD;AAiBjD,IAAa,oBAAoB;IAAjC;IAAmC,CAAC;IAAD,2BAAC;AAAD,CAAC,AAApC,IAAoC;AAAvB,oBAAoB;IAhBhC,eAAQ,CAAC;QACN,YAAY,EAAE;YACV,+CAAqB;YACrB,iDAAsB;SACzB;QACD,SAAS,EAAE;YACP,8BAAa;SAChB;QACD,OAAO,EAAE;YACL,qBAAY;SACf;QACD,eAAe,EAAE;YACb,+CAAqB;YACrB,iDAAsB;SACzB;KACJ,CAAC;GACW,oBAAoB,CAAG;AAAvB,oDAAoB"}
\ No newline at end of file
dist/dialog-holder.component.d.ts
View file @ fff6f02f
import { ComponentFactoryResolver, Type } from "@angular/core";
import { DialogComponent } from "./dialog.component";
import { Observable } from "rxjs";
import { DialogOptions } from "./dialog-options";
export declare class DialogHolderComponent {
private resolver;
private element;
dialogs: Array<DialogComponent>;
constructor(resolver: ComponentFactoryResolver);
addDialog(component: Type<DialogComponent>, data?: any, index?: number): Observable<any>;
addDialog(component: Type<DialogComponent>, data?: any, options?: DialogOptions): Observable<any>;
removeDialog(component: DialogComponent): void;
private _removeElement(component);
clear(): void;
}
dist/dialog-holder.component.js
View file @ fff6f02f
......@@ -15,26 +15,36 @@ var DialogHolderComponent = (function () {
this.resolver = resolver;
this.dialogs = [];
}
DialogHolderComponent.prototype.addDialog = function (component, data, index) {
DialogHolderComponent.prototype.addDialog = function (component, data, options) {
var _this = this;
options = options || {};
var factory = this.resolver.resolveComponentFactory(dialog_wrapper_component_1.DialogWrapperComponent);
var componentRef = this.element.createComponent(factory, index);
var componentRef = this.element.createComponent(factory, options.index);
var dialogWrapper = componentRef.instance;
var _component = dialogWrapper.addComponent(component);
if (typeof (index) !== 'undefined') {
this.dialogs.splice(index, 0, _component);
if (typeof (options.index) !== 'undefined') {
this.dialogs.splice(options.index, 0, _component);
}
else {
this.dialogs.push(_component);
}
setTimeout(function () {
dialogWrapper.container.nativeElement.classList.add('in');
dialogWrapper.container.nativeElement.classList.add('show');
});
if (options.autoCloseTimeout) {
setTimeout(function () {
_this.removeDialog(_component);
}, options.autoCloseTimeout);
}
if (options.closeByClickingOutside) {
dialogWrapper.closeByClickOutside();
}
return _component.fillData(data);
};
DialogHolderComponent.prototype.removeDialog = function (component) {
var _this = this;
var element = component.wrapper.container.nativeElement;
element.classList.remove('in');
element.classList.remove('show');
setTimeout(function () {
_this._removeElement(component);
}, 300);
......@@ -46,6 +56,10 @@ var DialogHolderComponent = (function () {
this.dialogs.splice(index, 1);
}
};
DialogHolderComponent.prototype.clear = function () {
this.element.clear();
this.dialogs = [];
};
return DialogHolderComponent;
}());
__decorate([
......
dist/dialog-holder.component.js.map
View file @ fff6f02f
{"version":3,"file":"dialog-holder.component.js","sourceRoot":"","sources":["../src/dialog-holder.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,sCAGuB;AAEvB,uEAAkE;AAOlE,IAAa,qBAAqB;IAkBhC,+BAAoB,QAAkC;QAAlC,aAAQ,GAAR,QAAQ,CAA0B;QANtD,YAAO,GAA2B,EAAE,CAAC;IAMoB,CAAC;IAS1D,yCAAS,GAAT,UAAU,SAA+B,EAAE,IAAS,EAAE,KAAa;QACjE,IAAI,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,uBAAuB,CAAC,iDAAsB,CAAC,CAAC;QAC5E,IAAI,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAChE,IAAI,aAAa,GAAoD,YAAY,CAAC,QAAQ,CAAC;QAC3F,IAAI,UAAU,GAAqB,aAAa,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACzE,EAAE,CAAA,CAAC,OAAM,CAAC,KAAK,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC;YACjC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC;QAC5C,CAAC;QACD,IAAI,CAAC,CAAC;YACJ,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAChC,CAAC;QACD,UAAU,CAAC;YACT,aAAa,CAAC,SAAS,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QAC3D,CAAC,CAAC,CAAC;QACH,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAMD,4CAAY,GAAZ,UAAa,SAAyB;QAAtC,iBAOC;QANC,IAAI,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,aAAa,CAAC;QAExD,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC/B,UAAU,CAAC;YACP,KAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QACnC,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEO,8CAAc,GAAtB,UAAuB,SAAS;QAC9B,IAAI,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QAC5C,EAAE,CAAA,CAAC,KAAK,GAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACZ,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC3B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAChC,CAAC;IACH,CAAC;IACH,4BAAC;AAAD,CAAC,AAhED,IAgEC;AA1DiD;IAA/C,gBAAS,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,uBAAgB,EAAC,CAAC;8BAAkB,uBAAgB;sDAAC;AANvE,qBAAqB;IAJjC,gBAAS,CAAC;QACT,QAAQ,EAAE,eAAe;QACzB,QAAQ,EAAE,gCAAgC;KAC3C,CAAC;qCAmB8B,+BAAwB;GAlB3C,qBAAqB,CAgEjC;AAhEY,sDAAqB"}
\ No newline at end of file
{"version":3,"file":"dialog-holder.component.js","sourceRoot":"","sources":["../src/dialog-holder.component.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
dist/dialog-holder.component.metadata.json
View file @ fff6f02f
[{"__symbolic":"module","version":3,"metadata":{"DialogHolderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dialog-holder","template":"<template #element></template>"}]}],"members":{"element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["element",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"}]}],"addDialog":[{"__symbolic":"method"}],"removeDialog":[{"__symbolic":"method"}],"_removeElement":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DialogHolderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dialog-holder","template":"<template #element></template>"}]}],"members":{"element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["element",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"}]}],"addDialog":[{"__symbolic":"method"}],"removeDialog":[{"__symbolic":"method"}],"_removeElement":[{"__symbolic":"method"}]}}}}]
\ No newline at end of file
[{"__symbolic":"module","version":3,"metadata":{"DialogHolderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dialog-holder","template":"<template #element></template>"}]}],"members":{"element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["element",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"}]}],"addDialog":[{"__symbolic":"method"}],"removeDialog":[{"__symbolic":"method"}],"_removeElement":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DialogHolderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dialog-holder","template":"<template #element></template>"}]}],"members":{"element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["element",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"}]}],"addDialog":[{"__symbolic":"method"}],"removeDialog":[{"__symbolic":"method"}],"_removeElement":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}]}}}}]
\ No newline at end of file
dist/dialog-wrapper.component.d.ts
View file @ fff6f02f
import { ComponentFactoryResolver, Type } from '@angular/core';
import { DialogComponent } from "./dialog.component";
import { DialogService } from "./dialog.service";
export declare class DialogWrapperComponent {
private resolver;
private dialogService;
private element;
container: any;
private content;
constructor(resolver: ComponentFactoryResolver);
constructor(resolver: ComponentFactoryResolver, dialogService: DialogService);
addComponent(component: Type<DialogComponent>): DialogComponent;
closeByClickOutside(): void;
}
dist/dialog-wrapper.component.js
View file @ fff6f02f
......@@ -9,9 +9,11 @@ var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require("@angular/core");
var dialog_service_1 = require("./dialog.service");
var DialogWrapperComponent = (function () {
function DialogWrapperComponent(resolver) {
function DialogWrapperComponent(resolver, dialogService) {
this.resolver = resolver;
this.dialogService = dialogService;
}
DialogWrapperComponent.prototype.addComponent = function (component) {
var factory = this.resolver.resolveComponentFactory(component);
......@@ -22,6 +24,14 @@ var DialogWrapperComponent = (function () {
this.content.wrapper = this;
return this.content;
};
DialogWrapperComponent.prototype.closeByClickOutside = function () {
var _this = this;
this.container.nativeElement.addEventListener('click', function (event) {
if (event.target == _this.container.nativeElement) {
_this.dialogService.removeDialog(_this.content);
}
}, false);
};
return DialogWrapperComponent;
}());
__decorate([
......@@ -35,9 +45,9 @@ __decorate([
DialogWrapperComponent = __decorate([
core_1.Component({
selector: 'dialog-wrapper',
template: "\n <div #container class=\"modal fade\" style=\"display:block !important;\" role=\"dialog\">\n <div class=\"modal-dialog\">\n <template #element></template>\n </div>\n </div>\n "
template: "\n <div #container class=\"modal fade\" style=\"display:block !important;\" role=\"dialog\">\n <template #element></template>\n </div>\n "
}),
__metadata("design:paramtypes", [core_1.ComponentFactoryResolver])
__metadata("design:paramtypes", [core_1.ComponentFactoryResolver, dialog_service_1.DialogService])
], DialogWrapperComponent);
exports.DialogWrapperComponent = DialogWrapperComponent;
//# sourceMappingURL=dialog-wrapper.component.js.map
\ No newline at end of file
dist/dialog-wrapper.component.js.map
View file @ fff6f02f
{"version":3,"file":"dialog-wrapper.component.js","sourceRoot":"","sources":["../src/dialog-wrapper.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,sCAEuB;AAavB,IAAa,sBAAsB;IAuBjC,gCAAoB,QAAkC;QAAlC,aAAQ,GAAR,QAAQ,CAA0B;IAAG,CAAC;IAO1D,6CAAY,GAAZ,UAAa,SAAgC;QAC3C,IAAI,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,uBAAuB,CAAC,SAAS,CAAC,CAAC;QAC/D,IAAI,QAAQ,GAAG,yBAAkB,CAAC,qBAAqB,CAAC,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACnF,IAAI,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC5C,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAC3C,IAAI,CAAC,OAAO,GAAqB,YAAY,CAAC,QAAQ,CAAC;QACvD,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IACH,6BAAC;AAAD,CAAC,AAvCD,IAuCC;AAjCiD;IAA/C,gBAAS,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,uBAAgB,EAAC,CAAC;8BAAkB,uBAAgB;uDAAC;AAK1D;IAAvB,gBAAS,CAAC,WAAW,CAAC;;yDAAkB;AAX9B,sBAAsB;IAVlC,gBAAS,CAAC;QACT,QAAQ,EAAE,gBAAgB;QAC1B,QAAQ,EAAE,iMAMT;KACF,CAAC;qCAwB8B,+BAAwB;GAvB3C,sBAAsB,CAuClC;AAvCY,wDAAsB"}
\ No newline at end of file
{"version":3,"file":"dialog-wrapper.component.js","sourceRoot":"","sources":["../src/dialog-wrapper.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,sCAEuB;AAEvB,mDAA+C;AAU/C,IAAa,sBAAsB;IAwBjC,gCAAoB,QAAkC,EAAU,aAA4B;QAAxE,aAAQ,GAAR,QAAQ,CAA0B;QAAU,kBAAa,GAAb,aAAa,CAAe;IAAG,CAAC;IAOhG,6CAAY,GAAZ,UAAa,SAAgC;QAC3C,IAAI,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,uBAAuB,CAAC,SAAS,CAAC,CAAC;QAC/D,IAAI,QAAQ,GAAG,yBAAkB,CAAC,qBAAqB,CAAC,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACnF,IAAI,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC5C,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAC3C,IAAI,CAAC,OAAO,GAAqB,YAAY,CAAC,QAAQ,CAAC;QACvD,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,oDAAmB,GAAnB;QAAA,iBAMC;QALC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,gBAAgB,CAAC,OAAO,EAAE,UAAC,KAAK;YAC3D,EAAE,CAAA,CAAC,KAAK,CAAC,MAAM,IAAI,KAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC;gBAChD,KAAI,CAAC,aAAa,CAAC,YAAY,CAAC,KAAI,CAAC,OAAO,CAAC,CAAC;YAChD,CAAC;QACH,CAAC,EAAE,KAAK,CAAC,CAAC;IACZ,CAAC;IACH,6BAAC;AAAD,CAAC,AAhDD,IAgDC;AA1CiD;IAA/C,gBAAS,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,uBAAgB,EAAC,CAAC;8BAAkB,uBAAgB;uDAAC;AAK1D;IAAvB,gBAAS,CAAC,WAAW,CAAC;;yDAAkB;AAX9B,sBAAsB;IARlC,gBAAS,CAAC;QACT,QAAQ,EAAE,gBAAgB;QAC1B,QAAQ,EAAE,mJAIT;KACF,CAAC;qCAyB8B,+BAAwB,EAAyB,8BAAa;GAxBjF,sBAAsB,CAgDlC;AAhDY,wDAAsB"}
\ No newline at end of file
dist/dialog-wrapper.component.metadata.json
View file @ fff6f02f
[{"__symbolic":"module","version":3,"metadata":{"DialogWrapperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dialog-wrapper","template":"\n <div #container class=\"modal fade\" style=\"display:block !important;\" role=\"dialog\">\n <div class=\"modal-dialog\">\n <template #element></template>\n </div>\n </div>\n "}]}],"members":{"element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["element",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}}]}]}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"}]}],"addComponent":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DialogWrapperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dialog-wrapper","template":"\n <div #container class=\"modal fade\" style=\"display:block !important;\" role=\"dialog\">\n <div class=\"modal-dialog\">\n <template #element></template>\n </div>\n </div>\n "}]}],"members":{"element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["element",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}}]}]}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"}]}],"addComponent":[{"__symbolic":"method"}]}}}}]
\ No newline at end of file
[{"__symbolic":"module","version":3,"metadata":{"DialogWrapperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dialog-wrapper","template":"\n <div #container class=\"modal fade\" style=\"display:block !important;\" role=\"dialog\">\n <template #element></template>\n </div>\n "}]}],"members":{"element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["element",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}}]}]}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"}]}],"addComponent":[{"__symbolic":"method"}],"closeByClickOutside":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DialogWrapperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dialog-wrapper","template":"\n <div #container class=\"modal fade\" style=\"display:block !important;\" role=\"dialog\">\n <template #element></template>\n </div>\n "}]}],"members":{"element":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["element",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}}]}]}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["container"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"./dialog.service","name":"DialogService"}]}],"addComponent":[{"__symbolic":"method"}],"closeByClickOutside":[{"__symbolic":"method"}]}}}}]
\ No newline at end of file
dist/dialog.component.js.map
View file @ fff6f02f
{"version":3,"file":"dialog.component.js","sourceRoot":"","sources":["../src/dialog.component.ts"],"names":[],"mappings":";AAEA,6BAA0C;AAI1C;IAqBE,yBAAsB,aAA4B;QAA5B,kBAAa,GAAb,aAAa,CAAe;IAAG,CAAC;IAOtD,kCAAQ,GAAR,UAAS,IAAa;QAAtB,iBAYC;QAZQ,qBAAA,EAAA,SAAa;QACpB,IAAI,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,GAAG,CAAA,CAAC,IAAI,CAAC,GAAC,CAAC,EAAE,QAAM,GAAC,IAAI,CAAC,MAAM,EAAE,CAAC,GAAC,QAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC/C,IAAI,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;YAClB,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;QACxB,CAAC;QACD,MAAM,CAAC,iBAAU,CAAC,MAAM,CAAC,UAAC,QAAQ;YAChC,KAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACzB,MAAM,CAAC;gBACL,KAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC,CAAA;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAKD,+BAAK,GAAL;QACE,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;IAKD,qCAAW,GAAX;QACE,EAAE,CAAA,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;YACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IACH,sBAAC;AAAD,CAAC,AAzDD,IAyDC;AAzDqB,0CAAe"}
\ No newline at end of file
{"version":3,"file":"dialog.component.js","sourceRoot":"","sources":["../src/dialog.component.ts"],"names":[],"mappings":";AAEA,6BAA0C;AAI1C;IAsBE,yBAAsB,aAA4B;QAA5B,kBAAa,GAAb,aAAa,CAAe;IAAG,CAAC;IAOtD,kCAAQ,GAAR,UAAS,IAAa;QAAtB,iBAYC;QAZQ,qBAAA,EAAA,SAAa;QACpB,IAAI,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,GAAG,CAAA,CAAC,IAAI,CAAC,GAAC,CAAC,EAAE,QAAM,GAAC,IAAI,CAAC,MAAM,EAAE,CAAC,GAAC,QAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC/C,IAAI,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;YAClB,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;QACxB,CAAC;QACD,MAAM,CAAC,iBAAU,CAAC,MAAM,CAAC,UAAC,QAAQ;YAChC,KAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACzB,MAAM,CAAC;gBACL,KAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC,CAAA;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAKD,+BAAK,GAAL;QACE,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;IAMD,qCAAW,GAAX;QACE,EAAE,CAAA,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;YACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IACH,sBAAC;AAAD,CAAC,AA3DD,IA2DC;AA3DqB,0CAAe"}
\ No newline at end of file
dist/dialog.service.d.ts
View file @ fff6f02f
import { ComponentFactoryResolver, ApplicationRef, Injector, Type } from "@angular/core";
import { DialogComponent } from "./dialog.component";
import { Observable } from "rxjs";
import { DialogOptions } from "./dialog-options";
export declare class DialogService {
private resolver;
private applicationRef;
private injector;
private dialogHolderComponent;
private container;
constructor(resolver: ComponentFactoryResolver, applicationRef: ApplicationRef, injector: Injector);
addDialog(component: Type<DialogComponent>, data?: any, index?: number): Observable<any>;
setCointainer(container: Element): void;
addDialog(component: Type<DialogComponent>, data?: any, options?: DialogOptions): Observable<any>;
removeDialog(component: DialogComponent): void;
removeAll(): void;
private createDialogHolder();
}
dist/dialog.service.js
View file @ fff6f02f
......@@ -16,11 +16,18 @@ var DialogService = (function () {
this.applicationRef = applicationRef;
this.injector = injector;
}
DialogService.prototype.addDialog = function (component, data, index) {
DialogService.prototype.setCointainer = function (container) {
if (this.dialogHolderComponent) {
throw new Error('Dialog container already installed, try set container before create first dialog');
}
this.container = container;
};
;
DialogService.prototype.addDialog = function (component, data, options) {
if (!this.dialogHolderComponent) {
this.dialogHolderComponent = this.createDialogHolder();
}
return this.dialogHolderComponent.addDialog(component, data, index);
return this.dialogHolderComponent.addDialog(component, data, options);
};
DialogService.prototype.removeDialog = function (component) {
if (!this.dialogHolderComponent) {
......@@ -28,18 +35,23 @@ var DialogService = (function () {
}
this.dialogHolderComponent.removeDialog(component);
};
DialogService.prototype.removeAll = function () {
this.dialogHolderComponent.clear();
};
DialogService.prototype.createDialogHolder = function () {
var _this = this;
var componentFactory = this.resolver.resolveComponentFactory(dialog_holder_component_1.DialogHolderComponent);
var componentRef = componentFactory.create(this.injector);
var componentRootNode = componentRef.hostView.rootNodes[0];
var componentRootViewConainer = this.applicationRef['_rootComponents'][0];
var rootLocation = componentRootViewConainer.hostView.rootNodes[0];
if (!this.container) {
var componentRootViewContainer = this.applicationRef['_rootComponents'][0];
this.container = componentRootViewContainer.hostView.rootNodes[0];
}
this.applicationRef.attachView(componentRef.hostView);
componentRef.onDestroy(function () {
_this.applicationRef.detachView(componentRef.hostView);
});
rootLocation.appendChild(componentRootNode);
this.container.appendChild(componentRootNode);
return componentRef.instance;
};
return DialogService;
......
dist/dialog.service.js.map
View file @ fff6f02f
{"version":3,"file":"dialog.service.js","sourceRoot":"","sources":["../src/dialog.service.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,sCAEuB;AACvB,qEAAgE;AAKhE,IAAa,aAAa;IAaxB,uBAAoB,QAAkC,EAAU,cAA8B,EAAU,QAAkB;QAAtG,aAAQ,GAAR,QAAQ,CAA0B;QAAU,mBAAc,GAAd,cAAc,CAAgB;QAAU,aAAQ,GAAR,QAAQ,CAAU;IAAG,CAAC;IAS9H,iCAAS,GAAT,UAAU,SAA+B,EAAE,IAAS,EAAE,KAAa;QACjE,EAAE,CAAA,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC;YAC/B,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACzD,CAAC;QACD,MAAM,CAAC,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACtE,CAAC;IAMD,oCAAY,GAAZ,UAAa,SAAyB;QACpC,EAAE,CAAA,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC;YAC/B,MAAM,CAAC;QACT,CAAC;QACD,IAAI,CAAC,qBAAqB,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACrD,CAAC;IAMO,0CAAkB,GAA1B;QAAA,iBAgBC;QAfC,IAAI,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,uBAAuB,CAAC,+CAAqB,CAAC,CAAC;QACpF,IAAI,YAAY,GAAG,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC1D,IAAI,iBAAiB,GAAI,YAAY,CAAC,QAAiC,CAAC,SAAS,CAAC,CAAC,CAAgB,CAAC;QACpG,IAAI,yBAAyB,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1E,IAAI,YAAY,GAAe,yBAAyB,CAAC,QAAiC,CAAC,SAAS,CAAC,CAAC,CAAgB,CAAC;QAEvH,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAEtD,YAAY,CAAC,SAAS,CAAC;YACrB,KAAI,CAAC,cAAc,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;QAEH,YAAY,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAE5C,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC;IAC/B,CAAC;IACH,oBAAC;AAAD,CAAC,AA7DD,IA6DC;AA7DY,aAAa;IADzB,iBAAU,EAAE;qCAcmB,+BAAwB,EAA0B,qBAAc,EAAoB,eAAQ;GAb/G,aAAa,CA6DzB;AA7DY,sCAAa"}
\ No newline at end of file
{"version":3,"file":"dialog.service.js","sourceRoot":"","sources":["../src/dialog.service.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,sCAEuB;AACvB,qEAAgE;AAMhE,IAAa,aAAa;IAcxB,uBAAoB,QAAkC,EAAU,cAA8B,EAAU,QAAkB;QAAtG,aAAQ,GAAR,QAAQ,CAA0B;QAAU,mBAAc,GAAd,cAAc,CAAgB;QAAU,aAAQ,GAAR,QAAQ,CAAU;IAAG,CAAC;IAE9H,qCAAa,GAAb,UAAc,SAAkB;QAC9B,EAAE,CAAA,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC;YAC9B,MAAM,IAAI,KAAK,CAAC,kFAAkF,CAAC,CAAC;QACtG,CAAC;QACD,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IAAA,CAAC;IAQF,iCAAS,GAAT,UAAU,SAA+B,EAAE,IAAS,EAAE,OAAsB;QAC1E,EAAE,CAAA,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC;YAC/B,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACzD,CAAC;QACD,MAAM,CAAC,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;IACxE,CAAC;IAMD,oCAAY,GAAZ,UAAa,SAAyB;QACpC,EAAE,CAAA,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC;YAC/B,MAAM,CAAC;QACT,CAAC;QACD,IAAI,CAAC,qBAAqB,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACrD,CAAC;IAKD,iCAAS,GAAT;QACE,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE,CAAC;IACrC,CAAC;IAMO,0CAAkB,GAA1B;QAAA,iBAkBC;QAhBC,IAAI,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,uBAAuB,CAAC,+CAAqB,CAAC,CAAC;QAEpF,IAAI,YAAY,GAAG,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC1D,IAAI,iBAAiB,GAAI,YAAY,CAAC,QAAiC,CAAC,SAAS,CAAC,CAAC,CAAgB,CAAC;QACpG,EAAE,CAAA,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;YACnB,IAAI,0BAA0B,GAAG,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;YAC3E,IAAI,CAAC,SAAS,GAAI,0BAA0B,CAAC,QAAiC,CAAC,SAAS,CAAC,CAAC,CAAgB,CAAC;QAC7G,CAAC;QACD,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAEtD,YAAY,CAAC,SAAS,CAAC;YACrB,KAAI,CAAC,cAAc,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAE9C,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC;IAC/B,CAAC;IACH,oBAAC;AAAD,CAAC,AA7ED,IA6EC;AA7EY,aAAa;IADzB,iBAAU,EAAE;qCAemB,+BAAwB,EAA0B,qBAAc,EAAoB,eAAQ;GAd/G,aAAa,CA6EzB;AA7EY,sCAAa"}
\ No newline at end of file
dist/dialog.service.metadata.json
View file @ fff6f02f
[{"__symbolic":"module","version":3,"metadata":{"DialogService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"}]}],"addDialog":[{"__symbolic":"method"}],"removeDialog":[{"__symbolic":"method"}],"createDialogHolder":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DialogService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"}]}],"addDialog":[{"__symbolic":"method"}],"removeDialog":[{"__symbolic":"method"}],"createDialogHolder":[{"__symbolic":"method"}]}}}}]
\ No newline at end of file
[{"__symbolic":"module","version":3,"metadata":{"DialogService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"}]}],"setCointainer":[{"__symbolic":"method"}],"addDialog":[{"__symbolic":"method"}],"removeDialog":[{"__symbolic":"method"}],"removeAll":[{"__symbolic":"method"}],"createDialogHolder":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DialogService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"}]}],"setCointainer":[{"__symbolic":"method"}],"addDialog":[{"__symbolic":"method"}],"removeDialog":[{"__symbolic":"method"}],"removeAll":[{"__symbolic":"method"}],"createDialogHolder":[{"__symbolic":"method"}]}}}}]
\ No newline at end of file
dist/index.d.ts
View file @ fff6f02f
export { BootstrapModalModule } from './bootstrap-modal.module';
export { DialogComponent } from './dialog.component';
export { DialogService } from './dialog.service';
export { DialogOptions } from './dialog-options';
export { dialogProvider } from './dialog.provider';
dist/index.js
View file @ fff6f02f
......@@ -5,4 +5,6 @@ var dialog_component_1 = require("./dialog.component");
exports.DialogComponent = dialog_component_1.DialogComponent;
var dialog_service_1 = require("./dialog.service");
exports.DialogService = dialog_service_1.DialogService;
var dialog_provider_1 = require("./dialog.provider");
exports.dialogProvider = dialog_provider_1.dialogProvider;
//# sourceMappingURL=index.js.map
\ No newline at end of file
dist/index.js.map
View file @ fff6f02f
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,mEAA6D;AAArD,wDAAA,oBAAoB,CAAA;AAC5B,uDAAkD;AAA1C,6CAAA,eAAe,CAAA;AACvB,mDAA8C;AAAtC,yCAAA,aAAa,CAAA"}
\ No newline at end of file
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,mEAA6D;AAArD,wDAAA,oBAAoB,CAAA;AAC5B,uDAAkD;AAA1C,6CAAA,eAAe,CAAA;AACvB,mDAA8C;AAAtC,yCAAA,aAAa,CAAA;AAErB,qDAAiD;AAAzC,2CAAA,cAAc,CAAA"}
\ No newline at end of file
dist/index.metadata.json
View file @ fff6f02f
[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./bootstrap-modal.module","export":["BootstrapModalModule"]},{"from":"./dialog.component","export":["DialogComponent"]},{"from":"./dialog.service","export":["DialogService"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./bootstrap-modal.module","export":["BootstrapModalModule"]},{"from":"./dialog.component","export":["DialogComponent"]},{"from":"./dialog.service","export":["DialogService"]}]}]
\ No newline at end of file
[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./bootstrap-modal.module","export":["BootstrapModalModule"]},{"from":"./dialog.component","export":["DialogComponent"]},{"from":"./dialog.service","export":["DialogService"]},{"from":"./dialog-options","export":["DialogOptions"]},{"from":"./dialog.provider","export":["dialogProvider"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./bootstrap-modal.module","export":["BootstrapModalModule"]},{"from":"./dialog.component","export":["DialogComponent"]},{"from":"./dialog.service","export":["DialogService"]},{"from":"./dialog-options","export":["DialogOptions"]},{"from":"./dialog.provider","export":["dialogProvider"]}]}]
\ No newline at end of file
package.json
View file @ fff6f02f
{
"name": "ng2-bootstrap-modal",
"version": "0.0.3",
"version": "0.0.4",
"description": "It is a library to make managment of bootstrap modal dialogs easier in Angular2",
"main": "index.ts",
"scripts": {
......
src/bootstrap-modal.module.ts
View file @ fff6f02f
......@@ -3,7 +3,6 @@ import { CommonModule } from "@angular/common";
import { DialogHolderComponent } from "./dialog-holder.component";
import { DialogWrapperComponent } from "./dialog-wrapper.component";
import { DialogService } from "./dialog.service";
@NgModule({
declarations: [
DialogHolderComponent,
......
src/dialog-holder.component.ts
View file @ fff6f02f
import {
Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, ReflectiveInjector,
Component, ViewChild, ViewContainerRef, ComponentFactoryResolver,
Type
} from "@angular/core";
import {DialogComponent} from "./dialog.component";
import {DialogWrapperComponent} from "./dialog-wrapper.component";
import {Observable} from "rxjs";
import {DialogOptions} from "./dialog-options";
@Component({
selector: 'dialog-holder',
......@@ -34,23 +35,32 @@ export class DialogHolderComponent {
* Adds dialog
* @param {Type<DialogComponent>} component
* @param {any?} data
* @param {number?}index
* @param {DialogOptions?}options
* @return {Observable<any>}
*/
addDialog(component:Type<DialogComponent>, data?:any, index?:number):Observable<any> {
addDialog(component:Type<DialogComponent>, data?:any, options?:DialogOptions):Observable<any> {
options = options || {};
let factory = this.resolver.resolveComponentFactory(DialogWrapperComponent);
let componentRef = this.element.createComponent(factory, index);
let componentRef = this.element.createComponent(factory, options.index);
let dialogWrapper: DialogWrapperComponent = <DialogWrapperComponent> componentRef.instance;
let _component: DialogComponent = dialogWrapper.addComponent(component);
if(typeof(index) !== 'undefined') {
this.dialogs.splice(index, 0, _component);
if(typeof(options.index) !== 'undefined') {
this.dialogs.splice(options.index, 0, _component);
}
else {
this.dialogs.push(_component);
}
setTimeout(()=>{
dialogWrapper.container.nativeElement.classList.add('in')
dialogWrapper.container.nativeElement.classList.add('show')
});
if(options.autoCloseTimeout) {
setTimeout(()=>{
this.removeDialog(_component);
}, options.autoCloseTimeout);
}
if(options.closeByClickingOutside) {
dialogWrapper.closeByClickOutside();
}
return _component.fillData(data);
}
......@@ -61,7 +71,7 @@ export class DialogHolderComponent {
removeDialog(component:DialogComponent) {
let element = component.wrapper.container.nativeElement;
element.classList.remove('in');
element.classList.remove('show');
setTimeout(() => {
this._removeElement(component);
}, 300);
......@@ -74,4 +84,9 @@ export class DialogHolderComponent {
this.dialogs.splice(index, 1);
}
}
clear() {
this.element.clear();
this.dialogs = [];
}
}
src/dialog-options.ts 0 → 100644
View file @ fff6f02f
export interface DialogOptions {
index?: number;
autoCloseTimeout?: number;
closeByClickingOutside?: boolean;
}
\ No newline at end of file
src/dialog-wrapper.component.ts
View file @ fff6f02f
......@@ -2,15 +2,14 @@ import {
Component, ViewContainerRef, ViewChild, ComponentFactoryResolver, ReflectiveInjector, Type
} from '@angular/core';
import {DialogComponent} from "./dialog.component";
import {DialogService} from "./dialog.service";
@Component({
selector: 'dialog-wrapper',
template: `
<div #container class="modal fade" style="display:block !important;" role="dialog">
<div class="modal-dialog">
<template #element></template>
</div>
</div>
`
})
export class DialogWrapperComponent {
......@@ -35,8 +34,9 @@ export class DialogWrapperComponent {
/**
* Constructor
* @param {ComponentFactoryResolver} resolver
* @param {DialogService} dialogService
*/
constructor(private resolver: ComponentFactoryResolver) {}
constructor(private resolver: ComponentFactoryResolver, private dialogService: DialogService) {}
/**
* Adds content dialog component to wrapper
......@@ -52,6 +52,14 @@ export class DialogWrapperComponent {
this.content.wrapper = this;
return this.content;
}
closeByClickOutside() {
this.container.nativeElement.addEventListener('click', (event)=>{
if(event.target == this.container.nativeElement) {
this.dialogService.removeDialog(this.content);
}
}, false);
}
}
src/dialog.component.ts
View file @ fff6f02f
......@@ -10,6 +10,7 @@ export abstract class DialogComponent implements OnDestroy {
* Observer to return result from dialog
*/
private observer: Observer<any>;
/**
* Dialog result
* @type {any}
......@@ -55,6 +56,7 @@ export abstract class DialogComponent implements OnDestroy {
/**
* OnDestroy handler
* Sends dialog result to observer
*/
ngOnDestroy(): void {
if(this.observer) {
......
src/dialog.provider.ts 0 → 100644
View file @ fff6f02f
import {DialogService} from "./dialog.service";
import {Injector, ApplicationRef, ComponentFactoryResolver} from "@angular/core";
export function dialogProvider(container: HTMLElement) {
return { provide:DialogService,
useFactory: (resolver: ComponentFactoryResolver, applicationRef: ApplicationRef, injector: Injector) => {
const dialogService = new DialogService(resolver, applicationRef, injector);
dialogService.setCointainer(container);
return dialogService;
},
deps: [ComponentFactoryResolver, ApplicationRef, Injector]
}
}
\ No newline at end of file
src/dialog.service.ts
View file @ fff6f02f
......@@ -4,6 +4,7 @@ import {
import {DialogHolderComponent} from "./dialog-holder.component";
import {DialogComponent} from "./dialog.component";
import {Observable} from "rxjs";
import {DialogOptions} from "./dialog-options";
@Injectable()
export class DialogService {
......@@ -13,6 +14,7 @@ export class DialogService {
* @type {DialogHolderComponent}
*/
private dialogHolderComponent : DialogHolderComponent;
private container: Element;
/**
* @param {ComponentFactoryResolver} resolver
......@@ -21,18 +23,24 @@ export class DialogService {
*/
constructor(private resolver: ComponentFactoryResolver, private applicationRef: ApplicationRef, private injector: Injector) {}
setCointainer(container: Element) {
if(this.dialogHolderComponent) {
throw new Error('Dialog container already installed, try set container before create first dialog');
}
this.container = container;
};
/**
* Adds dialog
* @param {Type<DialogComponent>} component
* @param {any?} data
* @param {number?} index
* @param {DialogOptions?} options
* @return {Observable<any>}
*/
addDialog(component:Type<DialogComponent>, data?:any, index?:number): Observable<any> {
addDialog(component:Type<DialogComponent>, data?:any, options?:DialogOptions): Observable<any> {
if(!this.dialogHolderComponent) {
this.dialogHolderComponent = this.createDialogHolder();
}
return this.dialogHolderComponent.addDialog(component, data, index);
return this.dialogHolderComponent.addDialog(component, data, options);
}
/**
......@@ -46,24 +54,33 @@ export class DialogService {
this.dialogHolderComponent.removeDialog(component);
}
/**
* Closes all dialogs
*/
removeAll(): void {
this.dialogHolderComponent.clear();
}
/**
* Creates and add to DOM dialog holder component
* @return {DialogHolderComponent}
*/
private createDialogHolder(): DialogHolderComponent {
let componentFactory = this.resolver.resolveComponentFactory(DialogHolderComponent);
let componentRef = componentFactory.create(this.injector);
let componentRootNode = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
let componentRootViewConainer = this.applicationRef['_rootComponents'][0];
let rootLocation: Element = (componentRootViewConainer.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
if(!this.container) {
let componentRootViewContainer = this.applicationRef['_rootComponents'][0];
this.container = (componentRootViewContainer.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
}
this.applicationRef.attachView(componentRef.hostView);
componentRef.onDestroy(() => {
this.applicationRef.detachView(componentRef.hostView);
});
rootLocation.appendChild(componentRootNode);
this.container.appendChild(componentRootNode);
return componentRef.instance;
}
......
src/index.ts
View file @ fff6f02f
export {BootstrapModalModule} from './bootstrap-modal.module'
export {DialogComponent} from './dialog.component'
export {DialogService} from './dialog.service'
export {DialogOptions} from './dialog-options';
export {dialogProvider} from './dialog.provider';
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment