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

Lonely Planet's Components

"use strict";

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

var _keys = require("babel-runtime/core-js/object/keys");

var _keys2 = _interopRequireDefault(_keys);

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var SocialShareContainer = function (_Component) {
  (0, _inherits3.default)(SocialShareContainer, _Component);
  (0, _createClass3.default)(SocialShareContainer, null, [{
    key: "defineNetworks",
    value: function defineNetworks() {
      return {
        facebook: {
          name: "facebook",
          label: "Share on Facebook"
        },
        twitter: {
          name: "twitter",
          label: "Share on Twitter"
        },
        facebookMessenger: {
          name: "facebookMessenger",
          label: "Share on Messenger"
        },
        reddit: {
          name: "reddit",
          label: "Share on Reddit"
        },
        email: {
          name: "email",
          label: "Share by email"
        }
      };
    }
  }, {
    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 = SocialShareContainer.calculateWindowPosition(windowSettings.width, windowSettings.popUpWidth);

      windowSettings.popUpTop = windowSettings.height > windowSettings.popUpHeight ? SocialShareContainer.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 _SocialShareContainer = SocialShareContainer.windowSettings(),
          windowOptions = _SocialShareContainer.windowOptions,
          windowSize = _SocialShareContainer.windowSize;

      var isFacebook = event.currentTarget.dataset.network === "facebook";
      var isReddit = event.currentTarget.dataset.network === "reddit";
      var isTwitter = event.currentTarget.dataset.network === "twitter";
      var hasTwitterWidgets = typeof window !== "undefined" && typeof window.__twttr !== "undefined" && window.__twttr.widgets && window.__twttr.widgets.init;
      var shouldOpenWindow = isFacebook || isReddit || isTwitter && !hasTwitterWidgets;

      if (shouldOpenWindow) {
        window.open(event.currentTarget.href, "share", windowOptions + "," + windowSize);

        event.preventDefault();
      }
    }
  }]);

  function SocialShareContainer() {
    (0, _classCallCheck3.default)(this, SocialShareContainer);

    var _this = (0, _possibleConstructorReturn3.default)(this, (SocialShareContainer.__proto__ || (0, _getPrototypeOf2.default)(SocialShareContainer)).call(this));

    _this.getData = _this.getData.bind(_this);
    _this.networksToShow = _this.networksToShow.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(SocialShareContainer, [{
    key: "getData",
    value: function getData() {
      var text = encodeURIComponent(this.props.text);
      var url = encodeURIComponent(this.props.url);
      var via = this.props.via;
      var data = SocialShareContainer.defineNetworks();

      data.facebook.href = "https://www.facebook.com/sharer/sharer.php?u=" + url;
      data.twitter.href = "https://twitter.com/intent/tweet?text=" + text + "&url=" + url + "&via=" + via;
      data.facebookMessenger.href = "fb-messenger://share/?link=" + url;
      data.reddit.href = "http://www.reddit.com/submit/?url=" + url;
      data.email.href = "mailto:?subject=" + text + "&body=" + url;

      return data;
    }
  }, {
    key: "networksToShow",
    value: function networksToShow() {
      var hiddenNetworks = this.props.hide;
      var networkData = this.getData();

      if (hiddenNetworks && hiddenNetworks.length) {
        for (var i = 0; i < hiddenNetworks.length; i += 1) {
          var name = networkData[hiddenNetworks[i]].name;

          delete networkData[name];
        }
      }

      return networkData;
    }
  }, {
    key: "render",
    value: function render() {
      return _react2.default.createElement(this.props.children, (0, _extends3.default)({
        networks: this.networksToShow(),
        onClick: SocialShareContainer.openWindow
      }, this.props));
    }
  }]);
  return SocialShareContainer;
}(_react.Component);

SocialShareContainer.propTypes = {
  children: _propTypes2.default.func.isRequired,
  url: _propTypes2.default.string.isRequired, // eslint-disable-line react/no-unused-prop-types
  text: _propTypes2.default.string, // eslint-disable-line react/no-unused-prop-types
  hide: _propTypes2.default.arrayOf(_propTypes2.default.oneOf((0, _keys2.default)(SocialShareContainer.defineNetworks()))),
  via: _propTypes2.default.string
};

SocialShareContainer.defaultProps = {
  children: null,
  url: null,
  text: null,
  hide: null,
  via: "lonelyplanet"
};

exports.default = SocialShareContainer;