Add lazy widget language localization
This commit is contained in:
rajchales-monito
+53
-17
@@ -2,15 +2,22 @@
|
||||
const boot = window.MaalFlows || {};
|
||||
const apiBase = (boot.apiBase || "").replace(/\/$/, "") || new URL(document.currentScript.src).origin;
|
||||
const siteKey = boot.siteKey || "9b-plus";
|
||||
const lang = (boot.lang || document.documentElement.lang || navigator.language || "cs").slice(0, 2).toLowerCase();
|
||||
const lang = detectPageLanguage(boot);
|
||||
const storageKey = `maalflows:${siteKey}`;
|
||||
const pendingStorageKey = `${storageKey}:pending`;
|
||||
const session = loadSession();
|
||||
const allowedImageTypes = new Set(["image/jpeg", "image/png", "image/webp", "image/gif", "image/avif"]);
|
||||
const maxAttachmentBytes = 3_000_000;
|
||||
let lastActivityAt = Date.now();
|
||||
let activeCopy = {};
|
||||
|
||||
fetch(`${apiBase}/api/widget/config?siteKey=${encodeURIComponent(siteKey)}`)
|
||||
fetch(`${apiBase}/api/widget/config?${new URLSearchParams({
|
||||
siteKey,
|
||||
lang,
|
||||
pageLang: document.documentElement.lang || "",
|
||||
currentUrl: location.href,
|
||||
browserLang: navigator.language || ""
|
||||
})}`)
|
||||
.then((res) => res.json())
|
||||
.then((config) => mount(config))
|
||||
.catch(() => {});
|
||||
@@ -18,7 +25,8 @@
|
||||
function mount(config) {
|
||||
const site = config.site;
|
||||
const settings = site.settings;
|
||||
const copy = localized(settings, lang);
|
||||
const copy = config.copy || localized(settings, config.language || lang);
|
||||
activeCopy = copy;
|
||||
const host = document.createElement("div");
|
||||
host.id = "maalflows-widget";
|
||||
document.body.append(host);
|
||||
@@ -26,12 +34,12 @@
|
||||
|
||||
root.innerHTML = `
|
||||
<style>${styles(settings)}</style>
|
||||
<button class="mf-launcher ${launcherEffectClasses(settings, site.isOnline)}" type="button" aria-label="${copy.title}">
|
||||
<button class="mf-launcher ${launcherEffectClasses(settings, site.isOnline)}" type="button" aria-label="${escapeHtml(copy.title)}">
|
||||
<span class="mf-reply-pulse" aria-hidden="true"></span>
|
||||
<span class="mf-launcher-icon"></span>
|
||||
<span class="mf-launcher-label">${escapeHtml(site.isOnline ? "Jsme online" : "Offline")}</span>
|
||||
<span class="mf-launcher-label">${escapeHtml(site.isOnline ? copy.onlineLabel : copy.offlineLabel)}</span>
|
||||
<span class="mf-message-badge" hidden>0</span>
|
||||
<span class="mf-message-label">Nova odpoved</span>
|
||||
<span class="mf-message-label">${escapeHtml(copy.newReplyLabel)}</span>
|
||||
</button>
|
||||
<section class="mf-panel" aria-live="polite">
|
||||
<header>
|
||||
@@ -40,7 +48,7 @@
|
||||
<button class="mf-close" type="button" aria-label="Close">×</button>
|
||||
</header>
|
||||
<div class="mf-messages"></div>
|
||||
<div class="mf-typing" hidden>Operator pise...</div>
|
||||
<div class="mf-typing" hidden>${escapeHtml(copy.typingLabel)}</div>
|
||||
<form class="mf-form">
|
||||
<div class="mf-composer">
|
||||
<textarea name="message" rows="3" placeholder="${escapeHtml(copy.placeholder)}"></textarea>
|
||||
@@ -55,7 +63,7 @@
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 17.5V6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5Zm3.3-1.2 2.9-3.4 2 2.4 2.7-3.2 3.1 4.2H7.3Zm1-6.8a1.7 1.7 0 1 0 0-3.4 1.7 1.7 0 0 0 0 3.4Z"></path>
|
||||
</svg>
|
||||
<span>Pridat fotku nebo pretahnout</span>
|
||||
<span>${escapeHtml(copy.dropzoneLabel)}</span>
|
||||
</label>
|
||||
<div class="mf-attachment-list"></div>
|
||||
<p class="mf-note" hidden></p>
|
||||
@@ -67,7 +75,9 @@
|
||||
const panel = root.querySelector(".mf-panel");
|
||||
const launcher = root.querySelector(".mf-launcher");
|
||||
const close = root.querySelector(".mf-close");
|
||||
const { infoButton } = createHeaderActions(root, close);
|
||||
close.setAttribute("aria-label", copy.closeLabel || "Close");
|
||||
close.title = copy.closeLabel || "Close";
|
||||
const { infoButton } = createHeaderActions(root, close, copy);
|
||||
const form = root.querySelector(".mf-form");
|
||||
const messages = root.querySelector(".mf-messages");
|
||||
const typing = root.querySelector(".mf-typing");
|
||||
@@ -276,24 +286,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
function createHeaderActions(root, closeButton) {
|
||||
function createHeaderActions(root, closeButton, copy) {
|
||||
const actions = document.createElement("div");
|
||||
actions.className = "mf-header-actions";
|
||||
const infoButton = document.createElement("button");
|
||||
infoButton.className = "mf-info";
|
||||
infoButton.type = "button";
|
||||
infoButton.setAttribute("aria-label", "GDPR informace");
|
||||
infoButton.title = "GDPR informace";
|
||||
infoButton.setAttribute("aria-label", copy.infoTitle || "GDPR informace");
|
||||
infoButton.title = copy.infoTitle || "GDPR informace";
|
||||
infoButton.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 10h2v7h-2v-7Zm0-3h2v2h-2V7Zm1-5a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z"></path></svg>`;
|
||||
closeButton.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.7 8.7 12 14l5.3-5.3 1.4 1.4L12 16.8l-6.7-6.7 1.4-1.4Z"></path></svg>`;
|
||||
closeButton.setAttribute("aria-label", "Zmensit chat");
|
||||
closeButton.title = "Zmensit chat";
|
||||
closeButton.setAttribute("aria-label", copy.closeLabel || "Zmensit chat");
|
||||
closeButton.title = copy.closeLabel || "Zmensit chat";
|
||||
closeButton.before(actions);
|
||||
actions.append(infoButton, closeButton);
|
||||
const gdpr = document.createElement("p");
|
||||
gdpr.className = "mf-gdpr";
|
||||
gdpr.hidden = true;
|
||||
gdpr.textContent = "Odeslanim zpravy nam predavate udaje potrebne pro odpoved. Historii chatu uchovavame pro zakaznickou podporu.";
|
||||
gdpr.textContent = copy.infoText || "";
|
||||
root.querySelector(".mf-form").prepend(gdpr);
|
||||
return { infoButton };
|
||||
}
|
||||
@@ -376,7 +386,7 @@
|
||||
if (sender === "admin" && (senderName || "Operator") !== lastAdminName) {
|
||||
const label = document.createElement("div");
|
||||
label.className = "mf-operator-label";
|
||||
label.textContent = `${senderName || "Operator"} odpovida`;
|
||||
label.textContent = `${senderName || "Operator"} ${activeCopy.operatorReplyLabel || "odpovida"}`;
|
||||
messages.append(label);
|
||||
}
|
||||
const item = document.createElement("article");
|
||||
@@ -476,16 +486,42 @@
|
||||
}
|
||||
|
||||
function localized(settings, language) {
|
||||
if (settings.widgetCopy?.[language]) return settings.widgetCopy[language];
|
||||
const pick = (obj) => obj?.[language] || obj?.en || obj?.cs || "";
|
||||
return {
|
||||
title: pick(settings.title),
|
||||
intro: pick(settings.intro),
|
||||
offlineIntro: pick(settings.offlineIntro),
|
||||
placeholder: pick(settings.placeholder),
|
||||
sendLabel: pick(settings.sendLabel)
|
||||
sendLabel: pick(settings.sendLabel),
|
||||
dropzoneLabel: "Pridat fotku nebo pretahnout",
|
||||
onlineLabel: "Jsme online",
|
||||
offlineLabel: "Offline",
|
||||
newReplyLabel: "Nova odpoved",
|
||||
typingLabel: "Operator pise...",
|
||||
infoTitle: "GDPR informace",
|
||||
infoText: "Zpravu a technicke udaje relace zpracujeme jen pro odpoved na vas dotaz.",
|
||||
closeLabel: "Zmensit chat",
|
||||
operatorReplyLabel: "odpovida"
|
||||
};
|
||||
}
|
||||
|
||||
function detectPageLanguage(boot) {
|
||||
const fromBoot = normalizeLanguage(boot.lang);
|
||||
if (fromBoot) return fromBoot;
|
||||
const fromUrl = normalizeLanguage(location.pathname.split("/").filter(Boolean)[0]);
|
||||
if (fromUrl) return fromUrl;
|
||||
const fromHtml = normalizeLanguage(document.documentElement.lang);
|
||||
if (fromHtml) return fromHtml;
|
||||
return normalizeLanguage(navigator.language) || "cs";
|
||||
}
|
||||
|
||||
function normalizeLanguage(value) {
|
||||
const text = String(value || "").trim().toLowerCase().replace("_", "-");
|
||||
const match = text.match(/^[a-z]{2,3}/);
|
||||
return match ? match[0] : "";
|
||||
}
|
||||
|
||||
function launcherEffectClasses(settings, isOnline) {
|
||||
if (!isOnline) return "mf-offline";
|
||||
const effects = settings.launcherEffects || {};
|
||||
|
||||
Reference in New Issue
Block a user