These are chat archives for ractivejs/ractive

4th
Mar 2018
kouts
@kouts
Mar 04 2018 09:16
So everyone knows how to attach an event in Ractive by using the on- directive to a DOM a element in the template.
but is there any way to attach the event programmatically to a DOM element?
something along the lines of this.find('.myelement').attachEvent('click' ...
Paul Maly
@PaulMaly_twitter
Mar 04 2018 09:19
You able to use DOM api: addEventListener
kouts
@kouts
Mar 04 2018 09:19
yes I know but this doesn't attach an Ractive event
for example I have a custom tap event
Paul Maly
@PaulMaly_twitter
Mar 04 2018 10:07
Hm, I know nothing about it. I prefer declarative code instead imperative.
Cerem Cem ASLAN
@ceremcem
Mar 04 2018 13:40
@kouts you mean not to components, but to default tags, like <span on-click="foo" ... , right?
Chris Reeves
@evs-chris
Mar 04 2018 14:00
there not really an API for that, but all the event plugin requires is a note and a fire method, so it's not inconceivable to pull that off manually
kouts
@kouts
Mar 04 2018 14:05
@ceremcem yes I mean to DOM elements .
Chris Reeves
@evs-chris
Mar 04 2018 14:05
node, not note... mobile, sorry
kouts
@kouts
Mar 04 2018 14:06
haha I was going to ask what "note" is :smile:
I have a custom event that is called actionoutside:
Ractive.events.actionoutside = function(node, fire){
    function escHandler(event){
        if(event.keyCode == 27){
            fire({node: node, original: event});
        }
    }
    function clickHandler(event){
        if(!node.contains(event.target)){
            fire({node: node, original: event});
        }
    }
    document.addEventListener('click', clickHandler);
    document.addEventListener('keydown', escHandler);
    return {
        teardown: function(){
            document.removeEventListener('click', clickHandler);
            document.removeEventListener('keydown', escHandler);
        }
    }
}
That I use it to "close" things like dropdowns and stuff
It would be useful if I could attach this event to some elements programmatically instead of putting it inside the template
Chris Reeves
@evs-chris
Mar 04 2018 14:12
no prob: const handle = this.events.actionoutside(this.find('.some-node'), () => do something());
should do it
and don't forget to handle.teardown() when you're done with the event
kouts
@kouts
Mar 04 2018 14:16
ok so handle.teardown() should go in onteardown beacause in this case Ractive does not know to detach the event automatically right?
Chris Reeves
@evs-chris
Mar 04 2018 14:24
probably whenever the event is fired, in this case, because you only need it once, right?
kouts
@kouts
Mar 04 2018 14:39
no this is not needed only once, I'll try to give an examle
this only uses bootstrap css
(not js)
you can close the dropdown by clicking outside or hitting the esc key
so that is what this event does
Chris Reeves
@evs-chris
Mar 04 2018 15:01
gotcha, but you probably don't want that event to fire unless the pop-up is popped, right? Otherwise, you're just listening to events and firing an effectively noop listener, which can negatively impact performance in some situations.
In this case, I'd put the on-otheraction in an {{#if show}} so that the event is only listening when the pop-up is popped
same principal for the manually installed version
whatever requires the cancel notification should also remove the event when the notification is no longer needed
kouts
@kouts
Mar 04 2018 15:10
Ok about the first part like this you mean: {{#if show}}on-actionoutside="@this.set('show', false)"{{/if}}
Chris Reeves
@evs-chris
Mar 04 2018 15:11
yep
kouts
@kouts
Mar 04 2018 15:12
ok got it, so for the second part is there maybe an internal API that I could use to register these events so that I don't have to destroy the events installed manually but to have them destroyed automatically as it happens with events defined inside the template?
Chris Reeves
@evs-chris
Mar 04 2018 15:17
no, but in this case, I think const handle = this.events.actionoutside(this.find('.some-node'), () => { do something(); handle.teardown(); }); would suffice
or if you're subscribing in an observer, add an observeOnce in the observer callback to handle teardown when it flips back
kouts
@kouts
Mar 04 2018 15:19
Ahh I see so in this case the event gets unregistered but it gets registered again when show === true ?
Chris Reeves
@evs-chris
Mar 04 2018 16:02
yep
kouts
@kouts
Mar 04 2018 16:03
thanks @evs-chris your help is invaluable!
Chris Reeves
@evs-chris
Mar 04 2018 16:06
😄
Cerem Cem ASLAN
@ceremcem
Mar 04 2018 17:57
new ractive project: PayBeer (for @evs-chris :D )
Chris Reeves
@evs-chris
Mar 04 2018 19:40
back in the good old days of desktop-style installers for PocketPC software, I published an app that had a license required for the installer
I modified the default slightly to limit the damages clause to the price of a 6-pack of domestic beer
I actually had a few people email me to say they appreciated my EULA
Cerem Cem ASLAN
@ceremcem
Mar 04 2018 19:50
hahaha :D
kouts
@kouts
Mar 04 2018 19:52
I'm for that, being a beer lover my self :smile:
Juan C. Andreu
@andreujuanc
Mar 04 2018 21:10
Saw the issue on phantomjs? phantomjs.teardown()
(ractivish joke)
But issue is real
Chris Reeves
@evs-chris
Mar 04 2018 21:26
huh, apparently phantomjs is officially abandonware
Cerem Cem ASLAN
@ceremcem
Mar 04 2018 21:59
A project with ~25K stars is abandoned? o_O
Cerem Cem ASLAN
@ceremcem
Mar 04 2018 22:26
(oh, you were kidding :D )
Joseph
@fskreuz
Mar 04 2018 23:18
ariya/phantomjs#15344
Luckily, we just moved Ractive off PhantomJS a few weeks ago. :grin: Epic timing.