dynamically add event

[Timonney]

Hi,

I did a custom drag that allow the user to scroll a list by dragging it.
To do so I need to register some event when the user click on the component

  private onContainerPointerDown(event: PointerEvent) {
    document.addEventListener('pointermove', this._pointerMoveEvent);
    document.addEventListener('pointerup', this._pointerUpEvent);
  }

The problem is that those event are not linked to Alpine so it doesn't work with reactivity

I really want to avoid having pointermove constantly registered and having to check with a condition like

  _handlePointerMove(event: PointerEvent) {
    if(!isDragging) return;
    // Rest of code
  }

I tried to have a dynamically bind event like this

  <div x-bind="horizontalScrollable.dynamicEvent">...</div>

  public get dynamicEvent() {
    if(this.isDragging)
      return { "x-on:pointermove.window": "horizontalScrollable.test()" };

    return {}
  }

But the dynamicEvent only get call at load and doesn't react when isDragging change

For now I use the document.addEventListener(...) and then i get the alpine proxy with Alpine.mergeProxies(Alpine.closestDataStack(node)) but I would like to know if someone as a best solution for this kind of issue

[ekwoka]

You should be able to just do this._pointerMoveEvent.bind(this) so that the function can access the component state with this

but yeah, there isn't a way to conditionally bind events. You might also want to consider having the pointerup event have { once: true } on it just so you don't have to actively remove it either. Just let it remove itself.

Also, be aware that if you're using pointerdown over mousedown to allow touch events, you will need to call element.releasePointerCapture() otherwise, the browser will take the touches for scrolling/panning/zooming (maybe after a delay like most things do to show the person "grabbed" the thing they are touching.

[Timonney]

Instead of using this._pointerMoveEvent.bind(this), I initialize this._pointerMoveEvent = (event) => this._handlePointerMove(event as PointerEvent);.
The issue with bind is that it create a new instance of the function and I need to have a reference to be able to unregister when I stop dragging. The 'this' in my handler is already linked to my object but not the Alpine proxy of my object.

But if you say there is no way to conditionnaly bind events, I will stay with the Alpine.mergeProxies(Alpine.closestDataStack(node)) to access the proxy from my handler

Thank you the { once: true} I didn't think of it.
And I'm already using the releasePointerCapture()

[ekwoka]

Just bind this before you add or remove it...

this._pointerMoveEvent = this._handlePointerMove.bind(this)

That's quite simple.

[ekwoka]

but that arrow one should also use the reactive this since it should be running in a context that has the reactive this as this

[Timonney]

Oh yes I found my error, I initialize the handler in the constructor instead of in an init called from Alpine...
Thank you for your help

[ekwoka]