feeles-ide/lib/Menu/MetaDialog.js

The hackable and serializable IDE to make learning material

import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _Object$values from 'babel-runtime/core-js/object/values';
import _Promise from 'babel-runtime/core-js/promise';
import _regeneratorRuntime from 'babel-runtime/regenerator';
import _extends from 'babel-runtime/helpers/extends';
import _asyncToGenerator from 'babel-runtime/helpers/asyncToGenerator';
import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import TextField from 'material-ui/TextField';
import { Card, CardMedia, CardHeader, CardActions } from 'material-ui/Card';
import IconButton from 'material-ui/IconButton';
import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import ImagePhotoCamera from 'material-ui/svg-icons/image/photo-camera';

import organization from '../organization';

/**
 * OGPの設定を行い, デプロイが必要な場合 true で resolve する
 * 途中でキャンセルされた場合は false で resolve する
 */

var MetaDialog = function (_PureComponent) {
  _inherits(MetaDialog, _PureComponent);

  function MetaDialog() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, MetaDialog);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MetaDialog.__proto__ || _Object$getPrototypeOf(MetaDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      stepIndex: 0
    }, _this.next = function () {
      _this.setState(function (prevState) {
        return {
          stepIndex: prevState.stepIndex + 1
        };
      });
    }, _this.back = function () {
      if (_this.state.stepIndex === 0) {
        _this.props.resolve(false);
        _this.props.onRequestClose();
        return;
      }
      _this.setState(function (prevState) {
        return {
          stepIndex: prevState.stepIndex - 1
        };
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(MetaDialog, [{
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps, prevState) {
      var stepIndex = this.state.stepIndex;

      if (prevState.stepIndex !== stepIndex && stepIndex === 2) {
        // Close this dialog and start uploading
        this.props.resolve(true);
        this.props.onRequestClose();
      }
    }
  }, {
    key: 'renderStep',
    value: function renderStep() {
      var bag = {
        getConfig: this.props.getConfig,
        setConfig: this.props.setConfig,
        findFile: this.props.findFile,
        localization: this.props.localization,
        back: this.back,
        globalEvent: this.props.globalEvent
      };
      switch (this.state.stepIndex) {
        case 0:
          return React.createElement(EditOGP, bag);
        case 1:
          return React.createElement(EditAuthor, bag);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var localization = this.props.localization;


      var actions = [React.createElement(FlatButton, {
        key: '1',
        label: localization.metaDialog.back,
        onClick: this.back
      }), React.createElement(RaisedButton, {
        key: '2',
        primary: true,
        label: localization.metaDialog.next,
        onClick: this.next
      })];

      var styles = {
        dialog: {
          // minHeight: 400,
          overflowX: 'auto',
          overflowY: 'scroll'
        }
      };

      return React.createElement(
        Dialog,
        {
          open: true,
          actions: actions,
          bodyStyle: styles.dialog,
          onRequestClose: this.props.onRequestClose
        },
        this.renderStep()
      );
    }
  }]);

  return MetaDialog;
}(PureComponent);

MetaDialog.propTypes = {
  resolve: PropTypes.func.isRequired,
  onRequestClose: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired,
  findFile: PropTypes.func.isRequired,
  getConfig: PropTypes.func.isRequired,
  setConfig: PropTypes.func.isRequired,
  globalEvent: PropTypes.object.isRequired
};
export default MetaDialog;

var EditOGP = function (_PureComponent2) {
  _inherits(EditOGP, _PureComponent2);

  function EditOGP() {
    var _ref2,
        _this3 = this;

    var _temp2, _this2, _ret2;

    _classCallCheck(this, EditOGP);

    for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      args[_key2] = arguments[_key2];
    }

    return _ret2 = (_temp2 = (_this2 = _possibleConstructorReturn(this, (_ref2 = EditOGP.__proto__ || _Object$getPrototypeOf(EditOGP)).call.apply(_ref2, [this].concat(args))), _this2), _this2.state = {
      images: [],
      isLoading: false
    }, _this2.handleChangeTitle = function () {
      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event, text) {
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _context.next = 2;
                return _this2.props.setConfig('ogp', _extends({}, _this2.props.getConfig('ogp'), {
                  'og:title': text,
                  'twitter:title': text || '...'
                }));

              case 2:
                _this2.forceUpdate();

              case 3:
              case 'end':
                return _context.stop();
            }
          }
        }, _callee, _this3);
      }));

      return function (_x, _x2) {
        return _ref3.apply(this, arguments);
      };
    }(), _this2.handleChangeDescription = function () {
      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(event, text) {
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                _context2.next = 2;
                return _this2.props.setConfig('ogp', _extends({}, _this2.props.getConfig('ogp'), {
                  'og:description': text,
                  'twitter:description': text || '...'
                }));

              case 2:
                _this2.forceUpdate();

              case 3:
              case 'end':
                return _context2.stop();
            }
          }
        }, _callee2, _this3);
      }));

      return function (_x3, _x4) {
        return _ref4.apply(this, arguments);
      };
    }(), _this2.handleChangeImage = function () {
      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(src) {
        var image;
        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                _this2.setState({ isLoading: true });

                _context3.next = 3;
                return new _Promise(function (resolve, reject) {
                  var image = new Image();
                  image.onload = function () {
                    return resolve(image);
                  };
                  image.onerror = reject;
                  image.src = src;
                });

              case 3:
                image = _context3.sent;
                _context3.next = 6;
                return _this2.props.setConfig('ogp', _extends({}, _this2.props.getConfig('ogp'), {
                  'og:image': image.src,
                  'og:image:width': image.width,
                  'og:image:height': image.height,
                  'twitter:card': 'summary_large_image',
                  'twitter:image': image.src
                }));

              case 6:

                _this2.setState({ isLoading: false });

              case 7:
              case 'end':
                return _context3.stop();
            }
          }
        }, _callee3, _this3);
      }));

      return function (_x5) {
        return _ref5.apply(this, arguments);
      };
    }(), _this2.handleNext = function () {
      var ogp = _this2.props.getConfig('ogp');
      var images = _this2.state.images;

      var cursor = images.indexOf(ogp['og:image']);
      var src = images[(cursor + 1) % images.length]; // next
      _this2.handleChangeImage(src);
    }, _this2.handlePrevious = function () {
      var ogp = _this2.props.getConfig('ogp');
      var images = _this2.state.images;

      var cursor = images.indexOf(ogp['og:image']);
      if (cursor > 0) {
        _this2.handleChangeImage(images[cursor - 1]); // previous
      } else {
        _this2.handleChangeImage(images[images.length - 1]); // last
      }
    }, _this2.handleScreenShot = function () {
      // Monitor にスクリーンショットを撮るようリクエスト
      var request = {
        query: 'capture',
        type: 'image/jpeg'
      };
      _this2.props.globalEvent.emit('postMessage', request);
      // ダイアログを閉じる
      _this2.props.back();
    }, _temp2), _possibleConstructorReturn(_this2, _ret2);
  }

  _createClass(EditOGP, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      var ogp = this.props.getConfig('ogp');
      var screenshots = [];
      try {
        var file = this.props.findFile('feeles/capture.json');
        screenshots = _Object$values(JSON.parse(file.text));
      } catch (e) {
        // continue regardless of error
      }
      var images = [].concat(ogp['og:image'], ogp['twitter:image']).concat(screenshots).filter(function (item, i, array) {
        return item && array.indexOf(item) === i;
      }); // unique
      this.setState({ images: images });
      if (images[0]) {
        this.handleChangeImage(images[0]);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var localization = this.props.localization;
      var transitions = this.context.muiTheme.transitions;

      var ogp = this.props.getConfig('ogp');

      var styles = {
        card: {
          marginTop: 14,
          width: 460,
          marginLeft: 'auto',
          marginRight: 'auto',
          overflow: 'hidden'
        },
        media: {
          backgroundImage: 'url(' + (ogp['og:image'] || '') + ')',
          backgroundSize: 'cover',
          opacity: this.state.isLoading ? 0.5 : 1,
          transition: transitions.easeOut()
        },
        image: {
          opacity: 0
        },
        header: {
          width: '100%'
        },
        innerHeader: {
          paddingTop: 8,
          paddingBottom: 0
        },
        textField: {
          marginTop: -16
        },
        description: {
          fontSize: 14
        },
        loading: {
          width: '100%',
          paddingTop: '50%',
          textAlign: 'center',
          height: 0
        },
        progress: {
          top: '50%',
          left: '50%',
          position: 'absolute',
          marginLeft: -28
        },
        navigation: {
          display: 'flex'
        }
      };

      return React.createElement(
        'div',
        null,
        React.createElement(
          Card,
          { style: styles.card },
          React.createElement(
            CardMedia,
            {
              style: styles.media,
              overlay: this.state.images.length > 1 ? React.createElement(
                CardActions,
                { style: styles.navigation },
                React.createElement(
                  IconButton,
                  { onClick: this.handlePrevious },
                  React.createElement(NavigationArrowBack, { color: 'white' })
                ),
                React.createElement('div', { style: { flexGrow: 1 } }),
                React.createElement(
                  IconButton,
                  { onClick: this.handleNext },
                  React.createElement(NavigationArrowForward, { color: 'white' })
                )
              ) : null
            },
            ogp['og:image'] ? React.createElement('img', { style: styles.image, src: ogp['og:image'] }) : React.createElement(
              'div',
              { style: styles.loading },
              React.createElement(
                FloatingActionButton,
                {
                  style: styles.progress,
                  onClick: this.handleScreenShot
                },
                React.createElement(ImagePhotoCamera, null)
              )
            )
          ),
          React.createElement(CardHeader, {
            title: React.createElement(TextField, {
              id: '',
              fullWidth: true,
              floatingLabelText: localization.metaDialog.title,
              hintText: organization.placeholder['og:title'],
              defaultValue: ogp['og:title'],
              style: styles.textField,
              onChange: this.handleChangeTitle
            }),
            subtitle: React.createElement(TextField, {
              id: '',
              fullWidth: true,
              multiLine: true,
              rows: 2,
              floatingLabelText: localization.metaDialog.description,
              hintText: organization.placeholder['og:description'],
              defaultValue: ogp['og:description'],
              hintStyle: styles.description,
              style: styles.textField,
              onChange: this.handleChangeDescription
            }),
            style: styles.innerHeader,
            textStyle: styles.header
          })
        )
      );
    }
  }]);

  return EditOGP;
}(PureComponent);

