Merge of emoji + autolink + embed + etc (#108)

* 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>
2020-08-12 21:56:41 -07:00
parent 2c1bc52487
commit 68ff9ff270
165 changed files with 378 additions and 295 deletions
@@ -0,0 +1,41 @@
+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;
+    }
+  });
+}