[Live Components] Use JS events as Live Listeners

[sblondeau]

When I use Live component, I have few limitations with certain JS event

• Manage keyboard events
• Manage scroll events
• Manage draggable events, etc.

to deals with it, we need
1/ to create a stimulus controller
2/ it is not possible to add 2 or more data-action / data-live-action-param

e.g,

• I want to manage keyboard events, I would like to deal with keydown.left and keydown.right => seems not possible
• I want to manage scroll event, I would like to trigger on action when I scroll up, and another when I scroll down, etc.
  Furthermore, I have no info related to the event. For key event, I would like to get the pressed key, for scroll event, the y position in the page, etc.

My solution would be to send the JS event data in a LiveListener, I made few test and I seems to work well.

In the live_controller.js, when the action() function is triggered, I get the JS event and its properties, and I emit a liveListener with name "DOM:"

action(event) {

const eventDetails = {
    target: event.target,
    key: event.key,
    charCode: event.charCode,
    keyCode: event.keyCode,
   ...
    scrollY: window.scrollY,
};

this.component.emit('DOM:'+event.type, {event: eventDetails}, null)

In the PHP live component, I can do

#[LiveListener('DOM:keydown')]
public function keyboard(#[LiveArg] $event)
{
    if($event['key'] === 'ArrowLeft') {
        $this->moveLeft();
    } elseif($event['key'] === 'ArrowRight') {
        $this->moveRight();
    }
}  

or
#[LiveListener('DOM:scroll')]
public function domEventCl(#[LiveArg] $event)
{
$this->y = $event['scrollY'] ?? 0;
if($this->y > 200) {
$this->showBottom();
}
}

With this solution, I can

• catch multiple actions
• get additional data about event and deal with these data in PHP

It's really a POC, but it works. What do you think about this ? @Kocal @smnandre ?

[smnandre]

Hey! I'm having a tiny doubt... is that not possible already in stimulus directly with some data-action="window@keydown->live#action or via event modifiers ? data-action="keydown.ArrowLeft->live#action" ?

[sblondeau]

Hi.
Yesn you can do data-action="keydown.left@document->live#action" (need the @document)
But you cannot have 2 data-action. So how do you "listen" 2 or more differents keys (e.g. right and left) ?
Furthermore, if you get JS event properties, you can deal with the key properties in PHP (or for scroll event the position, etc.) and have something like

match ($event['key']) {
    'arrowLeft' => doSomethingLeft(),
    'arrowRight' => doSomethingRight(),
    ...
}