cosmic-lib/es5/helpers/side-frame.js

A JavaScript implementation of the CosmicLink protocol for Stellar

"use strict";
/**
 * Signing Side Frame
 *
 * @private
 */

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

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

var _assertThisInitialized = require("@babel/runtime/helpers/assertThisInitialized");

var _inherits = require("@babel/runtime/helpers/inherits");

var _possibleConstructorReturn = require("@babel/runtime/helpers/possibleConstructorReturn");

var _getPrototypeOf = require("@babel/runtime/helpers/getPrototypeOf");

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

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

var Observable = require("@cosmic-plus/jsutils/es5/observable");

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

var ClickWall = require("./click-wall");

var cosmicLinkIcon = require("../../bundled/cosmic-link.svg");
/**
 * Class
 */


var SideFrame = /*#__PURE__*/function (_Observable) {
  _inherits(SideFrame, _Observable);

  var _super = _createSuper(SideFrame);

  function SideFrame(url) {
    var _this;

    _classCallCheck(this, SideFrame);

    _this = _super.call(this);
    if (SideFrame.current) SideFrame.current.close();
    SideFrame.current = _assertThisInitialized(_this);
    _this.shadow = makeShadow();
    _this.closeButton = new SideFrame.CloseButton();
    _this.domNode = html.create("iframe", {
      title: "Signing Frame",
      src: url,
      sandbox: "allow-same-origin allow-scripts allow-forms allow-popups",
      hidden: true
    });
    Object.assign(_this.domNode.style, SideFrame.style);
    _this.domNode.style.transform = "translateX(100%)";
    html.append(document.body, _this.closeButton, _this.domNode);
    _this.closeButton.domNode.style.zIndex = +_this.getRealZIndex() + 1;

    _this.show();

    return _this;
  }

  _createClass(SideFrame, [{
    key: "show",
    value: function show() {
      var _this2 = this;

      if (!this.domNode.hidden) return;
      html.show(this.domNode); // That timeout is required for transition to play well.

      this.setTransition(250, "cubic-bezier(0, 0, 0.2, 1)");
      timeout(5).then(function () {
        return _this2.domNode.style.transform = "none";
      });
      return this.shadow.enable().then(function () {
        _this2.shadow.onclick = function () {
          return _this2.close();
        };

        html.show(_this2.closeButton.domNode);

        _this2.closeButton.domNode.onclick = function () {
          return _this2.close();
        };

        _this2.trigger("show");
      });
    }
  }, {
    key: "hide",
    value: function hide() {
      var _this3 = this;

      if (this.domNode.hidden) return;
      html.hide(this.closeButton.domNode);
      this.setTransition(200, "cubic-bezier(0.4, 0, 1, 1)");
      this.domNode.style.transform = "translateX(100%)";
      return this.shadow.disable().then(function () {
        html.hide(_this3.domNode);

        _this3.trigger("hide");
      });
    }
  }, {
    key: "setTransition",
    value: function setTransition(delay, ease) {
      var transition = "transform ".concat(delay, "ms ").concat(ease);
      this.domNode.style.transition = transition;
      this.shadow.domNode.style.transition = transition;
      this.shadow.delay = delay;
    }
  }, {
    key: "close",
    value: function close() {
      var _this4 = this;

      SideFrame.current = null;
      this.hide().then(function () {
        html.destroy(_this4.domNode);
        html.destroy(_this4.closeButton.domNode);

        _this4.shadow.destroy();

        _this4.trigger("close");

        _this4.destroy();
      });
    }
  }, {
    key: "getRealZIndex",
    value: function getRealZIndex() {
      return document.defaultView.getComputedStyle(this.domNode).getPropertyValue("z-index");
    }
  }]);

  return SideFrame;
}(Observable);
/**
 * Event
 */


window.addEventListener("message", function (event) {
  var frameWindow = SideFrame.current && SideFrame.current.domNode.contentWindow;

  if (event.source === frameWindow) {
    switch (event.data) {
      case "show":
        SideFrame.current.show();
        break;

      case "hide":
        SideFrame.current.hide();
        break;

      case "close":
        SideFrame.current.close();
        break;
    }
  }
});
/**
 * Frame style
 */

SideFrame.style = {
  boxSizing: "border-box",
  position: "fixed",
  zIndex: 1000,
  right: 0,
  top: 0,
  width: "30em",
  minWidth: "38%",
  maxWidth: "100%",
  height: "100vh",
  border: 0,
  borderTop: "2em solid hsl(240, 40%, 98%)",
  boxShadow: "0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12)",
  background: "hsl(240, 40%, 98%)",
  backgroundImage: "url('".concat(cosmicLinkIcon, "')"),
  backgroundRepeat: "no-repeat",
  backgroundPosition: "center",
  backgroundSize: "12em 12em",
  willChange: "transform"
};
/**
 * Closing button
 */

SideFrame.CloseButton = function CloseButton() {
  _classCallCheck(this, CloseButton);

  this.domNode = html.create("span", {
    hidden: true
  }, "× Close");
  Object.assign(this.domNode.style, SideFrame.CloseButton.style);
};

SideFrame.CloseButton.style = {
  position: "fixed",
  top: "0.1em",
  right: "0.1em",
  width: "29.8em",
  minWidth: "38%",
  maxWidth: "100%",
  lineHeight: "1.8em",
  color: "hsl(0, 0%, 40%)",
  fontWeight: "bold",
  cursor: "pointer",
  textAlign: "center"
};
/**
 * Shadow Layer
 */

function makeShadow() {
  return new ClickWall({
    scrollbar: "hide",
    opacity: 0.3,
    delay: 400
  });
}
/**
 * Export
 */


module.exports = SideFrame;