EventManager / createDoubleTapDetector

Um registro de eventos preso ao ciclo de vida e apoiado no AbortController, mais um pequeno detector de toque duplo, indiferente ao tipo de ponteiro, para gestos de toque.

O problema que ele resolve é tirar os ouvintes de volta. O removeEventListener só funciona se você entregar a ele exatamente a mesma referência de função e as mesmas opções com que registrou. Embrulhe o manipulador numa arrow function na hora de passar e nunca mais conseguirá removê-lo. Componentes que montam e desmontam repetidas vezes passam então a vazar um ouvinte por ciclo. O AbortController transforma tudo isso num único abort().

Uso

Dentro de um Web Component

import { EventManager } from 'ranuts/utils';

class MyElement extends HTMLElement {
  private _events = new EventManager();

  connectedCallback() {
    this._events.on(this._input, 'input', this.handleInput).on(this, 'click', this.handleClick, { capture: true });
  }

  disconnectedCallback() {
    this._events.abort(); // tira todos os ouvintes e deixa tudo limpo para a próxima conexão
  }
}

No código comum de uma página

function initSection(container: HTMLElement) {
  const scope = new EventManager();

  scope.on(input, 'input', handleSearch).delegate(container, '[data-action]', 'click', (ev, target) => {
    handleAction(target.getAttribute('data-action'));
  });

  return () => scope.abort(); // chame quando a seção for desmontada
}

API

on

Registra um ouvinte preso a este gerenciador. Dá para encadear.

Parâmetros

Retorna

delegate

Delegação de eventos: põe um só ouvinte no parent e chama o handler apenas quando o evento nasceu de um descendente que casa com selector. Dá para encadear.

O manipulador recebe o evento original e o elemento que casou.

scope.delegate(list, '.item', 'click', (ev, item) => {
  console.log(item.getAttribute('data-id'));
});

Parâmetros

Retorna

abort

Tira todos os ouvintes registrados e renova o AbortController interno. Dá para chamar mais de uma vez sem problema; as chamadas seguintes a on() ou delegate() partem de um escopo limpo.

Retorna

Sem valor de retorno (void)

signal

O AbortSignal de baixo, caso você queira passá-lo você mesmo ao addEventListener.

createDoubleTapDetector

Detecção de toque duplo a partir de amostras cruas de (x, y, tempo). É indiferente ao tipo de ponteiro, então funciona igual sendo alimentada por eventos Pointer, Touch ou Mouse. Foi feita para gestos de toque (toque duplo para avançar, para dar zoom, para curtir), onde refazer em cada lugar a lógica do limiar de tempo e distância é fácil de errar de um jeito sutil: comparar só um eixo, ou esquecer de reiniciar depois de um acerto e fazer três toques rápidos contarem como dois toques duplos sobrepostos.

import { createDoubleTapDetector } from 'ranuts/utils';

const detector = createDoubleTapDetector();
el.addEventListener('pointerup', (e) => {
  if (detector.check(e.clientX, e.clientY)) seek();
});

createDoubleTapDetector(options?)

Parâmetros (DoubleTapDetectorOptions)

DoubleTapDetector