diff --git a/public/widget.js b/public/widget.js
index 2289cda..5eed7dc 100644
--- a/public/widget.js
+++ b/public/widget.js
@@ -86,22 +86,35 @@
knownAdminMessageId: 0
};
- launcher.addEventListener("click", () => {
- panel.classList.toggle("open");
- launcher.classList.toggle("mf-panel-open", panel.classList.contains("open"));
- if (panel.classList.contains("open")) {
- launcher.classList.remove("mf-notify");
- clearMessageEffects(launcher);
- messageEffectState.unreadAdminCount = 0;
- updateMessageBadge(launcher, messageEffectState.unreadAdminCount);
- scrollMessagesToBottom(messages);
- markConversationSeen();
- }
- });
- close.addEventListener("click", () => {
+ const closePanel = () => {
panel.classList.remove("open");
launcher.classList.remove("mf-panel-open");
+ };
+ const openPanel = () => {
+ panel.classList.add("open");
+ launcher.classList.add("mf-panel-open");
+ launcher.classList.remove("mf-notify");
+ clearMessageEffects(launcher);
+ messageEffectState.unreadAdminCount = 0;
+ updateMessageBadge(launcher, messageEffectState.unreadAdminCount);
+ scrollMessagesToBottom(messages);
+ markConversationSeen();
+ };
+
+ launcher.addEventListener("click", () => {
+ if (panel.classList.contains("open")) {
+ closePanel();
+ } else {
+ openPanel();
+ }
});
+ document.addEventListener("pointerdown", (event) => {
+ if (!panel.classList.contains("open")) return;
+ if (!window.matchMedia("(min-width: 641px)").matches) return;
+ if (event.composedPath().includes(panel) || event.composedPath().includes(launcher)) return;
+ closePanel();
+ });
+ close.addEventListener("click", closePanel);
infoButton.addEventListener("click", () => {
root.querySelector(".mf-gdpr").hidden = !root.querySelector(".mf-gdpr").hidden;
});
@@ -297,10 +310,7 @@
infoButton.setAttribute("aria-label", copy.infoTitle || "GDPR informace");
infoButton.title = copy.infoTitle || "GDPR informace";
infoButton.innerHTML = ``;
- closeButton.innerHTML = `
-
-
- `;
+ closeButton.innerHTML = ``;
closeButton.setAttribute("aria-label", copy.closeLabel || "Zmensit chat");
closeButton.title = copy.closeLabel || "Zmensit chat";
closeButton.before(actions);
@@ -613,13 +623,12 @@
background: ${c.surface}; border: 1px solid #dfe6e2; border-radius: 8px; overflow: hidden; box-shadow: 0 18px 50px rgb(0 0 0 / 18%);
}
.mf-panel.open { display: grid; grid-template-rows: auto minmax(130px, 1fr) auto auto; }
- header { position: relative; display: grid; gap: 3px; background: ${c.brand}; color: ${c.brandText}; padding: 15px 122px 15px 16px; }
+ header { position: relative; display: grid; gap: 3px; background: ${c.brand}; color: ${c.brandText}; padding: 15px 118px 15px 16px; }
header strong { font-size: 16px; }
header small { opacity: .92; font-size: 13px; line-height: 1.35; }
- .mf-header-actions { position: absolute; top: 9px; right: 9px; display: flex; gap: 6px; }
- .mf-close, .mf-info { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: rgb(255 255 255 / 16%); color: ${c.brandText}; cursor: pointer; padding: 0; }
- .mf-close svg, .mf-info svg { width: 19px; height: 19px; fill: currentColor; }
- .mf-close-fullscreen { display: none; }
+ .mf-header-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; }
+ .mf-close, .mf-info { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgb(255 255 255 / 16%); color: ${c.brandText}; cursor: pointer; padding: 0; }
+ .mf-close svg, .mf-info svg { width: 24px; height: 24px; fill: currentColor; }
.mf-messages { padding: 14px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.mf-message { max-width: 86%; padding: 9px 11px; border-radius: 8px; background: #f1f5f2; color: ${c.text}; }
.mf-message.admin { align-self: flex-start; background: #eef7f4; }
@@ -708,8 +717,6 @@
width: 26px;
height: 26px;
}
- .mf-close-minimize { display: none; }
- .mf-close-fullscreen { display: block; }
.mf-messages {
min-height: 0;
padding: 14px 12px;