feeles-ide/lib/Cards/CardContainer.js

The hackable and serializable IDE to make learning material

import _extends from 'babel-runtime/helpers/extends';
import _Math$sign from 'babel-runtime/core-js/math/sign';
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 MediaCard from './MediaCard/';
import MonitorCard from './MonitorCard/';
import PaletteCard from './PaletteCard/';
import EnvCard from './EnvCard/';
import ReadmeCard from './ReadmeCard/';
import CustomizeCard from './CustomizeCard/';
import CreditsCard from './CreditsCard/';
import ShotCard from './ShotCard/';
import EditorCard from './EditorCard/';
import HierarchyCard from './HierarchyCard/';
import ScreenShotCard from './ScreenShotCard/';
import * as MonitorTypes from '../utils/MonitorTypes';

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

  function CardContainer() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, CardContainer);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CardContainer.__proto__ || _Object$getPrototypeOf(CardContainer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      // smooth scroll のターゲット
      scrollTarget: null
    }, _this.cardRefs = {}, _this.scrollToCard = function (name) {
      // そのカードにスクロールする
      var scrollTarget = document.getElementById(name);
      if (scrollTarget) {
        var startSmoothScroll = !_this.state.scrollTarget;
        _this.setState({ scrollTarget: scrollTarget }, function () {
          if (startSmoothScroll) {
            _this.scroll();
          }
        });
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  // Card Element の参照を保持するオブジェクト


  _createClass(CardContainer, [{
    key: 'scroll',
    value: function scroll() {
      var _this2 = this;

      // Scroll into view (shallow) element
      var scrollTarget = this.state.scrollTarget;
      // Is enable transitions?

      var transitions = this.context.muiTheme.transitions;


      if (scrollTarget) {
        var rect = scrollTarget.getBoundingClientRect();
        var offset = 16;
        var difference = 0;
        if (rect.left < offset) {
          difference = rect.left - offset;
        } else if (rect.right > window.innerWidth) {
          difference = rect.right - window.innerWidth;
        }

        if (transitions.create() !== 'none' && Math.abs(difference) > 1) {
          var sign = _Math$sign(difference);
          // smooth scroll
          scrollTarget.parentNode.scrollLeft += difference / 5 + sign * 5;
          requestAnimationFrame(function () {
            _this2.scroll();
          });
        } else {
          scrollTarget.parentNode.scrollLeft += difference;
          this.setState({ scrollTarget: null });
        }
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      // (暫定) 背景画像
      var bg = this.props.findFile('feeles/background.png') || this.props.findFile('feeles/background.jpg');

      var styles = {
        container: {
          flex: 1,
          position: 'relative',
          display: 'flex',
          flexWrap: 'wrap',
          justfiyContent: 'space-between',
          alignItems: 'stretch',
          overflowX: 'hidden',
          overflowY: 'scroll',
          paddingLeft: 16,
          boxSizing: 'border-box',
          backgroundImage: bg && 'url(' + bg.blobURL + ')',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
          backgroundSize: 'contain'
        }
      };

      var bag = function bag(name) {
        return {
          name: name,
          visible: _this3.props.cards[name].visible,
          order: _this3.props.cards[name].order,
          updateCard: _this3.props.updateCard,
          scrollToCard: _this3.scrollToCard,
          cards: _this3.props.cards,
          showAll: _this3.props.showAll
        };
      };

      var commonProps = {
        fileView: this.props.fileView,
        files: this.props.files,
        localization: this.props.localization,
        getConfig: this.props.getConfig,
        setConfig: this.props.setConfig,
        loadConfig: this.props.loadConfig,
        findFile: this.props.findFile,
        addFile: this.props.addFile,
        putFile: this.props.putFile,
        showAll: this.props.showAll,
        globalEvent: this.props.globalEvent
      };
      var cardProps = _extends({}, commonProps, {
        selectTab: this.props.selectTab,
        setLocation: this.props.setLocation,
        isPopout: this.props.monitorType === MonitorTypes.Popout,
        togglePopout: this.props.togglePopout,
        toggleFullScreen: this.props.toggleFullScreen,
        deleteFile: this.props.deleteFile,
        deployURL: this.props.deployURL,
        oAuthId: this.props.oAuthId,
        showNotice: this.props.showNotice,
        updateCard: this.props.updateCard,
        tabs: this.props.tabs,
        closeTab: this.props.closeTab,
        openFileDialog: this.props.openFileDialog,
        href: this.props.href,
        scrollToCard: this.scrollToCard,
        cards: this.props.cards,
        reboot: this.props.reboot,
        saveAs: this.props.saveAs,
        isFullScreen: this.props.monitorType === MonitorTypes.FullScreen
      });

      return React.createElement(
        'div',
        { style: styles.container },
        React.createElement(MediaCard, _extends({
          ref: function ref(_ref2) {
            return _this3.cardRefs.MediaCard = _ref2;
          }
        }, cardProps, {
          cardPropsBag: bag('MediaCard')
        })),
        React.createElement(MonitorCard, _extends({
          ref: function ref(_ref3) {
            return _this3.cardRefs.MonitorCard = _ref3;
          }
        }, cardProps, {
          cardPropsBag: bag('MonitorCard')
        })),
        React.createElement(PaletteCard, _extends({
          ref: function ref(_ref4) {
            return _this3.cardRefs.PaletteCard = _ref4;
          }
        }, cardProps, {
          cardPropsBag: bag('PaletteCard')
        })),
        React.createElement(EnvCard, _extends({
          ref: function ref(_ref5) {
            return _this3.cardRefs.EnvCard = _ref5;
          }
        }, cardProps, {
          cardPropsBag: bag('EnvCard')
        })),
        React.createElement(ReadmeCard, _extends({
          ref: function ref(_ref6) {
            return _this3.cardRefs.ReadmeCard = _ref6;
          }
        }, cardProps, {
          cardPropsBag: bag('ReadmeCard')
        })),
        React.createElement(CustomizeCard, _extends({
          ref: function ref(_ref7) {
            return _this3.cardRefs.CustomizeCard = _ref7;
          }
        }, cardProps, {
          cardPropsBag: bag('CustomizeCard')
        })),
        React.createElement(CreditsCard, _extends({
          ref: function ref(_ref8) {
            return _this3.cardRefs.CreditsCard = _ref8;
          }
        }, cardProps, {
          cardPropsBag: bag('CreditsCard')
        })),
        React.createElement(ShotCard, _extends({
          ref: function ref(_ref9) {
            return _this3.cardRefs.ShotCard = _ref9;
          }
        }, cardProps, {
          cardPropsBag: bag('ShotCard')
        })),
        React.createElement(EditorCard, _extends({
          ref: function ref(_ref10) {
            return _this3.cardRefs.EditorCard = _ref10;
          }
        }, cardProps, {
          cardPropsBag: bag('EditorCard')
        })),
        React.createElement(HierarchyCard, _extends({
          ref: function ref(_ref11) {
            return _this3.cardRefs.HierarchyCard = _ref11;
          }
        }, cardProps, {
          cardPropsBag: bag('HierarchyCard')
        })),
        this.props.disableScreenShotCard ? null : React.createElement(ScreenShotCard, _extends({
          ref: function ref(_ref12) {
            return _this3.cardRefs.ScreenShotCard = _ref12;
          }
        }, cardProps, {
          cardPropsBag: bag('ScreenShotCard')
        }))
      );
    }
  }]);

  return CardContainer;
}(PureComponent);

CardContainer.propTypes = {
  fileView: PropTypes.object.isRequired,
  cards: PropTypes.object.isRequired,
  getConfig: PropTypes.func.isRequired,
  loadConfig: PropTypes.func.isRequired,
  updateCard: PropTypes.func.isRequired,
  localization: PropTypes.object.isRequired,
  findFile: PropTypes.func.isRequired,
  showAll: PropTypes.bool.isRequired,
  setConfig: PropTypes.func.isRequired,
  addFile: PropTypes.func.isRequired,
  putFile: PropTypes.func.isRequired,
  deleteFile: PropTypes.func.isRequired,
  files: PropTypes.array.isRequired,
  tabs: PropTypes.array.isRequired,
  selectTab: PropTypes.func.isRequired,
  closeTab: PropTypes.func.isRequired,
  setLocation: PropTypes.func.isRequired,
  openFileDialog: PropTypes.func.isRequired,
  reboot: PropTypes.bool.isRequired,
  href: PropTypes.string.isRequired,
  monitorType: PropTypes.symbol.isRequired,
  toggleFullScreen: PropTypes.func.isRequired,
  togglePopout: PropTypes.func.isRequired,
  saveAs: PropTypes.func.isRequired,
  showNotice: PropTypes.func.isRequired,
  deployURL: PropTypes.string,
  oAuthId: PropTypes.string,
  globalEvent: PropTypes.object.isRequired,
  disableScreenShotCard: PropTypes.bool.isRequired
};
CardContainer.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
export default CardContainer;