ng-pop-alert
Version:
This is an angular Notification or Alert . it help you to notify messages to users of your application in every state it is required.
344 lines (339 loc) • 13.4 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/Subject'), require('rxjs/Observable'), require('rxjs/add/observable/from'), require('@angular/common'), require('@angular/http'), require('@angular/platform-browser')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs/Subject', 'rxjs/Observable', 'rxjs/add/observable/from', '@angular/common', '@angular/http', '@angular/platform-browser'], factory) :
(factory((global['ng-pop-alert'] = {}),global.ng.core,global.Rx,global.Rx,global.Rx.Observable,global.ng.common,global.ng.http,global.ng.platformBrowser));
}(this, (function (exports,core,Subject,Observable,from,common,http,platformBrowser) { 'use strict';
var ValidationErrorService = (function () {
function ValidationErrorService() {
}
/**
* This is used to compose validation messages
* @param {?} validationObj
* @param {?=} message
* @return {?}
*/
ValidationErrorService.prototype.message = function (validationObj, message) {
var /** @type {?} */ msg = "";
if (validationObj && validationObj.constructor === Object) {
msg = this.processObj(validationObj);
}
else if (validationObj && validationObj.constructor === Array) {
msg = this.processArray(validationObj);
}
return (msg) ? msg : message;
};
/**
* @param {?} data
* @return {?}
*/
ValidationErrorService.prototype.processObj = function (data) {
var _this = this;
var /** @type {?} */ msg = "";
Object.keys(data).forEach(function (key) {
if (data[key] && data[key].constructor === String) {
msg += data[key] + ". <br>";
}
else if (data[key] && data[key].constructor === Object) {
msg += _this.processObj(key);
}
else if (data[key] && data[key].constructor === Array) {
msg += _this.processArray(data[key]);
}
});
return msg;
};
/**
* @param {?} dataObj
* @return {?}
*/
ValidationErrorService.prototype.processArray = function (dataObj) {
var _this = this;
var /** @type {?} */ msg = "";
dataObj.forEach(function (data) {
if (data && data.constructor === String) {
msg += data + ". <br>";
}
else if (data && data.constructor === Object) {
msg += _this.processObj(data);
}
else if (data && data.constructor === Array) {
msg += _this.processArray(data);
}
});
return msg;
};
return ValidationErrorService;
}());
ValidationErrorService.decorators = [
{ type: core.Injectable },
];
/**
* @nocollapse
*/
ValidationErrorService.ctorParameters = function () { return []; };
var AlertEventService = (function () {
function AlertEventService() {
var _this = this;
this.listeners = {};
this.eventsSubject = new Subject.Subject();
this.events = Observable.Observable.from(this.eventsSubject);
this.events.subscribe(function (_a) {
var name = _a.name, args = _a.args;
if (_this.listeners[name]) {
for (var _i = 0, _b = _this.listeners[name]; _i < _b.length; _i++) {
var listener = _b[_i];
listener.apply(void 0, args);
}
}
});
}
/**
* @param {?} name
* @param {?} listener
* @return {?}
*/
AlertEventService.prototype.on = function (name, listener) {
if (!this.listeners[name]) {
this.listeners[name] = [];
this.listeners[name].push(listener);
}
if (this.listeners[name]) {
this.listeners[name][0] = listener;
}
};
/**
* @param {?} name
* @param {...?} args
* @return {?}
*/
AlertEventService.prototype.broadcast = function (name) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
// console.log('name=', name);
this.eventsSubject.next({
name: name,
args: args
});
};
return AlertEventService;
}());
AlertEventService.decorators = [
{ type: core.Injectable },
];
/**
* @nocollapse
*/
AlertEventService.ctorParameters = function () { return []; };
var NgPopAlertService = (function () {
/**
* @param {?} validationError
* @param {?} alertEventService
*/
function NgPopAlertService(validationError, alertEventService) {
this.validationError = validationError;
this.alertEventService = alertEventService;
this.alert = {
visible: false,
message: '',
type: '',
alert_class: ''
};
}
/**
* Success Alert
* @param {?} message
* @return {?}
*/
NgPopAlertService.prototype.success = function (message) {
this.alert['alert_class'] = 'alert alert-success animated fadeIn';
this.alert['message'] = message;
this.alert['visible'] = true;
this.alert['type'] = 'success';
this.alertEventService.broadcast('AlertMessage', this.alert);
return this.alert;
};
/**
* Info Alert
* @param {?} message
* @return {?}
*/
NgPopAlertService.prototype.info = function (message) {
this.alert['alert_class'] = 'alert alert-info animated fadeIn';
this.alert['message'] = message;
this.alert['visible'] = true;
this.alert['type'] = 'info';
this.alertEventService.broadcast('AlertMessage', this.alert);
return this.alert;
};
/**
* Warning Alert
* @param {?} message
* @return {?}
*/
NgPopAlertService.prototype.warning = function (message) {
this.alert['alert_class'] = 'alert alert-warning animated fadeIn';
this.alert['message'] = message;
this.alert['visible'] = true;
this.alert['type'] = 'warning';
this.alertEventService.broadcast('AlertMessage', this.alert);
return this.alert;
};
/**
* Error Alert
* @param {?} defaultMessage
* @param {?=} data
* @return {?}
*/
NgPopAlertService.prototype.error = function (defaultMessage, data) {
this.alert['alert_class'] = 'alert alert-danger animated fadeIn';
this.alert['message'] = defaultMessage;
if (data) {
this.alert['message'] = this.showError(data, defaultMessage);
}
this.alert['visible'] = true;
this.alert['type'] = 'error';
this.alertEventService.broadcast('AlertMessage', this.alert);
return this.alert;
};
/**
* This is used to clear alert from display
* @return {?}
*/
NgPopAlertService.prototype.clear = function () {
this.alertEventService.broadcast('closeAlertMessage', new Date());
};
/**
* This is used to display Error message
* @param {?} data
* @param {?} message
* @return {?}
*/
NgPopAlertService.prototype.showError = function (data, message) {
if (data.constructor === Object || data.constructor === Array) {
return this.validationError.message(data, message);
}
else {
data = (data.constructor === String) ? data : message;
return data || message || data['statusText'] || 'Error encountered while processing request, please try again.';
}
};
return NgPopAlertService;
}());
NgPopAlertService.decorators = [
{ type: core.Injectable },
];
/**
* @nocollapse
*/
NgPopAlertService.ctorParameters = function () { return [
{ type: ValidationErrorService, },
{ type: AlertEventService, },
]; };
var NG_POP_ALERT_CONF = {
duration: 10000,
};
var NgPopAlertComponent = (function () {
/**
* @param {?} sanitizer
* @param {?} alertEventService
*/
function NgPopAlertComponent(sanitizer, alertEventService) {
this.sanitizer = sanitizer;
this.alertEventService = alertEventService;
this.overlay = true;
this.styles = {};
this.alert = {
visible: false,
message: '',
type: '',
alert_class: ''
};
this.message = "";
}
/**
* @return {?}
*/
NgPopAlertComponent.prototype.closeAlert = function () {
var _this = this;
this.alertClosure = setTimeout(function () {
_this.alert['visible'] = false;
}, NG_POP_ALERT_CONF.duration);
};
/**
* @return {?}
*/
NgPopAlertComponent.prototype.ngOnInit = function () {
var _this = this;
this.alertEventService.on('AlertMessage', function (data) {
clearTimeout(_this.alertClosure);
setTimeout(function () {
_this.alert = data;
console.log('duration=', NG_POP_ALERT_CONF.duration);
_this.message = _this.sanitizer.bypassSecurityTrustHtml(_this.alert['message']);
_this.closeAlert();
}, 200);
});
this.alertEventService.on('closeAlertMessage', function () {
_this.alert['visible'] = false;
clearTimeout(_this.alertClosure);
});
};
return NgPopAlertComponent;
}());
NgPopAlertComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ng-pop-alert',
template: "\n <div [class.notification-display]=\"overlay\" class=\"bordered\" [ngStyle]=\"styles\" [hidden]=\"!alert['visible']\">\n <div class=\"{{alert['alert_class']}}\" role=\"alert\" align=\"left\" style=\"position: relative; padding: 10px;\">\n <a role=\"button\" (click)=\"alert['visible']=false\" class=\"pull-right alert-link\" style=\"cursor: pointer;\"> <b>×</b> </a>\n <span style=\"font-size:13px;\" [innerHTML]=\"message\"></span>\n </div>\n </div>\n ",
styles: ["\n div.bordered {\n border-radius: 5px;\n -moz-border-radius: 5px;\n -webkit-border-radius: 5px;\n }\n\n div.alert-success {\n color: #3c763d !important;\n background-color: #dff0d8 !important;\n border-color: #d6e9c6 !important;\n }\n\n div.alert-success > a, div.alert-success > span {\n text-decoration: none !important;\n color: #3c763d !important;\n }\n\n div.alert-warning {\n color: #8a6d3b !important;\n background-color: #fcf8e3 !important;\n border-color: #faebcc !important;\n }\n\n div.alert-warning > a, div.alert-warning > span {\n text-decoration: none !important;\n color: #8a6d3b !important;\n }\n\n div .alert-danger {\n color: #a94442 !important;\n background-color: #f2dede !important;\n border-color: #ebccd1 !important;\n }\n\n div.alert-danger > a, div.alert-danger > span {\n text-decoration: none !important;\n color: #a94442 !important;\n }\n\n div.alert-info {\n color: #31708f !important;\n background-color: #d9edf7 !important;\n border-color: #bce8f1 !important;\n }\n\n div.alert-info > a, div.alert-info > span {\n text-decoration: none !important;\n color: #31708f !important;\n }\n\n .notification-display {\n position: fixed;\n min-width: 100px;\n width: auto !important;\n top: 10px;\n right: 10px;\n z-index: 100000 !important;\n }\n "]
},] },
];
/**
* @nocollapse
*/
NgPopAlertComponent.ctorParameters = function () { return [
{ type: platformBrowser.DomSanitizer, },
{ type: AlertEventService, },
]; };
NgPopAlertComponent.propDecorators = {
'overlay': [{ type: core.Input },],
'styles': [{ type: core.Input },],
};
var NgPopAlertModule = (function () {
function NgPopAlertModule() {
}
/**
* @return {?}
*/
NgPopAlertModule.forRoot = function () {
return {
ngModule: NgPopAlertModule,
providers: [NgPopAlertService, AlertEventService, ValidationErrorService]
};
};
return NgPopAlertModule;
}());
NgPopAlertModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
http.HttpModule,
common.CommonModule
],
declarations: [NgPopAlertComponent],
exports: [NgPopAlertComponent]
},] },
];
/**
* @nocollapse
*/
NgPopAlertModule.ctorParameters = function () { return []; };
exports.NgPopAlertService = NgPopAlertService;
exports.NG_POP_ALERT_CONF = NG_POP_ALERT_CONF;
exports.NgPopAlertModule = NgPopAlertModule;
exports.ɵb = AlertEventService;
exports.ɵc = NgPopAlertComponent;
exports.ɵa = ValidationErrorService;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ng-pop-alert.umd.js.map