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

A JavaScript implementation of the CosmicLink protocol for Stellar

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

var _regeneratorRuntime = require("@babel/runtime/regenerator");

var _asyncToGenerator = require("@babel/runtime/helpers/asyncToGenerator");

var _classCallCheck = require("@babel/runtime/helpers/classCallCheck");

var _createClass = require("@babel/runtime/helpers/createClass");

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

var _require = require("@cosmic-plus/jsutils/es5/misc"),
    timeout = _require.timeout;
/**
 * Definition
 */


var ClickWall = /*#__PURE__*/function () {
  function ClickWall() {
    var _this = this;

    var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    _classCallCheck(this, ClickWall);

    this.domNode = html.create("div", {
      className: "ClickWall",
      onclick: function onclick() {
        return _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;
  }

  _createClass(ClickWall, [{
    key: "click",
    value: function click() {
      if (this.isEnabled && this.onclick) this.onclick();
    }
  }, {
    key: "enable",
    value: function () {
      var _enable = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                // 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) {
                  _context.next = 5;
                  break;
                }

                _context.next = 5;
                return this.setOpacity(this.opacity);

              case 5:
                this.isEnabled = true;

              case 6:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      function enable() {
        return _enable.apply(this, arguments);
      }

      return enable;
    }()
  }, {
    key: "disable",
    value: function () {
      var _disable = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                // 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) {
                  _context2.next = 5;
                  break;
                }

                _context2.next = 5;
                return this.setOpacity(0);

              case 5:
                html.hide(this.domNode);

              case 6:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2, this);
      }));

      function disable() {
        return _disable.apply(this, arguments);
      }

      return disable;
    }()
  }, {
    key: "destroy",
    value: function () {
      var _destroy = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                _context3.next = 2;
                return this.disable();

              case 2:
                html.destroy(this.domNode);

              case 3:
              case "end":
                return _context3.stop();
            }
          }
        }, _callee3, this);
      }));

      function destroy() {
        return _destroy.apply(this, arguments);
      }

      return destroy;
    }()
  }, {
    key: "setOpacity",
    value: function () {
      var _setOpacity = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
        var opacity,
            _args4 = arguments;
        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
          while (1) {
            switch (_context4.prev = _context4.next) {
              case 0:
                opacity = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : this.opacity;
                _context4.next = 3;
                return timeout(0);

              case 3:
                Object.assign(this.domNode.style, {
                  transition: "opacity ".concat(this.delay, "ms"),
                  opacity: opacity
                });
                return _context4.abrupt("return", timeout(this.delay));

              case 5:
              case "end":
                return _context4.stop();
            }
          }
        }, _callee4, this);
      }));

      function setOpacity() {
        return _setOpacity.apply(this, arguments);
      }

      return setOpacity;
    }()
  }]);

  return ClickWall;
}();
/**
 * 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;