feeles-ide/lib/jsx/Footer.js

The hackable and serializable IDE to make learning material

import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
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 URLSearchParams from 'url-search-params';
import Paper from 'material-ui/Paper';
import IconButton from 'material-ui/IconButton';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import SocialShare from 'material-ui/svg-icons/social/share';

import organization from '../organization';

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

  function Footer() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Footer);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Footer.__proto__ || _Object$getPrototypeOf(Footer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      open: true,
      rewrite: false
    }, _this.handleLinkCopy = function (event) {
      event.target.select();
      if (document.execCommand('copy')) {
        var message = _this.props.localization.menu.linkCopied + _this.shareURL;
        _this.props.showNotice({ message: message });
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

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

      // 10 秒後に close する
      setTimeout(function () {
        return _this2.setState({ open: false });
      }, 10000);

      if (process.env.NODE_ENV !== 'production') {
        return;
      }
      this.mountLineIt();
      this.mountTweetButton();
      this.mountFacebookShare();
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.deployURL !== nextProps.deployURL) {
        // ボタンを再描画させるため、一度中の要素をすべて消してしまう
        // state.rewrite はすぐに false になる
        this.setState({ rewrite: true });
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      if (this.state.rewrite) {
        this.setState({ rewrite: false });
      } else {
        // Rewrite
        this.mountLineIt();
        this.mountTweetButton();
        this.mountFacebookShare();
      }
    }
  }, {
    key: 'mountLineIt',
    value: function mountLineIt() {
      var id = 'line-wjs';
      if (document.querySelector(id)) {
        if (window.LineIt) {
          window.LineIt.loadButton();
        }
        return;
      }
      var js = document.createElement('script');
      js.id = id;
      js.src = 'https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js';
      js.onload = function () {
        window.LineIt.loadButton();
      };
      var fjs = document.getElementsByTagName('script')[0];
      fjs.parentNode.insertBefore(js, fjs);
    }
  }, {
    key: 'mountTweetButton',
    value: function mountTweetButton() {
      if (window.twttr && window.twttr.widgets) {
        window.twttr.widgets.load();
      }
      /* https://dev.twitter.com/web/javascript/loading */
      window.twttr = function (d, s, id) {
        var js,
            fjs = d.getElementsByTagName(s)[0],
            t = window.twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.id = id;
        js.src = 'https://platform.twitter.com/widgets.js';
        fjs.parentNode.insertBefore(js, fjs);

        t._e = [];
        t.ready = function (f) {
          t._e.push(f);
        };

        return t;
      }(document, 'script', 'twitter-wjs');
    }
  }, {
    key: 'mountFacebookShare',
    value: function mountFacebookShare() {
      var localization = this.props.localization;

      if (window.FB) {
        window.FB.XFBML.parse();
      }
      /* https://developers.facebook.com/docs/plugins/share-button */
      (function (d, s, id) {
        var js,
            fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = '//connect.facebook.net/' + localization.ll_CC + '/sdk.js#xfbml=1&version=v2.8';
        fjs.parentNode.insertBefore(js, fjs);
      })(document, 'script', 'facebook-jssdk');
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      if (this.state.rewrite) {
        return null;
      }
      var transitions = this.context.muiTheme.transitions;


      var styles = {
        root: {
          flex: 0,
          display: this.state.open ? 'flex' : 'none',
          height: '2.5rem',
          justifyContent: 'space-around',
          alignItems: 'center',
          zIndex: 1
        },
        opener: {
          position: 'fixed',
          left: 8,
          bottom: 8,
          transform: 'translateY(' + (this.state.open ? 48 : 0) + 'px)',
          zIndex: 1,
          transition: transitions.easeOut(null, 'transform')
        },
        blank: {
          flex: '0 0 1rem'
        }
      };

      var _ref2 = this.props.localization.accept || ['en'],
          _ref3 = _slicedToArray(_ref2, 1),
          lang = _ref3[0];

      var params = new URLSearchParams();
      params.set('url', this.shareURL);
      if (organization.hashtags) {
        params.set('hashtags', organization.hashtags);
      }
      var twitterIntent = 'https://twitter.com/intent/tweet?' + params;

      return (
        /* z-index: inherit; の階層を Main 直下に置くことで フルスクリーンのとき奥に行くように */
        React.createElement(
          'div',
          null,
          React.createElement(
            FloatingActionButton,
            {
              mini: true,
              secondary: true,
              style: styles.opener,
              onClick: function onClick() {
                return _this3.setState({ open: true });
              }
            },
            React.createElement(SocialShare, null)
          ),
          React.createElement(
            Paper,
            { style: styles.root },
            React.createElement('div', { style: { flex: 1 } }),
            React.createElement('input', { readOnly: true, value: this.shareURL, onClick: this.handleLinkCopy }),
            React.createElement('div', { style: styles.blank }),
            React.createElement('a', {
              className: 'twitter-share-button',
              href: twitterIntent,
              'data-lang': lang,
              'data-show-count': 'false'
            }),
            React.createElement('div', { style: styles.blank }),
            React.createElement('div', {
              className: 'line-it-button',
              'data-url': this.shareURL,
              'data-lang': lang,
              'data-type': 'share-a'
            }),
            React.createElement('div', { style: styles.blank }),
            React.createElement(
              'div',
              { style: { marginTop: -4 } },
              React.createElement('div', {
                className: 'fb-share-button',
                'data-href': this.shareURL,
                'data-layout': 'button'
              })
            ),
            React.createElement('div', { style: styles.blank }),
            React.createElement(
              IconButton,
              { onClick: function onClick() {
                  return _this3.setState({ open: false });
                } },
              React.createElement(NavigationClose, null)
            )
          )
        )
      );
    }
  }, {
    key: 'shareURL',
    get: function get() {
      if (!this.props.deployURL) {
        return location.href;
      }
      var url = new URL(this.props.deployURL);
      var origin = url.origin,
          pathname = url.pathname;

      return origin + '/p/' + pathname.split('/').reverse()[0];
    }
  }]);

  return Footer;
}(PureComponent);

Footer.propTypes = {
  deployURL: PropTypes.string,
  localization: PropTypes.object.isRequired,
  showNotice: PropTypes.func.isRequired
};
Footer.contextTypes = {
  muiTheme: PropTypes.object.isRequired
};
export default Footer;