Fetch emoji picker document instead for JS - Before we were generating our own but this was pretty slow for JS

FossilOrigin-Name: 97ab71ad7f73882b8f980ce0daaad90636e9d2214e4fab4169f975b64f5eb309
This commit is contained in:
nekobit 2022-06-24 23:56:54 +00:00
parent 91425632e2
commit f1abdd3b50
5 changed files with 33 additions and 100 deletions

99
dist/js/emoji.js vendored
View file

@ -1,10 +1,8 @@
let emojo_json = null;
// Get emojis from file
function get_emojo_json(callback)
function get_emojo_picker(callback)
{
let xhr = new XMLHttpRequest();
xhr.open("GET", "/emoji.json");
xhr.open("GET", "/emoji_picker");
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE)
callback(this.response);
@ -12,95 +10,6 @@ function get_emojo_json(callback)
xhr.send();
}
function construct_emojo_picker(e)
{
let index = 0;
let emoji_picker = document.createElement("div");
emoji_picker.className = "emoji-picker";
emoji_picker.innerHTML = `<table class="tabs ui-table">
<tr>
<td>
<label for="cat-smileys">
<span class="tab-btn btn btn-alt">😃</span>
</label>
</td>
<td>
<label for="cat-animals">
<span class="tab-btn btn btn-alt">🐻</span>
</label>
</td>
<td>
<label for="cat-food">
<span class="tab-btn btn btn-alt">🍔</span>
</label>
</td>
<td>
<label for="cat-travel">
<span class="tab-btn btn btn-alt">🚀</span>
</label>
</td>
<td>
<label for="cat-activities">
<span class="tab-btn btn btn-alt"></span>
</label>
</td>
<td>
<label for="cat-objects">
<span class="tab-btn btn btn-alt">🔧</span>
</label>
</td>
<td>
<label for="cat-symbols">
<span class="tab-btn btn btn-alt">🔢</span>
</label>
</td>
<td>
<label for="cat-flags">
<span class="tab-btn btn btn-alt">🎌</span>
</label>
</td>
</tr>
</table>
<div class="emoji-picker-emojos-wrapper">
<input type="radio" class="hidden" id="cat-smileys" name="emoji-cat" checked>
${construct_emojis("Smileys & Emotion").outerHTML}
<input type="radio" class="hidden" id="cat-animals" name="emoji-cat">
${construct_emojis("Animals & Nature", index).outerHTML}
<input type="radio" class="hidden" id="cat-food" name="emoji-cat">
${construct_emojis("Food & Drink", index).outerHTML}
<input type="radio" class="hidden" id="cat-travel" name="emoji-cat">
${construct_emojis("Travel & Places", index).outerHTML}
<input type="radio" class="hidden" id="cat-activities" name="emoji-cat">
${construct_emojis("Activities", index).outerHTML}
<input type="radio" class="hidden" id="cat-objects" name="emoji-cat">
${construct_emojis("Objects", index).outerHTML}
<input type="radio" class="hidden" id="cat-symbols" name="emoji-cat">
${construct_emojis("Symbols", index).outerHTML}
<input type="radio" class="hidden" id="cat-flags" name="emoji-cat">
${construct_emojis("Flags", index).outerHTML}
</div>
</div>
`;
return emoji_picker;
}
function construct_emojis(category, start_index = 0)
{
let emoji_picker_div = document.createElement("div");
emoji_picker_div.className = "emoji-picker-emojos";
for (let i = 0; i < emojo_json.length; ++i)
{
if (emojo_json[i].group === category)
emoji_picker_div.innerHTML += `<span class="emoji">${emojo_json[i].char}</span>`;
}
return emoji_picker_div;
}
get_emojo_json((emojo_json_str) => {
emojo_json = JSON.parse(emojo_json_str);
document.body.appendChild(construct_emojo_picker(emojo_json));
get_emojo_picker((emojo_picker_str) => {
document.body.innerHTML += emojo_picker_str;
});

View file

@ -18,6 +18,7 @@
#include <stdlib.h>
#include <string.h>
#include "base_page.h"
#include "string.h"
#include "emoji.h"
#include "easprintf.h"
@ -25,6 +26,7 @@
// Pages
#include "../static/emoji.ctmpl"
#include "../static/emoji_plain.ctmpl"
#include "../static/emoji_picker.ctmpl"
enum emoji_categories
@ -83,11 +85,20 @@ char* construct_emoji(struct emoji_info* emoji, char* status_id, size_t* size)
if (!emoji)
return NULL;
struct emoji_template data = {
.status_id = status_id,
.emoji = emoji->codes
};
return tmpl_gen_emoji(&data, size);
if (status_id)
{
struct emoji_template data = {
.status_id = status_id,
.emoji = emoji->codes
};
return tmpl_gen_emoji(&data, size);
}
else {
struct emoji_plain_template data = {
.emoji = emoji->codes
};
return tmpl_gen_emoji_plain(&data, size);
}
}
static char* construct_emoji_voidwrap(void* passed, size_t index, size_t* res)
@ -99,6 +110,15 @@ static char* construct_emoji_voidwrap(void* passed, size_t index, size_t* res)
#define EMOJI_PICKER_ARGS(this_index) { .status_id = status_id, .index = this_index }
void content_emoji_picker(struct session* ssn, mastodont_t* api, char** data)
{
char* picker = construct_emoji_picker(NULL, NULL);
send_result(NULL, NULL, picker, 0);
free(picker);
}
char* construct_emoji_picker(char* status_id, size_t* size)
{

View file

@ -33,6 +33,7 @@ enum emoji_picker_cat
char* emojify(char* content, struct mstdnt_emoji* emos, size_t emos_len);
char* construct_emoji(struct emoji_info* emoji, char* status_id, size_t* size);
void content_emoji_picker(struct session* ssn, mastodont_t* api, char** data);
char* construct_emoji_picker(char* status_id, size_t* size);
#endif // EMOJI_H

View file

@ -25,6 +25,7 @@
#include "page_config.h"
#include "path.h"
#include "account.h"
#include "emoji.h"
#include "login.h"
#include "local_config.h"
#include "cookie.h"
@ -89,6 +90,7 @@ int main(void)
{ "/search/accounts", content_search_accounts },
{ "/search/hashtags", content_search_hashtags },
{ "/search", content_search_all },
{ "/emoji_picker", content_emoji_picker },
{ "/lists/edit/:", list_edit },
{ "/lists/for/:", content_tl_list },
{ "/lists", content_lists },

1
static/emoji_plain.tmpl Normal file
View file

@ -0,0 +1 @@
<span class="emoji">{{%s:emoji}}</span>