Move widget previews into effect cards

This commit is contained in:
rajchales-monito
2026-07-30 17:14:32 +02:00
parent e9c363639f
commit 84d8a21d38
3 changed files with 89 additions and 13 deletions
+21 -6
View File
@@ -143,12 +143,12 @@ $("#settingsForm").defaultLanguage.addEventListener("change", () => {
renderLauncherPreview();
});
$("#settingsForm").addEventListener("input", (event) => {
if (event.target.matches("[name='launcherShape'], [name='launcherBreathe'], [name='launcherRing'], [name='launcherHoverLabel'], [name='copyOnlineLabel']")) {
if (event.target.matches("[name='launcherShape'], [name='launcherBreathe'], [name='launcherRing'], [name='launcherHoverLabel'], [name='copyOnlineLabel'], [name='messagePulse'], [name='messageBadge'], [name='messageLabel'], [name='messageWiggle'], [name='copyNewReplyLabel']")) {
renderLauncherPreview();
}
});
$("#settingsForm").addEventListener("change", (event) => {
if (event.target.matches("[name='launcherShape'], [name='launcherBreathe'], [name='launcherRing'], [name='launcherHoverLabel']")) {
if (event.target.matches("[name='launcherShape'], [name='launcherBreathe'], [name='launcherRing'], [name='launcherHoverLabel'], [name='messagePulse'], [name='messageBadge'], [name='messageLabel'], [name='messageWiggle']")) {
renderLauncherPreview();
}
});
@@ -641,22 +641,37 @@ function renderWidgetCopyFields(language) {
function renderLauncherPreview() {
const preview = $("#launcherPreview");
const messagePreview = $("#messageEffectPreview");
const form = $("#settingsForm");
if (!preview || !form) return;
if (!preview || !messagePreview || !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 = [
const baseClasses = [
"launcher-preview",
`preview-shape-${shape}`,
`preview-shape-${shape}`
];
preview.style.setProperty("--preview-brand", brand);
messagePreview.style.setProperty("--preview-brand", brand);
preview.className = [
...baseClasses,
$("#onlineToggle").checked ? "online" : "",
form.launcherBreathe.checked ? "effect-breathe" : "",
form.launcherRing.checked ? "effect-ring" : "",
form.launcherHoverLabel.checked ? "show-label" : ""
].filter(Boolean).join(" ");
messagePreview.className = [
...baseClasses,
form.messagePulse.checked ? "notify-pulse" : "",
form.messageBadge.checked ? "show-badge" : "",
form.messageLabel.checked ? "show-label" : "",
form.messageWiggle.checked ? "notify-wiggle" : ""
].filter(Boolean).join(" ");
const label = preview.querySelector(".launcher-preview-label");
if (label) label.textContent = form.copyOnlineLabel.value || "Napiste nam";
const messageLabel = messagePreview.querySelector(".launcher-preview-label");
if (messageLabel) messageLabel.textContent = form.copyNewReplyLabel.value || "Nova odpoved";
}
function widgetCopyForAdmin(settings, language) {