datahub/wherehows-web/app/components/notifications/banner-alerts.ts

import Component from '@ember/component';
import { get, set } from '@ember/object';
import BannerService, { IBanner } from 'wherehows-web/services/banners';
import { bannerAnimationSpeed } from 'wherehows-web/constants/notifications';
import { service } from '@ember-decorators/service';
import { alias } from '@ember-decorators/object/computed';
import { action } from '@ember-decorators/object';

export default class BannerAlerts extends Component {
  tagName = 'section';

  classNames = ['banner-alerts'];

  classNameBindings = ['isShowingBanners:banner-alerts--show:banner-alerts--hide'];

  /**
   * Keeps the base banner animation speed as a property to attach as a data attribute to the rendered
   * banner-alert elements in the template
   */
  bannerAnimationSpeed = bannerAnimationSpeed;

  /**
   * Imports the service used to handle actual activation and dismissal of banners. The service also
   * maintains the banners list
   * @type {ComputedProperty<BannerService>}
   */
  @service
  banners: BannerService;

  /**
   * References the banners service computation on whether or not we should be showing banners
   */
  @alias('banners.isShowingBanners')
  isShowingBanners: boolean;

  /**
   * Triggered by the user by clicking the dismiss icon on the banner, triggers the exiting state on the
   * topmost (first in queue) banner and starts the timer/css animation for the dismissal action
   * @param {IBanner} banner - the banner as a subject for the dismissal action
   */
  @action
  onDismissBanner(this: BannerAlerts, banner: IBanner) {
    const banners = get(this, 'banners');

    set(banner, 'isExiting', true);
    banners.dequeue();
  }
}