@braze/web-sdk
Version:
Braze SDK for web sites and other JS platforms.
197 lines (196 loc) • 7.38 kB
JavaScript
import {
addPassiveEventListener as J,
buildSvg as oe,
detectSwipe as H,
DIRECTIONS as R,
} from "../../util/dom-utils.js";
import { createCloseButton as T } from "../../util/component-utils.js";
import { isTransparent as te, toRgba as ae } from "../../util/color-utils.js";
import FullScreenMessage from "../models/full-screen-message.js";
import HtmlMessage from "../models/html-message.js";
import InAppMessage from "../models/in-app-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 K } from "../../Core/handle-braze-action.js";
import ct from "./html-message-to-html.js";
import ne from "./modal-utils.js";
import { logger as E, Guid as L } from "../../../shared-lib/index.js";
import { KeyCodes as ie } from "../../util/key-codes.js";
export default function le(e, o, t, a, n, i, s = document.body, m = "ltr") {
if (((e.Ve = document.activeElement), e instanceof HtmlMessage))
return ct(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.We() &&
((l.className += " ab-modal-interactions"),
l.setAttribute("tabindex", "-1")),
e.Oe() ||
((l.style.color = ae(e.textColor)),
(l.style.backgroundColor = ae(e.backgroundColor)),
te(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.`,
InAppMessage.Ze.Ye,
)
: 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 === InAppMessage.ImageStyle.GRAPHIC &&
(l.className += " graphic"),
e.orientation === InAppMessage.Orientation.LANDSCAPE &&
(l.className += " landscape"),
null != e.buttons && 0 === e.buttons.length)
) {
e.clickAction !== InAppMessage.ClickAction.NONE &&
(l.className += " ab-clickable");
const o = (o) => (
e.ll(l, () => {
logInAppMessageClick(e),
e.clickAction === InAppMessage.ClickAction.URI &&
K(
e.uri || "",
a || e.openTarget === InAppMessage.OpenTarget.BLANK,
o,
);
}),
o.stopPropagation(),
!1
);
(l.onclick = o),
l.addEventListener("keydown", (e) => {
if (e.keyCode === ie.lo || e.keyCode === ie.do) return o(e);
});
}
const d = T(
"Close Message",
e.Oe() ? void 0 : ae(e.closeButtonColor),
() => {
e.ll(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.bo).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.po(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 === InAppMessage.CropType.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.Oe() ||
((o.style.backgroundColor = ae(e.iconBackgroundColor)),
(o.style.color = ae(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 ((J(u, "touchstart"), e.header && e.header.length > 0)) {
const o = document.createElement("h1");
(o.className = "ab-message-header"), (e.ho = L.oe()), (o.id = e.ho);
const t = (
e.headerAlignment || InAppMessage.TextAlignment.CENTER
).toLowerCase();
(o.className += " " + t + "-aligned"),
e.Oe() || (o.style.color = ae(e.headerTextColor)),
o.appendChild(document.createTextNode(e.header)),
u.appendChild(o);
}
const g = e.jo();
return u.appendChild(g), l.appendChild(u), f || c(), (e.Qe = 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`),
ne.wo(e, l, a),
ne.vo(l),
ne.ko(e.ho, 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 = oe(
"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.Oe() ? void 0 : ae(e.closeButtonColor),
);
t.setAttribute("class", `ab-chevron ${m}`), o.appendChild(t);
}
let t, a;
H(l, R.Zt, (e) => {
(l.className += " ab-swiped-left"),
null != o && null != o.onclick && o.onclick(e);
}),
H(l, R.ae, (e) => {
(l.className += " ab-swiped-right"),
null != o && null != o.onclick && o.onclick(e);
}),
e.slideFrom === InAppMessage.SlideFrom.TOP
? ((t = R.xo), (a = " ab-swiped-up"))
: ((t = R.Co), (a = " ab-swiped-down")),
H(l, t, (e) => {
(l.className += a), null != o && null != o.onclick && o.onclick(e);
});
}
return l;
}