Phoenix LiveView request/proposal: mouse events

Phoenix Forum Chat / Discussions
, ,
1

Development on Phoenix LiveView is of course in full swing. However, here are a couple of features I currently miss and proposals to add them to Phoenix LiveView.

Mouse Events

Currently, LiveView supports phx-click which triggers whenever there is a JavaScript click event.
In multiple projects I have encountered cases with a large need for other types of interaction. Specifically, custom form elements frequently require things to happen on mousedown, when dragging, or when doubleclicking.

I propose that the following events are added to LiveView (whose behaviour is similar to phx-click in that the same extra information is sent, as well as the phx-value-*s that are set on that particular element):

  • phx-mousedown
  • phx-mousemove
  • phx-mouseup
  • phx-dblclick

Supporting other click-like events

I believe above list covers the most common interactions. Of course, there exist many more mouse-related (as well as more general touch-related) events.
On top of above list of events, I therefore propose that it should be made easier to hook into the existing code that sends a phx-click-like event to the server.

Reason:

If someone were to create custom JavaScript for such an event right now, the would not only be re-inventing the logic that LiveView itself uses. The bigger issue is that their logic will not share the updates/changes to the code LiveView itself has, forever lagging behind with the implementation.
To be more precise, the following is very difficult (already right now) to accurately reproduce in a custom JS hook:

  • The new event should include all phx-value-*s using the same naming conventions/conversions as a normal (built-in) event.
  • The new event should include the same meta information with the request.
  • The new event should adhere to supplied phx-debounce and phx-throttle settings.
  • The new event should trigger on the correctly specified phx-target.
  • This list will grow and change with future features being added to LiveView.

Proposal

Some standardized way to add a new type of click-like event to a Phoenix LiveView instance would be a solution, such as adding a configuration field that accepts a list of event-names or alternatively an object of event name keys with callback function values, where the callback function is able to do things before an event is dispatched and can yield to the event dispatching logic at some point (either by using ES6 features or by e.g. just passing in the function that can do the work as argument to the callback function so it can call it whenever it likes).

9 Likes
2

By the way, this proposal is tangentially related to this issue.

3

@chrismccord, @josevalim, @snewcomer: feedback would be much appreciated! :blush:

4

LV master allows you to define a metadata callback to populate the payload however you’d like. You receive the JS event + DOM target :slight_smile:

5

Thank you! This is indeed great to make phx-click and phx-keydown more versatile.
But does it enable other kinds of mouse events? (In my quick perusal of the Git diff of the Merge Request containing the change you mentioned I was not able to find information about that, but I might have missed something.)

6

Adding new events will always be a compromise, as we want to avoid having an excessive amount of “data attributes”. It is probably best for now to implement those as hooks.

Your argument that using a hook won’t provide all features as Phoenix is true but note you don’t have to support all features, only the ones you need. Also, by using a hook, you can actually stay ahead and do things that LV doesn’t currently. :slight_smile:

7

LiveView is evolving similar to Java Server Faces. Java Server Faces is more component oriented specification of server side rendering of views. Oracle ADF Faces is JSF based framework which had extensive support for building rich client applications.

ADF Faces has 2 types of events server-side and client-side - client side events were meant to be handled on browser side and server side events which will be sent to server for handling on it on server side. Table - 6-1, 6-2, 6-3, 6-4 have different events generated by ADF Faces.

Leaving this here for reference and prior art.

2 Likes
8

Thank you for your response! What you say is true, but it was not enough to remove the gut feeling that something is missing. I took a few days to think about this matter in more depth and to formulate my thoughts. What it boils down to, is this:

It assumes that the person writing the JavaScript for the hook and the person using the hook will be the same. If a hook only partially supports the things that LiveView does, then it is difficult to reuse that hook or publish it in a library.
Essentially, the cognitive overhead for understanding and using something that is only able to partially integrate with LiveView is much higher. I think this is where my gut feeling against ‘ad-hoc hooks’ comes from.

Does that make sense?

1 Like
9

I came here hoping to find phx-mouse-down as click events on mouse up (which appears to be the default) aren’t at all intuitive for my usecase.

I guess I can look into doing this (although I have absolutely no idea at this stage so it’s back to google for me). If I manage to figure it out, I’ll come back and add a little example here so others don’t have to search as much :slight_smile:

2 Likes
10

for mousedown a hook + pushEvent is your best bet

1 Like
11

Yep, that’s precisely what I’m trying my best to figure out how to do. My issue is that I have zero javascript background, so knowing how to work effectively (or pretty much at all) with hooks is currently a huge blindspot for me.

I’m sure I’ll get there eventually


[Update] - I managed it. Thanks everyone for your help and support :slight_smile: Will post here later with a short description of what was necessary.

2 Likes
12

OK, for those looking to work with mouse down events, here’s the things I had to learn/do:

  1. Create the HTML element in the call to render with an id and phx-hook attributes,
  2. Modify my app.js to work with the hook and specifically handle the element’s mouse down event
  3. Add a new event handler in my LiveView component to receive the event.

Let’s look at each in turn


1. Creating the HTML element

Somewhere in your render you need to have a HTML element you’d like to listen to events on. I’m using a button here. Your element needs to have a unique ID (this can be anything but is typically hyphen-separated such as "lovely-button") and also a phx-hook attribute which can also be anything but is typically CamelCase such as YoButton:

<button id="lovely-button" phx-hook="YoButton">yo button!</button>

2. Handling the JS event

Now we have our HTML element, we need to add the appropriate javascript event handler. This will be called when the button is clicked and will then tell the server via the pushEvent function.

First we need to edit our app.js to include a Hooks object which includes an internal YoButton object (this needs to be named similarly to the phx-hook attribute above).

LiveView gives us a mounted callback to use which is called when all the server and client initialisation is completed, so we know things are ready to go.

Inside this callback, we can add our event handler which listens for 'mousedown' events and then uses pushEvent to tell the server:

let Hooks = {}

Hooks.YoButton = {
  mounted(){
    this.el.addEventListener('mousedown', e => {
     this.pushEvent("mouseymouse");
    });
  }
}

We also need to teach our liveSocket about the Hooks:

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: Hooks,
  params: {_csrf_token: csrfToken},
  ....

3. Receiving the event on the server

This is probably the easiest bit. In our LiveView component we just need a new handler function:

def handle_event("mouseymouse", _params, socket) do
   # do something interesting!
  {:noreply, socket}
end

I hope that this helps someone trying to do something similar :slight_smile:

31 Likes
13

came here after reading this post by John Carmack x.com

basically he advocates for mouse down making interfaces a lot snappier. I have tried it and it does really seem to work
 Maybe it’s worth reviving this conversation?

3 Likes
14

Totally agreed. My use-case is music apps and in that context it’s ludicrous for mouse-off being the trigger rather than mouse-on. Imagine a cymbal that make a noise when the drumstick left it or a clarinet that sounded when you stopped blowing :slight_smile:

Of course, with practice you could compensate for the latency just like organ scholars do - but it’s not natural and definitely way less fun.

1 Like