feeles-ide
Version:
The hackable and serializable IDE to make learning material
1,144 lines (970 loc) • 39 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
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 _styles = require("@material-ui/core/styles");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _typestyle = require("typestyle");
var _ReactPopout = _interopRequireDefault(require("../../jsx/ReactPopout"));
var _File = require("../../File/");
var _composeEnv = _interopRequireDefault(require("../../File/composeEnv"));
var _Screen = _interopRequireDefault(require("./Screen"));
var _setSrcDoc = _interopRequireDefault(require("./setSrcDoc"));
var _registerHTML = _interopRequireDefault(require("./registerHTML"));
var _uniqueId = _interopRequireDefault(require("../../utils/uniqueId"));
var _database = require("../../database/");
var _fetchPonyfill = _interopRequireDefault(require("fetch-ponyfill"));
var _dec, _class, _class2, _temp;
var fetch = window.fetch || // for IE11
(0, _fetchPonyfill.default)({
// TODO: use babel-runtime to rewrite this into require("babel-runtime/core-js/promise")
Promise: Promise
}).fetch;
var ConnectionTimeout = 1000;
var popoutTemplate = "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\">\n <style media=\"screen\">\n body {\n margin: 0;\n }\n #popout-content-container {\n width: 100vw;\n height: 100vh;\n display: flex;\n }\n </style>\n </head>\n <body>\n </body>\n</html>\n";
var popoutURL = URL.createObjectURL(new Blob([popoutTemplate], {
type: 'text/html'
}));
var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
var webkitSpeechGrammarList = window.webkitSpeechGrammarList;
var getCn = function getCn(props) {
return {
root: (0, _typestyle.style)({
width: '100%',
height: '100%',
left: 0,
top: 0,
boxSizing: 'border-box',
opacity: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
overflow: 'hidden',
zIndex: 300,
position: props.isFullScreen ? 'fixed' : 'relative',
transition: props.theme.transitions.create()
})
};
};
var Monitor = (_dec = (0, _styles.withTheme)(), _dec(_class = (_temp = _class2 =
/*#__PURE__*/
function (_PureComponent) {
(0, _inherits2.default)(Monitor, _PureComponent);
function Monitor() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, Monitor);
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)(Monitor)).call.apply(_getPrototypeOf2, [this].concat(_args)));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
error: null,
port: null
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "popoutOptions", {
width: 300,
height: 150,
// means innerHeight of browser expecting Safari.
left: 50,
top: 50
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "popoutClosed", false);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "prevent", Promise.resolve());
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handlePostMessage", function (value) {
// emitAsync('postMessage', value)
var port = _this.state.port;
if (!port) return; // reply を receive するための id
value = (0, _objectSpread2.default)({
id: (0, _uniqueId.default)()
}, value);
return new Promise(function (resolve) {
// catch reply message (once)
var task = function task(event) {
if (!event.data || event.data.id !== value.id) return;
if (port) port.removeEventListener('message', task);
resolve(event.data);
};
port.addEventListener('message', task); // post message to frame
port.postMessage(value);
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleFetch",
/*#__PURE__*/
function () {
var _ref2 = (0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee(_ref) {
var data, reply, file, response, blob;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
data = _ref.data, reply = _ref.reply;
file = _this.props.findFile(data.value);
if (!file) {
_context.next = 6;
break;
}
reply({
value: file.blob
});
_context.next = 23;
break;
case 6:
if (!(data.value.indexOf('http') === 0)) {
_context.next = 22;
break;
}
_context.prev = 7;
_context.next = 10;
return fetch(data.value);
case 10:
response = _context.sent;
_context.next = 13;
return response.blob();
case 13:
blob = _context.sent;
reply({
value: blob
});
_context.next = 20;
break;
case 17:
_context.prev = 17;
_context.t0 = _context["catch"](7);
reply({
error: _context.t0
});
case 20:
_context.next = 23;
break;
case 22:
reply({
error: true
});
case 23:
case "end":
return _context.stop();
}
}
}, _callee, this, [[7, 17]]);
}));
return function (_x) {
return _ref2.apply(this, arguments);
};
}());
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleResolve",
/*#__PURE__*/
function () {
var _ref4 = (0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee2(_ref3) {
var data, reply, file, result, response, text;
return _regenerator.default.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
data = _ref3.data, reply = _ref3.reply;
file = _this.props.findFile("".concat(data.value, ".js")) || _this.props.findFile(data.value);
if (!file) {
_context2.next = 16;
break;
}
_context2.prev = 3;
_context2.next = 6;
return file.babel();
case 6:
result = _context2.sent;
reply({
value: result.text
});
_context2.next = 14;
break;
case 10:
_context2.prev = 10;
_context2.t0 = _context2["catch"](3);
reply((0, _objectSpread2.default)({}, _context2.t0));
_this.setState({
error: _context2.t0
});
case 14:
_context2.next = 33;
break;
case 16:
if (!(data.value.indexOf('http') === 0)) {
_context2.next = 32;
break;
}
_context2.prev = 17;
_context2.next = 20;
return fetch(data.value);
case 20:
response = _context2.sent;
_context2.next = 23;
return response.text();
case 23:
text = _context2.sent;
reply({
value: text
});
_context2.next = 30;
break;
case 27:
_context2.prev = 27;
_context2.t1 = _context2["catch"](17);
reply({
error: _context2.t1
});
case 30:
_context2.next = 33;
break;
case 32:
reply({
error: true
});
case 33:
case "end":
return _context2.stop();
}
}
}, _callee2, this, [[3, 10], [17, 27]]);
}));
return function (_x2) {
return _ref4.apply(this, arguments);
};
}());
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleFetchDataURL",
/*#__PURE__*/
function () {
var _ref6 = (0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee3(_ref5) {
var data, reply, file, response, blob, fileReader;
return _regenerator.default.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
data = _ref5.data, reply = _ref5.reply;
file = _this.props.findFile(data.value);
if (!file) {
_context3.next = 11;
break;
}
_context3.t0 = reply;
_context3.next = 6;
return file.toDataURL();
case 6:
_context3.t1 = _context3.sent;
_context3.t2 = {
value: _context3.t1
};
(0, _context3.t0)(_context3.t2);
_context3.next = 30;
break;
case 11:
if (!(data.value.indexOf('http') === 0)) {
_context3.next = 29;
break;
}
_context3.prev = 12;
_context3.next = 15;
return fetch(data.value);
case 15:
response = _context3.sent;
_context3.next = 18;
return response.blob();
case 18:
blob = _context3.sent;
fileReader = new FileReader();
fileReader.onload = function () {
reply({
value: fileReader.result
});
};
fileReader.readAsDataURL(blob);
_context3.next = 27;
break;
case 24:
_context3.prev = 24;
_context3.t3 = _context3["catch"](12);
reply({
error: _context3.t3
});
case 27:
_context3.next = 30;
break;
case 29:
reply({
error: true
});
case 30:
case "end":
return _context3.stop();
}
}
}, _callee3, this, [[12, 24]]);
}));
return function (_x3) {
return _ref6.apply(this, arguments);
};
}());
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleFetchText",
/*#__PURE__*/
function () {
var _ref8 = (0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee4(_ref7) {
var data, reply, response, text, file;
return _regenerator.default.wrap(function _callee4$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
data = _ref7.data, reply = _ref7.reply;
if (!(data.value.indexOf('http') === 0)) {
_context4.next = 21;
break;
}
_context4.prev = 2;
_context4.next = 5;
return fetch(data.value);
case 5:
response = _context4.sent;
if (!response.ok) {
_context4.next = 13;
break;
}
_context4.next = 9;
return response.text();
case 9:
text = _context4.sent;
reply({
value: text
});
_context4.next = 14;
break;
case 13:
reply({
error: true
});
case 14:
_context4.next = 19;
break;
case 16:
_context4.prev = 16;
_context4.t0 = _context4["catch"](2);
reply({
error: _context4.t0
});
case 19:
_context4.next = 26;
break;
case 21:
file = _this.props.findFile(data.value);
if (!file) {
_context4.next = 25;
break;
}
reply({
value: file.text
});
return _context4.abrupt("return");
case 25:
reply({
error: true
});
case 26:
case "end":
return _context4.stop();
}
}
}, _callee4, this, [[2, 16]]);
}));
return function (_x4) {
return _ref8.apply(this, arguments);
};
}());
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleSaveAs",
/*#__PURE__*/
function () {
var _ref10 = (0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee5(_ref9) {
var data, reply, _data$value, blob, name, file3, exist, key;
return _regenerator.default.wrap(function _callee5$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
data = _ref9.data, reply = _ref9.reply;
console.time('handleSaveAs 1');
_data$value = (0, _slicedToArray2.default)(data.value, 2), blob = _data$value[0], name = _data$value[1];
_context5.next = 5;
return (0, _File.makeFromFile)(blob);
case 5:
file3 = _context5.sent;
exist = _this.props.findFile(name);
console.timeEnd('handleSaveAs 1');
console.time('handleSaveAs 2');
if (!exist) {
_context5.next = 16;
break;
}
key = exist.key;
_context5.next = 13;
return _this.props.putFile(exist, file3.set({
key: key,
name: name
}));
case 13:
console.timeEnd('handleSaveAs 2');
_context5.next = 18;
break;
case 16:
_context5.next = 18;
return _this.props.addFile(file3.set({
name: name
}));
case 18:
reply();
case 19:
case "end":
return _context5.stop();
}
}
}, _callee5, this);
}));
return function (_x5) {
return _ref10.apply(this, arguments);
};
}());
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleReload", function () {
_this.props.setLocation();
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleReplace", function (_ref11) {
var data = _ref11.data;
location.hash = data.value.replace(/^\/*/, '/');
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleError", function (_ref12) {
var data = _ref12.data;
if (!_this.state.error) {
var error = new Error(data.value.message || '');
var _arr = Object.keys(data.value);
for (var _i = 0; _i < _arr.length; _i++) {
var key = _arr[_i];
error[key] = data.value[key];
}
_this.setState({
error: error
});
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleIpcRenderer", function (_ref13) {
var data = _ref13.data;
if (window.ipcRenderer) {
var _window$ipcRenderer;
(_window$ipcRenderer = window.ipcRenderer).sendToHost.apply(_window$ipcRenderer, (0, _toConsumableArray2.default)(Object.values(data.value)));
} else {
console.warn('window.ipcRenderer is not defined');
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "setTimeoutId", new Map());
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleSetTimeout", function (_ref14) {
var data = _ref14.data,
reply = _ref14.reply;
var _data$value2 = data.value,
timeoutId = _data$value2.timeoutId,
delay = _data$value2.delay;
_this.setTimeoutId.set(timeoutId, setTimeout(reply, delay));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleClearTimeout", function (_ref15) {
var data = _ref15.data;
clearInterval(_this.setTimeoutId.get(data.value.timeoutId));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "setIntervalId", new Map());
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleSetInterval", function (_ref16) {
var data = _ref16.data,
reply = _ref16.reply;
var _data$value3 = data.value,
intervalId = _data$value3.intervalId,
delay = _data$value3.delay;
_this.setIntervalId.set(intervalId, setInterval(reply, delay));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleClearInterval", function (_ref17) {
var data = _ref17.data;
clearInterval(_this.setIntervalId.get(data.value.intervalId));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleOpenWindow", function (_ref18) {
var value = _ref18.data.value;
// value.url が相対パスかどうかを調べる
var a = document.createElement('a');
a.href = value.url;
if (a.host === location.host) {
window.open(value.url, value.target, value.features, value.replace);
} else {
throw new Error("Cannot open ".concat(value.url));
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleSpeechRecognition", function (_ref19) {
var data = _ref19.data,
reply = _ref19.reply;
var recognition = new SpeechRecognition();
var _arr2 = ['lang', 'continuous', 'interimResults', 'maxAlternatives', 'serviceURI'];
for (var _i2 = 0; _i2 < _arr2.length; _i2++) {
var prop = _arr2[_i2];
if (data.value[prop] !== undefined) {
recognition[prop] = data.value[prop];
}
}
if (Array.isArray(data.value.grammars)) {
recognition.grammars = new webkitSpeechGrammarList();
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = data.value.grammars[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var _step$value = _step.value,
src = _step$value.src,
weight = _step$value.weight;
recognition.grammars.addFromString(src, weight);
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
recognition.onresult = function (event) {
var results = [];
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = event.results[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var items = _step2.value;
var result = [];
result.isFinal = items.isFinal;
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = undefined;
try {
for (var _iterator3 = items[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var _step3$value = _step3.value,
confidence = _step3$value.confidence,
transcript = _step3$value.transcript;
result.push({
confidence: confidence,
transcript: transcript
});
}
} catch (err) {
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
_iterator3.return();
}
} finally {
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
results.push(result);
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
reply({
type: 'result',
event: {
results: results
}
});
};
recognition.onerror = function (event) {
reply({
type: 'error',
event: {
error: event.error
}
});
};
['audioend', 'audiostart', 'end', 'nomatch', 'soundend', 'soundstart', 'speechend', 'speechstart', 'start'].forEach(function (type) {
recognition["on".concat(type)] = function () {
reply({
type: type
});
};
});
recognition.start();
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handlePopoutOpen", function () {
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
_this.parent = window.open.apply(window, args);
if (_this.parent) {
_this.parent.addEventListener('load', function () {
var out = _this.popoutOptions.height !== _this.parent.innerHeight;
_this.parent.addEventListener('resize', function () {
_this.popoutOptions = Object.assign({}, _this.popoutOptions, {
width: _this.parent.innerWidth,
height: out ? _this.parent.outerHeight : _this.parent.innerHeight
});
});
var popoutMove = setInterval(function () {
if (_this.parent.screenX === _this.popoutOptions.left && _this.parent.screenY === _this.popoutOptions.top) {
return;
}
_this.popoutOptions = Object.assign({}, _this.popoutOptions, {
left: _this.parent.screenX,
top: _this.parent.screenY
});
}, 100);
_this.parent.addEventListener('beforeunload', function () {
clearInterval(popoutMove);
});
});
}
return _this.parent;
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handlePopoutClose", function () {
if (_this.props.isPopout && !_this.props.reboot) {
_this.props.togglePopout();
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleFrame", function (ref) {
if (!_this.props.isPopout) {
_this.inlineFrame = ref;
} else {
_this.popoutFrame = ref;
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleHashChanged", function () {
if (/^#\//.test(location.hash)) {
var href = location.hash.substr(2);
_this.props.setLocation(href);
}
});
return _this;
}
(0, _createClass2.default)(Monitor, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
if (window.ipcRenderer) {
this._emit = window.ipcRenderer.emit; // あとで戻せるようオリジナルを保持
var self = this;
window.ipcRenderer.emit = function () {
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
args[_key3] = arguments[_key3];
}
// ipcRenderer.emit をオーバーライドし, 全ての postMessage で送る
if (self.state && self.state.port) {
self.state.port.postMessage({
query: 'ipcRenderer.emit',
value: JSON.parse(JSON.stringify(args))
});
}
_this2._emit.apply(_this2, args);
};
} // feeles.github.io/sample/#/path/to/index.html
window.addEventListener('hashchange', this.handleHashChanged);
if (/^#\//.test(location.hash)) {
this.handleHashChanged();
} else {
// default href で起動
this.props.setLocation();
}
var globalEvent = this.props.globalEvent;
var on = globalEvent.on.bind(globalEvent);
on('postMessage', this.handlePostMessage);
on('message.fetch', this.handleFetch);
on('message.resolve', this.handleResolve);
on('message.fetchDataURL', this.handleFetchDataURL);
on('message.fetchText', this.handleFetchText);
on('message.saveAs', this.handleSaveAs);
on('message.reload', this.handleReload);
on('message.replace', this.handleReplace);
on('message.error', this.handleError);
on('message.ipcRenderer.*', this.handleIpcRenderer);
on('message.api.SpeechRecognition', this.handleSpeechRecognition);
on('message.setTimeout', this.handleSetTimeout);
on('message.clearTimeout', this.handleClearTimeout);
on('message.setInterval', this.handleSetInterval);
on('message.clearInterval', this.handleClearInterval);
on('message.openWindow', this.handleOpenWindow);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this3 = this;
if (prevProps.reboot && !this.props.reboot) {
if (this.props.isPopout || this.popoutClosed) {
// react-popoutがpopoutWindowにDOMをrenderした後でstartする必要がある
// renderを補足するのは難しい&updateの度に何度もrenderされる=>delayを入れる
setTimeout(function () {
return _this3.start();
}, 500);
this.popoutClosed = false;
} else {
this.start();
}
}
if (prevProps.isPopout && !this.props.isPopout) {
this.popoutClosed = true; // Use delay
}
if (!prevProps.isFullScreen && this.props.isFullScreen) {
// フルスクリーン時にフォーカスを iframe に与える
if (this.iframe) {
this.iframe.contentWindow.focus();
}
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
window.removeEventListener('hashchange', this.handleHashChanged);
if (window.ipcRenderer) {
// オリジナルの参照を戻す. Monitor が複数 mount されることはない(はず)
window.ipcRenderer.emit = this._emit;
}
}
}, {
key: "start",
value: function () {
var _start = (0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee6() {
var _this4 = this;
var _prevent;
return _regenerator.default.wrap(function _callee6$(_context6) {
while (1) {
switch (_context6.prev = _context6.next) {
case 0:
_prevent = this.prevent;
this.prevent = _prevent.then(function () {
return _this4.startProcess();
}).catch(function (error) {
if (error) {
_this4.setState({
error: error
});
} else if (_this4.props.isPopout) {
_this4.start();
}
});
_context6.next = 4;
return _prevent;
case 4:
this.setState({
error: null,
port: null
});
case 5:
case "end":
return _context6.stop();
}
}
}, _callee6, this);
}));
function start() {
return _start.apply(this, arguments);
}
return start;
}()
}, {
key: "startProcess",
value: function () {
var _startProcess = (0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee7() {
var _this5 = this;
var _this$props, getConfig, findFile, env, versionUUIDFile, element, htmlFile, html, tryLoading, _ref20, port1, port2;
return _regenerator.default.wrap(function _callee7$(_context7) {
while (1) {
switch (_context7.prev = _context7.next) {
case 0:
_this$props = this.props, getConfig = _this$props.getConfig, findFile = _this$props.findFile; // env
env = (0, _composeEnv.default)(getConfig('env'));
versionUUIDFile = findFile('feeles/.uuid');
if (versionUUIDFile) {
env.VERSION_UUID = versionUUIDFile.text;
} else {
// Backward compatibility
element = document.querySelector('meta[name="version_uuid"]');
if (element) {
env.VERSION_UUID = element.getAttribute('content');
}
}
_context7.next = 6;
return (0, _database.getPrimaryUser)();
case 6:
env.USER_UUID = _context7.sent.uuid;
htmlFile = this.props.findFile(this.props.href) || _File.SourceFile.html();
_context7.next = 10;
return (0, _registerHTML.default)(htmlFile.text, this.props.findFile, env);
case 10:
html = _context7.sent;
tryLoading = function tryLoading() {
return new Promise(function (resolve, reject) {
// iframe.srcdoc, onload => resolve
(0, _setSrcDoc.default)(_this5.iframe, html, resolve); // Connection timeouted, then retry
setTimeout(reject, ConnectionTimeout);
}).catch(function () {
return tryLoading();
});
};
_context7.next = 14;
return tryLoading();
case 14:
_ref20 = new MessageChannel(), port1 = _ref20.port1, port2 = _ref20.port2;
port1.addEventListener('message', function (event) {
var reply = function reply(params) {
params = (0, _objectSpread2.default)({
id: event.data.id
}, params || {});
port1.postMessage(params);
};
var type = event.type,
data = event.data;
var name = data.query ? "message.".concat(data.query) : 'message';
_this5.props.globalEvent.emit(name, {
type: type,
data: data,
reply: reply
});
});
port1.start();
this.setState({
port: port1
});
this.iframe.contentWindow.postMessage({
env: env
}, '*', [port2]);
case 19:
case "end":
return _context7.stop();
}
}
}, _callee7, this);
}));
function startProcess() {
return _startProcess.apply(this, arguments);
}
return startProcess;
}()
}, {
key: "render",
value: function render() {
var dcn = getCn(this.props);
var error = this.state.error;
var _this$props2 = this.props,
isPopout = _this$props2.isPopout,
reboot = _this$props2.reboot,
isFullScreen = _this$props2.isFullScreen;
var extraProps = {};
if (isPopout || isFullScreen) {
// バーがないのでリロードボタンを出す
extraProps.setLocation = this.props.setLocation;
}
if (isFullScreen) {
// フルスクリーン中に解除する
extraProps.toggleFullScreen = this.props.toggleFullScreen;
}
var popout = isPopout && !reboot ? _react.default.createElement(_ReactPopout.default, {
url: popoutURL,
title: "app",
options: this.popoutOptions,
window: {
open: this.handlePopoutOpen,
addEventListener: window.addEventListener.bind(window),
removeEventListener: window.removeEventListener.bind(window)
},
onClosing: this.handlePopoutClose
}, _react.default.createElement(_Screen.default, (0, _extends2.default)({
display: true,
frameRef: this.handleFrame,
reboot: reboot,
error: error,
width: this.props.frameWidth,
height: this.props.frameHeight
}, extraProps))) : null;
return _react.default.createElement("div", {
className: dcn.root
}, popout, _react.default.createElement(_Screen.default, (0, _extends2.default)({
animation: true,
display: !isPopout,
frameRef: this.handleFrame,
reboot: reboot,
error: error,
width: this.props.frameWidth,
height: this.props.frameHeight,
isFullScreen: this.props.isFullScreen
}, extraProps)));
}
}, {
key: "iframe",
get: function get() {
return this.props.isPopout ? this.popoutFrame : this.inlineFrame;
}
}]);
return Monitor;
}(_react.PureComponent), (0, _defineProperty2.default)(_class2, "propTypes", {
theme: _propTypes.default.object.isRequired,
files: _propTypes.default.array.isRequired,
isPopout: _propTypes.default.bool.isRequired,
isFullScreen: _propTypes.default.bool.isRequired,
reboot: _propTypes.default.bool.isRequired,
href: _propTypes.default.string.isRequired,
togglePopout: _propTypes.default.func.isRequired,
toggleFullScreen: _propTypes.default.func.isRequired,
localization: _propTypes.default.object.isRequired,
getConfig: _propTypes.default.func.isRequired,
addFile: _propTypes.default.func.isRequired,
findFile: _propTypes.default.func.isRequired,
putFile: _propTypes.default.func.isRequired,
setLocation: _propTypes.default.func.isRequired,
frameWidth: _propTypes.default.number.isRequired,
frameHeight: _propTypes.default.number.isRequired,
globalEvent: _propTypes.default.object.isRequired
}), _temp)) || _class);
exports.default = Monitor;