@braze/web-sdk
Version:
Braze SDK for web sites and other JS platforms.
392 lines (391 loc) • 10.8 kB
JavaScript
import r, { OPTIONS as q } 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";
import { PAUSE_SCROLLING_CLASS as It } from "../../common/constants.js";
export default class InAppMessage {
constructor(
t,
s,
i,
h,
e,
E,
n,
T,
o,
r,
l,
a,
A,
I,
c,
O,
m,
L,
_,
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 = m),
(this.closeButtonColor = L),
(this.animateIn = _),
(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 = m || InAppMessage.th.hh),
(this.closeButtonColor = L || InAppMessage.th.eh),
(this.animateIn = _),
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.So = !1),
(this.Th = !1),
(this.Qe = null),
(this.Ve = null),
(this.ti = new u()),
(this.oh = new u()),
(this.bo = 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.Qe);
}
We() {
return !0;
}
Po() {
return this.We();
}
Pe() {
return null != this.htmlId && this.htmlId.length > 4;
}
Oe() {
return this.Pe() && null != this.css && this.css.length > 0;
}
He() {
if (this.Pe() && this.Oe()) return this.htmlId + "-css";
}
Qt() {
return !this.kt && ((this.kt = !0), !0);
}
zo() {
return this.kt;
}
$t(t) {
return !this.So && ((this.So = !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.We() && null != s.parentNode)) {
const t = s.parentNode.classList;
t && t.contains(It) && t.remove(It),
document.body.removeEventListener("touchmove", InAppMessage.rh);
}
s.className = s.className.replace(InAppMessage.lh, InAppMessage.uh);
}
return this.animateOut || !1;
}
ll(t, s) {
if (null == t) return;
let i;
(this.Qe = 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.He();
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.hr) : n(), this.Ve && this.Ve.focus();
}
jo() {
return document.createTextNode(this.message || "");
}
po(t) {
t.setAttribute("alt", this.altImageText || "");
}
static rh(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(`.${It}`) && t.cancelable && t.preventDefault());
}
ah(t) {
const s = t.parentNode;
this.We() &&
null != s &&
this.orientation !== InAppMessage.Orientation.LANDSCAPE &&
(null != s.classList && s.classList.add(It),
document.body.addEventListener(
"touchmove",
InAppMessage.rh,
!!Tt() && { passive: !1 },
)),
(t.className += " " + InAppMessage.lh);
}
static Ah(t) {
if (
t.keyCode === ie.Ih &&
!r.ee(q.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;
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);
}
}
}
mh() {
this.nh ||
r.ee(q.Oh) ||
(document.addEventListener("keydown", InAppMessage.Ah, !1),
r.Lh(() => {
document.removeEventListener("keydown", InAppMessage.Ah);
}),
(this.nh = !0));
}
dt(t) {
const s = {};
return t
? ((s[InAppMessage.ss.ra] = this.message),
(s[InAppMessage.ss.sa] = this.messageAlignment),
(s[InAppMessage.ss._h] = this.slideFrom),
(s[InAppMessage.ss.xs] = this.extras),
(s[InAppMessage.ss.ta] = this.triggerId),
(s[InAppMessage.ss.ia] = this.clickAction),
(s[InAppMessage.ss.URI] = this.uri),
(s[InAppMessage.ss.oa] = this.openTarget),
(s[InAppMessage.ss.pa] = this.dismissType),
(s[InAppMessage.ss.ma] = this.duration),
(s[InAppMessage.ss.na] = this.icon),
(s[InAppMessage.ss.ns] = this.imageUrl),
(s[InAppMessage.ss.ua] = this.imageStyle),
(s[InAppMessage.ss.ca] = this.iconColor),
(s[InAppMessage.ss.fa] = this.iconBackgroundColor),
(s[InAppMessage.ss.da] = this.backgroundColor),
(s[InAppMessage.ss.la] = this.textColor),
(s[InAppMessage.ss.ga] = this.closeButtonColor),
(s[InAppMessage.ss.ja] = this.animateIn),
(s[InAppMessage.ss.xa] = this.animateOut),
(s[InAppMessage.ss.za] = this.header),
(s[InAppMessage.ss.ha] = this.headerAlignment),
(s[InAppMessage.ss.va] = this.headerTextColor),
(s[InAppMessage.ss.wa] = this.frameColor),
(s[InAppMessage.ss.ya] = this.buttons),
(s[InAppMessage.ss.Sa] = this.cropType),
(s[InAppMessage.ss.ba] = this.orientation),
(s[InAppMessage.ss.ka] = this.htmlId),
(s[InAppMessage.ss.CSS] = this.css),
(s[InAppMessage.ss.ts] = t),
(s[InAppMessage.ss.qa] = this.messageExtras),
(s[InAppMessage.ss.LANGUAGE] = this.language),
(s[InAppMessage.ss.ks] = this.altImageText),
s)
: s;
}
}
(InAppMessage.th = {
hh: 4281545523,
ih: 4294967295,
sh: 4278219733,
Nh: 4293914607,
Rh: 4283782485,
Eh: 3224580915,
eh: 4288387995,
}),
(InAppMessage.Ze = {
Sh: "hd",
Ye: "ias",
Mh: "of",
Dh: "do",
Ch: "umt",
dh: "tf",
Uh: "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.Le = {
Tn: "SLIDEUP",
An: "MODAL",
Io: "MODAL_STYLED",
bn: "FULL",
Mn: "WEB_HTML",
Ke: "HTML",
Ao: "HTML_FULL",
}),
(InAppMessage.hr = 500),
(InAppMessage.bh = 200),
(InAppMessage.lh = "ab-show"),
(InAppMessage.uh = "ab-hide"),
(InAppMessage.ss = {
ra: "m",
sa: "ma",
_h: "sf",
xs: "e",
ta: "ti",
ia: "ca",
URI: "u",
oa: "oa",
pa: "dt",
ma: "d",
na: "i",
ns: "iu",
ua: "is",
ca: "ic",
fa: "ibc",
da: "bc",
la: "tc",
ga: "cbc",
ja: "ai",
xa: "ao",
za: "h",
ha: "ha",
va: "htc",
wa: "fc",
ya: "b",
Sa: "ct",
ba: "o",
ka: "hi",
CSS: "css",
ts: "type",
qo: "messageFields",
qa: "me",
LANGUAGE: "l",
ks: "ia",
});