import Ember from 'ember';
import TypeClass from 'ember-bootstrap/mixins/type-class';
/**
Implements Bootstrap alerts, see http://getbootstrap.com/components/#alerts
By default it is a user dismissible alert with a fade out animation, both of which can be disabled. Be sure to set the
`type` property for proper styling.
```hbs
\{{#bs-alert type="success"}}<strong>Well done!</strong> You successfully read this important alert message.{{/bs-alert}}
```
@class Alert
@namespace Bootstrap
@extends Ember.Component
@uses Bootstrap.TypeClass
*/
export default Ember.Component.extend(TypeClass, {
classNameBindings: ['alert','fade','in'],
/**
* A dismissible alert will have a close button in the upper right corner, that the user can click to dismiss
* the alert.
*
* @property dismissible
* @type boolean
* @default true
* @public
*/
dismissible: true,
/**
* If true the alert is completely hidden. Will be set when the fade animation has finished.
*
* @property dismissed
* @type boolean
* @default false
* @readonly
* @protected
*/
dismissed: false,
/**
* This property indicates if the alert is visible. If false it might still be in the DOM until the fade animation
* has completed. Can be set to change the visibility of the alert box.
*
* @property visible
* @type boolean
* @default true
* @public
*/
visible: true,
/**
* Set to false to disable the fade out animation when hiding the alert.
*
* @property fade
* @type boolean
* @default true
* @public
*/
fade: true,
/**
* Computed property to set the alert class to the component div. Will be false when dismissed to have the component
* div (which cannot be removed form DOM by the component itself) without any markup.
*
* @property alert
* @type boolean
* @private
*/
alert: Ember.computed.not('dismissed'),
in: Ember.computed.and('visible','fade'),
/**
* @property classTypePrefix
* @type String
* @default 'alert'
* @protected
*/
classTypePrefix: 'alert',
/**
* The duration of the fade out animation
*
* @property fadeDuration
* @type integer
* @default 150
* @public
*/
fadeDuration: 150,
actions: {
dismiss: function() {
this.hide();
}
},
_onVisibleChange: Ember.observer('visible', function() {
if (this.get('visible')) {
this.show();
}
else {
this.hide();
}
}),
/**
* Call to make the alert visible again after it has been hidden
*
* @method show
* @public
*/
show: function() {
this.setProperties({
dismissed: false,
visible: true
});
},
/**
* Call to hide the alert. If the `fade` property is true, this will fade out the alert before being finally
* dismissed.
*
* @method show
* @public
*/
hide: function() {
if (this.get('fade')) {
this.set('visible', false);
Ember.run.later(this,function() {
if (!this.get('isDestroyed')) {
this.set('dismissed', true);
}
},this.get('fadeDuration'));
}
else {
this.setProperties({
dismissed: true,
visible: false
});
}
}
});