malice

import { readable, type Readable } from 'svelte/store';

export const LONG_PRESS_MS = 450;

export const LONG_PRESS_SLOP = 8;

export interface PressEvent {

  clientX: number;

  clientY: number;

  currentTarget: EventTarget | null;

}

export interface Timers {

  set(fn: () => void, ms: number): unknown;

  clear(handle: unknown): void;

}

const realTimers: Timers = {

  set: (fn, ms) => setTimeout(fn, ms),

  clear: (handle) => clearTimeout(handle as ReturnType<typeof setTimeout>)

};

export class PressTracker {

  fired = false;

  private handle: unknown = null;

  private x = 0;

  private y = 0;

  constructor(

    private readonly onFire: (x: number, y: number) => void,

    private readonly timers: Timers = realTimers,

    private readonly delay = LONG_PRESS_MS,

    private readonly slop = LONG_PRESS_SLOP

  ) {}

  get pending(): boolean {

    return this.handle !== null;

  }

  start(x: number, y: number): void {

    this.cancel();

    this.fired = false;

    this.x = x;

    this.y = y;

    this.handle = this.timers.set(() => {

      this.handle = null;

      this.fired = true;

      this.onFire(this.x, this.y);

    }, this.delay);

  }

  move(x: number, y: number): void {

    if (this.handle === null) return;

    if (Math.hypot(x - this.x, y - this.y) > this.slop) this.cancel();

  }

  flush(): void {

    if (this.handle === null) return;

    this.cancel();

    this.fired = true;

    this.onFire(this.x, this.y);

  }

  cancel(): void {

    if (this.handle === null) return;

    this.timers.clear(this.handle);

    this.handle = null;

  }

}

type Handler = ((ev: PressEvent) => void) | null | undefined;

interface Options {

  on: Handler;

  allowSelection?: boolean;

  ignore?: string;

}

type Param = Handler | Options;

function split(param: Param): Options {

  return typeof param === 'function' || !param ? { on: param } : param;

}

export function longpress(node: HTMLElement, param: Param) {

  let opts = split(param);

  let current = opts.on;

  let pointerId = -1;

  const tracker = new PressTracker((x, y) => {

    navigator.vibrate?.(10);

    current?.({ clientX: x, clientY: y, currentTarget: node });

  });

  const apply = () => {

    node.style.setProperty('-webkit-touch-callout', 'none');

    if (!opts.allowSelection) node.style.setProperty('user-select', 'none');

  };

  apply();

  function down(e: PointerEvent) {

    if (!current || e.pointerType === 'mouse' || !e.isPrimary) return;

    if (opts.ignore && (e.target as Element).closest(opts.ignore)) return;

    pointerId = e.pointerId;

    tracker.start(e.clientX, e.clientY);

  }

  function move(e: PointerEvent) {

    if (e.pointerId === pointerId) tracker.move(e.clientX, e.clientY);

  }

  function end(e: PointerEvent) {

    if (e.pointerId !== pointerId) return;

    tracker.cancel();

    if (tracker.fired) setTimeout(() => (tracker.fired = false), 400);

  }

  function click(e: MouseEvent) {

    if (!tracker.fired) return;

    tracker.fired = false;

    e.preventDefault();

    e.stopImmediatePropagation();

  }

  function contextmenu(e: Event) {

    if (!tracker.fired && !tracker.pending) return;

    e.preventDefault();

    e.stopImmediatePropagation();

    tracker.flush();

  }

  const cancel = () => tracker.cancel();

  node.addEventListener('pointerdown', down);

  node.addEventListener('pointermove', move);

  node.addEventListener('pointerup', end);

  node.addEventListener('pointercancel', end);

  node.addEventListener('click', click, true);

  node.addEventListener('contextmenu', contextmenu, true);

  window.addEventListener('scroll', cancel, true);

  return {

    update(next: Param) {

      opts = split(next);

      current = opts.on;

      apply();

    },

    destroy() {

      tracker.cancel();

      node.removeEventListener('pointerdown', down);

      node.removeEventListener('pointermove', move);

      node.removeEventListener('pointerup', end);

      node.removeEventListener('pointercancel', end);

      node.removeEventListener('click', click, true);

      node.removeEventListener('contextmenu', contextmenu, true);

      window.removeEventListener('scroll', cancel, true);

    }

  };

}

export const finePointer: Readable<boolean> = readable(true, (set) => {

  if (typeof window === 'undefined') return;

  const query = window.matchMedia('(pointer: fine)');

  set(query.matches);

  const update = () => set(query.matches);

  query.addEventListener('change', update);

  return () => query.removeEventListener('change', update);

});