multiple event handler

[jgirardet]

Hi,
I was trying to deal with 2 events handlers
I found end (in tests) which is undocumented.
<div _"on mouseenter toggle .active end on mouseleave toggle .active">...</div>

But something like on {mousenter, mouseleave} toggle .active would be very cool and readable

thanks for _hyperscript
Jimmy

[dz4k]

In https://hyperscript.org/features/on/:

Events can be repeated separated by an or to assign one handler to multiple events:

<div _="on click or touchbegin fetch /example then put it into my.innerHTML">
  Fetch it...
</div>

Later on the same page:

The end is optional if you are chaining on features together

[jgirardet]

oh I'm sorry. I read the full page tree times also...
Maybe we could add aggregate event like mutation event or intersection event to emphis it.
I'll push it if you're ok

[rtgoodwin]

As a newb I also wasn't clear on this. like if i wanted to do actions ABC on event1 but options XYZ on event2. I was thinking you'd do two _= (and maybe you can?) but the end is perhaps better in simpler situations.

Seems to be easy and supported so maybe an example in docs would help. :)

[dz4k]

A lot of people seem to try adding multiple _ attributes... I'd like to make that work, but it's not possible to have multiple of the same attribute in HTML :/

I'll add examples of both of these things in the docs, close to the start. Hopefully that will be enough to make it clearer.

@rtgoodwin, you don't need end. You can just put another on after the end of the first handler.

on event1
  ABC
on event2 or event3
  XYZ

[rtgoodwin]

Gosh that's easy...as intended no doubt :)

[rtgoodwin]

Welp, maybe not as easy as I thought?

Expected 'end' but found 'on'

           on mouseout
            ^^

 Error: Expected 'end' but found 'on'

           on mouseout
            ^^

with code on div (diff than the target):

 <div _="on mouseover
            tell #catFilterSelect remove .hidden then tell #catFilterSelect transition opacity to 1
           on mouseout
            hide #catFilterSelect"
            class="relative col-span-1 inline-block text-left">

Tried on the same line, different lines, spaces, having an end after 1. I think I must be borking the commands up front. Previously I had on mouseover show #catFilterSelect .. but kept getting similar errors. Maybe a syntactic goof?

[dz4k]

@rtgoodwin, it's the tell that expects an end. You've got two nested tell blocks there which is probably not what you wanted.

The reason this worked before is that hyperscript will automatically insert any missing end at the end of the program.

This should work:

 <div _="on mouseover
            tell #catFilterSelect
              remove .hidden
              transition opacity to 1
           end
           on mouseout
            hide #catFilterSelect"
            class="relative col-span-1 inline-block text-left">

[1cg]

Also, you don't need to use a tell command here, both remove and transition allow for specifying targets:

 <div _="on mouseover
             remove .hidden from #catFilterSelect 
            transition #catFilterSelect's opacity to 1
           on mouseout
            hide #catFilterSelect"
            class="relative col-span-1 inline-block text-left">

If you did want to use tell, you'd probably only use one:

 <div _="on mouseover
               tell #catFilterSelect
                  remove .hidden  
                  transition opacity to 1
               end
           on mouseout
            hide #catFilterSelect"
            class="relative col-span-1 inline-block text-left">

The tell command should respect new feature boundaries though...

[jreviews]

Unrelated, but does have read better to you as an alternative to tell?

on mouseover
    have #catFilterSelect
      remove .hidden  
      transition opacity to 1
    end

[1cg]

tell is the concept from HyperTalk, and we try to follow hypertalk when possible.

[1cg]

made the tell command respect feature boundaries:

cbd8c51

[rtgoodwin]

Thanks a ton! I had to work on something else for a couple of days but will be diving back in :) Appreciate the examples and commit!

(Also, after a couple of nights sleep and your explanation, when I read it back it's super obvious how it's nested. (facepalm) That should be my troubleshooting step #1: indent and read it out loud...)