woody180 / vanilla-javascript-emoji-picker Goto Github PK

Hi Woody180, I love this emoji picker, the only missing feature for me, is the possibility to have multiply emoji pickers on the same page. Is it possible to make the emoji picker uses the nearest textarea from the clicked trigger?

I have tried different methods but couldn't get it to work. Do you know if there is a solution?

new FgEmojiPicker({
trigger: ['button'],
position: ['bottom', 'right'],
preFetch: true,
emit(obj, triggerElement) {
document.querySelector('textarea').value += obj.emoji;
}
});

Hi, thank you it's a very beautiful emoji picker, but for using it inside a Bootstrap 5 "Offcanvas" element you have to increase the z-index from 999 to upper than 1050.

I hope that will help.

The search function only uses the Emoji name, not the keywords.
I added an extra attribute "data-keywords" (line 181 in fgEmojiPicker.js) then i added the data-keywords attribute to the LI-object in line 619, joining the keywords array and preserving the keywords from the description: data-keywords="${item.description.toLowerCase()} ${item.keywords.join(" ").toLowerCase()}"

Hi,

Thanks for this beautiful emoji picker, it matches all my needs.

However, I know it's always hard to make things work for IE, and I know this is supposed to be deprecated this year, but it would have been great just to hide the component or display an alert if the users is using IE 11, to avoid errors.

Hello @woody180! Thank you for this awesome emoji picker! Amazing job! It's very useful if you don't won't to hide the input field.
I have a question, is this possible to insert the emoji at cursor position? Thank you!

Hi folks, what licence is this? MIT? BSD? Want to verify if ok to actually use this code for all purposes without issue. Appreciate it.

Hello. Thanks for the picker; I like a lot!
I have a question; I'm trying to insert two differents (for 2 different textareas) in the same page but it doesn't work and I've no console errors.

const emojiPickerReply = new FgEmojiPicker(opts)
const emojiPicker = new FgEmojiPicker(opts)

Do you know what's going on?

Thanks in advance,

hi
after page load with ajax say error:
FgEmojiPicker is not defined

For an case insensitive search line 176 in fgEmojiPicker.js should be like const val = e.target.value.toLowerCase();

I have an input text where the emojis are inserted but when I attach change and input events on the input it is not firing
To Reproduce

1. create an input box
2. attach change or text event on the input box
3. add the emoji lib
4. append the selected emoji to the input box
5. done no change will be detected

Expected behavior
on change should detect change on the input box

Environment
firefox 112.0 (64-bit)

Possible fix
Create a new Event object.
const event = new Event('change');

Dispatched the event
myField.dispatchEvent(event);

At first thanks a lot for this slim piece of code!

From what I have seen, the only way invoking it, is to execute it indirectly via some trigger. I would like to use the code in Friendica for the comment fields. But to make that work, the script needs to be executed via the "onclick" attribute.

Is this prepared in any way? I'm a JS rookie, so it could be that the question is really stupid :-)

how do i add the selected emoji to the input field ?

Any help would be greatly appreciated

This doesn't seem to work for me, I need to limit the emoji input to one emoji only :(

        <div id="subAccounts" class="tab">
            <h2>SubAccounts</h2>
            <hr>
            <form action="{% url 'api_subaccounts_create' %}" method="post">
                {% csrf_token %}
                <label for="emoji">Emoji:</label>
                <input type="text" id="emoji" name="emoji" class="subaccounts-emoji-input" maxlength="1" style="width: 20px">
                <button class="emoji-picker-open-button uk-button uk-button-primary">Open Picker</button><br>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" maxlength="30" required><br>
                <button type="submit">Add SubAccount</button>
            </form>
            <hr>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Emoji</th>
                        <th>Balance</th>
                    </tr>
                </thead>
                <tbody>
                    {% for subaccount in subaccounts %}
                        <tr>
                            <td>{{ subaccount.id }}</td>
                            <td>{{ subaccount.emoji }}</td>
                            <td>{{ subaccount.balance }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <script>
                const emojiInput = document.querySelector('.subaccounts-emoji-input');

                function limitToSingleEmoji() {
                    const emojiRegex = /[\p{Emoji}\u200d]+/gu;
                    const matches = emojiInput.value.match(emojiRegex);
                    emojiInput.value = matches && matches[0] ? matches[0] : '';
                }

                emojiInput.addEventListener('input', limitToSingleEmoji);

                new EmojiPicker({
                    trigger: [
                        {
                            selector: '.emoji-picker-open-button',
                            insertInto: '.subaccounts-emoji-input'
                        }
                    ],
                    closeButton: true,
                    onSelect: limitToSingleEmoji
                });
            </script>
        </div>

I renamed the travel--places SVG to activities, activities to objects and objects to travel-places, looks better to me.

The only way to close it seems:

• ESC keypress
• choose an emoji

There is no "X" close button. Nor the click on blank document closes it.

Any way to add a better way to close it ?

Hi, thanks for your plugin. It’s the only one I found on the net that meets my needs. However I encounter some problems: I created a contentditable that works with the emoji, but each time I click on the "enter" key the emoji that follow the action multiply according to the number "enter".
I wish you could help me. Thanks in advance.

Hi
Please add RTL support. Tnx

It disables the selection of text in google chrome.
Firefox working fine though.

This is pretty easy to to, just add an option like removeOnSelection defaults to true to keep the original behavior. And make an if-statement in the emitEmoji function:

if(this.removeOnSelection)
    picker.remove();

One of my testers mentioned that most people use multiple emojis and in my opinion it makes sens to have this option if wished.
And thanks a lot for the work on this picker.