Source: initiators/ui/popup.js

import Cookie from 'js-cookie';
import DomService from '../domService';
import EventManager from '../eventManager';

/**
 * @memberof Initiators/UI
 * @constructor UiPopup
 * @param {Object} args - all arguments
 * @example
 * const uiPopup = new UiPopup({});
 */
export default class UiPopup {
    args = null;

    constructor(args) {
      this.args = args;
      this.popupCloseButton = DomService.get('.PlasmaPromotionPopup__closeButtonJs');
      this.popupButton = DomService.get('.PlasmaPromotionPopup__actionButtonJs');
      this.popupAnimationBlocks = DomService.get(`#${this.args.popupId}`);
      this.popupWrapper = DomService.get('.PlasmaPromotionPopup__wrapperJs');
    }

    /**
     * @method UiPopup#run
     * @memberof Initiators/UI
     * @description run popup function
     * @param {Object} banner object
     * @param {Object} tagManager object
     * @example
     * const uiPopup = new UiPopup({});
     * uiPopup.run();
     */
    run = (banner, tagManager) => {
      const popupFlag = Cookie.get(`promotionPopup_${this.args.id}_closed`);
      const bannerFlag = Cookie.get(`promotionBanner_${this.args.id}_closed`);
      if (parseInt(bannerFlag, 10) === 1) return;
      if (parseInt(popupFlag, 10) === 1) return;
      if (this.args.startDate !== 'none' && this.args.currentDateS >= this.args.endDateS) return;
      if (this.args.startDate !== 'none' && this.args.currentDateS < this.args.startDateS) return;

      this.banner = banner;
      this.tagManager = tagManager;
      DomService.attr(this.popupButton, 'href', this.args.href);
      this.showPopup();

      const autoHideBanner = setInterval(() => {
        const time = new Date().getTime();
        if (this.args.endDateMs <= time && this.args.startDateMs >= time) {
          this.hidePopup(false);
          clearInterval(autoHideBanner);
        }
      }, 1000);
    };

    /**
     * @method UiPopup#showBanner
     * @memberof Initiators/UI
     * @description show popup function
     * @example
     * const uiPopup = new UiPopup({});
     * uiPopup.showPopup();
     */
    showPopup = () => {
      EventManager.dispatch({
        eventName: 'PlasmaBannerScripts.BeforeShowPopup',
      });
      const that = this;
      DomService.removeClass(this.popupAnimationBlocks, ['PlasmaPromotionPopup--hide']);
      DomService.addClass(this.popupAnimationBlocks, ['PlasmaPromotionPopup--show']);
      if (this.popupCloseButton !== null) {
        this.popupCloseButton.addEventListener('click', that.hidePopup.bind(this, false));
      }
      document.addEventListener('click', this.outTarget.bind(this));
      EventManager.dispatch({
        eventName: 'PlasmaBannerScripts.AfterShowPopup',
      });
    };

    /**
     * @method UiPopup#hideBanner
     * @memberof Initiators/UI
     * @description hide popup function
     * @param {boolean} outTarget object
     * @example
     * const uiPopup = new UiPopup({});
     * uiPopup.hidePopup();
     */
    hidePopup = (outTarget = false) => {
      EventManager.dispatch({
        eventName: 'PlasmaBannerScripts.BeforeHidePopup',
      });
      const expires = this.args.closeCookieLifeTime !== '-1'
        ? parseInt(this.args.closeCookieLifeTime, 10)
        : Math.ceil((this.args.endDateS - this.args.currentDateS) / 3600 / 24);
      Cookie.set(`promotionPopup_${this.args.id}_closed`, '1', {
        expires,
      });

      DomService.removeClass(this.popupAnimationBlocks, ['PlasmaPromotionPopup--show']);
      DomService.addClass(this.popupAnimationBlocks, ['PlasmaPromotionPopup--hide']);
      if (this.popupAnimationBlocks !== null) {
        this.popupAnimationBlocks.addEventListener('animationend', () => {
          this.banner.run(this.tagManager);
          if (outTarget) Cookie.remove(`promotionPopup_${this.args.id}_closed`);
          this.popupAnimationBlocks.removeEventListener('animationend', () => {
          });
        });
      }
      document.removeEventListener('click', this.outTarget);
      EventManager.dispatch({
        eventName: 'PlasmaBannerScripts.AfterHidePopup',
      });
    };

    /**
     * @method UiPopup#outTarget
     * @memberof Initiators/UI
     * @description outTarget popup click function
     * @param {Object} event jQuery Event
     * @example
     * const uiPopup = new UiPopup({});
     * $(document).on('click', uiPopup.outTarget);
     */
    outTarget(event) {
      if (this.popupWrapper !== null
            && this.popupWrapper.contains(event.target)
            && DomService.hasClass(this.popupAnimationBlocks, 'PlasmaPromotionPopup--show')) {
        this.hidePopup.call(this, true);
      }
    }
}