all files / addon/components/ el-alert.js

0% Statements 0/15
0% Branches 0/8
0% Functions 0/7
0% Lines 0/15
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80                                                                                                                                                               
import Component from '@ember/component';
import layout from '../templates/components/el-alert';
import {computed, get, set} from "@ember/object";
import transition from "../utils/transition";
 
 
export default Component.extend({
  layout,
 
  TYPE_CLASSES_MAP: null,
 
  classNames: ['el-alert','animated', 'fadeIn'],
  classNameBindings: ['typeClass', 'effectClass',
    'center:is-center',
    'isClosed:el-hidden',
  ],
 
  attributeBindings: ['role'],
 
  role: 'alert',
 
  title: '',
  description: '',
  type: 'info',
  closable: true,
  closeText: '',
  showIcon: false,
  center: false,
  isClosed: false,
  effect: 'light',
 
  init() {
    this._super();
    set(this,
      'TYPE_CLASSES_MAP', {
        'success': 'el-icon-success',
        'warning': 'el-icon-warning',
        'error': 'el-icon-error'
      }
    )
  },
 
  typeClass: computed('type', function () {
    return `el-alert--${ get(this, 'type') }`;
  }),
  effectClass: computed('effect', function () {
    return `is-${ get(this, 'effect') }`;
  }),
  iconClass: computed('type', function () {
    return get(this, 'TYPE_CLASSES_MAP')[get(this, 'type')] || 'el-icon-info';
  }),
  isBigIcon: computed('description', function () {
    return get(this, 'description') !== '' ? 'is-big' : '';
  }),
  isBoldTitle: computed('description', function () {
    return get(this, 'description') !== '' ? 'is-bold' : '';
 
  }),
 
  actions: {
    close() {
      let e = this.element;
 
      let transitionEvent = transition('animation');
      e.addEventListener(transitionEvent, () => {
        set(this, 'isClosed', true);
        if (this.get('action')) {
          this.get('action')();
        }
      });
 
      e.classList.add('animated');
      e.classList.add('fadeOut');
 
    }
  }
 
});