From 72feebc049629f1e5e0af838fdbf3f27c872f359 Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Fri, 14 Jul 2023 17:34:46 +0800 Subject: [PATCH] refactor: widget --- public/locales/en/setting.json | 2 + public/locales/zh/setting.json | 2 + public/widget.js | 119 +++++++++++++++++---------------- src/assets/index.css | 4 +- src/routes/setting/Widget.tsx | 14 ++++ 5 files changed, 82 insertions(+), 59 deletions(-) diff --git a/public/locales/en/setting.json b/public/locales/en/setting.json index 611b7c80..257815a8 100644 --- a/public/locales/en/setting.json +++ b/public/locales/en/setting.json @@ -246,6 +246,7 @@ "param_key": "Parameter Key", "default_value": "Default Value", "remark": "Remarks", + "custom_style_tip": "if you want customize the widget position more precisely, use the widget element ID in your HTML or CSS file, like this", "param_host": "Assign the user chatting with visitor(User ID)", "param_theme_color": "The theme color of widget", "param_close_width": "The width while widget closed", @@ -253,6 +254,7 @@ "param_open_width": "The width while widget opened", "param_open_height": "The height while widget opened", "param_welcome": "Custom welcome message", + "param_position": "Widget position: left/right", "share_link": "Share the widget link so that people can chat with you directly", "widget_faq": "Enable Let Everyone Join First" }, diff --git a/public/locales/zh/setting.json b/public/locales/zh/setting.json index 557b5890..43af4ec2 100644 --- a/public/locales/zh/setting.json +++ b/public/locales/zh/setting.json @@ -239,6 +239,7 @@ "param_key": "参数", "default_value": "默认值", "remark": "备注", + "custom_style_tip": "如果你想更精确控制挂件的样式，可以借助widget元素的ID，自行写CSS样式，加到自己的html或者css文件中，如下所示：", "param_host": "指定和谁聊天(用户ID)", "param_theme_color": "挂件的主题色", "param_close_width": "挂件关闭态的宽度", @@ -246,6 +247,7 @@ "param_open_width": "挂件打开态的宽度", "param_open_height": "挂件打开态的高度", "param_welcome": "自定义欢迎语", + "param_position": "设置挂件位置，居左(left)或居右(right)", "share_link": "分享此链接，别人可以通过该地址直接与你对话", "widget_faq": "允许公开注册" }, diff --git a/public/widget.js b/public/widget.js index 3a431ef5..08669a5c 100644 --- a/public/widget.js +++ b/public/widget.js @@ -1,60 +1,63 @@ -const { - hostId = 1, - closeWidth = 48, - closeHeight = 48, - openWidth = 380, - openHeight = 680, - themeColor = "#1fe1f9", - position = "right", - welcome = "" -} = document.currentScript.dataset; -const _src = document.currentScript.src; -const wrapper = document.createElement("iframe"); -wrapper.id = "VOCECHAT_WIDGET"; -const styles = { - position: "fixed", - borderRadius: "8px", - right: "16px", - [position]: "16px", // [position] = [right] or [left] - bottom: "16px", - border: "none", - zIndex: 9999, - boxShadow: `rgb(0 0 0 / 25%) 0px 25px 50px -12px` -}; -Object.assign(wrapper.style, styles); -wrapper.src = `${new URL(_src).origin}/widget.html?host=${hostId}&themeColor=${encodeURIComponent( - themeColor -)}&from=${encodeURIComponent(location.hostname)}&welcome=${encodeURIComponent(welcome)}`; -wrapper.width = closeWidth; -wrapper.height = closeHeight; -wrapper.frameborder = 0; -window.addEventListener( - "message", - (event) => { - const { data: CMD } = event; - switch (CMD) { - case "OPEN": - wrapper.setAttribute("width", openWidth); - wrapper.setAttribute("height", openHeight); - break; - case "CLOSE": - wrapper.setAttribute("width", closeWidth); - wrapper.setAttribute("height", closeHeight); - break; - case "RELOAD_WITH_OPEN": - { - const url = new URL(wrapper.src); - url.searchParams.append("open", new Date().getTime()); - console.log("new src", url.href); - wrapper.src = url.href; +// IIFC +((w, d) => { + const { + hostId = 1, + closeWidth = 48, + closeHeight = 48, + openWidth = 380, + openHeight = 680, + themeColor = "#1fe1f9", + position = "right", + welcome = "" + } = d.currentScript.dataset; + const _src = d.currentScript.src; + const wrapper = d.createElement("iframe"); + wrapper.id = "VOCECHAT_WIDGET"; + const styles = { + position: "fixed", + borderRadius: "8px", + right: "16px", + [position]: "16px", // [position] = [right] or [left] + bottom: "16px", + border: "none", + zIndex: 9999, + boxShadow: `rgb(0 0 0 / 25%) 0px 25px 50px -12px` + }; + Object.assign(wrapper.style, styles); + wrapper.src = `${new URL(_src).origin}/widget.html?host=${hostId}&themeColor=${encodeURIComponent( + themeColor + )}&from=${encodeURIComponent(location.hostname)}&welcome=${encodeURIComponent(welcome)}`; + wrapper.width = closeWidth; + wrapper.height = closeHeight; + wrapper.frameborder = 0; + w.addEventListener( + "message", + (event) => { + const { data: CMD } = event; + switch (CMD) { + case "OPEN": wrapper.setAttribute("width", openWidth); wrapper.setAttribute("height", openHeight); - } - break; - default: - break; - } - }, - false -); -document.body.appendChild(wrapper); + break; + case "CLOSE": + wrapper.setAttribute("width", closeWidth); + wrapper.setAttribute("height", closeHeight); + break; + case "RELOAD_WITH_OPEN": + { + const url = new URL(wrapper.src); + url.searchParams.append("open", new Date().getTime()); + console.log("new src", url.href); + wrapper.src = url.href; + wrapper.setAttribute("width", openWidth); + wrapper.setAttribute("height", openHeight); + } + break; + default: + break; + } + }, + false + ); + d.body.appendChild(wrapper); +})(window, document); diff --git a/src/assets/index.css b/src/assets/index.css index 27694566..a8bd84f0 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -138,7 +138,9 @@ gap: 2px; padding: 4px; background-color: #fff; - box-shadow: 0 20px 25px 20px rgba(31, 41, 55, 0.1), 0 10px 10px rgba(31, 41, 55, 0.04); + box-shadow: + 0 20px 25px 20px rgba(31, 41, 55, 0.1), + 0 10px 10px rgba(31, 41, 55, 0.04); border-radius: 12px; min-width: 200px; } diff --git a/src/routes/setting/Widget.tsx b/src/routes/setting/Widget.tsx index c39db44f..0a5adf8b 100644 --- a/src/routes/setting/Widget.tsx +++ b/src/routes/setting/Widget.tsx @@ -57,6 +57,15 @@ export default function Widget() { location.origin }/widget.js" \n async \n>`} +
{t("custom_style_tip")}:
+ + {``} +
{t("config")}:
@@ -105,6 +114,11 @@ export default function Widget() { paramDefault: `680(px)`, remarks: t("param_open_height") }, + { + paramKey: "position", + paramDefault: `right`, + remarks: t("param_position") + }, { paramKey: "welcome", paramDefault: wt("welcome"),