diff --git a/public/admin.html b/public/admin.html index f6cb6a5..a02f208 100644 --- a/public/admin.html +++ b/public/admin.html @@ -162,10 +162,17 @@
Online efekt tlacitka + -
Efekt pri nove zprave diff --git a/public/admin.js b/public/admin.js index ea7eca0..2b70c60 100644 --- a/public/admin.js +++ b/public/admin.js @@ -205,10 +205,10 @@ $("#settingsForm").addEventListener("submit", async (event) => { settings.mobile.bottomPx = Number(form.get("mobileBottom")); settings.mobile.sideOffsetPx = Number(form.get("mobileOffset")); settings.launcherEffects = { + shape: form.get("launcherShape") || "bubble", breathe: form.get("launcherBreathe") === "on", ring: form.get("launcherRing") === "on", - hoverLabel: form.get("launcherHoverLabel") === "on", - avatar: form.get("launcherAvatar") === "on" + hoverLabel: form.get("launcherHoverLabel") === "on" }; settings.notifications = settings.notifications || {}; settings.notifications.pulseOnAdminReply = form.get("messagePulse") === "on"; @@ -515,10 +515,10 @@ function renderSite() { form.mobileSide.value = s.mobile.side || "right"; form.mobileBottom.value = s.mobile.bottomPx || 14; form.mobileOffset.value = s.mobile.sideOffsetPx || 12; + form.launcherShape.value = s.launcherEffects?.shape || "bubble"; form.launcherBreathe.checked = s.launcherEffects?.breathe !== false; form.launcherRing.checked = s.launcherEffects?.ring !== false; form.launcherHoverLabel.checked = s.launcherEffects?.hoverLabel !== false; - form.launcherAvatar.checked = s.launcherEffects?.avatar !== false; form.messagePulse.checked = s.notifications?.pulseOnAdminReply !== false; form.messageBadge.checked = s.notifications?.badgeOnAdminReply !== false; form.messageLabel.checked = s.notifications?.labelOnAdminReply !== false; diff --git a/public/widget.js b/public/widget.js index 5eed7dc..1174741 100644 --- a/public/widget.js +++ b/public/widget.js @@ -538,17 +538,22 @@ } function launcherEffectClasses(settings, isOnline) { - if (!isOnline) return "mf-offline"; const effects = settings.launcherEffects || {}; + const shape = launcherShape(effects.shape); return [ - "mf-online", - effects.breathe ? "mf-effect-breathe" : "", - effects.ring ? "mf-effect-ring" : "", + `mf-shape-${shape}`, + !isOnline ? "mf-offline" : "", + isOnline ? "mf-online" : "", + isOnline && effects.breathe ? "mf-effect-breathe" : "", + isOnline && effects.ring ? "mf-effect-ring" : "", effects.hoverLabel ? "mf-effect-hover-label" : "", - effects.avatar ? "mf-effect-avatar" : "" ].filter(Boolean).join(" "); } + function launcherShape(value) { + return ["circle", "bubble", "messenger", "whatsapp"].includes(value) ? value : "bubble"; + } + function applyAdminReplyEffects(launcher, settings, unreadCount) { const notifications = settings.notifications || {}; if (notifications.pulseOnAdminReply !== false) { @@ -598,10 +603,39 @@ width: 58px; height: 58px; border: 0; border-radius: 50%; background: ${c.brand}; color: ${c.brandText}; box-shadow: 0 12px 30px rgb(0 0 0 / 22%); cursor: pointer; overflow: visible; } - .mf-launcher-icon, .mf-launcher-icon:before, .mf-launcher-icon:after { display: block; background: ${c.brandText}; height: 3px; border-radius: 4px; content: ""; } - .mf-launcher-icon { width: 26px; margin: 0 auto; } - .mf-launcher-icon:before { transform: translateY(-8px); } - .mf-launcher-icon:after { transform: translateY(5px); width: 18px; } + .mf-launcher-icon, .mf-launcher-icon:before, .mf-launcher-icon:after { display: block; content: ""; } + .mf-launcher-icon { position: relative; margin: 0 auto; color: ${c.brandText}; } + .mf-shape-circle .mf-launcher-icon, .mf-shape-circle .mf-launcher-icon:before, .mf-shape-circle .mf-launcher-icon:after { height: 3px; border-radius: 4px; background: ${c.brandText}; } + .mf-shape-circle .mf-launcher-icon { width: 26px; } + .mf-shape-circle .mf-launcher-icon:before { transform: translateY(-8px); } + .mf-shape-circle .mf-launcher-icon:after { transform: translateY(5px); width: 18px; } + .mf-shape-bubble .mf-launcher-icon { + width: 30px; height: 23px; border: 3px solid ${c.brandText}; border-radius: 13px; background: transparent; + } + .mf-shape-bubble .mf-launcher-icon:before { + position: absolute; left: 5px; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: ${c.brandText}; box-shadow: 8px 0 0 ${c.brandText}, 16px 0 0 ${c.brandText}; + } + .mf-shape-bubble .mf-launcher-icon:after { + position: absolute; right: 2px; bottom: -8px; width: 10px; height: 10px; border-left: 3px solid ${c.brandText}; border-bottom: 3px solid ${c.brandText}; border-bottom-left-radius: 8px; transform: rotate(-18deg); background: transparent; + } + .mf-shape-messenger .mf-launcher-icon { + width: 32px; height: 32px; border-radius: 50%; background: ${c.brandText}; + } + .mf-shape-messenger .mf-launcher-icon:before { + position: absolute; left: 8px; top: 8px; width: 16px; height: 16px; background: ${c.brand}; clip-path: polygon(0 56%, 42% 56%, 58% 22%, 100% 22%, 58% 78%, 42% 78%); + } + .mf-shape-messenger .mf-launcher-icon:after { + position: absolute; right: 5px; bottom: 1px; width: 8px; height: 8px; border-radius: 0 0 8px 0; background: ${c.brandText}; transform: rotate(25deg); + } + .mf-shape-whatsapp .mf-launcher-icon { + width: 32px; height: 32px; border: 3px solid ${c.brandText}; border-radius: 50%; background: transparent; + } + .mf-shape-whatsapp .mf-launcher-icon:before { + position: absolute; left: 8px; top: 7px; width: 12px; height: 15px; border: 3px solid ${c.brandText}; border-left-color: transparent; border-top-color: transparent; border-radius: 0 0 12px 0; transform: rotate(-35deg); + } + .mf-shape-whatsapp .mf-launcher-icon:after { + position: absolute; left: 1px; bottom: -4px; width: 10px; height: 10px; border-left: 3px solid ${c.brandText}; border-bottom: 3px solid ${c.brandText}; transform: rotate(12deg); background: transparent; + } .mf-launcher-label { position: absolute; ${labelOffset} top: 50%; transform: translateY(-50%) translateX(8px); opacity: 0; pointer-events: none; white-space: nowrap; border-radius: 999px; padding: 7px 10px; background: ${c.text}; color: white; font-size: 12px; box-shadow: 0 10px 24px rgb(0 0 0 / 18%); transition: opacity .18s ease, transform .18s ease; } .mf-online.mf-effect-hover-label:hover .mf-launcher-label { opacity: 1; transform: translateY(-50%) translateX(0); } .mf-message-label { position: absolute; ${labelOffset} top: 50%; transform: translateY(-50%) translateX(8px); opacity: 0; pointer-events: none; white-space: nowrap; border-radius: 999px; padding: 7px 10px; background: ${c.text}; color: white; font-size: 12px; font-weight: 700; box-shadow: 0 10px 24px rgb(0 0 0 / 18%); transition: opacity .18s ease, transform .18s ease; } @@ -611,9 +645,6 @@ .mf-reply-pulse { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; } .mf-online.mf-effect-breathe { animation: mfBreathe 2.8s ease-in-out infinite; } .mf-online.mf-effect-ring:before { position: absolute; inset: -5px; border: 2px solid ${c.brand}; border-radius: 50%; opacity: .62; content: ""; animation: mfRing 2.2s ease-out infinite; } - .mf-online.mf-effect-avatar .mf-launcher-icon { width: 26px; height: 20px; border-radius: 12px 12px 10px 10px; background: rgb(255 255 255 / 24%); border: 2px solid ${c.brandText}; position: relative; } - .mf-online.mf-effect-avatar .mf-launcher-icon:before { position: absolute; left: 6px; top: 6px; width: 4px; height: 4px; border-radius: 50%; background: ${c.brandText}; transform: none; box-shadow: 10px 0 0 ${c.brandText}; } - .mf-online.mf-effect-avatar .mf-launcher-icon:after { position: absolute; left: 7px; top: 13px; width: 12px; height: 2px; border-radius: 999px; background: ${c.brandText}; transform: none; opacity: .88; } .mf-offline { filter: grayscale(.2) saturate(.72); opacity: .86; } .mf-notify .mf-reply-pulse { animation: mfPulse 1.15s ease-out infinite; } .mf-wiggle .mf-launcher-icon { animation: mfWiggle .62s ease-in-out 2; } diff --git a/server.js b/server.js index 03b6be1..1848904 100644 --- a/server.js +++ b/server.js @@ -337,10 +337,11 @@ function defaultSettings() { desktop: { side: "right", bottomPx: 22, sideOffsetPx: 22, widthPx: 370 }, mobile: { side: "right", bottomPx: 14, sideOffsetPx: 12, widthPx: 340 }, launcherEffects: { + shape: "bubble", breathe: true, ring: true, hoverLabel: true, - avatar: true + avatar: false }, notifications: { pulseOnAdminReply: true, @@ -2051,6 +2052,7 @@ function formatSite(site) { const settings = parseJson(site.settings_json, defaultSettings()); settings.notifications = { ...defaultSettings().notifications, ...(settings.notifications || {}) }; settings.launcherEffects = { ...defaultSettings().launcherEffects, ...(settings.launcherEffects || {}) }; + settings.launcherEffects.shape = normalizeLauncherShape(settings.launcherEffects.shape); settings.widgetLanguage = normalizeWidgetLanguageSettings(settings.widgetLanguage); settings.widgetCopy = normalizeWidgetCopy(settings.widgetCopy || {}, settings); syncLegacyWidgetCopy(settings); @@ -2077,6 +2079,10 @@ function formatSite(site) { }; } +function normalizeLauncherShape(value) { + return ["circle", "bubble", "messenger", "whatsapp"].includes(value) ? value : "bubble"; +} + function snippetFor(site) { const settings = parseJson(site.settings_json, defaultSettings()); const languageSettings = normalizeWidgetLanguageSettings(settings.widgetLanguage);