Desactivate passive mode for specific contents or specific elements.

[BoumBam]

Hello,
I'm using https://github.com/mervick/emojionearea with your plug-in but your plug-in seem not to be compatible with https://github.com/mervick/emojionearea.

EmojioneArea uses mousedown event and it require to use event.preventDefault() in not passive mode.

I would like to know if it was possible to desactivate passive mode for specific contents or specific elements ?
I would like to desactivate passive mode for ".emojionearea-editor" .

Thanks.

[Jakub Freisler]

Hey! Sorry, I haven't see this issue earlier:<

So, there is a possibility to disable this library for some elements. There is a notice in Q&A section of our README on how to disable default-passive-events for a single element:
https://github.com/zzarcon/default-passive-events/blob/master/README.md#is-there-a-possibility-to-bring-default-addeventlistener-method-back-for-chosen-elementsglobally-eg-for-time-of-running-some-of-the-code

So, having this piece of code, you could've tweak it a bit to restore original addEventListener implementation for all elements having the same, one class:

document.body.querySelectorAll('.emojionearea-editor').forEach(function (element) {
    element.addEventListener = element.addEventListener._original;
});

[Jakub Freisler]

Once again - sorry for such a late response. Does this answers your question?

[BoumBam]

don't worry my friends for your late answer.

But I can't arrive to make your plug-in compatible with https://github.com/mervick/emojionearea

Here is the normal state:
When I remove your plug-in from my project https://jsfiddle.net/aeLkgzju/

Here is the anomalous state:
When I add your plug-in in my project https://jsfiddle.net/8q9d3rzj/

In anomalous state when I click on an emoji, the emoji picker is closed and the emoji is inserted at the beginning of the .emojionearea-editor instead of the actual cursor position.

Have you find the problem ?

Can you help me ?

[Jakub Freisler]

Hey @BoumBam! It took a while, but I've figured out the solution here: https://jsfiddle.net/mjareo0d/4/
It might not be the prettiest piece of code out there, but it gets the job done. The problem with emojionearea is that they don't expose most of their API publicly, so there is not much more we can do :<
This code could be much better if they would give us some kind of right before ready event, so we can do the work before their own button initialisation happen, but after the EmojiOneArea instance would be created.

Hope the code from fiddle linked above fixes the problem for you - give me a sign if it does! Cheers ;)

[BoumBam]

Using only the code below seem to work

`const originalOn = $.fn.on;
      $.fn.on = function () {
        const items = this;
        let result;
        const customAddEventListeners = items.map(function() {
          if (this.classList && (
            this.classList.contains('emojionearea-picker') ||
            this.classList.contains('emojionearea-button')
          )) {
            const customAddEventListener = this.addEventListener;
            this.addEventListener = this.addEventListener._original;
            return customAddEventListener;
          }
        });
        result = originalOn.apply(this, arguments);
        customAddEventListeners.each(function (i) {
          if (this) {
            items[i].addEventListener = this;
          }
        });
        return result;
      };
      $("#textarea_post_wall,.wall_post_share_text_textarea").emojioneArea({
        pickerPosition: "right",
        search: false,
        buttonTitle: ""  
      });`

Is the below code necessary ?:

`[0].emojioneArea.on('ready', function () {
        $.fn.on = originalOn;
      });`

Thanks a lot.

[Jakub Freisler]

In the code I've posted I'm basically overwrite default jQuery .on() method with my own implementation to catch all .emojionearea-picker,.emojionearea-button elements. This part

[0].emojioneArea.on('ready', function () {
    $.fn.on = originalOn;
});

is needed to bring back the default .on() implementation, so yea, I would say you probably want to use this piece of code as well.

[BoumBam]

As you suggest, I think I must use it to avoid potential problem.
You are a javaScript master.

Thanks alot.

[Jakub Freisler]

Thanks, happy to help! 🆘
Sorry that it took so long though, happy coding 🚀