@braze/web-sdk
Version:
Braze SDK for web sites and other JS platforms.
394 lines (393 loc) • 10.8 kB
JavaScript
import r, { OPTIONS as z } from "../../managers/braze-instance.js";
import ro from "../../util/browser-detector.js";
import {
clickElement as Et,
supportsPassive as Tt,
} from "../../util/dom-utils.js";
import { KeyCodes as ie } from "../../util/key-codes.js";
import u from "../../managers/subscription-manager.js";
import { isIFrame as At } from "../utils/in-app-message-utils.js";
export default class InAppMessage {
constructor(
t,
s,
i,
h,
e,
E,
n,
T,
o,
r,
l,
a,
A,
I,
c,
O,
L,
_,
m,
N,
R,
S,
M,
D,
C,
d,
U,
b,
P,
p,
f,
G,
) {
(this.message = t),
(this.messageAlignment = s),
(this.slideFrom = i),
(this.extras = h),
(this.triggerId = e),
(this.clickAction = E),
(this.uri = n),
(this.openTarget = T),
(this.dismissType = o),
(this.duration = r),
(this.icon = l),
(this.imageUrl = a),
(this.imageStyle = A),
(this.iconColor = I),
(this.iconBackgroundColor = c),
(this.backgroundColor = O),
(this.textColor = L),
(this.closeButtonColor = _),
(this.animateIn = m),
(this.animateOut = N),
(this.header = R),
(this.headerAlignment = S),
(this.headerTextColor = M),
(this.frameColor = D),
(this.buttons = C),
(this.cropType = d),
(this.orientation = U),
(this.htmlId = b),
(this.css = P),
(this.messageExtras = p),
(this.language = f),
(this.altImageText = G),
(this.message = t),
(this.messageAlignment = s || InAppMessage.TextAlignment.CENTER),
(this.duration = r || 5e3),
(this.slideFrom = i || InAppMessage.SlideFrom.BOTTOM),
(this.extras = h || {}),
(this.triggerId = e),
(this.clickAction = E || InAppMessage.ClickAction.NONE),
(this.uri = n),
(this.openTarget = T || InAppMessage.OpenTarget.NONE),
(this.dismissType = o || InAppMessage.DismissType.AUTO_DISMISS),
(this.icon = l),
(this.imageUrl = a),
(this.imageStyle = A || InAppMessage.ImageStyle.TOP),
(this.iconColor = I || InAppMessage.th.ih),
(this.iconBackgroundColor = c || InAppMessage.th.sh),
(this.backgroundColor = O || InAppMessage.th.ih),
(this.textColor = L || InAppMessage.th.hh),
(this.closeButtonColor = _ || InAppMessage.th.eh),
(this.animateIn = m),
null == this.animateIn && (this.animateIn = !0),
(this.animateOut = N),
null == this.animateOut && (this.animateOut = !0),
(this.header = R),
(this.headerAlignment = S || InAppMessage.TextAlignment.CENTER),
(this.headerTextColor = M || InAppMessage.th.hh),
(this.frameColor = D || InAppMessage.th.Eh),
(this.buttons = C || []),
(this.cropType = d || InAppMessage.CropType.FIT_CENTER),
(this.orientation = U),
(this.htmlId = b),
(this.css = P),
(this.isControl = !1),
(this.messageExtras = p),
(this.language = f),
(this.altImageText = G),
(this.nh = !1),
(this.kt = !1),
(this.Co = !1),
(this.Th = !1),
(this.Pe = null),
(this.Qe = null),
(this.ti = new u()),
(this.oh = new u()),
(this.do = InAppMessage.TextAlignment.CENTER);
}
subscribeToClickedEvent(t) {
return this.ti.wt(t);
}
subscribeToDismissedEvent(t) {
return this.oh.wt(t);
}
removeSubscription(t) {
this.ti.removeSubscription(t), this.oh.removeSubscription(t);
}
removeAllSubscriptions() {
this.ti.removeAllSubscriptions(), this.oh.removeAllSubscriptions();
}
closeMessage() {
this.ll(this.Pe);
}
Ve() {
return !0;
}
Bo() {
return this.Ve();
}
Le() {
return null != this.htmlId && this.htmlId.length > 4;
}
Oe() {
return this.Le() && null != this.css && this.css.length > 0;
}
Ge() {
if (this.Le() && this.Oe()) return this.htmlId + "-css";
}
Qt() {
return !this.kt && ((this.kt = !0), !0);
}
Ur() {
return this.kt;
}
$t(t) {
return !this.Co && ((this.Co = !0), this.ti.L(), !0);
}
Kt() {
return !this.Th && ((this.Th = !0), this.oh.L(), !0);
}
hide(t) {
if (t && t.parentNode) {
let s = t.closest(".ab-iam-root");
if ((null == s && (s = t), this.Ve() && null != s.parentNode)) {
const t = s.parentNode.classList;
t && t.contains(InAppMessage.rh) && t.remove(InAppMessage.rh),
document.body.removeEventListener("touchmove", InAppMessage.lh);
}
s.className = s.className.replace(InAppMessage.uh, InAppMessage.ah);
}
return this.animateOut || !1;
}
ll(t, s) {
if (null == t) return;
let i;
(this.Pe = 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 E;
null != e && (E = e.scrollTop);
const n = () => {
if (t && t.parentNode) {
let s = t.closest(".ab-iam-root");
null == s && (s = t), s.parentNode && s.parentNode.removeChild(s);
}
const i = this.Ge();
if (null != i) {
const t = document.getElementById(i);
t && t.parentNode && t.parentNode.removeChild(t);
}
null != e && "Safari" === ro.browser && (e.scrollTop = E),
s ? s() : this.Kt();
};
h ? setTimeout(n, InAppMessage.cr) : n(), this.Qe && this.Qe.focus();
}
ho() {
return document.createTextNode(this.message || "");
}
bo(t) {
t.setAttribute("alt", this.altImageText || "");
}
static lh(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(`.${InAppMessage.rh}`) &&
t.cancelable &&
t.preventDefault());
}
Ah(t) {
const s = t.parentNode;
this.Ve() &&
null != s &&
this.orientation !== InAppMessage.Orientation.LANDSCAPE &&
(null != s.classList && s.classList.add(InAppMessage.rh),
document.body.addEventListener(
"touchmove",
InAppMessage.lh,
!!Tt() && { passive: !1 },
)),
(t.className += " " + InAppMessage.uh);
}
static Ih(t) {
if (
t.keyCode === ie.Oh &&
!r.ee(z.Lh) &&
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;
At(i) &&
i.contentWindow &&
(t = i.contentWindow.document.getElementsByClassName(
"ab-programmatic-close-button",
)[0]),
null != t && (Et(t), (s = !0));
}
if (!s) {
const t = document.querySelectorAll(
".ab-modal-interactions > .ab-close-button",
)[0];
null != t && Et(t);
}
}
}
_h() {
this.nh ||
r.ee(z.Lh) ||
(document.addEventListener("keydown", InAppMessage.Ih, !1),
r.mh(() => {
document.removeEventListener("keydown", InAppMessage.Ih);
}),
(this.nh = !0));
}
dt(t) {
const s = {};
return t
? ((s[InAppMessage.ss.Vr] = this.message),
(s[InAppMessage.ss.Wr] = this.messageAlignment),
(s[InAppMessage.ss.Nh] = this.slideFrom),
(s[InAppMessage.ss.xs] = this.extras),
(s[InAppMessage.ss.Yr] = this.triggerId),
(s[InAppMessage.ss.Zr] = this.clickAction),
(s[InAppMessage.ss.URI] = this.uri),
(s[InAppMessage.ss.ra] = this.openTarget),
(s[InAppMessage.ss.sa] = this.dismissType),
(s[InAppMessage.ss.ta] = this.duration),
(s[InAppMessage.ss.ia] = this.icon),
(s[InAppMessage.ss.ns] = this.imageUrl),
(s[InAppMessage.ss.oa] = this.imageStyle),
(s[InAppMessage.ss.pa] = this.iconColor),
(s[InAppMessage.ss.ma] = this.iconBackgroundColor),
(s[InAppMessage.ss.na] = this.backgroundColor),
(s[InAppMessage.ss.ua] = this.textColor),
(s[InAppMessage.ss.ca] = this.closeButtonColor),
(s[InAppMessage.ss.fa] = this.animateIn),
(s[InAppMessage.ss.da] = this.animateOut),
(s[InAppMessage.ss.la] = this.header),
(s[InAppMessage.ss.ga] = this.headerAlignment),
(s[InAppMessage.ss.ja] = this.headerTextColor),
(s[InAppMessage.ss.xa] = this.frameColor),
(s[InAppMessage.ss.za] = this.buttons),
(s[InAppMessage.ss.ha] = this.cropType),
(s[InAppMessage.ss.va] = this.orientation),
(s[InAppMessage.ss.wa] = this.htmlId),
(s[InAppMessage.ss.CSS] = this.css),
(s[InAppMessage.ss.ts] = t),
(s[InAppMessage.ss.ya] = this.messageExtras),
(s[InAppMessage.ss.LANGUAGE] = this.language),
(s[InAppMessage.ss.ks] = this.altImageText),
s)
: s;
}
}
(InAppMessage.th = {
hh: 4281545523,
ih: 4294967295,
sh: 4278219733,
Rh: 4293914607,
Sh: 4283782485,
Eh: 3224580915,
eh: 4288387995,
}),
(InAppMessage.Ye = {
Mh: "hd",
We: "ias",
Dh: "of",
Ch: "do",
dh: "umt",
Uh: "tf",
bh: "te",
}),
(InAppMessage.SlideFrom = { TOP: "TOP", BOTTOM: "BOTTOM" }),
(InAppMessage.ClickAction = { URI: "URI", NONE: "NONE" }),
(InAppMessage.DismissType = {
AUTO_DISMISS: "AUTO_DISMISS",
MANUAL: "SWIPE",
}),
(InAppMessage.OpenTarget = { NONE: "NONE", BLANK: "BLANK" }),
(InAppMessage.ImageStyle = { TOP: "TOP", GRAPHIC: "GRAPHIC" }),
(InAppMessage.Orientation = { PORTRAIT: "PORTRAIT", LANDSCAPE: "LANDSCAPE" }),
(InAppMessage.TextAlignment = {
START: "START",
CENTER: "CENTER",
END: "END",
}),
(InAppMessage.CropType = {
CENTER_CROP: "CENTER_CROP",
FIT_CENTER: "FIT_CENTER",
}),
(InAppMessage.Ke = {
Kr: "SLIDEUP",
Jr: "MODAL",
Io: "MODAL_STYLED",
Or: "FULL",
Hr: "WEB_HTML",
Je: "HTML",
Ao: "HTML_FULL",
}),
(InAppMessage.cr = 500),
(InAppMessage.Ph = 200),
(InAppMessage.uh = "ab-show"),
(InAppMessage.ah = "ab-hide"),
(InAppMessage.rh = "ab-pause-scrolling"),
(InAppMessage.ss = {
Vr: "m",
Wr: "ma",
Nh: "sf",
xs: "e",
Yr: "ti",
Zr: "ca",
URI: "u",
ra: "oa",
sa: "dt",
ta: "d",
ia: "i",
ns: "iu",
oa: "is",
pa: "ic",
ma: "ibc",
na: "bc",
ua: "tc",
ca: "cbc",
fa: "ai",
da: "ao",
la: "h",
ga: "ha",
ja: "htc",
xa: "fc",
za: "b",
ha: "ct",
va: "o",
wa: "hi",
CSS: "css",
ts: "type",
Po: "messageFields",
ya: "me",
LANGUAGE: "l",
ks: "ia",
});