68ff9ff270
* Add an emoji picker to chat * Update to the custom emoji picker and add first pass at using custom emoji in text box * Add custom emoji endpoint and use it in the app * Position the emoji picker * Handle events from the text input * pair down the number of party parrots * Size emoji in chat and input * Add new custom emoji * Add OMQ stickers as custom emoji * Show custom category for emoji picker by default * update omq emojis * Document basic supported markdown syntax. Closes #95 * Websocket refactor: Pull it out of the UI and support callbacks (#104) * Websocket refactor: Pull it out of the UI and support listeners * Changes required for Safari to be happy with modules * Move to explicit ad-hoc callback registration * Add an emoji picker to chat * Update to the custom emoji picker and add first pass at using custom emoji in text box * Handle events from the text input * Rebuild autolinking + embed handling for #93 * Re-enable disabling chat * Document basic supported markdown syntax. Closes #95 * Document basic supported markdown syntax. Closes #95 * Add an emoji picker to chat * Merge emoji and embeds. * Merge emoji + embed branches. Rework autolink +embeds. WIP for username highlighting for #100 * More updates to chat text formatting/embedding/linking * Fix username autocomplete to work with div instead of form elements * Post-rebase fixes + tweaks * Disable text input by setting contentEditable = false * Remove test that hardcodes pointing to public test server * Fix re-enable chat with the contentEditable input div * Style and fix the fake placeholder text in the input div * Missing file. Were did it go? * Set a height for instagram embeds * Cleanup Co-authored-by: Ginger Wong <omqmail@gmail.com>
42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
import { EmojiButton } from 'https://cdn.skypack.dev/@joeattardi/emoji-button'
|
|
|
|
fetch('/emoji')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`Network response was not ok ${response.ok}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(json => {
|
|
setupEmojiPickerWithCustomEmoji(json);
|
|
})
|
|
.catch(error => {
|
|
this.handleNetworkingError(`Emoji Fetch: ${error}`);
|
|
});
|
|
|
|
function setupEmojiPickerWithCustomEmoji(customEmoji) {
|
|
const picker = new EmojiButton({
|
|
zIndex: 100,
|
|
theme: 'dark',
|
|
custom: customEmoji,
|
|
initialCategory: 'custom',
|
|
showPreview: false,
|
|
position: {
|
|
top: '50%',
|
|
right: '100'
|
|
}
|
|
});
|
|
const trigger = document.querySelector('#emoji-button');
|
|
|
|
trigger.addEventListener('click', () => picker.togglePicker(picker));
|
|
picker.on('emoji', emoji => {
|
|
if (emoji.url) {
|
|
const url = location.protocol + "//" + location.host + "/" + emoji.url;
|
|
const name = url.split('\\').pop().split('/').pop();
|
|
document.querySelector('#message-body-form').innerHTML += "<img class=\"emoji\" alt=\"" + name + "\" src=\"" + url + "\"/>";
|
|
} else {
|
|
document.querySelector('#message-body-form').innerHTML += emoji.emoji;
|
|
}
|
|
});
|
|
}
|