@braze/web-sdk
Version:
Braze SDK for web sites and other JS platforms.
340 lines (339 loc) • 9.1 kB
JavaScript
import r, { OPTIONS as U } from "../../managers/braze-instance.js";
import ro from "../../util/browser-detector.js";
import {
clickElement as kt,
supportsPassive as wt,
} from "../../util/dom-utils.js";
import { KeyCodes as Ce } from "../../util/key-codes.js";
import f from "../../managers/subscription-manager.js";
import { isIFrame as St } from "../utils/in-app-message-utils.js";
import {
IamStrings as mr,
IamColors as ss,
IamClickAction as $e,
IAM_SHOW_CLASS as Tt,
IAM_HIDE_CLASS as xt,
IamDisplayFailures as Me,
IamSlideFrom as De,
IamDismissType as pr,
IamOpenTarget as ut,
IamImageStyle as qe,
IamOrientation as Ae,
IamTextAlignment as Ee,
IamCropType as Le,
IamServerTypes as dt,
IamTiming as Et,
IamSerializationKeys as cr,
} from "../constants.js";
export default class InAppMessage {
constructor(
t,
s,
i,
h,
e,
n,
r,
o,
l,
u,
a,
m,
c,
d,
p,
b,
g,
v,
I,
j,
k,
w,
y,
S,
T,
x,
E,
H,
M,
C,
D,
z,
) {
(this.message = t),
(this.messageAlignment = s),
(this.slideFrom = i),
(this.extras = h),
(this.triggerId = e),
(this.clickAction = n),
(this.uri = r),
(this.openTarget = o),
(this.dismissType = l),
(this.duration = u),
(this.icon = a),
(this.imageUrl = m),
(this.imageStyle = c),
(this.iconColor = d),
(this.iconBackgroundColor = p),
(this.backgroundColor = b),
(this.textColor = g),
(this.closeButtonColor = v),
(this.animateIn = I),
(this.animateOut = j),
(this.header = k),
(this.headerAlignment = w),
(this.headerTextColor = y),
(this.frameColor = S),
(this.buttons = T),
(this.cropType = x),
(this.orientation = E),
(this.htmlId = H),
(this.css = M),
(this.messageExtras = C),
(this.language = D),
(this.altImageText = z),
(this.message = t),
(this.messageAlignment = s || Ee.CENTER),
(this.duration = u || 5e3),
(this.slideFrom = i || De.BOTTOM),
(this.extras = h || {}),
(this.triggerId = e),
(this.clickAction = n || $e.NONE),
(this.uri = r),
(this.openTarget = o || ut.NONE),
(this.dismissType = l || pr.AUTO_DISMISS),
(this.icon = a),
(this.imageUrl = m),
(this.imageStyle = c || qe.TOP),
(this.iconColor = d || ss.AE),
(this.iconBackgroundColor = p || ss._E),
(this.backgroundColor = b || ss.AE),
(this.textColor = g || ss.IE),
(this.closeButtonColor = v || ss.NE),
(this.animateIn = I),
null == this.animateIn && (this.animateIn = !0),
(this.animateOut = j),
null == this.animateOut && (this.animateOut = !0),
(this.header = k),
(this.headerAlignment = w || Ee.CENTER),
(this.headerTextColor = y || ss.IE),
(this.frameColor = S || ss.SE),
(this.buttons = T || []),
(this.cropType = x || Le.FIT_CENTER),
(this.orientation = E),
(this.htmlId = H),
(this.css = M),
(this.isControl = !1),
(this.messageExtras = C),
(this.language = D),
(this.altImageText = z),
(this.th = !1),
(this.Zt = !1),
(this.rd = !1),
(this.sh = !1),
(this.Eo = null),
(this.$o = null),
(this.ti = new f()),
(this.ih = new f()),
(this.Go = Ee.CENTER);
}
subscribeToClickedEvent(t) {
return this.ti.Kt(t);
}
subscribeToDismissedEvent(t) {
return this.ih.Kt(t);
}
removeSubscription(t) {
this.ti.removeSubscription(t), this.ih.removeSubscription(t);
}
removeAllSubscriptions() {
this.ti.removeAllSubscriptions(), this.ih.removeAllSubscriptions();
}
closeMessage() {
this.tl(this.Eo);
}
zo() {
return !0;
}
od() {
return this.zo();
}
Bo() {
return null != this.htmlId && this.htmlId.length > 4;
}
Mo() {
return this.Bo() && null != this.css && this.css.length > 0;
}
Oo() {
if (this.Bo() && this.Mo()) return this.htmlId + "-css";
}
gs() {
return !this.Zt && ((this.Zt = !0), !0);
}
sm() {
return this.Zt;
}
ss(t) {
return !this.rd && ((this.rd = !0), this.ti.A(), !0);
}
ls() {
return !this.sh && ((this.sh = !0), this.ih.A(), !0);
}
hide(t) {
if (t && t.parentNode) {
let s = t.closest(".ab-iam-root");
if ((null == s && (s = t), this.zo() && null != s.parentNode)) {
const t = s.parentNode.classList;
t && t.contains(mr.TE) && t.remove(mr.TE),
document.body.removeEventListener("touchmove", InAppMessage.hh);
}
s.className = s.className.replace(Tt, xt);
}
return this.animateOut || !1;
}
tl(t, s) {
if (null == t) return;
let i;
(this.Eo = null),
(i =
-1 === t.className.indexOf("ab-in-app-message")
? t.getElementsByClassName("ab-in-app-message")[0]
: t);
let h = !1;
i && (h = this.hide(i));
const e = document.body;
let n;
null != e && (n = e.scrollTop);
const r = () => {
if (t && t.parentNode) {
let s = t.closest(".ab-iam-root");
null == s && (s = t), s.parentNode && s.parentNode.removeChild(s);
}
const i = this.Oo();
if (null != i) {
const t = document.getElementById(i);
t && t.parentNode && t.parentNode.removeChild(t);
}
null != e && "Safari" === ro.browser && (e.scrollTop = n),
s ? s() : this.ls();
};
h ? setTimeout(r, Et.gr) : r(), this.$o && this.$o.focus();
}
Ko() {
return document.createTextNode(this.message || "");
}
Ho(t) {
t.setAttribute("alt", this.altImageText || "");
}
static hh(t) {
if (t.targetTouches && t.targetTouches.length > 1) return;
const s = t.target;
(s &&
s.classList &&
s.classList.contains("ab-message-text") &&
s.scrollHeight > s.clientHeight) ||
(document.querySelector(`.${mr.TE}`) &&
t.cancelable &&
t.preventDefault());
}
eh(t) {
const s = t.parentNode;
this.zo() &&
null != s &&
this.orientation !== Ae.LANDSCAPE &&
(null != s.classList && s.classList.add(mr.TE),
document.body.addEventListener(
"touchmove",
InAppMessage.hh,
!!wt() && { passive: !1 },
)),
(t.className += " " + Tt);
}
static nh(t) {
if (
t.keyCode === Ce.rh &&
!r.er(U.oh) &&
document.querySelectorAll(".ab-modal-interactions").length > 0
) {
const t = document.getElementsByClassName("ab-html-message");
let s = !1;
for (const i of t) {
let t = null;
St(i) &&
i.contentWindow &&
(t = i.contentWindow.document.getElementsByClassName(
"ab-programmatic-close-button",
)[0]),
null != t && (kt(t), (s = !0));
}
if (!s) {
const t = document.querySelectorAll(
".ab-modal-interactions > .ab-close-button",
)[0];
null != t && kt(t);
}
}
}
lh() {
this.th ||
r.er(U.oh) ||
(document.addEventListener("keydown", InAppMessage.nh, !1),
r.uh(() => {
document.removeEventListener("keydown", InAppMessage.nh);
}),
(this.th = !0));
}
qt(t) {
const s = {};
return t
? ((s[cr.rE] = this.message),
(s[cr.mE] = this.messageAlignment),
(s[cr.GE] = this.slideFrom),
(s[cr.Fs] = this.extras),
(s[cr.FE] = this.triggerId),
(s[cr.HE] = this.clickAction),
(s[cr.URI] = this.uri),
(s[cr.xE] = this.openTarget),
(s[cr.BE] = this.dismissType),
(s[cr.lE] = this.duration),
(s[cr.bE] = this.icon),
(s[cr.ys] = this.imageUrl),
(s[cr.gE] = this.imageStyle),
(s[cr.YE] = this.iconColor),
(s[cr.KE] = this.iconBackgroundColor),
(s[cr.XE] = this.backgroundColor),
(s[cr.dE] = this.textColor),
(s[cr.hE] = this.closeButtonColor),
(s[cr.yE] = this.animateIn),
(s[cr.uE] = this.animateOut),
(s[cr.WE] = this.header),
(s[cr.fE] = this.headerAlignment),
(s[cr.jE] = this.headerTextColor),
(s[cr.kE] = this.frameColor),
(s[cr.vE] = this.buttons),
(s[cr.wE] = this.cropType),
(s[cr.zE] = this.orientation),
(s[cr.VE] = this.htmlId),
(s[cr.CSS] = this.css),
(s[cr.xs] = t),
(s[cr.JE] = this.messageExtras),
(s[cr.LANGUAGE] = this.language),
(s[cr.Ks] = this.altImageText),
s)
: s;
}
}
(InAppMessage.ah = ss),
(InAppMessage.mh = Me),
(InAppMessage.SlideFrom = De),
(InAppMessage.ClickAction = $e),
(InAppMessage.DismissType = pr),
(InAppMessage.OpenTarget = ut),
(InAppMessage.ImageStyle = qe),
(InAppMessage.Orientation = Ae),
(InAppMessage.TextAlignment = Ee),
(InAppMessage.CropType = Le),
(InAppMessage.dh = dt),
(InAppMessage.gr = Et.gr),
(InAppMessage.pE = Et.pE),
(InAppMessage.bs = cr);