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);
}
}
}