ng2-modal-module
Version:
bootstrap modal component adjusted for angular2+ framework based on rx-pubsub service. NO jQuery!
409 lines (404 loc) • 13.1 kB
JavaScript
import { PubSubDistinct } from 'pubsub-distinct';
import { __assign } from 'tslib';
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
*/
var Ng2ModalWindow = /** @class */ (function () {
function Ng2ModalWindow() {
}
/**
* @param {?} modalId
* @param {?=} options
* @return {?}
*/
Ng2ModalWindow.showModal = /**
* @param {?} modalId
* @param {?=} options
* @return {?}
*/
function (modalId, options) {
if (options === void 0) { options = {}; }
options.show = true;
options.hide = null;
PubSubDistinct.publishDistinct(modalId, options);
};
/**
* @param {?} modalId
* @return {?}
*/
Ng2ModalWindow.hideModal = /**
* @param {?} modalId
* @return {?}
*/
function (modalId) {
/** @type {?} */
var options = { hide: true };
PubSubDistinct.publishDistinct(modalId, options);
};
/**
* @param {?} eventsList
* @return {?}
*/
Ng2ModalWindow.resetEventsSubscribers = /**
* @param {?} eventsList
* @return {?}
*/
function (eventsList) {
eventsList.forEach((/**
* @param {?} eventName
* @return {?}
*/
function (eventName) {
if (eventName && PubSubDistinct.hasSubscribers(eventName)) {
PubSubDistinct.dispose(eventName);
}
}));
};
/**
* @param {?} eventName
* @param {?} callback
* @return {?}
*/
Ng2ModalWindow.subscribe = /**
* @param {?} eventName
* @param {?} callback
* @return {?}
*/
function (eventName, callback) {
PubSubDistinct.subscribe(eventName, callback);
};
return Ng2ModalWindow;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var Ng2ModalWindowComponent = /** @class */ (function () {
function Ng2ModalWindowComponent(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 = {};
}
Object.defineProperty(Ng2ModalWindowComponent.prototype, "id", {
set: /**
* @param {?} eventName
* @return {?}
*/
function (eventName) {
if (eventName) {
this.eventName = eventName;
// remove previous subscription and create new one
this.unsubscribe();
this.subscribeToEvent();
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
Ng2ModalWindowComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
/**
* @return {?}
*/
Ng2ModalWindowComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.unsubscribe();
this.resetInjectedComponent();
};
/**
* @return {?}
*/
Ng2ModalWindowComponent.prototype.cancelAction = /**
* @return {?}
*/
function () {
if (this.properties.buttons.cancel.event) {
PubSubDistinct.publishDistinct(this.properties.buttons.cancel.event, true);
}
this.hide();
};
/**
* @return {?}
*/
Ng2ModalWindowComponent.prototype.successAction = /**
* @return {?}
*/
function () {
if (this.properties.buttons.success.event) {
PubSubDistinct.publishDistinct(this.properties.buttons.success.event, true);
}
else {
this.hide();
}
};
/**
* @return {?}
*/
Ng2ModalWindowComponent.prototype.overlayClick = /**
* @return {?}
*/
function () {
if (this.properties.overlayClick) {
this.cancelAction();
}
};
/**
* @protected
* @return {?}
*/
Ng2ModalWindowComponent.prototype.show = /**
* @protected
* @return {?}
*/
function () {
// add class to modal DOM element to make it visible
/** @type {?} */
var 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 {?} */
var 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 {?}
*/
Ng2ModalWindowComponent.prototype.hide = /**
* @protected
* @return {?}
*/
function () {
/** @type {?} */
var element = this.modalWindow.nativeElement;
XDomUtil.removeClass(element, this.showModalClass);
/** @type {?} */
var body = document.querySelector('body');
XDomUtil.removeClass(body, this.bodyOpenModalClass);
};
/**
* @protected
* @return {?}
*/
Ng2ModalWindowComponent.prototype.subscribeToEvent = /**
* @protected
* @return {?}
*/
function () {
var _this = this;
this.eventSubscriber = PubSubDistinct.subscribe(this.eventName, (/**
* @param {?} data
* @return {?}
*/
function (data) {
_this.initModal(data);
}));
};
/**
* @protected
* @param {?} properties
* @return {?}
*/
Ng2ModalWindowComponent.prototype.initModal = /**
* @protected
* @param {?} properties
* @return {?}
*/
function (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 {?}
*/
Ng2ModalWindowComponent.prototype.unsubscribe = /**
* @protected
* @return {?}
*/
function () {
if (this.eventSubscriber) {
PubSubDistinct.unsubscribe(this.eventSubscriber);
}
};
/**
* @protected
* @param {?} componentSelector
* @return {?}
*/
Ng2ModalWindowComponent.prototype.injectComponent = /**
* @protected
* @param {?} componentSelector
* @return {?}
*/
function (componentSelector) {
/** @type {?} */
var result;
if (componentSelector) {
result = this.componentInjector.inject(this.injectContainer, componentSelector);
}
return result;
};
/**
* @protected
* @return {?}
*/
Ng2ModalWindowComponent.prototype.setComponentProperties = /**
* @protected
* @return {?}
*/
function () {
if (this.properties.componentInputs && this.injectedComponentRef) {
this.componentInjector.setProperties(this.injectedComponentRef, this.properties.componentInputs);
}
};
/**
* @private
* @return {?}
*/
Ng2ModalWindowComponent.prototype.resetInjectedComponent = /**
* @private
* @return {?}
*/
function () {
if (this.injectedComponentRef) {
this.componentInjector.remove(this.injectedComponentRef);
this.injectedComponentRef = null;
}
};
/**
* @private
* @param {?} properties
* @return {?}
*/
Ng2ModalWindowComponent.prototype.setProperties = /**
* @private
* @param {?} properties
* @return {?}
*/
function (properties) {
this.properties = __assign({}, this.defaultProperties, properties);
};
/**
* @private
* @return {?}
*/
Ng2ModalWindowComponent.prototype.resetModalEventSubscriber = /**
* @private
* @return {?}
*/
function () {
// 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 = function () { return [
{ 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 }]
};
return Ng2ModalWindowComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ModalModule = /** @class */ (function () {
function ModalModule() {
}
ModalModule.decorators = [
{ type: NgModule, args: [{
declarations: [Ng2ModalWindowComponent],
imports: [
CommonModule,
TrustHtmlModule
],
exports: [Ng2ModalWindowComponent]
},] }
];
return ModalModule;
}());
export { ModalModule, Ng2ModalWindow, Ng2ModalWindowComponent };
//# sourceMappingURL=ng2-modal-module.js.map