Add widget launcher preview
This commit is contained in:
@@ -130,14 +130,27 @@ document.querySelectorAll("[data-settings-tab]").forEach((button) => {
|
||||
});
|
||||
$("#settingsForm").brand.addEventListener("input", (event) => {
|
||||
$("#settingsForm").brandHex.value = normalizeHexColor(event.target.value) || event.target.value;
|
||||
renderLauncherPreview();
|
||||
});
|
||||
$("#settingsForm").brandHex.addEventListener("input", (event) => {
|
||||
const color = normalizeHexColor(event.target.value);
|
||||
if (color) $("#settingsForm").brand.value = color;
|
||||
renderLauncherPreview();
|
||||
});
|
||||
$("#settingsForm").defaultLanguage.addEventListener("change", () => {
|
||||
updateDefaultLanguagePicker();
|
||||
renderWidgetCopyFields($("#settingsForm").defaultLanguage.value);
|
||||
renderLauncherPreview();
|
||||
});
|
||||
$("#settingsForm").addEventListener("input", (event) => {
|
||||
if (event.target.matches("[name='launcherShape'], [name='launcherBreathe'], [name='launcherRing'], [name='launcherHoverLabel'], [name='copyOnlineLabel']")) {
|
||||
renderLauncherPreview();
|
||||
}
|
||||
});
|
||||
$("#settingsForm").addEventListener("change", (event) => {
|
||||
if (event.target.matches("[name='launcherShape'], [name='launcherBreathe'], [name='launcherRing'], [name='launcherHoverLabel']")) {
|
||||
renderLauncherPreview();
|
||||
}
|
||||
});
|
||||
$("#defaultLanguagePicker").addEventListener("click", (event) => {
|
||||
event.stopPropagation();
|
||||
@@ -536,6 +549,7 @@ function renderSite() {
|
||||
renderModelOptions(s.translations?.model || "gpt-5-mini");
|
||||
renderPresenceSettings(s.adminPresence || {});
|
||||
renderTelegramSettings(s.telegram || {});
|
||||
renderLauncherPreview();
|
||||
}
|
||||
|
||||
function renderWidgetLanguageOptions(form, settings) {
|
||||
@@ -625,6 +639,26 @@ function renderWidgetCopyFields(language) {
|
||||
form.copyInfoText.value = copy.infoText || "";
|
||||
}
|
||||
|
||||
function renderLauncherPreview() {
|
||||
const preview = $("#launcherPreview");
|
||||
const form = $("#settingsForm");
|
||||
if (!preview || !form) return;
|
||||
const shape = ["circle", "bubble", "messenger", "whatsapp"].includes(form.launcherShape.value)
|
||||
? form.launcherShape.value
|
||||
: "bubble";
|
||||
const brand = normalizeHexColor(form.brandHex.value) || normalizeHexColor(form.brand.value) || "#0f8f6f";
|
||||
preview.style.setProperty("--preview-brand", brand);
|
||||
preview.className = [
|
||||
"launcher-preview",
|
||||
`preview-shape-${shape}`,
|
||||
form.launcherBreathe.checked ? "effect-breathe" : "",
|
||||
form.launcherRing.checked ? "effect-ring" : "",
|
||||
form.launcherHoverLabel.checked ? "show-label" : ""
|
||||
].filter(Boolean).join(" ");
|
||||
const label = preview.querySelector(".launcher-preview-label");
|
||||
if (label) label.textContent = form.copyOnlineLabel.value || "Napiste nam";
|
||||
}
|
||||
|
||||
function widgetCopyForAdmin(settings, language) {
|
||||
const lang = language || "cs";
|
||||
const copy = settings.widgetCopy?.[lang] || {};
|
||||
|
||||
Reference in New Issue
Block a user