ng-modals
Version:
Make a modal in angular extremely easily with ng-modals. Installation to have a modal pop up is quick and easy.
223 lines (216 loc) • 6.77 kB
JavaScript
import { Component, Input, Output, EventEmitter, ViewChild, ComponentFactoryResolver, Directive, ViewContainerRef, HostListener, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgModalsDirective {
/**
* @param {?} containers
*/
constructor(containers) {
this.containers = containers;
}
}
NgModalsDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngmodals]'
},] }
];
/** @nocollapse */
NgModalsDirective.ctorParameters = () => [
{ type: ViewContainerRef }
];
class NgModalsComponent {
/**
* @param {?} componentFactoryResolver
*/
constructor(componentFactoryResolver) {
this.componentFactoryResolver = componentFactoryResolver;
this.close = new EventEmitter();
this.css = {};
this.viewIsInit = false;
this.initialClick = false;
}
/**
* @param {?} targetElement
* @return {?}
*/
onclick(targetElement) {
if (this.initialClick) {
/** @type {?} */
const clickedInside = document.getElementById("modelContainer").contains(targetElement);
if (!clickedInside) {
this.closeModal();
}
}
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
ngOnChanges() {
setTimeout((/**
* @return {?}
*/
() => {
this.loadComponent();
}), 10);
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.loadComponent();
this.viewIsInit = true;
}
/**
* @return {?}
*/
loadComponent() {
if (this.condition) {
/** @type {?} */
let contain = document.getElementById('modelContainer');
if (this.options.ignore) {
if (this.options.width) {
contain.style.width = this.options.width + "vw";
contain.style.left = this.options.left + "vw";
}
if (this.options.height) {
contain.style.height = this.options.height + "vh";
contain.style.top = ((100 - (parseInt(this.options.height))) / 2) + "vh";
}
}
else {
if (this.options.width) {
contain.style.width = this.options.width + "vw";
contain.style.left = ((100 - (parseInt(this.options.width))) / 2) + "vw";
}
if (this.options.height) {
contain.style.height = this.options.height + "vh";
contain.style.top = ((100 - (parseInt(this.options.height))) / 2) + "vh";
}
}
if (this.options.background) {
contain.style.background = this.options.background;
contain.style.boxShadow = 'none';
}
/** @type {?} */
let factory = this.componentFactoryResolver.resolveComponentFactory(this.options.component);
/** @type {?} */
let container = this.modalDirective.containers;
container.clear();
/** @type {?} */
let component = container.createComponent(factory);
((/** @type {?} */ (component.instance))).data = this.options.data;
((/** @type {?} */ (component.instance))).toggleModal.subscribe((/**
* @param {?} data
* @return {?}
*/
data => {
this.closeModal();
}));
document.getElementById("mainWrapper").style.opacity = "1";
this.initialClick = true;
}
}
/**
* @return {?}
*/
closeModal() {
this.initialClick = false;
document.getElementById("mainWrapper").style.opacity = "0";
setTimeout((/**
* @return {?}
*/
() => {
this.close.emit();
}), 200);
}
}
NgModalsComponent.decorators = [
{ type: Component, args: [{
selector: 'ng-modals',
template: `
<div class="mainWrapper" *ngIf="condition" id="mainWrapper">
<div class="modalContainer" id="modelContainer" #container>
<ng-template ngmodals></ng-template>
</div>
</div>
`,
styles: [`
.mainWrapper{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
width: 100%;
height: 100vh;
opacity: 0;
transition: opacity 0.2s ease-out;
z-index: 1000;
}
.modalContainer{
position: fixed;
top: 15vh;
left: 20vw;
width: 60vw;
height: 70vh;
background: white;
border-radius: 32px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
overflow-y: auto;
}
`]
}] }
];
/** @nocollapse */
NgModalsComponent.ctorParameters = () => [
{ type: ComponentFactoryResolver }
];
NgModalsComponent.propDecorators = {
options: [{ type: Input, args: ['options',] }],
condition: [{ type: Input, args: ['status',] }],
close: [{ type: Output, args: ['close',] }],
modalDirective: [{ type: ViewChild, args: [NgModalsDirective,] }],
container: [{ type: ViewChild, args: ['container',] }],
onclick: [{ type: HostListener, args: ['document:click', ['$event.target'],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgModalsModule {
}
NgModalsModule.decorators = [
{ type: NgModule, args: [{
declarations: [
NgModalsComponent,
NgModalsDirective
],
imports: [
BrowserModule
],
exports: [NgModalsComponent]
},] }
];
/**
* @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
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NgModalsDirective, NgModalsComponent, NgModalsModule };
//# sourceMappingURL=ng-modals.js.map