react-pinterest2
Version:
Collection of embeddable Pinterest buttons and widgets
219 lines (175 loc) • 8.47 kB
JavaScript
;
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; }; })();
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _PinterestBase2 = require('./PinterestBase');
var _PinterestBase3 = _interopRequireDefault(_PinterestBase2);
var _PinterestAnchor = require('./PinterestAnchor');
var _PinterestAnchor2 = _interopRequireDefault(_PinterestAnchor);
var _PinConfig = require('../util/PinConfig');
var _PinConfig2 = _interopRequireDefault(_PinConfig);
var _PinConst = require('../util/PinConst');
var _PinConst2 = _interopRequireDefault(_PinConst);
var _PinUtil = require('../util/PinUtil');
var _PinUtil2 = _interopRequireDefault(_PinUtil);
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; }
/**
* This is the classic Pin It button, with several optional props. The
* default state is a small, rectangular, gray button.
*
* <PinItButton type="any" color="white" large={true}/>
*
* @prop {string} type - enum of { any, one }: default 'any'
* @prop {string} color - enum of { red, white, grey }: default grey
* @prop {boolean} large - is large sized button: default false
* @prop {boolean} round - is circular button: default false
* For type="one" you can either repin or create a new Pin
* @prop {string} pin - the id of the Pin to repin
* @prop {string} media - the image url of the Pin to create
* @prop {string} url - the link back of the Pin to create
* @prop {string} description - the description of the Pin to create
*/
var PinItButton = (function (_PinterestBase) {
_inherits(PinItButton, _PinterestBase);
function PinItButton(props) {
_classCallCheck(this, PinItButton);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(PinItButton).call(this, props));
_this.logCount(_PinConst2.default.COUNT.BUTTON);
return _this;
}
/**
* Build the url for the button image based on the color, size, and shape
* @returns {string} the url for the button's image
*/
_createClass(PinItButton, [{
key: 'getButtonImage',
value: function getButtonImage() {
var _props = this.props;
var color = _props.color;
var large = _props.large;
var round = _props.round;
var shape = round ? 'round' : 'rect';
var size = round ? large ? '32' : '16' : large ? '28' : '20';
var _color = round ? 'red' : color;
var resolution = _PinUtil2.default.getResolution();
return '//s-passets.pinimg.com/images/pidgets/pinit_bg_en_' + shape + '_' + _color + '_' + size + '_' + resolution + '.png';
}
/**
* Build the classname dynamically based on requested size and shape
* @returns {string} the classname to be applied
*/
}, {
key: 'getClasses',
value: function getClasses() {
return 'pinterest-pinit-button ' + (this.props.large ? 'pinit-button--large ' : '') + (this.props.round ? 'pinit-button--round' : '');
}
/**
* Build the inline style for the icon
* @returns {object} the inline style object for the button
*/
}, {
key: 'getButtonStyle',
value: function getButtonStyle() {
return { backgroundImage: 'url(' + this.getButtonImage() + ')' };
}
/**
* Download the bookmarklet code to open the image picker for pinning any valid image
* @param {event} evt - the corresponding click event
*/
}, {
key: 'pinAny',
value: function pinAny(evt) {
evt.preventDefault();
var url = _PinConst2.default.URL.PINMARKLET + '?r=' + Math.random() * 99999999;
_PinUtil2.default.loadScript(url, { pinMethod: 'button' });
_PinUtil2.default.log({ type: 'button_pinit_bookmarklet', href: _PinConst2.default.URL.PIN_CREATE });
}
/**
* Render helper for a pin one button
* @returns {JSX}
*/
}, {
key: 'renderPinOne',
value: function renderPinOne() {
var _props2 = this.props;
var pin = _props2.pin;
var media = _props2.media;
var url = _props2.url;
var description = _props2.description;
var href = undefined;
if (pin) {
href = _PinConst2.default.URL.REPIN.replace('<id>', pin) + ('?guid=' + _PinConfig2.default.guid);
} else {
href = _PinConst2.default.URL.PIN_CREATE + ('?guid=' + _PinConfig2.default.guid);
href += '&media=' + encodeURIComponent(media);
href += '&url=' + encodeURIComponent(url || document.URL);
href += '&description=' + encodeURIComponent(description || document.title);
}
return _react2.default.createElement(
_PinterestAnchor2.default,
{ className: this.getClasses(), href: href, log: 'button_pinit', popup: 'pin_create' },
_react2.default.createElement('i', { style: this.getButtonStyle() })
);
}
/**
* Render helper for a pin any button
* @returns {JSX}
*/
}, {
key: 'renderPinAny',
value: function renderPinAny() {
return _react2.default.createElement(
'a',
{ className: this.getClasses(), href: _PinConst2.default.URL.PIN_CREATE, onClick: this.pinAny.bind(this) },
_react2.default.createElement('i', { style: this.getButtonStyle() })
);
}
/**
* Render method. Deviates in href and click handler based on
* the <type> of the Pin It button.
*/
}, {
key: 'render',
value: function render() {
var classes = this.getClasses();
if (this.props.type === 'one') {
if (this.props.pin || this.props.media) {
return this.renderPinOne();
} else {
console.warn('PinItButton with type="one" requires <pin> or <media>');
return this.renderPinAny();
}
} else {
return this.renderPinAny();
}
}
}]);
return PinItButton;
})(_PinterestBase3.default);
exports.default = PinItButton;
PinItButton.propTypes = {
type: _react2.default.PropTypes.string,
color: _react2.default.PropTypes.string,
large: _react2.default.PropTypes.bool,
round: _react2.default.PropTypes.bool,
pin: _react2.default.PropTypes.string,
media: _react2.default.PropTypes.string,
url: _react2.default.PropTypes.string,
description: _react2.default.PropTypes.string
};
PinItButton.defaultProps = {
type: 'any',
color: 'gray',
large: false,
round: false,
pin: null,
media: null,
url: '',
description: ''
};