EditOGP.propTypes = {
  findFile: PropTypes.func.isRequired,
  getConfig: PropTypes.func.isRequired,
  setConfig: PropTypes.func.isRequired,
  back: PropTypes.func.isRequired,
  globalEvent: PropTypes.object.isRequired,
  localization: PropTypes.object.isRequired
};
EditOGP.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};

var EditAuthor = function (_PureComponent3) {
  _inherits(EditAuthor, _PureComponent3);

  function EditAuthor() {
    _classCallCheck(this, EditAuthor);

    return _possibleConstructorReturn(this, (EditAuthor.__proto__ || _Object$getPrototypeOf(EditAuthor)).apply(this, arguments));
  }

  _createClass(EditAuthor, [{
    key: 'changeAttribute',
    value: function changeAttribute(attribute) {
      var _this5 = this;

      return function (event, value) {
        _this5.props.setConfig('ogp', _extends({}, _this5.props.getConfig('ogp'), _defineProperty({}, attribute, value)));
      };
    }
  }, {
    key: 'render',
    value: function render() {
      var localization = this.props.localization;

      var ogp = this.props.getConfig('ogp');

      return React.createElement(
        'div',
        null,
        React.createElement(
          'h1',
          null,
          localization.metaDialog.creator
        ),
        React.createElement(
          'h4',
          null,
          localization.metaDialog.creatorConfirm
        ),
        React.createElement(TextField, {
          id: '',
          fullWidth: true,
          floatingLabelText: localization.metaDialog.nickname,
          hintText: organization.placeholder['og:author'],
          defaultValue: ogp['og:author'],
          onChange: this.changeAttribute('og:author')
        }),
        React.createElement(TextField, {
          id: '',
          fullWidth: true,
          floatingLabelText: localization.metaDialog.homepage,
          hintText: organization.placeholder['og:homepage'],
          defaultValue: ogp['og:homepage'],
          onChange: this.changeAttribute('og:homepage')
        }),
        React.createElement(TextField, {
          id: '',
          fullWidth: true,
          floatingLabelText: localization.metaDialog.twitterId,
          hintText: organization.placeholder['twitter:author'],
          defaultValue: ogp['twitter:author'],
          onChange: this.changeAttribute('twitter:author')
        })
      );
    }
  }]);

  return EditAuthor;
}(PureComponent);

EditAuthor.propTypes = {
  getConfig: PropTypes.func.isRequired,
  setConfig: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired
};