v1.3.0

.github/README.md

@@ -6,50 +6,16 @@
 
 ## Changelog
 
-### Version 1.2.6
-*   **Updated** discord.js to master
-*   Language automation
-*   Github things
+### Version 1.3.0
 
-### Version 1.2.5
-
-*   Code cleaning
-*   `updateGuild()` events will trigger `selectChannelOnReload()` to automatically select the channel you were in before the guild updated
-
-### Version 1.2.4
-
-*   **Added** text formatting
-*   **Added** delete message buttons
-*   More message type are recognised (boost, news, pin)
-*   Accessing DMs will no longer throw an error
-*   **Fixed** emojis not pasting correctly
-*   Servers emoji now displays an image in the chat
-*   Messages will no longer appear in last messages if you're viewing the channel the channel they come from
-*   `Shift`+`Enter` now inserts a line break instead of sending the message
-
-### Version 1.2.3
-
-*   **Fixed** the workaround of [@RobinSchapendonk](https://github.com/RobinSchapendonk)
-*   Deleting/updating a message should no longer refresh the chat but dynamically find and delete/update the message (guilds only)
-*   Auto-scrolling is now a bit quicker to match with the speed of chat updating
-*   **Added** a `border-radius` attribute to a lot of elements
-*   Attachments are now recognised by their file type and displayed as such (images, documents etc..)
-
-### Version 1.2.2
-
-*   Changed the look of the panel
-*   **Removed** unused translations
-
-### Version 1.2.1
-
-*   Code cleaning
-
-### Version 1.2.0
-
-*   **Updated** README with changelog and how to translate sections
-*   **Fixed** the emoji button not appearing due to the recent changes in discord.js and how guildEmojis now works
-*   **Added** a new language button to load a translation of the project (css and a bit of code by [@ziomciopoziomcio](https://github.com/ziomciopoziomcio))
-*   ~~**Tried** a workaround to make the chat more readable in case of spam by [@RobinSchapendonk](https://github.com/RobinSchapendonk) but it's not currently working as intended so i'll make something later~~ ([fixed in version 1.2.3](#version-1.2.3))
+*  **Updated** the locale code to automatically switch to english in case of missing translations
+*  **Updated** the `contentReplacement()` function to also replace markdown
+*  **Updated** `deleteMessage()` & `editMessage()` to make use of jQuery selectors
+*  **Updated** the mousewheel binding code
+*  **New** function to format any timestamp into local timestamp (`formatTimestamp(dateLike)`)
+*  **New** Dutch locale by LevantHAN
+*  **New** Turkish locale by LevantHAN
+*  **Removed** `deleteMessage()` & `editMessage()` and moved the code into their matching discord events
 
 ## What makes this special ? 💎
 
@@ -65,7 +31,7 @@ COMING SOON™
 
 ## Built With 🔧
 
-*   [discord.js](https://github.com/discordjs/discord.js/blob/webpack/discord.11.4.2.js)
+*   [discord.js](https://github.com/discordjs/discord.js/tree/webpack)
 *   [JQuery](https://jquery.com/)
 *   [Bootstrap](https://getbootstrap.com/)
 
@@ -77,7 +43,9 @@ COMING SOON™
 
 ## Contributors 📝
 
-*   **None at the moment 😢**
+| ![LeventHAN](https://github.com/leventhan.png?size=100) |
+|:-------------------------------------------------------:|
+| **[🌐 LeventHAN](https://github.com/leventhan)**         |
 
 ## Copyrights and Licence
 

css/main.css

@@ -215,15 +215,11 @@ button:hover {
   color: var(--textColor);
 }
 
-.demi {
+.half {
   width: 50%;
   float: left;
 }
 
-.quart {
-  width: 25%;
-}
-
 div {
   padding-left: 6px;
   padding-right: 6px;

index.html

@@ -25,8 +25,8 @@
         <div class="col-lg-12 col-xl-6">
             <p class="header" id='channelName'>Chat</p>
             <div class="scrollable" id="chat"></div>
-            <select class="demi" id="guilds"></select>
-            <select class="demi " id="channels"></select><br>
+            <select title="guilds" class="half" id="guilds"></select>
+            <select title="channels" class="half" id="channels"></select><br>
             <div id="formatting">
                 <a href="javascript:void(0)" id="bold" class="formatting" onclick="format('bold')"><span><b>B</b></span></a>
                 <a href="javascript:void(0)" id="emphasis" class="formatting"
@@ -78,8 +78,8 @@
     </div>
 </div>
 </body>
-
-<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<script src="https://code.jquery.com/jquery-3.5.1.min.js"
+        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
 <script type="text/javascript" src="./js/discord.master.min.js"></script>
 <script type="text/javascript" src="locales.js"></script>
 <script type="text/javascript" src="./js/main.js"></script>

js/main.js

@@ -1,10 +1,21 @@
 let locale;
-if (!localStorage.getItem("locale") || localStorage.getItem("locale") === "" || localStorage.getItem("locale") === null) {
+if (!Object.keys(locales).includes(localStorage.getItem("locale"))) {
     localStorage.setItem("locale", "en");
 }
 locale = localStorage.getItem("locale");
 let localeFile = locales[locale];
 
+Object.keys(locales["en"]).forEach((key) => {
+    if (typeof locales["en"][key] === "string") {
+        if (localeFile[key] === ("" || undefined)) localeFile[key] = locales["en"][key];
+    } else if (typeof locales["en"][key] === "object") {
+        if (!localeFile[key]) localeFile[key] = locales["en"][key];
+    } else Object.keys(locales["en"][key]).forEach((subKey) => {
+        if (localeFile[key][subKey] === ("" || undefined)) localeFile[key][subKey] = locales["en"][key][subKey];
+    })
+
+});
+
 let token;
 if (!localStorage.getItem("token") || localStorage.getItem("token") === "" || localStorage.getItem("token") === null) {
     token = prompt(localeFile.token.prompt, "");
@@ -26,6 +37,24 @@ function escapeHtml(text) {
         .replace(/'/g, "'");
 }
 
+function replaceMarkdown(text, markdown, start, end, join) {
+    if (text === "" || !text.includes(markdown)) return text;
+    else {
+        let content = text.split(markdown);
+        if (content.length > 2) {
+            for (let i = 0; i < content.length; i++) {
+                if (i !== 0 && i % 2 !== 0) {
+                    content[i] = start + content[i] + end;
+                }
+            }
+            return content.join('');
+        } else {
+            return content.join(join || '');
+        }
+
+    }
+}
+
 function toggleVisibilityHeight(DOM) {
     if ($(DOM).css("display") === "none") {
         $(DOM).animate({
@@ -76,6 +105,11 @@ function del(message) {
     }
 }
 
+function formatTimestamp(timestamp) {
+    let date = new Date(timestamp);
+    return `${date.toLocaleDateString(localeFile.cCode)} ${date.toLocaleTimeString(localeFile.cCode)}`;
+}
+
 function tempChange(DOM, text, time) {
     let newText = `${$(DOM).text().replace(text, "")} ${text}`;
 

js/panel.js

@@ -57,10 +57,17 @@ $(document).ready(() => {
     //////////////////////////////////////////*/
 
     function contentReplacement(message) {
-        return escapeHtml(message.content)
+        let content = escapeHtml(message.content)
             .replace(/\n/g, "<br>")
             .replace(/(&lt;a:(.*?):(\d{18})&gt;)/g, `<img title="\$2" alt="" class="smallEmojiImg" src="https://cdn.discordapp.com/emojis/\$3" onclick="addText('\$1')">`)
             .replace(/(&lt;:(.*?):(\d{18})&gt;)/g, `<img title="\$2" alt="" class="smallEmojiImg" src="https://cdn.discordapp.com/emojis/\$3" onclick="addText('\$1')">`);
+
+        content = replaceMarkdown(content, "***", "<b><em>", "</em></b>", "&ast;&ast;&ast;");
+        content = replaceMarkdown(content, "**", "<b>", "</b>", "&ast;&ast;");
+        content = replaceMarkdown(content, "*", "<em>", "</em>", "&ast;");
+        content = replaceMarkdown(content, "__", "<u>", "</u>", "&lowbar;&lowbar;");
+        content = replaceMarkdown(content, "~~", "<s>", "</s>", "&tilde;&tilde;");
+        return content;
     }
 
     // This function creates a message to display in the chat, takes a Discord.Message as parameter
@@ -69,8 +76,7 @@ $(document).ready(() => {
         let userId = message.author.id;
         let avatarUrl = message.author.avatarURL() || `./img/discord_defaults_avatars/${message.author.discriminator % 5}.png`; // Get the user's avatar, if not, find the color of his default avatar
         let userAvatar = `<a href="${avatarUrl}" target="_blank"><img alt="" src="${avatarUrl}" class="avatarIMG"></a>`;
-        let creationDate = new Date(message.createdAt);
-        let timestamp = `${creationDate.toLocaleDateString(localeFile.cCode)} ${creationDate.toLocaleTimeString(localeFile.cCode)}`;
+        let timestamp = formatTimestamp(message.createdAt);
         let html;
         let attachments = [];
 
@@ -94,7 +100,7 @@ $(document).ready(() => {
             attachments.push(attachmentTxt);
         });
 
-        html = `<p>${userAvatar} ${escapeHtml(userTag)} `;
+        html = `<div id="${message.id}">${userAvatar} ${escapeHtml(userTag)} `;
 
         // Different types of messages
         if (message.type === "GUILD_MEMBER_JOIN") {
@@ -109,41 +115,25 @@ $(document).ready(() => {
             html += `${localeFile.text.fileSent} `;
         }
 
-        // Timestamp
-        html += `<span class="font-size-mini">${timestamp}</span> `;
+        // Timestamp & mention button
+        html += `<span class="font-size-mini">${timestamp}</span> <button class="mini" data-value="<@!${userId}>" onclick="addText(this.dataset.value)">😐</button>`;
 
-        // Buttons
-        html += `<button class="mini" value="<@!${userId}>" onclick="addText(this.value)">😐</button>`;
+        // Delete button
         if (message.deletable && ((guilds.val() === "DM" && message.author.id === client.user.id) || message.guild.me.hasPermission("MANAGE_MESSAGES"))) {
-            html += `<button class="mini" value="${message.id}" onclick="del(this.value)">🗑️</button>`;
+            html += `<button class="mini" data-value="${message.id}" onclick="del(this.dataset.value)">🗑️</button>`;
         }
 
         if (message.content !== "") {
             html += `<br><span class="messageContent">${contentReplacement(message)}</span>`;
+        } else {
+            html += `<span class="messageContent"></span>`;
         }
 
         if (attachments.length > 0) {
             html += `<br><span class="messageContent">${localeFile.text.attachmentTxt} : ${attachments.join(', ')}</span>`;
         }
 
-        return `${html} <span class="messageId">${message.id}</span></p>`;
-    }
-
-    function deleteMessage(message) {
-        chat.html().split("<p>").forEach((msg) => {
-            if (msg.includes(`<span class="messageId">${message.id}</span>`)) {
-                chat.html(chat.html().replace(`<p>${msg}`, ""));
-            }
-        });
-    }
-
-    function editMessage(oldMessage, newMessage) {
-        chat.html().split("<p>").forEach((msg) => {
-            if (msg.includes(`<span class="messageId">${oldMessage.id}</span>`)) {
-                let displayed = msg.split(`<span class="messageContent">`)[1].split("</span>")[0];
-                chat.html(chat.html().replace("<p>" + msg, "<p>" + msg.replace(`<span class="messageContent">${displayed}</span>`, `<span class="messageContent">${contentReplacement(newMessage)}</span>`)));
-            }
-        });
+        return `${html}</div>`;
     }
 
     function updateChannel() {
@@ -157,7 +147,7 @@ $(document).ready(() => {
             channel = user.dmChannel;
             let avatarUrl = user.avatarURL() || `./img/discord_defaults_avatars/${user.discriminator % 5}.png`;
             guildName.html(`<a href="${avatarUrl}" target="_blank"><img alt="" src="${avatarUrl}" class="avatarIMG"/></a> ${escapeHtml(user.username)}`);
-            $("#guildInfo").html(`${localeFile.text.userId} : (${user.id}) <button class="mini" value="<@!${user.id}>" onclick="addText(this.value)">@</button>`);
+            $("#guildInfo").html(`${localeFile.text.userId} : (${user.id}) <button class="mini" data-value="<@!${user.id}>" onclick="addText(this.dataset.value)">@</button>`);
 
             channelNameLabel.text(`${localeFile.text.channelNameLabel} [${user.username}]`);
             channelName.html(`<img alt="" src="./img/icon/chat.png" class="avatarIMG"/> #${escapeHtml(user.username)}`);
@@ -224,17 +214,16 @@ $(document).ready(() => {
 
             guildName.html(`<a href="${guild.iconURL() || "./img/icon/info.png"}" target="_blank"><img alt="" src="${guild.iconURL() || "./img/icon/info.png"}" class="avatarIMG"/></a> ${escapeHtml(guild.name)}`);
 
-            // General informations
-
-            html += `${localeFile.infos.owner}: ${guild.owner.user.tag} <button value="<@!${guild.owner.user.id}>" class="mini" onclick="addText(this.value)">@</button><br>`;
+            // General information
+            html += `${localeFile.infos.owner}: ${guild.owner.user.tag} <button data-value="<@!${guild.owner.user.id}>" class="mini" onclick="addText(this.dataset.value)">@</button><br>`;
             html += `${localeFile.infos.members}: ${guild.members.cache.filter((member) => !member.user.bot).size}<br>`;
             html += `${localeFile.infos.vChannels}: ${guild.channels.cache.filter((chan) => chan.type === "voice").size}<br>`;
             html += `${localeFile.infos.tChannels}: ${guild.channels.cache.filter((chan) => chan.type === "text").size}<br><br>`;
 
             // Members button
             guild.members.cache.filter((member) => !member.user.bot).forEach((member) => {
                 let avatarUrl = member.user.avatarURL() || `./img/discord_defaults_avatars/${member.user.discriminator % 5}.png`;
-                guildMembers.push(`<a href="${avatarUrl}" target="_blank"><img alt="" style="display: inline;" class="avatarIMG" src="${avatarUrl}"/></a> ${member.user.tag} <button value="<@!${member.user.id}>" onclick="addText(this.value)" class="mini">@</button>`);
+                guildMembers.push(`<a href="${avatarUrl}" target="_blank"><img alt="" style="display: inline;" class="avatarIMG" src="${avatarUrl}"/></a> ${member.user.tag} <button data-value="<@!${member.user.id}>" onclick="addText(this.dataset.value)" class="mini">@</button>`);
             });
             html += `<button onclick='toggleVisibilityHeight("#guildMembers")'>${localeFile.infos.members}</button>`;
             html += `<div id="guildMembers" style="display:none; opacity: 0;">${guildMembers.join("<br>")}</div>`;
@@ -371,7 +360,7 @@ $(document).ready(() => {
 
     client.on("messageDelete", (message) => {
         if (Number(message.channel.id) === Number(channels.val())) {
-            deleteMessage(message);
+            $(`#${message.id}`).remove();
         }
 
         if ((Number(message.author.id) === Number(channels.val()) || message.author.id === client.user.id) && message.channel.type === "dm") {
@@ -381,7 +370,8 @@ $(document).ready(() => {
 
     client.on("messageUpdate", (oldMessage, newMessage) => {
         if (Number(oldMessage.channel.id) === Number(channels.val())) {
-            editMessage(oldMessage, newMessage);
+            $(`#${oldMessage.id} > span.font-size-mini`).html(`Edited at : ${formatTimestamp(newMessage.editedAt)}`);
+            $(`#${oldMessage.id} > span.messageContent`).html(contentReplacement(newMessage));
         }
 
         if ((Number(oldMessage.author.id) === Number(channels.val()) || oldMessage.author.id === client.user.id) && oldMessage.channel.type === "dm") {
@@ -499,23 +489,6 @@ $(document).ready(() => {
         sendMessage();
     });
 
-    /* TODO Fix code apparently not working in this version of discord.js
-    $("#delLast").click(() => {
-        console.log(client.user);
-        if (client.user.lastMessage === null) {
-            tempChange("#delLast", "[ERROR]", 2000);
-            return;
-        } else {
-            try {
-                client.user.lastMessage.delete();
-                updateChannel();
-            } catch (error) {
-                return;
-            }
-        }
-    });
-    */
-
     clearChat.click(() => {
         localStorage.setItem("lastMessages", "");
         $("#lastMessages").empty();
@@ -579,17 +552,17 @@ $(document).ready(() => {
     //////////////////////////////////////////*/
 
     lastMessages.bind("mousewheel", (event) => {
-        if (event.originalEvent.wheelDelta >= 0) {
+        if (event.originalEvent.deltaY < 0) {
             $("#chk1")[0].checked = false;
-        } else if ($("#lastMessages")[0].scrollHeight - 500 < $("#lastMessages").scrollTop()) {
+        } else if (event.originalEvent.deltaY > 0 && $("#lastMessages").scrollTop() + $("#lastMessages").innerHeight() >= $("#lastMessages")[0].scrollHeight - 80) {
             $("#chk1")[0].checked = true;
         }
     });
 
     chat.bind("mousewheel", (event) => {
-        if (event.originalEvent.wheelDelta >= 0) {
+        if (event.originalEvent.deltaY < 0) {
             $("#chk2")[0].checked = false;
-        } else if ($("#chat")[0].scrollHeight - 500 < $("#chat").scrollTop()) {
+        } else if (event.originalEvent.deltaY > 0 && $("#chat").scrollTop() + $("#chat").innerHeight() >= $("#chat")[0].scrollHeight - 80) {
             $("#chk2")[0].checked = true;
         }
     });