HubSpot/drop

On click event?

Opened this issue · 6 comments

phstc commented

Hey,

I would like to ask you if there's a way to trigger an event on drop click, before opening a drop.

I tried this:

@drop._on @drop.target, 'click', -> console.log('click')
@drop.on 'open', -> console.log('open')

But I'm getting open before click in the console. I know what I need might seems wrong, but I need something to trigger based on the user interaction (click on the drop to open it), because I also call open programatically, and based on my current implementation it's hard to differentiate when its being opened because of a user interaction or because I @drop.open programatically.

Is there a way to do that with Drop?

Thanks

phstc commented

The workaround I'm using for now:

# @drop.on 'open', @openHandler
@drop.on 'close', @closeHandler

@drop.target.addEventListener('click', @somethingINeedToDoBeforeOpenHandler)
@drop.target.addEventListener('click', @openHandler)

Are you looking for something like a beforeOpen or showOn type of handler? Basically a handler that is called before the drop is opened to check whether it should open or not? If so, we actually have #120 that I still need to review that should provide that functionality.

phstc commented

hi @geekjuice

Actually I'm looking for something like onClick, because it would guarantee that the drop is going to be opened due on a user interaction. open or beforeOpen does not tell if it's being opened because a user interaction or programatically via @drop.open().

Gotcha. I think the way I thought showOn should work is:

new Drop({
  ...options,
  showOn(e) {
    if (e.type === 'click') {
      console.log('Opened via user click');
    } else {
      console.log('Probably opened programatically');
    }

    return true; // To confirm opening the drop
  }
});

This way, you can determine what type of event opened the drop and even determine if the drop should open or not.

phstc commented

@geekjuice hm makes sense... like changing here to pass the event along.

if (typeof this.options.showOn !== 'undefined' && !this.options.showOn(event)) {
  return;
}

Do you want me to test #120?

Yea, if the event was passed, it should work as I described.

And I always welcome everyone to test open PRs so they can be merged sooner 👍 🍻