Add widget launcher preview

This commit is contained in:
rajchales-monito
2026-07-30 17:05:02 +02:00
parent 1a6eaa69fe
commit e9c363639f
3 changed files with 227 additions and 0 deletions
+34
View File
@@ -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] || {};