cosmic-lib/es5/helpers/click-wall.js

A JavaScript implementation of the CosmicLink protocol for Stellar

"use strict";
/**
 * Overlay that prevent user interaction
 *
 * @private
 */

const html = require("@cosmic-plus/domutils/es5/html");

const {
  timeout
} = require("@cosmic-plus/jsutils/es5/misc");
/**
 * Definition
 */


class ClickWall {
  constructor(params = {}) {
    this.domNode = html.create("div", {
      className: "ClickWall",
      onclick: () => this.click(),
      hidden: true
    });
    Object.assign(this.domNode.style, ClickWall.style);
    html.append(document.body, this.domNode);
    this.onclick = params.onclick;
    this.scrollbar = params.scrollbar;
    this.opacity = params.opacity;
    this.delay = params.delay || ClickWall.delay;
  }

  click() {
    if (this.isEnabled && this.onclick) this.onclick();
  }

  async enable() {
    // Scrollbar hidding.
    if (this.scrollbar === "hide") {
      this.htmlOverflow = document.documentElement.style.overflow;
      this.bodyOverflow = document.body.style.overflow;
      document.documentElement.style.overflow = "hidden";
      document.body.style.overflow = "hidden";
    } // Fade in.


    html.show(this.domNode);
    if (this.opacity) await this.setOpacity(this.opacity);
    this.isEnabled = true;
  }

  async disable() {
    // Handle scrollbar hidding.
    if (this.scrollbar === "hide") {
      document.documentElement.style.overflow = this.htmlOverflow;
      document.body.style.overflow = this.bodyOverflow;
    } // Fade out.


    this.isEnabled = false;
    if (this.opacity) await this.setOpacity(0);
    html.hide(this.domNode);
  }

  async destroy() {
    await this.disable();
    html.destroy(this.domNode);
  }

  async setOpacity(opacity = this.opacity) {
    await timeout(0);
    Object.assign(this.domNode.style, {
      transition: "opacity ".concat(this.delay, "ms"),
      opacity
    });
    return timeout(this.delay);
  }

}
/**
 * Configuration
 */


ClickWall.delay = 500;
ClickWall.style = {
  position: "fixed",
  zIndex: 999,
  top: 0,
  left: 0,
  width: "100%",
  height: "100%",
  background: "#000",
  opacity: 0,
  willChange: "opacity"
};
/**
 * Export
 */

module.exports = ClickWall;