diff --git a/src/plugins/sib-reactions.js b/src/plugins/sib-reactions.js index 1d9ceba2ed1e59f78b49d5b0c0aae5bf29498666..9c160ee62fce71f4113547797e38f99e18171429 100644 --- a/src/plugins/sib-reactions.js +++ b/src/plugins/sib-reactions.js @@ -209,16 +209,23 @@ converse.plugins.add('sib-reactions', { return _.values(emojis); }, - // TODO: Care about overflow according to the target position + /** + * Open the emoji drawer with all the needed stuff. + * - When the user selects an emoji, it sends the reaction stanza. + * - When the user press escape, it closes the drawer. + * - When the user click outside of the drawer, it closes it. + * @param ev + */ openEmojiPicker(ev) { ev.preventDefault(); - const self = this; + + // TODO: Care about overflow according to the target position const picker = new Picker(); - self.appendChild(picker); + this.appendChild(picker); - picker.addEventListener('emoji-click', function(e) { + picker.addEventListener('emoji-click', e => { const emoji = e.detail.unicode; - const emojis = getUserReactionEmojis(self.model); + const emojis = getUserReactionEmojis(this.model); // TODO: If it has the reaction from this user already, remove it? (config) if (emojis?.includes(emoji)) { @@ -230,7 +237,7 @@ converse.plugins.add('sib-reactions', { emojis.push(emoji); picker.remove(); - sendReactionStanza(self.model, emojis); + sendReactionStanza(this.model, emojis); }); // Focus the search input when the picker opens @@ -245,6 +252,7 @@ converse.plugins.add('sib-reactions', { }); // Close the picker if clicked outside of it + // TODO: Remove this listener when the picker is removed from the dom setTimeout(() => { document.addEventListener('click', ev => { if (!picker.shadowRoot.contains(ev.composedPath()[0])) {