Skip to content

Instantly share code, notes, and snippets.

@SomeHats

SomeHats/PointableCover.js

Last active January 11, 2018 13:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SomeHats/67f3d77fe4489fd9fac399c010fa50d5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SomeHats/67f3d77fe4489fd9fac399c010fa50d5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Alex revised this gist Jan 11, 2018. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions PointableCover.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    import getFullscreenElement from './getFullscreenElement';

    const coverStyle = {
    position: 'fixed',
    top: 0,
  2. Alex revised this gist Jan 11, 2018. 1 changed file with 8 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions getFullscreenElement.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    export default () => {
    return (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
    );
    };
  3. Alex created this gist Jan 11, 2018.
    76 changes: 76 additions & 0 deletions PointableCover.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,76 @@
    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);
    }
    }
    }