@braze/web-sdk
Version:
Braze SDK for web sites and other JS platforms.
390 lines (389 loc) • 10.7 kB
JavaScript
import r, { OPTIONS as w } 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 mt } from "../../util/key-codes.js";
import u from "../../managers/subscription-manager.js";
import { isIFrame as It } from "../utils/in-app-message-utils.js";
export default class InAppMessage {
constructor(
t,
s,
i,
h,
e,
E,
n,
T,
o,
r,
l,
a,
I,
c,
A,
O,
_,
m,
L,
N,
S,
R,
M,
D,
C,
d,
U,
b,
P,
p,
) {
(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 = I),
(this.iconColor = c),
(this.iconBackgroundColor = A),
(this.backgroundColor = O),
(this.textColor = _),
(this.closeButtonColor = m),
(this.animateIn = L),
(this.animateOut = N),
(this.header = S),
(this.headerAlignment = R),
(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.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 = I || InAppMessage.ImageStyle.TOP),
(this.iconColor = c || InAppMessage.th.ih),
(this.iconBackgroundColor = A || InAppMessage.th.sh),
(this.backgroundColor = O || InAppMessage.th.ih),
(this.textColor = _ || InAppMessage.th.hh),
(this.closeButtonColor = m || InAppMessage.th.eh),
(this.animateIn = L),
null == this.animateIn && (this.animateIn = !0),
(this.animateOut = N),
null == this.animateOut && (this.animateOut = !0),
(this.header = S),
(this.headerAlignment = R || 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.nh = !1),
(this.Ht = !1),
(this.So = !1),
(this.Th = !1),
(this.ho = null),
(this.jo = null),
(this.ti = new u()),
(this.oh = new u()),
(this.Co = InAppMessage.TextAlignment.CENTER);
}
subscribeToClickedEvent(t) {
return this.ti.Ft(t);
}
subscribeToDismissedEvent(t) {
return this.oh.Ft(t);
}
removeSubscription(t) {
this.ti.removeSubscription(t), this.oh.removeSubscription(t);
}
removeAllSubscriptions() {
this.ti.removeAllSubscriptions(), this.oh.removeAllSubscriptions();
}
closeMessage() {
this.ll(this.ho);
}
wo() {
return !0;
}
Po() {
return this.wo();
}
bo() {
return null != this.htmlId && this.htmlId.length > 4;
}
lo() {
return this.bo() && null != this.css && this.css.length > 0;
}
do() {
if (this.bo() && this.lo()) return this.htmlId + "-css";
}
ts() {
return !this.Ht && ((this.Ht = !0), !0);
}
Do() {
return this.Ht;
}
$t(t) {
return !this.So && ((this.So = !0), this.ti.X(), !0);
}
Qt() {
return !this.Th && ((this.Th = !0), this.oh.X(), !0);
}
hide(t) {
if (t && t.parentNode) {
let s = t.closest(".ab-iam-root");
if ((null == s && (s = t), this.wo() && 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.ho = 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.do();
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.Qt();
};
h ? setTimeout(n, InAppMessage.Ih) : n(), this.jo && this.jo.focus();
}
Mo() {
return document.createTextNode(this.message || "");
}
$o(t) {
let s = "";
this.message || this.header || !this.wo() || (s = "Modal Image"),
t.setAttribute("alt", s);
}
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.wo() &&
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 Oh(t) {
if (
t.keyCode === mt._h &&
!r.ee(w.mh) &&
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;
It(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);
}
}
}
Lh() {
this.nh ||
r.ee(w.mh) ||
(document.addEventListener("keydown", InAppMessage.Oh, !1),
r.Nh(() => {
document.removeEventListener("keydown", InAppMessage.Oh);
}),
(this.nh = !0));
}
bt(t) {
const s = {};
return t
? ((s[InAppMessage.es.ra] = this.message),
(s[InAppMessage.es.sa] = this.messageAlignment),
(s[InAppMessage.es.Sh] = this.slideFrom),
(s[InAppMessage.es.vs] = this.extras),
(s[InAppMessage.es.ta] = this.triggerId),
(s[InAppMessage.es.ia] = this.clickAction),
(s[InAppMessage.es.URI] = this.uri),
(s[InAppMessage.es.oa] = this.openTarget),
(s[InAppMessage.es.pa] = this.dismissType),
(s[InAppMessage.es.ma] = this.duration),
(s[InAppMessage.es.na] = this.icon),
(s[InAppMessage.es.fs] = this.imageUrl),
(s[InAppMessage.es.ua] = this.imageStyle),
(s[InAppMessage.es.ca] = this.iconColor),
(s[InAppMessage.es.fa] = this.iconBackgroundColor),
(s[InAppMessage.es.da] = this.backgroundColor),
(s[InAppMessage.es.la] = this.textColor),
(s[InAppMessage.es.ga] = this.closeButtonColor),
(s[InAppMessage.es.ja] = this.animateIn),
(s[InAppMessage.es.xa] = this.animateOut),
(s[InAppMessage.es.za] = this.header),
(s[InAppMessage.es.ha] = this.headerAlignment),
(s[InAppMessage.es.va] = this.headerTextColor),
(s[InAppMessage.es.wa] = this.frameColor),
(s[InAppMessage.es.ya] = this.buttons),
(s[InAppMessage.es.Sa] = this.cropType),
(s[InAppMessage.es.ba] = this.orientation),
(s[InAppMessage.es.ka] = this.htmlId),
(s[InAppMessage.es.CSS] = this.css),
(s[InAppMessage.es.hs] = t),
(s[InAppMessage.es.qa] = this.messageExtras),
s)
: s;
}
}
(InAppMessage.th = {
hh: 4281545523,
ih: 4294967295,
sh: 4278219733,
Rh: 4293914607,
Mh: 4283782485,
Eh: 3224580915,
eh: 4288387995,
}),
(InAppMessage.xo = {
Dh: "hd",
vo: "ias",
Ch: "of",
dh: "do",
Uh: "umt",
bh: "tf",
Ph: "te",
}),
(InAppMessage.SlideFrom = { TOP: "TOP", BOTTOM: "BOTTOM" }),
(InAppMessage.ClickAction = {
NEWS_FEED: "NEWS_FEED",
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.po = {
Yr: "SLIDEUP",
Wr: "MODAL",
Ao: "MODAL_STYLED",
Qr: "FULL",
Vr: "WEB_HTML",
fo: "HTML",
Fo: "HTML_FULL",
}),
(InAppMessage.Ih = 500),
(InAppMessage.ph = 200),
(InAppMessage.uh = "ab-show"),
(InAppMessage.ah = "ab-hide"),
(InAppMessage.rh = "ab-pause-scrolling"),
(InAppMessage.es = {
ra: "m",
sa: "ma",
Sh: "sf",
vs: "e",
ta: "ti",
ia: "ca",
URI: "u",
oa: "oa",
pa: "dt",
ma: "d",
na: "i",
fs: "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",
hs: "type",
Go: "messageFields",
qa: "me",
});