@braze/web-sdk
Version:
Braze SDK for web sites and other JS platforms.
128 lines (127 loc) • 4.25 kB
JavaScript
import { createCloseButton as T } from "../../util/component-utils.js";
import { detectSwipe as H, DIRECTIONS as R } from "../../util/dom-utils.js";
import { _handleBrazeAction as K } from "../../Core/handle-braze-action.js";
import { logCardDismissal } from "../index.js";
import { Guid as L } from "../../../shared-lib/index.js";
export function markCardAsRead(t) {
if (null != t) {
const e = t.querySelectorAll(".ab-unread-indicator")[0];
null == e || e.classList.contains("read") || (e.className += " read");
}
}
export function getCardId(t) {
return t.getAttribute("data-ab-card-id");
}
export function _setImageAltText(t, e) {
e.setAttribute("alt", t.altImageText || "");
}
export function setCardHeight(t, e) {
const a = e.querySelectorAll(".ab-image-area");
let o,
i = 0;
a.length > 0 && (i = a[0].offsetWidth);
for (const e of t)
if (((o = e._t), o && e.imageUrl && "number" == typeof e.aspectRatio)) {
const t = i / e.aspectRatio;
t && (o.style.height = `${t}px`);
}
}
export function cardToHtml(t, e, a, o = "ltr") {
const i = document.createElement("div");
(i.dir = o),
t.language && (i.lang = t.language),
(i.className = "ab-card ab-effect-card " + t.Xt),
t.id &&
(i.setAttribute("data-ab-card-id", t.id), i.setAttribute("id", t.id)),
i.setAttribute("role", "article");
let n = "",
d = !1;
t.url && "" !== t.url && ((n = t.url), (d = !0));
const r = (o) => (markCardAsRead(i), d && (e(t), K(n, a, o)), !1);
if (t.pinned) {
const t = document.createElement("div");
t.className = "ab-pinned-indicator";
const e = document.createElement("i");
(e.className = "fa fa-star"), t.appendChild(e), i.appendChild(t);
}
if (t.imageUrl && "" !== t.imageUrl) {
const e = document.createElement("div");
(e.dir = o), (e.className = "ab-image-area");
const a = document.createElement("img");
if (
(a.setAttribute("src", t.imageUrl),
(a.onload = () => {
i.style.height = "auto";
}),
_setImageAltText(t, a),
e.appendChild(a),
(i.className += " with-image"),
d && !t.Yt)
) {
const a = document.createElement("a");
a.setAttribute("href", n),
(a.onclick = r),
t.altImageText ||
(t.title
? a.setAttribute("aria-label", t.title)
: a.setAttribute("aria-label", "Feed Image")),
a.appendChild(e),
i.appendChild(a);
} else i.appendChild(e);
}
const c = document.createElement("div");
if (((c.className = "ab-card-body"), (c.dir = o), t.dismissible)) {
t.logCardDismissal = () => logCardDismissal(t);
const e = T("Dismiss Card", void 0, t.dismissCard.bind(t), o);
i.appendChild(e),
H(c, R.Zt, (t) => {
(i.className += " ab-swiped-left"), e.onclick(t);
}),
H(c, R.ae, (t) => {
(i.className += " ab-swiped-right"), e.onclick(t);
});
}
let s = "",
m = !1;
if ((t.title && "" !== t.title && ((s = t.title), (m = !0)), m)) {
const t = document.createElement("h1");
if (
((t.className = "ab-title"),
(t.id = L.oe()),
i.setAttribute("aria-labelledby", t.id),
d)
) {
const e = document.createElement("a");
e.setAttribute("href", n),
(e.onclick = r),
e.appendChild(document.createTextNode(s)),
t.appendChild(e);
} else t.appendChild(document.createTextNode(s));
c.appendChild(t);
}
const u = document.createElement("div");
if (
((u.className = m ? "ab-description" : "ab-description ab-no-title"),
t.language && (u.lang = t.language),
t.description && u.appendChild(document.createTextNode(t.description)),
d)
) {
const e = document.createElement("div");
e.className = "ab-url-area";
const a = document.createElement("a");
a.setAttribute("href", n),
t.linkText && a.appendChild(document.createTextNode(t.linkText)),
(a.onclick = r),
e.appendChild(a),
u.appendChild(e);
}
c.appendChild(u), i.appendChild(c);
const l = document.createElement("div");
return (
(l.className = "ab-unread-indicator"),
t.viewed && (l.className += " read"),
i.appendChild(l),
(t._t = i),
i
);
}