Dynamic message box

The message box now resizes when content in it wraps. It can only hold up to 6 lines until it requires that you scroll.

Author: SebOuellette

css/messageBar.css

@@ -21,13 +21,14 @@ limitations under the License. */
     height: 40px;
     padding-bottom: 10px;
     z-index: 2;
+    
 }
 
 #sendmsg::before {
     content: "";
     width: 100%;
     background-color: #36393e;
-    height: 40px;
+    height: 4000px;
     position: absolute;
     top: 20px;
     z-index: -1;
@@ -43,6 +44,8 @@ limitations under the License. */
     border-radius: 5px;
     padding: 0 10px 0 0;
     display: flex;
+    
+    /* display: table; */
 }
 
 #msgbox::-webkit-scrollbar {
@@ -72,6 +75,7 @@ limitations under the License. */
     /* width: calc(100% - 40px); */
     word-spacing: 2px;
     position: relative;
+    /* display: table-row; */
 }
 
 
@@ -84,6 +88,7 @@ limitations under the License. */
     display: grid;
     grid-auto-flow: column;
     grid-column-gap: 4px;
+    
 }
 
 #msgMisc img {

js/app.js

@@ -43,16 +43,32 @@ async function create() {
     };
 
     document.getElementById('msgbox').addEventListener('keydown', (event) => {
-        if (event.key === 13 && !event.shiftKey) {
+        if (event.key == "Enter" && !event.shiftKey) {
             event.preventDefault();
-            sendmsg();
+
+            // If the message was able to be sent, reset the message box size
+            if (!sendmsg()) {
+                // Reset the textbox height
+                let msgBox = document.getElementById("sendmsg");
+                msgBox.style.height = '38px'; // Reset the height first
+                msgBox.style.transform = '';
+            }
         }
     });
 
     document.getElementById('msgbox').addEventListener('input', (event) => {
-        let rows = document.getElementById('msgbox').value.split('\n').length;
-        if (rows == 0) rows++;
+        let textElem = document.getElementById('msgbox');
+        let rows = textElem.value.split('\n').length;
+        rows = (rows == 0) ? 1 : rows;
         // document.getElementById("msgbox").rows = rows;
+        
+        let msgBox = document.getElementById("sendmsg");
+
+        if (textElem.scrollHeight < 38*5) {
+            msgBox.style.height = '0px' // Reset the height first
+            msgBox.style.height = `${textElem.scrollHeight}px`;
+            msgBox.style.transform = `translateY(-${textElem.scrollHeight-38}px)`
+        }
     });
 
     // Call the settings menu builder

js/guildSelect.js

@@ -24,7 +24,7 @@ let guildSelect = (g, img) => {
     img.classList.add('selectedGuild');
 
     // this should be done another way
-    document.getElementById('guildIndicator').style.marginTop = `${img.offsetTop - 69}px`;
+    document.getElementById('guildIndicator').style.marginTop = `${img.offsetTop - 64}px`;
     document.getElementById('guildIndicator').style.display = 'block';
 
     oldimg = img;

js/rcMenuFuncs.js

@@ -63,7 +63,7 @@ function editMsg(target) {
     target.appendChild(textarea);
 
     textarea.addEventListener('keydown', (e) => {
-        if (e.key === 13 && !e.shiftKey) {
+        if (e.key == "Enter" && !e.shiftKey) {
             if (textarea.value == text) return editDOM(target, textarea, text);
             let newText = textarea.value;
             newText = newText.replace(

js/sendMsg.js

@@ -31,8 +31,8 @@ let helpMsg = [
 let sendmsg = (text = '') => {
     if (selectedChan) {
         text = text.length ? text : document.getElementById('msgbox').value;
-        if (!text.replace(/ |\n| /gm, '')) return;
-        // If the emoji isn't a gloabal emoji, treat it as one.
+        if (!text.replace(/ |\n| /gm, '')) return true;
+        // If the emoji isn't a global emoji, treat it as one.
         // let customEmoji = /(<a?:)(!)?(.+?:[0-9]+?>)/gm
         // text = text.replace(customEmoji, (a, b, c, d) => {
         //     if (c != '!') {

js/typingStatus.js

@@ -49,7 +49,7 @@ let typingTimer = {
             this.timers[id] = { timeout, interval };
         },
         decrease: function (id, channel) {
-            channel.stopTyping();
+            channel.stopTyping(true);
             this.timers[id]['timeout']--;
             if (this.timers[id]['timeout'] < 0) {
                 clearInterval(this.timers[id]['interval']);

js/userSettings.js

@@ -512,7 +512,7 @@ function genCheckbox(parent, option) {
 
 //     document.getElementById("tokenbox")
 //         .addEventListener("keydown", event => {
-//             if (event.key === 13) {
+//             if (event.key == "Enter") {
 //                 unloadAllScripts();
 //                 setToken();
 //             }
@@ -543,7 +543,7 @@ function genShortInput(
     if (id == 'tokenbox') {
         input.type = 'password';
         input.addEventListener('keydown', (event) => {
-            if (event.key === 13) showSplashScreen(input.value);
+            if (event.key === "Enter") showSplashScreen(input.value);
         });
     }
 }

scripts/template.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 module.exports.info = {
-    author: 'Your discord username and tag (ex: daniel_crime#1551)',
+    author: 'Your discord username and tag (ex: SharkFin#1504)',
     title: 'Name of your script',
     description: 'Description of your script',
     version: '1.0.0',