添加表情(很乖巧的commit message)

Kroos372 · Feb 23, 2024 · d47190f · d47190f
1 parent d764efd
commit d47190f
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 22 deletions.
diff --git a/client.js b/client.js
@@ -39,26 +39,26 @@ const CMDS = {
     "/kcmd": function(msg) {
         var kd = msg.slice(6), index = Kcmd.indexOf(kd);
         if (!kd) {
-            pushMessage({ text: "目前的检测Kick命令有：" + Kcmd.join(", "), change: "info" });
+            pushMessage({ text: "目前的检测Kick命令有：" + Kcmd.join(", "), change: "info", channel: actAnnel });
         } else if (index == -1) {
             Kcmd.push(kd);
-            pushMessage({ text: `Kick检测列表添加"${kd}"！`, change: "info" });
+            pushMessage({ text: `Kick检测列表添加"${kd}"！`, change: "info", channel: actAnnel });
         } else {
             Kcmd.splice(index, 1);
-            pushMessage({ text: `Kick检测列表删除"${kd}"！`, change: "info" });
+            pushMessage({ text: `Kick检测列表删除"${kd}"！`, change: "info", channel: actAnnel });
         }
         return true;
     },
     "/swrd": function(msg) {
         var swd = msg.slice(6), index = shieldWords.indexOf(swd);
         if (!swd) {
-            pushMessage({ text: "目前的检测屏蔽词有：" + shieldWords.join(", "), change: "info" });
+            pushMessage({ text: "目前的检测屏蔽词有：" + shieldWords.join(", "), change: "info", channel: actAnnel });
         } else if (index == -1) {
-            pushMessage({ text: `屏蔽词列表添加"${swd}"！`, change: "info" });
+            pushMessage({ text: `屏蔽词列表添加"${swd}"！`, change: "info", channel: actAnnel });
             shieldWords.push(swd);
         } else {
             shieldWords.splice(index, 1);
-            pushMessage({ text: `屏蔽词列表删除"${swd}"！`, change: "info" });
+            pushMessage({ text: `屏蔽词列表删除"${swd}"！`, change: "info", channel: actAnnel });
         }
         sent(msg);
         return true;
@@ -69,10 +69,10 @@ const CMDS = {
         var index = list.indexOf(hash);
         if (index != -1) {
             list.splice(index, 1);
-            pushMessage({ text: `已取消屏蔽hash: "${hash}"`, change: "info" });
+            pushMessage({ text: `已取消屏蔽hash: "${hash}"`, change: "info", channel: actAnnel });
         } else {
-            pushMessage({ text: `已屏蔽hash: "${hash}"`, change: "info" });
             list.push(hash);
+            pushMessage({ text: `已屏蔽hash: "${hash}"`, change: "info", channel: actAnnel });
         }
         sent(msg);
         return true;
@@ -81,11 +81,11 @@ const CMDS = {
         var temp = msg.slice(6);
         if (temp) {
             msgTemplate = localStorage["msg-template"] = temp;
-            pushMessage({text: "已成功设置消息模板！", change: "info"});
+            pushMessage({text: "已成功设置消息模板！", change: "info", channel: actAnnel});
         } else {
             msgTemplate = null;
             localStorage.removeItem("msg-template");
-            pushMessage({text: "已成功删除消息模板！", change: "info"});
+            pushMessage({text: "已成功删除消息模板！", change: "info", channel: actAnnel});
         }
         sent(msg);
         return true;
@@ -102,13 +102,31 @@ const CMDS = {
     },
     "/help": function(msg) {
         if (!msg.slice(6)) {
-            pushMessage({trip: "coBad2", text: help, change: "info"});
+            pushMessage({trip: "coBad2", text: help, change: "info", channel: actAnnel});
         }
     },
     "/send": function(msg) {
         channels[actAnnel].socket.send(msg.slice(6));
         sent(msg);
         return true;
+    },
+    "/face": function(msg) {
+        var url = msg.slice(6);
+        if (url) {
+            var index = emojis.indexOf(url);
+            if (index != -1) {
+                emojis.splice(index, 1);
+                delEmoji(url);
+                pushMessage({ text: `已删除表情: "![w](${url})"`, change: "info", channel: actAnnel });
+            } else {
+                emojis.push(url);
+                addEmoji(url);
+                pushMessage({ text: `已添加表情: "![w](${url})"`, change: "info", channel: actAnnel });
+            }
+            sent(msg);
+        }
+        localStorage["emojis"] = JSON.stringify(emojis);
+        return true;
     }
 }
 const CMDKEYS = Object.keys(CMDS);
@@ -156,7 +174,6 @@ function sendMsg(msg, trace = true, ws) {
     if (!shouldConnect && msg == "/join") {
         return checkNick(actAnnel, inputNick());
     }
-    ws = ws || channels[actAnnel].socket;
     var func;
     for (var key of CMDKEYS) {
         if (msg.startsWith(key)) {
@@ -165,6 +182,7 @@ function sendMsg(msg, trace = true, ws) {
             break;
         }
     }
+    ws = ws || channels[actAnnel].socket;
     if (msgTemplate && !msg.startsWith("/")) msg = msgTemplate.replaceAll("%m", msg);
 
     if ($("#allCustom").checked){
@@ -283,7 +301,7 @@ function join(channel, nick, color = null) {
             try {
                 command.call(null, result);
             } catch (err) {
-                pushMessage({text: `出问题了！\n${err.message}`, change: "warn"});
+                pushMessage({text: `出问题了！\n${err.message}`, change: "warn", channel: actAnnel});
             }
         }
     };
@@ -691,7 +709,6 @@ $("#chatinput").onkeydown = function(e) {
     else if (e.key == "@") {
         atCont.flag = true;
         atCont.index = 0;
-        $("#at-ctm").style.bottom = $("#mbuttons").scrollHeight + $("#chatform").scrollHeight + 2 + "px";
     }
     else if (e.keyCode == 8 /* Backspace */) {
         if (pos && $("#chatinput").value[pos - 1] == "@") {

diff --git a/event.js b/event.js
@@ -205,6 +205,11 @@ $("#funfun").onclick = function(e) {
     updateInputSize();
     $("#chatinput").focus();
 }
+$("#emoji-on").onclick = function(e) {
+    e.stopPropagation();
+    $("#emojis").classList.remove("hidden");
+    $("#chatinput").placeholder = "使用/face <链接>添加或删除表情~";
+}
 // 传统右键菜单
 $("#mult-select").onclick = function(e) {
     $("#mult-oper").classList.add("cflex");

diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="zh-cn">
 
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -22,7 +22,7 @@
 </head>
 
 <body>
-  <audio style="display: none" id="notify-sound" preload="auto" src="https://hack.chat/audio/notify.mp3">
+  <audio class="hidden" id="notify-sound" preload="auto" src="https://hack.chat/audio/notify.mp3">
     <source src="https://hack.chat/audio/notify.mp3" type="audio/ogg">
   </audio>
   <article class="container">
@@ -33,6 +33,7 @@
       <div id="at-ctm" class="hidden">
         <a><div>...</div></a>
       </div>
+      <div id="emojis" class="hidden"></div>
       <div id="new-msg" class="hidden"><a href="javascript:void(0)"></a></div>
       <div id="mbuttons" class="flex">
         <a id="key-enter"><div>Enter</div></a>
@@ -41,6 +42,7 @@
         <a id="mdpreview" title="LaTeX设置与页面相同"><div>预览MD</div></a>
         <a id="zwichk"><div>i:check</div></a>
         <a id="funfun"><div>好玩的</div></a>
+        <a id="emoji-on"><div>表情</div></a>
       </div>
       <div id="mult-oper" class="hidden">
         <div><a id="msg-delete">删除</a></div>

diff --git a/others.js b/others.js
@@ -222,6 +222,12 @@ const anwz = {
 };
 const WARN = "!", INFO = "*";
 const isMobile = mobileJudge();
+try{
+    var emojis = JSON.parse(localStorageGet("emojis"));
+} catch (err) {
+    var emojis = [];
+}
+
 
 // Markdown所需
 function isWhite(link) {
@@ -372,6 +378,34 @@ function colorSet(channel, nick, color){
     var user = channels[channel].onlines[nick];
     if (user) user.color = color;
 }
+// 添加表情
+function addEmoji(url){
+    var li = document.createElement("li");
+    li.classList.add("my-emoji");
+    var img = document.createElement("img");
+    img.src = url;
+
+    var a = document.createElement("a");
+    a.onclick = function(e) {
+        insertAtCursor(`![awa](${url})`);
+        e.stopPropagation();
+    }
+    li.appendChild(a);
+    a.appendChild(img)
+    $("#emojis").appendChild(li);
+}
+// 删除表情
+function delEmoji(url) {
+    var list = $("#emojis img", true);
+    for (let img of list){
+        if (img.src == url) {
+            img.parentElement.parentElement.remove();
+            break;
+        }
+    }
+}
+// 陈列表情
+emojis.forEach(addEmoji);
 
 // 从localStorage中获取设置
 if (localStorageGet("pin-sidebar") == "true") {
@@ -657,14 +691,15 @@ window.addEventListener("contextmenu", window.onclick = function(e){
             menus[i].classList.add("hidden");
         }
     }
+    $("#emojis").classList.add("hidden");
 }, true);
 
 function updateInputSize() {
     var atBottom = isAtBottom();
     var input = $("#chatinput");
     input.style.height = 0;
     input.style.height = input.scrollHeight + "px";
-    document.body.style.marginBottom = $("#footer").offsetHeight + "px";
+    document.body.style.marginBottom = $("#chatform").offsetHeight + $("#mbuttons").offsetHeight + "px";
 
     if (atBottom) {
         window.scrollTo(0, document.body.scrollHeight);

diff --git a/style.css b/style.css
@@ -10,9 +10,9 @@ input,
 textarea {
   font-family: "DejaVu Sans Mono", monospace;
   font-size: 12px;
-  tab-size: 4;
   -moz-tab-size: 4;
   -o-tab-size: 4;
+  tab-size: 4;
 }
 #sidebar input[type="checkbox"] {
   margin: 0;
@@ -55,12 +55,11 @@ button{
 pre {
   display: block;
   line-height: 1.42857143;
-  tab-size: 2;
   white-space: pre-wrap;
   word-wrap: break-word;
-  tab-size: 4;
   -moz-tab-size: 4;
   -o-tab-size: 4;
+  tab-size: 4;
   word-break: break-all;
   word-wrap: break-word;
   background-color: #4e4e4e;
@@ -147,6 +146,7 @@ ul li {
 }
 .contextmenu {
   position: fixed;
+  width: -moz-fit-content;
   width: fit-content;
   min-width: 5em;
   padding: 0 1em;
@@ -162,6 +162,7 @@ ul li {
 }
 .center {
   position: fixed;
+  height: -moz-fit-content;
   height: fit-content;
   max-height: 80%;
   overflow: auto;
@@ -207,6 +208,16 @@ ul li {
 .act-channel::after {
   content: " <- 当前";
 }
+.my-emoji {
+  list-style: none;
+  width: 25%;
+  float: left;
+  height: 7em;
+  overflow: hidden;
+}
+.my-emoji img {
+  width: 100%;
+}
 #channel-list p {
   margin: 0;
 }
@@ -220,6 +231,13 @@ ul li {
   min-width: 1em;
   text-align: center;
 }
+#emojis {
+  width: 100%;
+  height: 20em;
+  overflow: auto;
+  border: 1px black solid;
+  position: relative;
+}
 #cpt-view {
   overflow: auto;
 }
@@ -266,8 +284,9 @@ ul li {
   padding: 0 0.5em;
 }
 #at-ctm {
+  width: -moz-fit-content; /* edge让我加的 */
   width: fit-content;
-  position: absolute;
+  position: relative;
 }
 #at-ctm div{
   padding: 0.5em;
@@ -349,7 +368,7 @@ table > thead > tr > th, table > tbody > tr > th, table > tfoot > tr > th, table
 td, th {
     padding: 0;
 }
-img {
+#messages img {
   max-width: 50%;
   max-height: 800px;
 }