Cover element for tracking drag-type interactions without interferance. To ignore full-screen mode, replace `getFullScreenElement()` with `document.body`

getFullscreenElement.js

export default () => {
  return (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  );
};

PointableCover.js

import getFullscreenElement from './getFullscreenElement';

const coverStyle = {
  position: 'fixed',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  zIndex: 10000,
  touchAction: 'none',
};

export default class PointableCover {
  constructor({ down, move, up }) {
    this.onDown = down;
    this.onMove = move;
    this.onUp = up;
    this.attached = false;

    const cover = document.createElement('div');
    Object.assign(cover.style, coverStyle);
    cover.setAttribute('touch-action', 'none');

    this.cover = cover;
  }

  attach() {
    if (!this.attached) {
      const fullscreenElement = getFullscreenElement();
      if (fullscreenElement) {
        this.attachedTo = fullscreenElement;
      } else {
        this.attachedTo = document.body;
      }

      this.attachedTo.appendChild(this.cover);
      this.attachEvents();
      this.attached = true;
    }
  }

  remove() {
    if (this.attached) {
      this.removeEvents();
      this.attachedTo.removeChild(this.cover);
      this.attachedTo = null;
      this.attached = false;
    }
  }

  attachEvents() {
    if (this.onDown) {
      this.cover.addEventListener('pointerdown', this.onDown, false);
    }

    if (this.onMove) {
      this.cover.addEventListener('pointermove', this.onMove, false);
    }

    if (this.onUp) {
      this.cover.addEventListener('pointerup', this.onUp, false);
    }
  }

  removeEvents() {
    if (this.onDown) {
      this.cover.removeEventListener('pointerdown', this.onDown);
    }

    if (this.onMove) {
      this.cover.removeEventListener('pointermove', this.onMove);
    }

    if (this.onUp) {
      this.cover.removeEventListener('pointerup', this.onUp);
    }
  }
}