github.com/DerekStrickland/consul@v1.4.5/ui-v2/app/components/feedback-dialog.js (about)

     1  import Component from '@ember/component';
     2  import { get, set } from '@ember/object';
     3  import { inject as service } from '@ember/service';
     4  import qsaFactory from 'consul-ui/utils/dom/qsa-factory';
     5  const $$ = qsaFactory();
     6  
     7  import SlotsMixin from 'block-slots';
     8  const STATE_READY = 'ready';
     9  const STATE_SUCCESS = 'success';
    10  const STATE_ERROR = 'error';
    11  export default Component.extend(SlotsMixin, {
    12    wait: service('timeout'),
    13    classNames: ['with-feedback'],
    14    transition: '',
    15    transitionClassName: 'feedback-dialog-out',
    16    state: STATE_READY,
    17    permanent: true,
    18    init: function() {
    19      this._super(...arguments);
    20      this.success = this._success.bind(this);
    21      this.error = this._error.bind(this);
    22    },
    23    applyTransition: function() {
    24      const wait = get(this, 'wait').execute;
    25      const className = get(this, 'transitionClassName');
    26      wait(0)
    27        .then(() => {
    28          set(this, 'transition', className);
    29          return wait(0);
    30        })
    31        .then(() => {
    32          return new Promise(resolve => {
    33            $$(`.${className}`, this.element)[0].addEventListener('transitionend', resolve);
    34          });
    35        })
    36        .then(() => {
    37          set(this, 'transition', '');
    38          set(this, 'state', STATE_READY);
    39        });
    40    },
    41    _success: function() {
    42      set(this, 'state', STATE_SUCCESS);
    43      this.applyTransition();
    44    },
    45    _error: function() {
    46      set(this, 'state', STATE_ERROR);
    47      this.applyTransition();
    48    },
    49  });