Emoji selector

[psychobunny]

Ever thought of using something like this? (Click on "Custom emoji trigger")

http://wedgies.github.io/jquery-emoji-picker/demo.html

[ghost]

I've never thought of that stuff 'cause I don't like it very much.

I guess it's of most use for mobile devices and I don't like mobile devices either :stuck_out_tongue:

I'm more the keyboard user; If I want to browse the emoji I need to see what to type instead in the future besides the emoji. But if you (or somebody else) want to implement this, go ahead ;-) The popup for reaction-emoji within slack is the best implementation of such a box I'm aware of. However this would require some changes to allow emoji for category-titles; That is a feature I'd like to implement some day...

[psychobunny]

I agree. That's where I'm coming from, I'm looking at slacks emoji pop-up compared to ours, this was a lib I found that was similar-ish.

I want to build a reactions plugin that hooks from your plugin, so I was wondering a) how I can achieve that and b) would we be able to use the same pop-up / modal

[ghost]

The relevant client-side module is plugin/emoji-extended/composer/modal. It would be needed to adjust the showModal function in order to allow custom actions on click. I think it's best to rename the current exports.open to exports.openAndInsert and export an additional open function that returns a promise. Let me know if you wanna do this, otherwise I'll change it soon:tm:.

But regardless if you're gonna implement a similar-ish popup to OP, it could find its way into a new module of emoji-extended; I'd not replace the original modal but rather add the new popup in addition. Maybe the composer could even provide a hook for adding clickable texts/elements below it's "COMPOSE (?)" for this purpose?

[ghost]

@psychobunny You can now use the available modal like this:

require(["plugin/emoji-extended/composer/modal", "plugin/emoji-extended/completion"], function (emojiModal, emojiCompletionDefer) {
  $.when(emojiCompletionDefer, emojiModal.open())
    .then(function (emojiCompletion, item) { return emojiCompletion.getImg(item, "emoji-reaction"); })
    .then(function (imgTagString) {
      console.log(imgTagString);
      // attach imgTagString to DOM
    });
});

EDIT: fixed code, forgot that "plugin/emoji-extended/completion" is a deferred module xD

[julianlam]

ooh, promises :smile:

[pitaj]

Promises!!!

[ghost]

@julianlam Yes :laughing: but jQuery promises are not the best example to study :stuck_out_tongue: I just use them not to have extra client-side dependencies...