@braze/web-sdk
Version:
Braze SDK for web sites and other JS platforms.
197 lines (196 loc) • 7.26 kB
JavaScript
import {
addPassiveEventListener as F,
buildSvg as we,
detectSwipe as O,
DIRECTIONS as P,
} from "../../util/dom-utils.js";
import { createCloseButton as T } from "../../util/component-utils.js";
import { isTransparent as ve, toRgba as ke } from "../../util/color-utils.js";
import FullScreenMessage from "../models/full-screen-message.js";
import HtmlMessage from "../models/html-message.js";
import ModalMessage from "../models/modal-message.js";
import SlideUpMessage from "../models/slide-up-message.js";
import { logInAppMessageClick } from "../log-in-app-message-click.js";
import { _handleBrazeAction as Q } from "../../Core/handle-braze-action.js";
import ft from "./html-message-to-html.js";
import xe from "./modal-utils.js";
import { logger as E, Guid as V } from "../../../shared-lib/index.js";
import { KeyCodes as Ce } from "../../util/key-codes.js";
import {
IamClickAction as $e,
IamCropType as Le,
IamDisplayFailures as Me,
IamImageStyle as qe,
IamOpenTarget as ut,
IamOrientation as Ae,
IamSlideFrom as De,
IamTextAlignment as Ee,
} from "../constants.js";
export default function Fe(e, o, t, a, n, i, s = document.body, m = "ltr") {
if (((e.$o = document.activeElement), e instanceof HtmlMessage))
return ft(e, o, a, n, i);
const l = (function (e, o, t, a, n, i = document.body, s = "ltr") {
let m = null;
const l = document.createElement("div");
(l.dir = s),
(l.className = "ab-in-app-message ab-start-hidden ab-background"),
n && (l.style.zIndex = (n + 1).toString()),
e.zo() &&
((l.className += " ab-modal-interactions"),
l.setAttribute("tabindex", "-1")),
e.Mo() ||
((l.style.color = ke(e.textColor)),
(l.style.backgroundColor = ke(e.backgroundColor)),
ve(e.backgroundColor) && (l.className += " ab-no-shadow"));
const c = () => {
-1 !== l.className.indexOf("ab-start-hidden") &&
((l.className = l.className.replace("ab-start-hidden", "")),
document.querySelectorAll(".ab-iam-img-loading").length > 0
? t(
`Cannot show in-app message ${e.message} because another message is being shown.`,
Me.tE,
)
: o(l));
},
r = (o = !0) => {
let t = document.querySelectorAll(".ab-iam-root");
(t && 0 !== t.length) || (t = i.querySelectorAll(".ab-iam-root")),
t &&
t.length > 0 &&
(t[0].classList.remove("ab-iam-img-loading"),
m && (clearTimeout(m), (m = null)),
o
? c()
: E.error(
`Cannot show in-app message ${e.message} because the image failed to load.`,
));
};
if (
(e.imageStyle === qe.GRAPHIC && (l.className += " graphic"),
e.orientation === Ae.LANDSCAPE && (l.className += " landscape"),
null != e.buttons && 0 === e.buttons.length)
) {
e.clickAction !== $e.NONE && (l.className += " ab-clickable");
const o = (o) => (
e.tl(l, () => {
logInAppMessageClick(e),
e.clickAction === $e.URI &&
Q(e.uri || "", a || e.openTarget === ut.BLANK, o);
}),
o.stopPropagation(),
!1
);
(l.onclick = o),
l.addEventListener("keydown", (e) => {
if (e.keyCode === Ce.Lo || e.keyCode === Ce.Ao) return o(e);
});
}
const d = T(
"Close Message",
e.Mo() ? void 0 : ke(e.closeButtonColor),
() => {
e.tl(l);
},
s,
);
l.appendChild(d), n && (d.style.zIndex = (n + 2).toString());
const u = document.createElement("div");
(u.className = "ab-message-text"),
(u.dir = s),
u.setAttribute("role", "article");
const b = (e.messageAlignment || e.Go).toLowerCase();
u.className += " " + b + "-aligned";
let f = !1;
const p = document.createElement("div");
if (((p.className = "ab-image-area"), e.imageUrl)) {
const o = document.createElement("img");
if (
(o.setAttribute("src", e.imageUrl),
e.Ho(o),
0 === document.querySelectorAll(".ab-iam-img-loading").length)
) {
f = !0;
const e = document.querySelectorAll(".ab-iam-root");
e && e.length > 0 && e[0].classList.add("ab-iam-img-loading"),
(m = window.setTimeout(() => {
r(!1);
}, 6e4)),
(o.onload = () => {
r();
}),
(o.onerror = () => {
r(!1);
});
}
if (e.cropType === Le.CENTER_CROP) {
const e = document.createElement("div");
(e.className = "ab-center-cropped-img"),
e.appendChild(o),
p.appendChild(e);
} else p.appendChild(o);
l.appendChild(p), (u.className += " ab-with-image");
} else if (e.icon) {
p.className += " ab-icon-area";
const o = document.createElement("span");
(o.className = "ab-icon"),
e.Mo() ||
((o.style.backgroundColor = ke(e.iconBackgroundColor)),
(o.style.color = ke(e.iconColor)));
const t = document.createElement("i");
(t.className = "fa"),
t.appendChild(document.createTextNode(e.icon)),
t.setAttribute("aria-hidden", "true"),
o.appendChild(t),
p.appendChild(o),
l.appendChild(p),
(u.className += " ab-with-icon");
}
if ((F(u, "touchstart"), e.header && e.header.length > 0)) {
const o = document.createElement("h1");
(o.className = "ab-message-header"), (e.Jo = V.de()), (o.id = e.Jo);
const t = (e.headerAlignment || Ee.CENTER).toLowerCase();
(o.className += " " + t + "-aligned"),
e.Mo() || (o.style.color = ke(e.headerTextColor)),
o.appendChild(document.createTextNode(e.header)),
u.appendChild(o);
}
const g = e.Ko();
return u.appendChild(g), l.appendChild(u), f || c(), (e.Eo = l), l;
})(e, o, t, a, n, s, m);
if (e instanceof FullScreenMessage || e instanceof ModalMessage) {
const o = e instanceof FullScreenMessage ? "ab-fullscreen" : "ab-modal";
(l.className += ` ${o} ab-centered`),
xe.No(e, l, a),
xe.Po(l),
xe.Qo(e.Jo, l);
} else if (e instanceof SlideUpMessage) {
(l.className += " ab-slideup"),
l.setAttribute("tabindex", "0"),
l.setAttribute("role", "alert");
const o = l.getElementsByClassName("ab-close-button")[0];
if (null != o) {
const t = we(
"0 0 11.38 19.44",
"M11.38 9.72l-9.33 9.72L0 17.3l7.27-7.58L0 2.14 2.05 0l9.33 9.72z",
e.Mo() ? void 0 : ke(e.closeButtonColor),
);
t.setAttribute("class", `ab-chevron ${m}`), o.appendChild(t);
}
let t, a;
O(l, P.ie, (e) => {
(l.className += " ab-swiped-left"),
null != o && null != o.onclick && o.onclick(e);
}),
O(l, P.ne, (e) => {
(l.className += " ab-swiped-right"),
null != o && null != o.onclick && o.onclick(e);
}),
e.slideFrom === De.TOP
? ((t = P.Uo), (a = " ab-swiped-up"))
: ((t = P.Vo), (a = " ab-swiped-down")),
O(l, t, (e) => {
(l.className += a), null != o && null != o.onclick && o.onclick(e);
});
}
return l;
}