Search code examples
javascriptdom-eventsractivejs

How to trigger a tap event for element with on-tap='node_action'?


Usually I can use fire to activate handlers, but in this case I need to get full item data with e.context in event handler.


Update 08.05.15

Detailed description
Why I cannot just fire node_action?
I've a list of items and on tap I want to show item related info in the floating block near the item. So I have on-tap='node_action' for each item and I have:

@on 'node_action', (e)->
  item = e.context — then I can use item.id to load data
  item_div = e.node — then I can use item_div.top_y() to show floating menu
                      on the same level on the page with the item div

Why do I need to trigger?
If I want to work on that floating menu I don't want to manually click on item every time after the page refresh, so I usually automate it with triggering events.

Yes, I can do fire here with prepared event like

e =
  context: ractive.get 'items.0'
  node: ractive.find '.items .line:first'
ractive.fire('node_action', e)

But items in the list can be sorted, filtered, and changed.

Ideally it would be nice to have something like this:

ractive.find('.items .line:first').tap()

or

ractive.find('.items .line:first').trigger 'tap' 

or maybe

ractive.find('.items .line:first').fire 'node_action'

Solution

  • Finally found that it is actually possible with the Simulant.js by Rich Harris.
    It doesn't support the tap event, so for my needs I've added a small jQuery plugin

    # Ractive trigger
    # btn.r_trigger 'tap'
    # btn.r_trigger 'click', {button:1, which:2}
    $.fn.r_trigger = (event_name, opt)->
        el = @[0]
        switch event_name
            when 'tap'
                simulant.fire(el, 'mousedown', opt)
                simulant.fire(el, 'click', opt)
            else
                simulant.fire(el, event_name, opt)