feeles-ide/lib/Cards/MonitorCard/Screen.js

The hackable and serializable IDE to make learning material

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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

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

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

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

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _setSrcDoc = require("./setSrcDoc");

var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));

var Padding = 1;
var ScaleChangeMin = 0.02;

var Screen =
/*#__PURE__*/
function (_PureComponent) {
  (0, _inherits2.default)(Screen, _PureComponent);

  function Screen() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, Screen);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(Screen)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
      loading: false
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "_scale", 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleUpdate", function () {
      var _this$props = _this.props,
          width = _this$props.width,
          height = _this$props.height;

      if (_this.iframe && _this.iframe.parentNode && _this.iframe.parentNode.parentNode) {
        var rect = _this.iframe.parentNode.getBoundingClientRect();

        var containerWidth = Math.max(0, rect.width - Padding);
        var containerHeight = Math.max(0, rect.height - Padding);
        var scale = containerHeight / containerWidth > height / width ? containerWidth / width : containerHeight / height;

        if (Math.abs(_this._scale - scale) >= ScaleChangeMin) {
          _this.iframe.style.transform = "scale(".concat(scale, ")");
          _this._scale = scale;
        }
      }

      if (_this.iframe) {
        requestAnimationFrame(_this.handleUpdate);
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleFrame", function (ref) {
      _this.iframe = ref;

      _this.props.frameRef(ref);

      _this._scale = 0;

      if (_this.iframe) {
        requestAnimationFrame(_this.handleUpdate);
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleClickReload", function (event) {
      _this.props.setLocation();

      event.stopPropagation();
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleClickExit", function (event) {
      _this.props.toggleFullScreen();

      event.stopPropagation();
    });
    return _this;
  }

  (0, _createClass2.default)(Screen, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var _this2 = this;

      if (prevProps.reboot !== this.props.reboot) {
        if (!this.props.reboot) {
          this.setState({
            loading: true
          }, function () {
            setTimeout(function () {
              _this2.setState({
                loading: false
              });
            }, 250);
          });
        }
      }

      if (this.iframe) {
        this.iframe.width = "".concat(this.props.width, "px");
        this.iframe.height = "".concat(this.props.height, "px");
      }
    }
  }, {
    key: "render",
    value: function render() {
      var display = this.props.display;
      var loading = this.state.loading;
      var sandbox = _setSrcDoc.SrcDocEnabled ? 'allow-scripts allow-modals allow-popups' : 'allow-scripts allow-modals allow-popups allow-same-origin'; // Screen は Popout されることもあるので, CSS の class は使えない

      var styles = {
        root: {
          position: 'absolute',
          width: '100%',
          height: '100%',
          left: 0,
          top: 0,
          background: 'linear-gradient(rgba(0,0,0,0.8), rgba(128,128,128,0.8))',
          boxSizing: 'border-box',
          overflow: 'hidden',
          zIndex: 10,
          display: display ? 'flex' : 'none',
          flexDirection: 'column',
          alignItems: 'stretch'
        },
        parent: {
          flex: 1,
          width: '100%',
          height: '100%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center'
        },
        frame: {
          border: '0 none',
          flex: '0 0 auto',
          opacity: loading ? 0 : 1,
          transition: loading ? 'none' : 'opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms'
        },
        button: {
          cursor: 'pointer',
          height: '10vh'
        }
      };
      return _react.default.createElement("div", {
        style: styles.root
      }, _react.default.createElement(_ErrorMessage.default, {
        error: this.props.error
      }), _react.default.createElement("div", {
        style: styles.parent
      }, this.props.reboot ? null : _react.default.createElement("iframe", {
        sandbox: sandbox,
        style: styles.frame,
        ref: this.handleFrame,
        width: this.props.width,
        height: this.props.height
      })), _react.default.createElement("div", {
        style: {
          flex: 0
        }
      }, this.props.setLocation ? _react.default.createElement("svg", {
        fill: "white",
        style: styles.button,
        viewBox: "0 0 24 24",
        onClick: this.handleClickReload
      }, _react.default.createElement("path", {
        d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
      })) : null, this.props.toggleFullScreen ? _react.default.createElement("svg", {
        fill: "white",
        style: styles.button,
        viewBox: "0 0 24 24",
        onClick: this.handleClickExit
      }, _react.default.createElement("path", {
        d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"
      })) : null));
    }
  }]);
  return Screen;
}(_react.PureComponent);

exports.default = Screen;
(0, _defineProperty2.default)(Screen, "propTypes", {
  reboot: _propTypes.default.bool.isRequired,
  animation: _propTypes.default.bool.isRequired,
  display: _propTypes.default.bool.isRequired,
  frameRef: _propTypes.default.func.isRequired,
  setLocation: _propTypes.default.func,
  toggleFullScreen: _propTypes.default.func,
  error: _propTypes.default.object,
  width: _propTypes.default.number.isRequired,
  height: _propTypes.default.number.isRequired,
  isFullScreen: _propTypes.default.bool.isRequired
});
(0, _defineProperty2.default)(Screen, "defaultProps", {
  animation: false,
  display: false,
  error: null,
  isFullScreen: false
});