backpack-ui/dist/components/shareMenu/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _reactDom = require("react-dom");

var _reactDom2 = _interopRequireDefault(_reactDom);

var _styles = require("./styles");

var _styles2 = _interopRequireDefault(_styles);

var _iconButton = require("../iconButton");

var _iconButton2 = _interopRequireDefault(_iconButton);

var _flyout = require("../flyout");

var _flyout2 = _interopRequireDefault(_flyout);

var _item = require("./item");

var _item2 = _interopRequireDefault(_item);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var ShareMenu = function (_React$Component) {
  _inherits(ShareMenu, _React$Component);

  _createClass(ShareMenu, null, [{
    key: "calculateWindowPosition",
    value: function calculateWindowPosition(windowDimension, popUpDimension) {
      return Math.round(windowDimension / 2 - popUpDimension / 2);
    }
  }, {
    key: "windowSettings",
    value: function windowSettings() {
      var windowSettings = {
        popUpWidth: 840,
        popUpHeight: 420,
        popUpLeft: 0,
        popUpTop: 0,
        height: window.innerHeight,
        width: window.innerWidth
      };

      windowSettings.popUpLeft = ShareMenu.calculateWindowPosition(windowSettings.width, windowSettings.popUpWidth);

      windowSettings.popUpTop = windowSettings.height > windowSettings.popUpHeight ? ShareMenu.calculateWindowPosition(windowSettings.height, windowSettings.popUpHeight) : 0;

      windowSettings.windowOptions = "toolbar=no," + "menubar=no," + "location=yes," + "resizable=no," + "scrollbars=yes";

      windowSettings.windowSize = "width=" + windowSettings.popUpWidth + "," + ("height=" + windowSettings.popUpHeight + ",") + ("top=" + windowSettings.popUpTop + ",") + ("left=" + windowSettings.popUpLeft);

      return windowSettings;
    }
  }, {
    key: "openWindow",
    value: function openWindow(event) {
      var _ShareMenu$windowSett = ShareMenu.windowSettings();

      var windowOptions = _ShareMenu$windowSett.windowOptions;
      var windowSize = _ShareMenu$windowSett.windowSize;


      if (event.currentTarget.dataset.network !== "email") {
        window.open(event.currentTarget.href, "share", windowOptions + "," + windowSize);
      }

      event.preventDefault();
    }
  }]);

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

    var _this = _possibleConstructorReturn(this, (ShareMenu.__proto__ || Object.getPrototypeOf(ShareMenu)).call(this));

    _this.state = {
      optionsHidden: true
    };

    _this.toggleOptions = _this.toggleOptions.bind(_this);
    _this.handleClickOutside = _this.handleClickOutside.bind(_this);
    _this.handleKeydown = _this.handleKeydown.bind(_this);
    _this.shareContent = _this.shareContent.bind(_this);
    _this.shareUrl = _this.shareUrl.bind(_this);
    return _this;
  }

  _createClass(ShareMenu, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      document.addEventListener("click", this.handleClickOutside);
      document.addEventListener("keydown", this.handleKeydown);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      document.removeEventListener("click", this.handleClickOutside);
      document.removeEventListener("keydown", this.handleKeydown);
    }
  }, {
    key: "toggleOptions",
    value: function toggleOptions() {
      this.setState({
        optionsHidden: !this.state.optionsHidden
      });
    }
  }, {
    key: "handleClickOutside",
    value: function handleClickOutside(event) {
      /* eslint-disable */
      var button = _reactDom2.default.findDOMNode(this._button);
      var menu = _reactDom2.default.findDOMNode(this._menu);
      /* eslint-enable */

      if (button.contains(event.target)) {
        return;
      } else if (!menu.contains(event.target) && !this.state.optionsHidden) {
        this.toggleOptions();
      }
    }
  }, {
    key: "handleKeydown",
    value: function handleKeydown(event) {
      if (event.keyCode === 27 && !this.state.optionsHidden) {
        this.toggleOptions();
      }
    }
  }, {
    key: "shareContent",
    value: function shareContent() {
      var _props = this.props;
      var url = _props.url;
      var text = _props.text;


      return {
        text: encodeURIComponent(text),
        url: encodeURIComponent(url),
        via: "lonelyplanet"
      };
    }
  }, {
    key: "shareUrl",
    value: function shareUrl() {
      var _shareContent = this.shareContent();

      var url = _shareContent.url;
      var text = _shareContent.text;
      var via = _shareContent.via;


      return {
        twitter: "https://twitter.com/intent/tweet?text=" + text + "&url=" + url + "&via=" + via,
        facebook: "https://www.facebook.com/sharer/sharer.php?u=" + url,
        email: "mailto:?subject=" + text + "&body=" + url
      };
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _shareUrl = this.shareUrl();

      var twitter = _shareUrl.twitter;
      var facebook = _shareUrl.facebook;
      var email = _shareUrl.email;


      var style = {
        container: [_styles2.default.container.base],
        options: [_styles2.default.options.base]
      };

      var position = {
        up: "below",
        down: "above",
        left: "right",
        right: "left"
      };

      var visibility = {
        true: "hidden",
        false: "visible"
      };

      var flyoutArrow = this.props.mobile ? "right" : "up";

      style.options.push(_styles2.default.options.position[position[flyoutArrow]]);

      style.options.push(_styles2.default.options.state[visibility[this.state.optionsHidden]].base, _styles2.default.options.state[visibility[this.state.optionsHidden]].position[position[flyoutArrow]]);

      return _react2.default.createElement(
        "div",
        {
          className: "ShareMenu",
          style: style.container
        },
        _react2.default.createElement(_iconButton2.default, {
          className: "ShareMenu-button",
          iconName: "share",
          label: "Share this article on Twitter, Facebook, or email",
          owns: "share-menu-options",
          onClick: this.toggleOptions,
          ref: function ref(node) {
            _this2._button = node;
          }
        }),
        _react2.default.createElement(
          "div",
          {
            className: "ShareMenu-options",
            id: "share-menu-options",
            style: style.options,
            "aria-hidden": this.state.optionsHidden,
            ref: function ref(node) {
              _this2._menu = node;
            }
          },
          _react2.default.createElement(
            _flyout2.default,
            { arrow: flyoutArrow, fill: true },
            _react2.default.createElement(_item2.default, {
              network: "twitter",
              href: twitter,
              label: "Share on Twitter",
              onClick: ShareMenu.openWindow
            }),
            _react2.default.createElement(_item2.default, {
              network: "facebook",
              href: facebook,
              label: "Share on Facebook",
              onClick: ShareMenu.openWindow
            }),
            _react2.default.createElement(_item2.default, {
              network: "email",
              href: email,
              label: "Share by email"
            })
          )
        )
      );
    }
  }]);

  return ShareMenu;
}(_react2.default.Component);

ShareMenu.propTypes = {
  /**
   * URL of page to share
   */
  url: _react2.default.PropTypes.string.isRequired,

  /**
   * Text to share
   */
  text: _react2.default.PropTypes.string,

  /**
   * Whether or not the layout should be formatted for mobile screen sizes
   */
  mobile: _react2.default.PropTypes.bool
};

ShareMenu.defaultProps = {
  url: "",

  text: "",

  alignment: "",

  mobile: true
};

ShareMenu.styles = _styles2.default;

exports.default = (0, _radium2.default)(ShareMenu);