feeles-ide
Version:
The hackable and serializable IDE to make learning material
239 lines (205 loc) • 8.48 kB
JavaScript
"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
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 _propTypes = _interopRequireDefault(require("prop-types"));
var _typestyle = require("typestyle");
var _Card = _interopRequireDefault(require("@material-ui/core/Card"));
var _CardWindow = _interopRequireDefault(require("../CardWindow"));
var _uniq = _interopRequireDefault(require("lodash/uniq"));
var _ShotPane = _interopRequireDefault(require("./ShotPane"));
var _Snippet = _interopRequireDefault(require("../../File/Snippet"));
var scrapbox = {
url: function url(title) {
return "https://scrapbox.io/hackforplay/".concat(encodeURIComponent(title));
},
page: function page(title) {
return "https://scrapbox.io/api/pages/hackforplay/".concat(encodeURIComponent(title));
},
icon: function icon(title) {
return "https://scrapbox.io/api/pages/hackforplay/".concat(encodeURIComponent(title), "/icon");
}
};
var cn = {
hintFlexbox: (0, _typestyle.style)({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
margin: '1em 0'
}),
hintHeading: (0, _typestyle.style)({
fontSize: '1.5em',
fontWeight: 600,
marginRight: '1em'
}),
cardLink: (0, _typestyle.style)({
textDecoration: 'none'
}),
cardFlexbox: (0, _typestyle.style)({
display: 'flex',
flexDirection: 'row',
alignItems: 'stretch',
overflow: 'hidden'
}),
card: (0, _typestyle.style)({
width: '10em',
height: '10em',
marginRight: '1em',
wordBreak: 'break-all',
padding: '1em'
}),
cardTitle: (0, _typestyle.style)({
margin: 0,
overflow: 'hidden',
display: '-webkit-box',
WebkitLineClamp: 3,
WebkitBoxOrient: 'vertical',
textOverflow: 'ellipsis'
}),
cardIcon: (0, _typestyle.style)({
width: '100%'
})
};
var ShotCard =
/*#__PURE__*/
function (_PureComponent) {
(0, _inherits2.default)(ShotCard, _PureComponent);
function ShotCard() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, ShotCard);
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)(ShotCard)).call.apply(_getPrototypeOf2, [this].concat(args)));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
file: null,
completes: [],
footer: null
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleCode", function (event) {
var value = event.data.value;
if (value) {
// feeles.openCode()
var file = _this.props.findFile(value);
_this.setState({
file: file,
completes: _this.props.getConfig('snippets')(file)
});
_this.props.setCardVisibility('ShotCard', true);
} else {
// feeles.closeCode()
_this.props.setCardVisibility('ShotCard', false);
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleComplete", function (event) {
var value = event.data.value;
if (!Array.isArray(value)) return;
var snippets = value.map(function (item) {
return new _Snippet.default((0, _objectSpread2.default)({
name: '',
fileKey: ''
}, item || {}));
});
var completes = _this.state.file ? _this.props.getConfig('snippets')().concat(snippets) : snippets;
_this.setState({
completes: completes
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleSetLinkObjects", function () {
var linkObjects = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var titles = linkObjects.map(function (obj) {
return obj.linkText;
});
_this.setState({
footer: _this.renderFooter((0, _uniq.default)(titles))
});
});
return _this;
}
(0, _createClass2.default)(ShotCard, [{
key: "componentDidMount",
value: function componentDidMount() {
var globalEvent = this.props.globalEvent;
globalEvent.on('message.code', this.handleCode);
globalEvent.on('message.complete', this.handleComplete);
}
}, {
key: "renderFooter",
value: function renderFooter(titles) {
return titles.length > 0 ? _react.default.createElement("div", null, _react.default.createElement("div", {
className: cn.hintFlexbox
}, _react.default.createElement("div", {
className: cn.hintHeading
}, "\uD83D\uDCA1 \u30D2\u30F3\u30C8"), _react.default.createElement("div", null, _react.default.createElement("a", {
href: "http://scrapbox.io"
}, "Scrapbox"), " \u306B\u3068\u3073\u307E\u3059 (\u5B9F\u9A13\u6BB5\u968E\u306E\u6A5F\u80FD)")), _react.default.createElement("div", {
className: cn.cardFlexbox
}, titles.map(function (title) {
return _react.default.createElement("a", {
key: title,
href: scrapbox.url(title),
rel: "noopener noreferrer",
target: "_blank",
className: cn.cardLink
}, _react.default.createElement(_Card.default, {
className: cn.card
}, _react.default.createElement("div", {
className: cn.cardTitle
}, title), _react.default.createElement("img", {
src: scrapbox.icon(title),
alt: "\u30DA\u30FC\u30B8\u304C\u5B58\u5728\u3057\u306A\u3044\u304B\u3001\u30A2\u30A4\u30B3\u30F3\u304C\u8A2D\u5B9A\u3055\u308C\u3066\u3044\u307E\u305B\u3093",
className: cn.cardIcon
})));
}).concat(_react.default.createElement("div", {
key: "$lastcard"
})))) : null;
}
}, {
key: "render",
value: function render() {
var visible = this.props.cardPropsBag.visible;
return _react.default.createElement(_CardWindow.default, (0, _extends2.default)({}, this.props.cardPropsBag, {
footer: this.state.footer
}), visible ? _react.default.createElement(_ShotPane.default, {
fileView: this.props.fileView,
file: this.state.file,
completes: this.state.completes,
files: this.props.files,
findFile: this.props.findFile,
localization: this.props.localization,
getConfig: this.props.getConfig,
loadConfig: this.props.loadConfig,
globalEvent: this.props.globalEvent,
handleSetLinkObjects: this.handleSetLinkObjects
}) : null);
}
}]);
return ShotCard;
}(_react.PureComponent);
exports.default = ShotCard;
(0, _defineProperty2.default)(ShotCard, "propTypes", {
cardPropsBag: _propTypes.default.object.isRequired,
fileView: _propTypes.default.object.isRequired,
setCardVisibility: _propTypes.default.func.isRequired,
files: _propTypes.default.array.isRequired,
findFile: _propTypes.default.func.isRequired,
localization: _propTypes.default.object.isRequired,
getConfig: _propTypes.default.func.isRequired,
loadConfig: _propTypes.default.func.isRequired,
globalEvent: _propTypes.default.object.isRequired
});