refactor: widget

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"
   },

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": "允许公开注册"
   },

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);