ng2-modal-module
Version:
bootstrap modal component adjusted for angular2+ framework based on rx-pubsub service. NO jQuery!
322 lines (317 loc) • 10.6 kB
JavaScript
import { PubSubDistinct } from 'pubsub-distinct';
import { Component, ViewChild, ViewContainerRef, Input, NgModule } from '@angular/core';
import { ComponentInjector } from 'component-injector';
import { XDomUtil } from 'xdom-util';
import { CommonModule } from '@angular/common';
import { TrustHtmlModule } from 'trust-html';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class Ng2ModalWindow {
/**
* @param {?} modalId
* @param {?=} options
* @return {?}
*/
static showModal(modalId, options = {}) {
options.show = true;
options.hide = null;
PubSubDistinct.publishDistinct(modalId, options);
}
/**
* @param {?} modalId
* @return {?}
*/
static hideModal(modalId) {
/** @type {?} */
let options = { hide: true };
PubSubDistinct.publishDistinct(modalId, options);
}
/**
* @param {?} eventsList
* @return {?}
*/
static resetEventsSubscribers(eventsList) {
eventsList.forEach((/**
* @param {?} eventName
* @return {?}
*/
(eventName) => {
if (eventName && PubSubDistinct.hasSubscribers(eventName)) {
PubSubDistinct.dispose(eventName);
}
}));
}
/**
* @param {?} eventName
* @param {?} callback
* @return {?}
*/
static subscribe(eventName, callback) {
PubSubDistinct.subscribe(eventName, callback);
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class Ng2ModalWindowComponent {
/**
* @param {?} componentInjector
*/
constructor(componentInjector) {
this.componentInjector = componentInjector;
this.animationClass = 'fade';
this.showModalClass = 'in';
this.bodyOpenModalClass = 'modal-open';
this.defaultProperties = {
title: '',
show: false,
showEvent: false,
hide: false,
componentSelector: false,
componentInputs: false,
htmlContent: '',
overlayClick: true,
customClass: '',
buttons: {
visible: true,
cancel: {
visible: true,
label: 'Cancel',
event: false
},
success: {
visible: true,
label: 'Save',
event: false
}
}
};
this.properties = {};
}
/**
* @param {?} eventName
* @return {?}
*/
set id(eventName) {
if (eventName) {
this.eventName = eventName;
// remove previous subscription and create new one
this.unsubscribe();
this.subscribeToEvent();
}
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
ngOnDestroy() {
this.unsubscribe();
this.resetInjectedComponent();
}
/**
* @return {?}
*/
cancelAction() {
if (this.properties.buttons.cancel.event) {
PubSubDistinct.publishDistinct(this.properties.buttons.cancel.event, true);
}
this.hide();
}
/**
* @return {?}
*/
successAction() {
if (this.properties.buttons.success.event) {
PubSubDistinct.publishDistinct(this.properties.buttons.success.event, true);
}
else {
this.hide();
}
}
/**
* @return {?}
*/
overlayClick() {
if (this.properties.overlayClick) {
this.cancelAction();
}
}
/**
* @protected
* @return {?}
*/
show() {
// add class to modal DOM element to make it visible
/** @type {?} */
let modalDom = this.modalWindow.nativeElement;
if (!XDomUtil.hasClass(modalDom, this.showModalClass)) {
XDomUtil.addClass(modalDom, this.showModalClass);
}
// add class to modal body to disable the scrolling
/** @type {?} */
let body = document.querySelector('body');
if (!XDomUtil.hasClass(body, this.bodyOpenModalClass)) {
XDomUtil.addClass(body, this.bodyOpenModalClass);
}
if (this.properties.showEvent) {
PubSubDistinct.publishDistinct(this.properties.showEvent, true);
}
}
/**
* @protected
* @return {?}
*/
hide() {
/** @type {?} */
let element = this.modalWindow.nativeElement;
XDomUtil.removeClass(element, this.showModalClass);
/** @type {?} */
let body = document.querySelector('body');
XDomUtil.removeClass(body, this.bodyOpenModalClass);
}
/**
* @protected
* @return {?}
*/
subscribeToEvent() {
this.eventSubscriber = PubSubDistinct.subscribe(this.eventName, (/**
* @param {?} data
* @return {?}
*/
(data) => {
this.initModal(data);
}));
}
/**
* @protected
* @param {?} properties
* @return {?}
*/
initModal(properties) {
if (properties.show) {
// remove previously injected component
this.resetInjectedComponent();
// reset the properties
this.setProperties(properties);
// inject component
if (this.properties.componentSelector) {
this.injectedComponentRef = this.injectComponent(this.properties.componentSelector);
// set the components properties
this.setComponentProperties();
}
// display the modal
this.show();
// reset modal event subscriber
this.resetModalEventSubscriber();
}
else if (properties.hide) {
// remove previously injected component
this.resetInjectedComponent();
// reset the properties
this.setProperties(properties);
// hide the modal
this.hide();
// reset modal event subscriber
this.resetModalEventSubscriber();
}
}
/**
* @protected
* @return {?}
*/
unsubscribe() {
if (this.eventSubscriber) {
PubSubDistinct.unsubscribe(this.eventSubscriber);
}
}
/**
* @protected
* @param {?} componentSelector
* @return {?}
*/
injectComponent(componentSelector) {
/** @type {?} */
let result;
if (componentSelector) {
result = this.componentInjector.inject(this.injectContainer, componentSelector);
}
return result;
}
/**
* @protected
* @return {?}
*/
setComponentProperties() {
if (this.properties.componentInputs && this.injectedComponentRef) {
this.componentInjector.setProperties(this.injectedComponentRef, this.properties.componentInputs);
}
}
/**
* @private
* @return {?}
*/
resetInjectedComponent() {
if (this.injectedComponentRef) {
this.componentInjector.remove(this.injectedComponentRef);
this.injectedComponentRef = null;
}
}
/**
* @private
* @param {?} properties
* @return {?}
*/
setProperties(properties) {
this.properties = Object.assign({}, this.defaultProperties, properties);
}
/**
* @private
* @return {?}
*/
resetModalEventSubscriber() {
// reset modal show/hide display
PubSubDistinct.publishDistinct(this.eventName, {});
}
}
Ng2ModalWindowComponent.decorators = [
{ type: Component, args: [{
selector: 'ng2-modal-window',
template: "<div class=\"ko-modal-window modal\" [ngClass]=\"animationClass\" tabindex=\"-1\" role=\"dialog\" id=\"myModal\" #modalWindow>\n <div class=\"ko-modal-overlay\" (click)=\"overlayClick()\"></div>\n <div class=\"modal-dialog {{properties.customClass}}\" role=\"document\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"cancelAction()\">\n <span aria-hidden=\"true\">×</span>\n </button>\n <h4 class=\"modal-title\">{{properties.title}}</h4>\n </div>\n <div class=\"modal-body\">\n <div #injectContainer [innerHTML]=\"properties.htmlContent | trustHtml\"></div>\n </div>\n <div class=\"modal-footer\" *ngIf=\"properties?.buttons?.visible\">\n <button type=\"button\" class=\"btn btn-default\" (click)=\"cancelAction()\"\n *ngIf=\"properties.buttons.cancel?.visible\">{{properties.buttons.cancel.label}}\n </button>\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"successAction()\"\n *ngIf=\"properties.buttons.success?.visible\">{{properties.buttons.success.label}}\n </button>\n </div>\n </div><!-- /.modal-content -->\n </div><!-- /.modal-dialog -->\n</div><!-- /.modal -->\n",
styles: [".ko-modal-window{background-color:rgba(0,0,0,.5)}.ko-modal-window.in{display:block}.ko-modal-open{overflow:hidden}.ko-modal-overlay{position:fixed;width:100%;height:100%;left:0;top:0}"]
}] }
];
/** @nocollapse */
Ng2ModalWindowComponent.ctorParameters = () => [
{ type: ComponentInjector }
];
Ng2ModalWindowComponent.propDecorators = {
modalWindow: [{ type: ViewChild, args: ['modalWindow', { static: true },] }],
injectContainer: [{ type: ViewChild, args: ['injectContainer', { read: ViewContainerRef, static: true },] }],
animationClass: [{ type: Input }],
id: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ModalModule {
}
ModalModule.decorators = [
{ type: NgModule, args: [{
declarations: [Ng2ModalWindowComponent],
imports: [
CommonModule,
TrustHtmlModule
],
exports: [Ng2ModalWindowComponent]
},] }
];
export { ModalModule, Ng2ModalWindow, Ng2ModalWindowComponent };
//# sourceMappingURL=ng2-modal-module.js.map