From a3fc50512ff3a2c48395f03689d0219b6ebf3b40 Mon Sep 17 00:00:00 2001 From: SebOuellette Date: Sun, 29 Aug 2021 20:04:02 -0400 Subject: [PATCH] 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. --- css/messageBar.css | 7 ++++++- js/app.js | 24 ++++++++++++++++++++---- js/guildSelect.js | 2 +- js/rcMenuFuncs.js | 2 +- js/sendMsg.js | 4 ++-- js/typingStatus.js | 2 +- js/userSettings.js | 4 ++-- scripts/template.js | 2 +- 8 files changed, 34 insertions(+), 13 deletions(-) diff --git a/css/messageBar.css b/css/messageBar.css index 6e2bd0db..3bbbab2b 100644 --- a/css/messageBar.css +++ b/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 { diff --git a/js/app.js b/js/app.js index e2aeb92d..948571e8 100644 --- a/js/app.js +++ b/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 diff --git a/js/guildSelect.js b/js/guildSelect.js index d1f7d76e..89474f40 100644 --- a/js/guildSelect.js +++ b/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; diff --git a/js/rcMenuFuncs.js b/js/rcMenuFuncs.js index 1c0ab01c..39eb15f3 100644 --- a/js/rcMenuFuncs.js +++ b/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( diff --git a/js/sendMsg.js b/js/sendMsg.js index 08f9a6ca..8d66d842 100644 --- a/js/sendMsg.js +++ b/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 = /()/gm // text = text.replace(customEmoji, (a, b, c, d) => { // if (c != '!') { diff --git a/js/typingStatus.js b/js/typingStatus.js index ae51814c..92102aa7 100644 --- a/js/typingStatus.js +++ b/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']); diff --git a/js/userSettings.js b/js/userSettings.js index 24bfa181..0f7e51cd 100644 --- a/js/userSettings.js +++ b/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); }); } } diff --git a/scripts/template.js b/scripts/template.js index b4d66537..5ec34340 100644 --- a/scripts/template.js +++ b/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',