backpack-ui/dist/components/shareMenu/shareSettings.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 _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 _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

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

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

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);

var _clipboard = require("clipboard");

var _clipboard2 = _interopRequireDefault(_clipboard);

var _clipboardWrapper = require("./clipboardWrapper");

var _clipboardWrapper2 = _interopRequireDefault(_clipboardWrapper);

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

var ShareSettings = function (_React$Component) {
  (0, _inherits3.default)(ShareSettings, _React$Component);

  function ShareSettings() {
    (0, _classCallCheck3.default)(this, ShareSettings);
    return (0, _possibleConstructorReturn3.default)(this, (ShareSettings.__proto__ || (0, _getPrototypeOf2.default)(ShareSettings)).apply(this, arguments));
  }

  (0, _createClass3.default)(ShareSettings, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _props = this.props,
          handleClipboardSuccess = _props.handleClipboardSuccess,
          handleClipboardError = _props.handleClipboardError;

      var shouldInitiateClipboard = typeof handleClipboardSuccess === "function" && typeof handleClipboardError === "function";

      if (shouldInitiateClipboard) {
        this.initiateClipboard();
      }
    }
  }, {
    key: "initiateClipboard",
    value: function initiateClipboard() {
      this.clipboard = new _clipboard2.default(".shareCopy");
      this.clipboard.on("success", this.props.handleClipboardSuccess);
      this.clipboard.on("error", this.props.handleClipboardError);
    }
  }, {
    key: "formattedShareContent",
    value: function formattedShareContent() {
      var _props$shareContent = this.props.shareContent,
          url = _props$shareContent.url,
          text = _props$shareContent.text,
          image = _props$shareContent.image,
          description = _props$shareContent.description,
          twitterContent = _props$shareContent.twitterContent,
          via = _props$shareContent.via,
          weChatQr = _props$shareContent.weChatQr;


      return {
        text: encodeURIComponent(text),
        image: encodeURIComponent(image),
        description: encodeURIComponent(description),
        twitterContent: encodeURIComponent(twitterContent),
        url: encodeURIComponent(url),
        via: via,
        weChatQr: weChatQr
      };
    }
  }, {
    key: "shareUrl",
    value: function shareUrl() {
      var _formattedShareConten = this.formattedShareContent(),
          url = _formattedShareConten.url,
          text = _formattedShareConten.text,
          image = _formattedShareConten.image,
          description = _formattedShareConten.description,
          twitterContent = _formattedShareConten.twitterContent,
          via = _formattedShareConten.via,
          weChatQr = _formattedShareConten.weChatQr;

      var facebookAppId = "111537044496";

      var twitterText = twitterContent || description + "&url=" + url + "&via=" + via;

      return {
        twitter: "https://twitter.com/intent/tweet?text=" + twitterText,
        facebook: "https://www.facebook.com/dialog/share?app_id=" + facebookAppId + "&display=popup&href=" + url,
        facebookMessenger: "fb-messenger://share/?link=" + url + "&app_id=" + facebookAppId,
        email: "mailto:?subject=" + text + "&body=" + description + "%0A%0A" + url,
        pinterest: "https://www.pinterest.com/pin/create/button/?url=" + url + "&media=" + image + "&description=" + description,
        reddit: "https://www.reddit.com/submit/?url=" + url + "&title=" + description,
        whatsapp: "https://api.whatsapp.com/send?text=" + description + "%0A%0A" + url,
        weChat: weChatQr
      };
    }
  }, {
    key: "render",
    value: function render() {
      var socialUrls = this.shareUrl();
      var socialActions = (0, _keys2.default)(socialUrls).reduce(function (acc, curr) {
        acc[curr] = function () {
          return ShareSettings.openShareWindow(socialUrls[curr]);
        };
        return acc;
      }, {});

      return this.props.children(socialActions, socialUrls, _clipboardWrapper2.default);
    }
  }], [{
    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 = ShareSettings.calculateWindowPosition(windowSettings.width, windowSettings.popUpWidth);

      windowSettings.popUpTop = windowSettings.height > windowSettings.popUpHeight ? ShareSettings.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: "openShareWindow",
    value: function openShareWindow(url) {
      var _ShareSettings$window = ShareSettings.windowSettings(),
          windowOptions = _ShareSettings$window.windowOptions,
          windowSize = _ShareSettings$window.windowSize;

      var isFacebook = url.indexOf("facebook.com") !== -1;
      var isPinterest = url.indexOf("pinterest.com") !== -1;
      var isReddit = url.indexOf("reddit.com") !== -1;
      var isWhatsApp = url.indexOf("whatsapp.com") !== -1;
      var isTwitter = url.indexOf("twitter.com") !== -1;
      var hasTwitterWidgets = typeof window !== "undefined" && typeof window.__twttr !== "undefined" && window.__twttr.widgets && window.__twttr.widgets.init;
      var shouldOpenWindow = isFacebook || isPinterest || isReddit || isWhatsApp || isTwitter && !hasTwitterWidgets;

      if (shouldOpenWindow) {
        window.open(url, "share", windowOptions + "," + windowSize);
      } else {
        window.location = url;
      }
    }
  }]);
  return ShareSettings;
}(_react2.default.Component);

ShareSettings.propTypes = {
  children: _propTypes2.default.func.isRequired,
  handleClipboardSuccess: _propTypes2.default.func,
  handleClipboardError: _propTypes2.default.func,
  shareContent: _propTypes2.default.shape({
    text: _propTypes2.default.string,
    description: _propTypes2.default.string,
    twitterContent: _propTypes2.default.string,
    image: _propTypes2.default.string,
    url: _propTypes2.default.string,
    via: _propTypes2.default.string,
    weChatQr: _propTypes2.default.string
  }).isRequired
};

ShareSettings.defaultProps = {
  handleClipboardSuccess: function handleClipboardSuccess() {
    return null;
  },
  handleClipboardError: function handleClipboardError() {
    return null;
  }
};

exports.default = ShareSettings;