WIP: refactor蒙版写法

web_assets/html/chatbot_more.html

@@ -39,7 +39,7 @@
 
     <!-- get more button -->
     <div id="chatbot-input-more-btn-div">
-        <button class="chatbot-input-more-btn">
+        <button class="chatbot-input-more-btn" onclick="chatMoreBtnClick()">
             <!-- <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink">
                 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

web_assets/javascript/updater.js

@@ -140,6 +140,7 @@ function cancelUpdate() {
 function openUpdateToast() {
     showingUpdateInfo = true;
     updateToast.style.setProperty('top', '0px');
+    showMask("update-toast");
 }
 function closeUpdateToast() {
     updateToast.style.setProperty('top', '-500px');
@@ -147,6 +148,7 @@ function closeUpdateToast() {
     if (updatingInfoElement.classList.contains('hideK') === false) {
         updatingInfoElement.classList.add('hideK');
     }
+    document.querySelector('.chuanhu-mask')?.remove();
 }
 function manualCheckUpdate() {
     openUpdateToast();

web_assets/javascript/webui.js

@@ -8,7 +8,7 @@ function openSettingBox() {
     popupWrapper.classList.add('showBox');
     settingBox.classList.remove('hideBox');
     trainingBox.classList.add('hideBox');
-    showMask();
+    showMask("box");
 
 }
 
@@ -17,19 +17,57 @@ function openTrainingBox() {
     popupWrapper.classList.add('showBox');
     trainingBox.classList.remove('hideBox');
     settingBox.classList.add('hideBox');
-    showMask();
+    showMask("box");
 }
 
-function showMask() {
+function openChatMore() {
+    chatbotArea.classList.add('show-chat-more');
+    showMask("chat-more");
+}
+
+function closeChatMore() {
+    chatbotArea.classList.remove('show-chat-more');
+    chatbotArea.querySelector('.chuanhu-mask')?.remove();
+}
+
+
+function showMask(obj) {
     const mask = document.createElement('div');
     mask.classList.add('chuanhu-mask');
-    popupWrapper.appendChild(mask);
-    document.body.classList.add('popup-open');
+    if (obj == "box") {
+        mask.classList.add('mask-blur');
+        document.body.classList.add('popup-open');
+        popupWrapper.appendChild(mask);
+    } else if (obj == "chat-more") {
+        mask.classList.add('transparent-mask');
+        chatbotArea.querySelector('#chatbot-input-more-area').parentNode.appendChild(mask);
+    } else if (obj == "update-toast") {
+        mask.classList.add('chuanhu-top-mask');
+        document.body.appendChild(mask);
+        // mask.classList.add('transparent-mask');
+    }
+    
+    
+
     mask.addEventListener('click', () => {
-        closeBox();
+        if (obj == "box") {
+            closeBox();
+        } else if (obj == "chat-more") {
+            closeChatMore();
+        } else if (obj == "update-toast") {
+            closeUpdateToast();
+        }
     });
 }
 
+function chatMoreBtnClick() {
+    if (chatbotArea.classList.contains('show-chat-more')) {
+        closeChatMore();
+    } else {
+        openChatMore();
+    }
+}
+
 function closeBtnClick(obj) {
     if (obj == "box") {
         closeBox();
@@ -191,6 +229,14 @@ function checkChatbotWidth() {
     } else {
         chatbotArea.classList.remove('chatbot-full-width');
     }
+    checkChatMoreMask();
+}
+
+function checkChatMoreMask() {
+    if (!chatbotArea.classList.contains('chatbot-full-width')) {
+        chatbotArea.querySelector('.chuanhu-mask')?.remove();
+        chatbotArea.classList.remove('show-chat-more');
+    }
 }
 
 /*

web_assets/stylesheet/ChuanhuChat.css

@@ -170,15 +170,18 @@ body.popup-open {
     z-index: 999;
     /* background-color: transparent; */
 }
-.chuanhu-mask {
+/* .chuanhu-mask {
     background-color: rgba(0, 0, 0, 0.5);
-    -webkit-backdrop-filter: blur(2px);
-    backdrop-filter: blur(2px);
-}
+    /* -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px); 
+} */
 .mask-blur {
     -webkit-backdrop-filter: blur(2px);
     backdrop-filter: blur(2px);
 }
+.transparent-mask {
+    background-color: transparent !important;
+}
 
 .chuanhu-side-mask {
     background-color: rgba(0, 0, 0, 0);
@@ -401,6 +404,7 @@ button.chatbot-input-more-btn {
     height: 32px;
     width: 32px;
     border-radius: 50%;
+    z-index: 1001;
 }
 button.chatbot-input-more-btn:hover .sm-round-bg {
     fill-opacity: 0.2125;
@@ -410,14 +414,17 @@ button.chatbot-input-more-btn:active .sm-round-bg {
 }
 
 /* 三个点号点开！ */
+.show-chat-more #chatbot-input-more-area {
+    display: flex;
+}
 /* no！屏幕宽度窄的时候！ */
 #chatbot-input-more-area {
+    display: none;
     position: absolute;
-    display: flex;
     flex-direction: column;
     bottom: 60px;
     min-width: 120px;
-    z-index: 5000;
+    z-index: 1001;
     border-radius: 6px;
     box-shadow: var(--shadow-sm);
     background: var(--chatbot-input-more-background-color);
@@ -468,6 +475,7 @@ button.chatbot-input-more-btn:active .sm-round-bg {
     justify-items: start;
 }
 .chatbot-full-width #chatbot-input-more-area {
+    display: flex;
     position: relative;
     flex-direction: row-reverse;
     justify-content: space-between;