angular2-advanced-notifications
Version:
UI and native notifications library for Angular
322 lines • 13.4 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Component, ViewEncapsulation, trigger, state, style, transition, animate } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import * as _ from 'lodash';
import { BrowserViewports } from './browserViewports';
import { AnAlertTypes } from './alertTypes.enum';
import positionToAnimationLink from './positionToAnimationLink';
var AnAlert = (function () {
/**
* @param {?} anBus
*/
function AnAlert(anBus) {
this.anBus = anBus;
this.containerStates = {
left: false,
center: false,
right: false
};
this.containerDirections = {
reverseLeft: false,
reverseCenter: false,
reverseRight: false
};
this.items = {
left: [],
center: [],
right: []
};
this.defaults = {
message: 'No message was set',
position: 'topRight',
pauseOnHover: false,
showProgressBar: false,
delay: 0,
timeout: 0,
type: AnAlertTypes.BLANK,
showNotification: false
};
this.globalAlertConfig = anBus.getGlobalConfigForAlerts();
this._updateBrowserViewports();
this._subscribeToBus();
}
/**
* @param {?} id
* @return {?}
*/
AnAlert.prototype.onClose = function (id) {
this._removeItem(id);
this.anBus.$$onClose.next(id);
};
/**
* @param {?} config
* @return {?}
*/
AnAlert.prototype._subscribeToBusShowHandler = function (config) {
this._updateItems(config);
};
/**
* @param {?} id
* @return {?}
*/
AnAlert.prototype._subscribeToBusHideHandler = function (id) {
this.onClose(id);
};
/**
* @return {?}
*/
AnAlert.prototype._subscribeToBusHideAllHandler = function () {
this._hideAllAlerts();
};
/**
* @param {?} alertsIds
* @return {?}
*/
AnAlert.prototype._subscribeToBusHideAlertsHandler = function (alertsIds) {
this._hideAlerts(alertsIds);
};
/**
* @return {?}
*/
AnAlert.prototype._subscribeToBus = function () {
var _this = this;
this.showAlertSubscription = this.anBus.showAlert$.subscribe(function (config) {
_this._subscribeToBusShowHandler(config);
});
this.hideAlertSubscription = this.anBus.hideAlert$.subscribe(function (id) {
_this._subscribeToBusHideHandler(id);
});
this.hideAllAlertsSubscription = this.anBus.hideAllAlerts$.subscribe(function () { return _this._subscribeToBusHideAllHandler(); });
this.hideAlertsSubscription = this.anBus.hideAlerts$.subscribe(function (alertsIds) { return _this._subscribeToBusHideAlertsHandler(alertsIds); });
};
/**
* @param {?} config
* @return {?}
*/
AnAlert.prototype._updateItems = function (config) {
var /** @type {?} */ newConfig = _.merge({}, this.defaults, config, { $$updateListener: new Subject() }, { $$animationState: this._getAnimationState(config.position) });
console.warn(newConfig);
this._addItem(newConfig);
this._updateContainerState();
};
/**
* @param {?} alertsIds
* @return {?}
*/
AnAlert.prototype._hideAlerts = function (alertsIds) {
if (!Array.isArray(alertsIds)) {
return;
}
if (!alertsIds.length) {
return;
}
this.items.left = _.reject(this.items.left, function (item) {
return !!~alertsIds.indexOf(item.id);
});
this.items.center = _.reject(this.items.center, function (item) {
return !!~alertsIds.indexOf(item.id);
});
this.items.right = _.reject(this.items.right, function (item) {
return !!~alertsIds.indexOf(item.id);
});
};
/**
* @return {?}
*/
AnAlert.prototype._hideAllAlerts = function () {
var _this = this;
_.forEach(this.items.left, function (item) {
_this.anBus.$$onClose.next(item.id);
});
_.forEach(this.items.center, function (item) {
_this.anBus.$$onClose.next(item.id);
});
_.forEach(this.items.right, function (item) {
_this.anBus.$$onClose.next(item.id);
});
this.items.left = [];
this.items.center = [];
this.items.right = [];
};
/**
* @return {?}
*/
AnAlert.prototype._notifyUpdateListeners = function () {
_.forEach(this.items.left, function (item) {
item.$$updateListener.next();
});
_.forEach(this.items.center, function (item) {
item.$$updateListener.next();
});
_.forEach(this.items.right, function (item) {
item.$$updateListener.next();
});
};
/**
* @return {?}
*/
AnAlert.prototype._updateBrowserViewports = function () {
var _this = this;
if (this.globalAlertConfig.removeLastIfViewportOverflow) {
this.browserViewports = BrowserViewports.getBrowserViewports();
BrowserViewports.onBrowserViewportsUpdate().subscribe(function (newBrowserViewports) {
_this.browserViewports = newBrowserViewports;
});
}
};
/**
* @return {?}
*/
AnAlert.prototype._updateContainerState = function () {
this.containerStates.left = !!~this.items.left.length;
this.containerStates.center = !!~this.items.center.length;
this.containerStates.right = !!~this.items.right.length;
this._setContainerDirections();
};
/**
* @param {?} item
* @return {?}
*/
AnAlert.prototype._getShortVerticalPositionIdentifier = function (item) {
if (!!~item.position.indexOf('Left')) {
return 'left';
}
if (!!~item.position.indexOf('Center')) {
return 'center';
}
if (!!~item.position.indexOf('Right')) {
return 'right';
}
return undefined;
};
/**
* @param {?} item
* @return {?}
*/
AnAlert.prototype._addItem = function (item) {
var /** @type {?} */ pos = this._getShortVerticalPositionIdentifier(item);
this.items[pos].push(item);
};
/**
* @param {?} id
* @return {?}
*/
AnAlert.prototype._removeItem = function (id) {
var /** @type {?} */ item = this._findItemById(id);
var /** @type {?} */ pos = this._getShortVerticalPositionIdentifier(item);
this.items[pos] = _.reject(this.items[pos], { id: item.id });
};
/**
* @param {?} id
* @return {?}
*/
AnAlert.prototype._findItemById = function (id) {
var /** @type {?} */ foundItem;
foundItem = _.find(this.items.left, { id: id });
if (foundItem) {
return foundItem;
}
foundItem = _.find(this.items.center, { id: id });
if (foundItem) {
return foundItem;
}
foundItem = _.find(this.items.right, { id: id });
if (foundItem) {
return foundItem;
}
return undefined;
};
/**
* @return {?}
*/
AnAlert.prototype._setContainerDirections = function () {
this.containerDirections.reverseLeft = !!~_.filter(this.items.left, function (item) { return !!~item.position.indexOf('bottom'); }).length;
this.containerDirections.reverseCenter = !!~_.filter(this.items.center, function (item) { return !!~item.position.indexOf('bottom'); }).length;
this.containerDirections.reverseLeft = !!~_.filter(this.items.right, function (item) { return !!~item.position.indexOf('bottom'); }).length;
};
/**
* @param {?} position
* @return {?}
*/
AnAlert.prototype._getAnimationState = function (position) {
if (!_.isString(position)) {
return undefined;
}
return positionToAnimationLink[position];
};
return AnAlert;
}());
AnAlert = __decorate([
Component({
selector: 'an-alert',
template: "\n <div class=\"anAlert__container anAlert__container--left\"\n *ngIf=\"containerStates.left\"\n [ngClass]=\"{'anAlert__container--reverse': containerDirections.reverseLeft }\">\n <an-alert-item *ngFor=\"let item of items.left\"\n [@ASD]=\"item.$$animationState\"\n [options]=\"item\"\n (onClose)=\"onClose($event)\"\n (onAlertItemUpdates)=\"onAlertItemUpdates($event)\">\n </an-alert-item>\n </div>\n\n <div class=\"anAlert__container anAlert__container--center\"\n *ngIf=\"containerStates.center\"\n [ngClass]=\"{'anAlert__container--reverse': containerDirections.reverseCenter }\">\n <an-alert-item *ngFor=\"let item of items.center\"\n [@ASD]=\"item.$$animationState\"\n [options]=\"item\"\n (onClose)=\"onClose($event)\"\n (onAlertItemUpdates)=\"onAlertItemUpdates($event)\">\n </an-alert-item>\n </div>\n\n <div class=\"anAlert__container anAlert__container--right\"\n *ngIf=\"containerStates.right\"\n [ngClass]=\"{'anAlert__container--reverse': containerDirections.reverseRight }\">\n <an-alert-item *ngFor=\"let item of items.right\"\n [@ASD]=\"item.$$animationState\"\n [options]=\"item\"\n (onClose)=\"onClose($event)\"\n (onAlertItemUpdates)=\"onAlertItemUpdates($event)\">\n </an-alert-item>\n </div>\n ",
encapsulation: ViewEncapsulation.None,
animations: [
trigger('ASD', [
state('fadeInUp', style({ transform: 'translateY(0)' })),
state('fadeInRight', style({ transform: 'translateX(0)' })),
state('fadeInDown', style({ transform: 'translateY(0)' })),
state('fadeInLeft', style({ transform: 'translateX(0)' })),
// Enter transitions
transition('void => fadeInUp', [
style({ transform: 'translateY(100%)' }),
animate('100ms cubic-bezier(0.0, 0.0, 0.2, 1)')
]),
transition('void => fadeInRight', [
style({ transform: 'translateX(100%)' }),
animate('100ms cubic-bezier(0.0, 0.0, 0.2, 1)')
]),
transition('void => fadeInDown', [
style({ transform: 'translateY(-100%0)' }),
animate('100ms cubic-bezier(0.0, 0.0, 0.2, 1)')
]),
transition('void => fadeInLeft', [
style({ transform: 'translateX(-100%)' }),
animate('100ms cubic-bezier(0.0, 0.0, 0.2, 1)')
]),
// Leave transitions
transition('fadeInUp => void', [
animate('200ms cubic-bezier(0.4, 0.0, 1, 1)', style({ transform: 'translateY(-100%)' }))
]),
transition('fadeInRight => void', [
animate('200ms cubic-bezier(0.4, 0.0, 1, 1)', style({ transform: 'translateX(100%)' }))
]),
transition('fadeInDown => void', [
animate('200ms cubic-bezier(0.4, 0.0, 1, 1)', style({ transform: 'translateY(-100%)' }))
]),
transition('fadeInLeft => void', [
animate('200ms cubic-bezier(0.4, 0.0, 1, 1)', style({ transform: 'translateX(-100%)' }))
])
])
]
})
], AnAlert);
export { AnAlert };
function AnAlert_tsickle_Closure_declarations() {
/** @type {?} */
AnAlert.prototype.globalAlertConfig;
/** @type {?} */
AnAlert.prototype.browserViewports;
/** @type {?} */
AnAlert.prototype.showAlertSubscription;
/** @type {?} */
AnAlert.prototype.hideAlertSubscription;
/** @type {?} */
AnAlert.prototype.hideAllAlertsSubscription;
/** @type {?} */
AnAlert.prototype.hideAlertsSubscription;
/** @type {?} */
AnAlert.prototype.containerStates;
/** @type {?} */
AnAlert.prototype.containerDirections;
/** @type {?} */
AnAlert.prototype.items;
/** @type {?} */
AnAlert.prototype.defaults;
}
//# sourceMappingURL=alert.component.js.map