Skip to content
This repository has been archived by the owner on Dec 28, 2023. It is now read-only.

Commit

Permalink
v1.3.1
Browse files Browse the repository at this point in the history 
fixes #14
fixes #9
  • Loading branch information
Nøtavøne committed Jul 25, 2020
1 parent 0944ffb commit ec8135e
Show file tree
Hide file tree
Showing 4 changed files with 155 additions and 28 deletions.
7 changes: 7 additions & 0 deletions .github/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@

## Changelog

### Version 1.3.1

* **Added** code blocks to markdown formatting
* **Added** mention replacement
* **Added** embed support (WIP)
* **Updated** attachments to directly send images, audios and videos

### Version 1.3.0

* **Updated** the locale code to automatically switch to english in case of missing translations
Expand Down
52 changes: 52 additions & 0 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,19 @@ p {
margin-bottom: 0;
}

figure {
margin: 0;
}

audio {
height: 30px;
}

video {
padding: 5px 0 5px 0;
max-width: 50%;
}

.messageId {
display: none;
}
Expand All @@ -68,12 +81,34 @@ p {
margin: 0;
}

.embeds {
margin: 5px 0 0 0;
padding: 5px 0 5px 5px;
display: block;
border-left: 5px solid white;
border-radius: 5px;
background-color: var(--bodyColor);
}

.embeds p {
display: inline;
}

.avatarIMG {
border-radius: 15px;
height: 30px;
width: 30px;
}

.chatImg {
padding: 2px;
max-width: 50%;
}

.chatMsg {
margin: 6px 0 6px 0;
}

