Executable via "onclick"?

[annando]

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 :-)

[woody180]

Hello.. you can create .js file. import it in to your project and inside js file put following
new EmojiPicker({ trigger: [ { selector: '.first-btn', insertInto: ['.one', '.two'] // '.selector' can be used without array }, { selector: '.second-btn', insertInto: '.two' } ], closeButton: true, //specialButtons: green });

inside "selector" add class/id of the button from which will invoke emoji picker

[annando]

My problem is that I have got a handful of textareas on the page that I have to address via their id. The id values are always different. So the best would be to execute the picker via some <button ... onclick='Picker({{id}})'>...</button>.

Also I have got another problem. Currently I'm using a class name. But The class is assigned after the page loaded (when a user clicks on "comment"). This means that the picker doesn't find the class and thus cannot execute the trigger. This is why we had to tweak the code a little bit: https://github.com/friendica/friendica/blob/develop/view/js/vanillaEmojiPicker/vanillaEmojiPicker.js#L7716

[msamyel]

I was facing the same issue in my project. If you know you are only going to have so many pairs of emoji pickers and textareas, you can set up the triggers when initializing EmojiPicker and they will trigger even if you add those elements later.

function* range(start, end, step = 1) {
    for (let i = start; i < end; i += step) {
        yield i;
    }
}

let indices = range(0,1000);

const trigger = [...indices.map(x => ({
                selector: "#emoji_trigger_" + x,
                insertInto: "#textarea_id_" + x}))];

new EmojiPicker({
            trigger: trigger,
            closeButton: true
        });