mirrors/treebird
0
0
Fork 1
Code Issues Pull requests Projects Releases Wiki Activity

JS create emoji picker

Browse source 
FossilOrigin-Name: 26515b617c6cdfc8c29c0976593245e825b38e7045a363171660881130d04870
This commit is contained in:
nekobit 2022-06-24 21:21:38 +00:00
parent f0befa3d3c
commit e31e09029a
2 changed files with 106 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
dist/js/emoji.js vendored
View file

@ -0,0 +1,105 @@
// Get emojis from file
function get_emojo_json(callback)
{
let xhr = new XMLHttpRequest();
xhr.open("GET", "/emoji.json");
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE)
callback(this.response);
};
xhr.send();
}
function construct_emojo_picker()
{
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>
<div class="emoji-picker-emojos">
{{%s:emojis_smileys}}
</div>
<input type="radio" class="hidden" id="cat-animals" name="emoji-cat">
<div class="emoji-picker-emojos">
{{%s:emojis_animals}}
</div>
<input type="radio" class="hidden" id="cat-food" name="emoji-cat">
<div class="emoji-picker-emojos">
{{%s:emojis_food}}
</div>
<input type="radio" class="hidden" id="cat-travel" name="emoji-cat">
<div class="emoji-picker-emojos">
{{%s:emojis_travel}}
</div>
<input type="radio" class="hidden" id="cat-activities" name="emoji-cat">
<div class="emoji-picker-emojos">
{{%s:emojis_activities}}
</div>
<input type="radio" class="hidden" id="cat-objects" name="emoji-cat">
<div class="emoji-picker-emojos">
{{%s:emojis_objects}}
</div>
<input type="radio" class="hidden" id="cat-symbols" name="emoji-cat">
<div class="emoji-picker-emojos">
{{%s:emojis_symbols}}
</div>
<input type="radio" class="hidden" id="cat-flags" name="emoji-cat">
<div class="emoji-picker-emojos">
{{%s:emojis_flags}}
</div>
</div>
</div>
`;
return emoji_picker;
}
get_emojo_json((emojo_json_str) => {
const emojo_json = JSON.parse(emojo_json_str);
console.log(emojo_json);
});

1
static/index.tmpl
View file

@ -66,5 +66,6 @@
<!-- Source -->
<script src="/js/main.js"></script>
<script src="/js/emoji.js"></script>
</body>
</html>