.emojiImg {
width: 45px;
height: 45px;
Expand Down Expand Up @@ -124,6 +159,7 @@ a {
min-height: 350px;
max-height: 350px;
overflow-y: auto;
overflow-x: hidden;
text-align: left;
border: 2px solid var(--bodyColor);
box-shadow: 0 0 5px var(--bodyColor);
Expand All @@ -133,6 +169,10 @@ a {
word-break: break-word;
}

.scrollable a {
color: var(--blue);
}

#formatting {
height: 35px;
background-color: var(--bodyColor);
Expand Down Expand Up @@ -225,6 +265,18 @@ div {
padding-right: 6px;
}

.codeBlock {
background-color: var(--bodyColor);
border-radius: 7px;
display: block;
}

.code {
background-color: var(--bodyColor);
border-radius: 3px;
display: inline;
}

.mini {
min-width: 25px;
max-width: 25px;
Expand Down
33 changes: 31 additions & 2 deletions js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,18 +43,47 @@ function replaceMarkdown(text, markdown, start, end, join) {
let content = text.split(markdown);
if (content.length > 2) {
for (let i = 0; i < content.length; i++) {
if (i !== 0 && i % 2 !== 0) {
if (i !== 0 && i % 2 !== 0 && content[i] !== "") {
content[i] = start + content[i] + end;
} else if (i !== 0 && i % 2 !== 0 && content[i] === "") {
content[i] = join + join
}
}
return content.join('');
} else {
return content.join(join || '');
return content.join(join);
}

}
}

function contentReplacement(content, links) {
// noinspection HtmlUnknownTarget
content = escapeHtml(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')">`)
.replace(/\[(.*)]\((.*)\)/g, `<a href="\$2" target="_blank">\$1</a>`);

[...content.matchAll(/&lt;@!(\d{18})&gt;/g)].forEach((match) => {
let user = client.users.cache.find((user) => user.id === match[1]);
if (user) content = content.replace(match[0], `@${user.username}`);
});

if (links && links.length > 0) [...new Set(links)].forEach((link) => {
content = content.replace(link, `<a href="${link}" target="_blank">${link}</a>`);
});

content = replaceMarkdown(content, "***", "<b><em>", "</em></b>", "***");
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;");
content = replaceMarkdown(content, "```", "<div class='codeBlock'>", "</div>", "\`\`\`");
content = replaceMarkdown(content, "`", "<div class='code'>", "</div>", "&grave;");
return content;
}

function toggleVisibilityHeight(DOM) {
if ($(DOM).css("display") === "none") {
$(DOM).animate({
Expand Down
91 changes: 65 additions & 26 deletions js/panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,20 +56,6 @@ $(document).ready(() => {
FUNCTIONS
//////////////////////////////////////////*/

function contentReplacement(message) {
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
function createMessage(message) {
let userTag = escapeHtml(message.author.tag);
Expand All @@ -79,18 +65,20 @@ $(document).ready(() => {
let timestamp = formatTimestamp(message.createdAt);
let html;
let attachments = [];
let embeds = [];
let links = [];

Array.from(message.attachments).forEach((attachment) => {
let attachmentUrl = attachment[1].url;
let attachmentTxt = `<a href="${escapeHtml(attachmentUrl)}" target="_blank">`;
if (attachmentUrl.endsWith(".jpg") || attachmentUrl.endsWith(".jpeg") || attachmentUrl.endsWith(".png")) {
attachmentTxt += localeFile.fileType.img;
} else if (attachmentUrl.endsWith(".docx") || attachmentUrl.endsWith(".odt")) {
attachmentTxt += localeFile.fileType.doc;
return embeds.push(`<a href="${attachmentUrl}" target="_blank"><img class="chatImg" src="${attachmentUrl}" alt=""></a>`);
} else if (attachmentUrl.endsWith(".mp4")) {
attachmentTxt += localeFile.fileType.video;
return embeds.push(`<figure><figcaption>${attachment[1].name}</figcaption><video controls src="${attachmentUrl}"></video></figure>`);
} else if (attachmentUrl.endsWith(".mp3")) {
attachmentTxt += localeFile.fileType.audio;
return embeds.push(`<figure><figcaption>${attachment[1].name}</figcaption><audio controls src="${attachmentUrl}"></audio></figure>`);
} else if (attachmentUrl.endsWith(".docx") || attachmentUrl.endsWith(".odt")) {
attachmentTxt += localeFile.fileType.doc;
} else if (attachmentUrl.endsWith(".pdf")) {
attachmentTxt += localeFile.fileType.pdf;
} else {
Expand All @@ -100,7 +88,53 @@ $(document).ready(() => {
attachments.push(attachmentTxt);
});

html = `<div id="${message.id}">${userAvatar} ${escapeHtml(userTag)} `;
if (message.embeds.length) message.embeds.forEach((embed) => {
let html = "";
let fields = [];

if (embed.url) links.push(embed.url);
if (embed.author) {
if (embed.author.iconURL) html += `<a href="${embed.author.iconURL}" target="_blank"><img class="avatarIMG" src="${embed.author.iconURL}"> </a>`;
if (embed.author.url) {
html += `<a href="${embed.author.url}">${embed.author.name}</a>`;
} else {
html += embed.author.name;
}
}

if (embed.title) {
if (embed.author) html += "<br><br>";
html += `<b>${embed.title}</b>`;
}

if (embed.description) {
if (embed.author || embed.title) html += "<br><br>";
html += contentReplacement(embed.description);
}

if (embed.fields.length > 0) {
if (embed.author || embed.title || embed.description) html += "<br><br>";
embed.fields.forEach((field) => {
fields.push(`<p><b>${field.name}</b><br>${contentReplacement(field.value)}<p>${field.inline ? "" : "<br>"}`)
});
}
html += fields.join('');

if (embed.video !== null) {
if (embed.author || embed.title || embed.description || fields.length > 0) html += "<br><br>";
html += `<video controls src="${embed.video.url}"></video>`;
} else if (embed.image !== null) {
if (embed.author || embed.title || embed.description || fields.length > 0) html += "<br><br>";
html += `<a href="${embed.image.url}" target="_blank"><img class="chatImg" src="${embed.image.url}" alt=""></a>`;
} else if (embed.thumbnail !== null) {
if (embed.author || embed.title || embed.description || fields.length > 0) html += "<br><br>";
html += `<a href="${embed.thumbnail.url}" target="_blank"><img class="chatImg" src="${embed.thumbnail.url}" alt=""></a>`;
}

embeds.push(html)
});

html = `<div class="chatMsg" id="${message.id}">${userAvatar} ${escapeHtml(userTag)} `;

// Different types of messages
if (message.type === "GUILD_MEMBER_JOIN") {
Expand All @@ -111,7 +145,7 @@ $(document).ready(() => {
html += `${localeFile.messageType.channelNews} `;
} else if (message.type.includes("USER_PREMIUM_GUILD_SUBSCRIPTION")) {
html += `${localeFile.messageType.boost} `; // Covers all levels of boosting
} else if (message.content === "") {
} else if (message.content === "" && attachments.length > 0) {
html += `${localeFile.text.fileSent} `;
}

Expand All @@ -124,12 +158,16 @@ $(document).ready(() => {
}

if (message.content !== "") {
html += `<br><span class="messageContent">${contentReplacement(message)}</span>`;
html += `<br><span class="messageContent">${contentReplacement(message.content, links)}</span>`;
} else {
html += `<span class="messageContent"></span>`;
}

if (attachments.length > 0) {
if (embeds.length) {
html += `<br><span class="embeds">${embeds.join('')}</span>`;
}

if (attachments.length) {
html += `<br><span class="messageContent">${localeFile.text.attachmentTxt} : ${attachments.join(', ')}</span>`;
}

Expand Down Expand Up @@ -173,6 +211,7 @@ $(document).ready(() => {
chat.html(chat.html() + createMessage(msg[1]));
});
});
$("#chk2")[0].checked = true;
}
}

Expand Down Expand Up @@ -345,9 +384,9 @@ $(document).ready(() => {
}

if (message.channel.type !== "dm" && (Number(message.author.id) === Number(client.user.id) || !message.author.bot)) {
lastMessages.html(lastMessages.html() + `<br>[<b>#${escapeHtml(message.channel.name)} | ${escapeHtml(message.author.tag)}]</b> ${contentReplacement(message)}`);
lastMessages.html(lastMessages.html() + `<br>[<b>#${escapeHtml(message.channel.name)} | ${escapeHtml(message.author.tag)}]</b> ${contentReplacement(message.content)}`);
} else if (message.channel.type === "dm" && !message.author.bot) {
lastMessages.html(lastMessages.html() + `<br><b>[${localeFile.text.privateMessages}] ${escapeHtml(message.author.tag)}</b> ${contentReplacement(message)}`);
lastMessages.html(lastMessages.html() + `<br><b>[${localeFile.text.privateMessages}] ${escapeHtml(message.author.tag)}</b> ${contentReplacement(message.content)}`);
}

localStorage.setItem("lastMessages", $("#lastMessages").html());
Expand All @@ -370,8 +409,8 @@ $(document).ready(() => {

client.on("messageUpdate", (oldMessage, newMessage) => {
if (Number(oldMessage.channel.id) === Number(channels.val())) {
$(`#${oldMessage.id}`).replaceWith(createMessage(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") {
Expand Down

0 comments on commit ec8135e

Please sign in to comment.