Emoji support in Web UI

This commit is contained in:
Philipp Heckel 2021-11-28 19:58:49 -05:00
parent 6ca63cc0e9
commit 052ab7d411
3 changed files with 22798 additions and 4 deletions

View File

@ -213,5 +213,6 @@ Third party libraries and resources:
* [GoReleaser](https://goreleaser.com/) (MIT) is used to create releases
* [github.com/mattn/go-sqlite3](https://github.com/mattn/go-sqlite3) (MIT) is used to provide the persistent message cache
* [Firebase Admin SDK](https://github.com/firebase/firebase-admin-go) (Apache 2.0) is used to send FCM messages
* [emoji-java](https://github.com/vdurmont/emoji-java) (MIT) is used for emoji support (the emoji.json file only)
* [Lightbox with vanilla JS](https://yossiabramov.com/blog/vanilla-js-lightbox)
* [Statically linking go-sqlite3](https://www.arp242.net/static-go.html)

View File

@ -158,6 +158,36 @@ const rerenderDetailView = () => {
const messageDiv = document.createElement('div');
const tagsDiv = document.createElement('div');
// Figure out mapped emojis (and unmapped tags)
let mappedEmojiTags = '';
let unmappedTags = '';
if (m.tags) {
mappedEmojiTags = m.tags
.filter(tag => tag in emojis)
.map(tag => emojis[tag])
.join("");
unmappedTags = m.tags
.filter(tag => !(tag in emojis))
.join(", ");
}
// Figure out title and message
let title = '';
let message = m.message;
if (m.title) {
if (mappedEmojiTags) {
title = `${mappedEmojiTags} ${m.title}`;
} else {
title = m.title;
}
} else {
if (mappedEmojiTags) {
message = `${mappedEmojiTags} ${m.message}`;
} else {
message = m.message;
}
}
entryDiv.classList.add('detailEntry');
dateDiv.classList.add('detailDate');
const dateStr = new Date(m.time * 1000).toLocaleString();
@ -167,17 +197,17 @@ const rerenderDetailView = () => {
dateDiv.innerHTML = `${dateStr}`;
}
messageDiv.classList.add('detailMessage');
messageDiv.innerText = m.message;
messageDiv.innerText = message;
entryDiv.appendChild(dateDiv);
if (m.title) {
titleDiv.classList.add('detailTitle');
titleDiv.innerText = m.title;
titleDiv.innerText = title;
entryDiv.appendChild(titleDiv);
}
entryDiv.appendChild(messageDiv);
if (m.tags) {
if (unmappedTags) {
tagsDiv.classList.add('detailTags');
tagsDiv.innerText = "Tags: " + m.tags.join(", ");
tagsDiv.innerText = `Tags: ${unmappedTags}`;
entryDiv.appendChild(tagsDiv);
}
detailEventsList.appendChild(entryDiv);
@ -281,6 +311,10 @@ const nextScreenshotKeyboardListener = (e) => {
}
};
const toEmoji = (tag) => {
emojis
};
// From: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
async function* makeTextFileLineIterator(fileURL) {
const utf8Decoder = new TextDecoder('utf-8');
@ -382,3 +416,15 @@ document.querySelectorAll('.ntfyUrl').forEach((el) => {
document.querySelectorAll('.ntfyProtocol').forEach((el) => {
el.innerHTML = window.location.protocol + "//";
});
// Fetch emojis
const emojis = {};
fetch('static/js/emoji.json')
.then(response => response.json())
.then(data => {
data.forEach(emoji => {
emoji.aliases.forEach(alias => {
emojis[alias] = emoji.emoji;
});
});
});

22747
server/static/js/emoji.json Normal file

File diff suppressed because it is too large Load Diff