[Browser Utilities] Random utility functions that are useful when working in the browser #browser

measurement.ts

/**
 * Gets the height and width of the provided HTML element
 * @param element The html element to measure
 */
export function getSize(element?: HTMLElement) {
  if (!element) return { height: 0, width: 0 }

  return {
    height: element.offsetHeight,
    width: element.offsetWidth,
  }
}

SharedEventListener.ts

type EventHandler<E extends keyof DocumentEventMap> = (event: DocumentEventMap[E]) => void

export class SharedEventListener<E extends keyof DocumentEventMap> {
  private subscribers: EventHandler<E>[]
  public readonly target: HTMLElement
  public readonly event: E

  constructor(event: E, target = document.documentElement) {
    this.event = event
    this.target = target
    this.subscribers = []
  }

  private attach = () => {
    this.target.addEventListener(this.event, this.handleEvent)
  }

  private detach = () => {
    this.target.removeEventListener(this.event, this.handleEvent)
  }

  private handleEvent = (event: DocumentEventMap[E]) => {
    this.subscribers.forEach(listener => listener(event))
  }

  public subscribe = (handler: EventHandler<E>) => {
    if (this.subscribers.length === 0) {
      this.attach()
    }

    this.subscribers.push(handler)

    return () => this.unsubscribe(handler)
  }

  public unsubscribe = (handler: EventHandler<E>) => {
    this.subscribers = this.subscribers.filter(listener => listener !== handler)

    if (this.subscribers.length === 0) {
      this.detach()
    }
  }
}