You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

mjml-social

Package Overview
Dependencies
Maintainers
4
Versions
130
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mjml-social - npm Package Compare versions

Comparing version

3.3.3-beta.2
to
4.0.0-alpha.1

lib/Social.js
lib/SocialElement.js

402

lib/index.js

@@ -7,403 +7,13 @@ 'use strict';

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 _Social = require('./Social');
var _class;
var _Social2 = _interopRequireDefault(_Social);
var _mjmlCore = require('mjml-core');
var _SocialElement = require('./SocialElement');
var _tap = require('lodash/tap');
var _SocialElement2 = _interopRequireDefault(_SocialElement);
var _tap2 = _interopRequireDefault(_tap);
var _clone = require('lodash/clone');
var _clone2 = _interopRequireDefault(_clone);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
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 tagName = 'mj-social';
var parentTag = ['mj-column', 'mj-hero-content'];
var selfClosingTag = true;
var defaultMJMLDefinition = {
attributes: {
'align': 'center',
'base-url': 'https://www.mailjet.com/images/theme/v1/icons/ico-social/',
'border-radius': '3px',
'color': '#333333',
'container-background-color': null,
'display': 'facebook:share twitter:share google:share',
'facebook-content': 'Share',
'facebook-href': '[[SHORT_PERMALINK]]',
'facebook-rel': null,
'facebook-icon-color': '#3b5998',
'font-family': 'Ubuntu, Helvetica, Arial, sans-serif',
'font-size': '13px',
'google-content': '+1',
'google-href': '[[SHORT_PERMALINK]]',
'google-rel': null,
'google-icon-color': '#dc4e41',
'icon-size': '20px',
'inner-padding': null,
'instagram-content': 'Share',
'instagram-href': '[[SHORT_PERMALINK]]',
'instagram-rel': null,
'instagram-icon-color': '#3f729b',
'line-height': '22px',
'linkedin-content': 'Share',
'linkedin-href': '[[SHORT_PERMALINK]]',
'linkedin-rel': null,
'linkedin-icon-color': '#0077b5',
'mode': 'horizontal',
'padding-bottom': null,
'padding-left': null,
'padding-right': null,
'padding-top': null,
'padding': '10px 25px',
'pinterest-content': 'Pin it',
'pinterest-href': '[[SHORT_PERMALINK]]',
'pinterest-rel': null,
'pinterest-icon-color': '#bd081c',
'text-decoration': 'none',
'text-mode': true,
'twitter-content': 'Tweet',
'twitter-href': '[[SHORT_PERMALINK]]',
'twitter-rel': null,
'twitter-icon-color': '#55acee',
'vertical-align': null
}
};
var baseStyles = {
tableHorizontal: {
float: 'none',
display: 'inline-table'
},
tableVertical: {
margin: '0px'
},
td1: {
padding: '4px',
verticalAlign: 'middle'
},
td2: {
verticalAlign: 'middle'
},
tdText: {
padding: '4px 4px 4px 0',
verticalAlign: 'middle'
},
a: {
textDecoration: 'none',
textAlign: 'left',
display: 'block'
},
img: {
display: 'block'
}
};
var buttonDefinitions = {
facebook: {
linkAttribute: 'https://www.facebook.com/sharer/sharer.php?u=[[URL]]',
icon: 'facebook.png'
},
twitter: {
linkAttribute: 'https://twitter.com/home?status=[[URL]]',
icon: 'twitter.png'
},
google: {
linkAttribute: 'https://plus.google.com/share?url=[[URL]]',
icon: 'google-plus.png'
},
pinterest: {
linkAttribute: 'https://pinterest.com/pin/create/button/?url=[[URL]]&amp;media=&amp;description=',
icon: 'pinterest.png'
},
linkedin: {
linkAttribute: 'https://www.linkedin.com/shareArticle?mini=true&amp;url=[[URL]]&amp;title=&amp;summary=&amp;source=',
icon: 'linkedin.png'
},
instagram: {
linkAttribute: '[[URL]]',
icon: 'instagram.png'
}
};
var postRender = function postRender($) {
$('.mj-social-outlook-open').each(function () {
$(this).replaceWith(_mjmlCore.helpers.startConditionalTag + '\n <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="' + $(this).data('align') + '"><tr><td>\n ' + _mjmlCore.helpers.endConditionalTag);
});
$('.mj-social-outlook-line').each(function () {
$(this).replaceWith(_mjmlCore.helpers.startConditionalTag + '\n </td><td>\n ' + _mjmlCore.helpers.endConditionalTag);
});
$('.mj-social-outlook-close').each(function () {
$(this).replaceWith(_mjmlCore.helpers.startConditionalTag + '\n </td></tr></table>\n ' + _mjmlCore.helpers.endConditionalTag);
});
return $;
};
var Social = (0, _mjmlCore.MJMLElement)(_class = function (_Component) {
_inherits(Social, _Component);
function Social() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, Social);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Social.__proto__ || Object.getPrototypeOf(Social)).call.apply(_ref, [this].concat(args))), _this), _this.styles = _this.getStyles(), _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Social, [{
key: 'getStyles',
value: function getStyles() {
var _props = this.props,
mjAttribute = _props.mjAttribute,
defaultUnit = _props.defaultUnit;
return _mjmlCore.helpers.merge({}, baseStyles, {
a: {
color: mjAttribute('color'),
fontFamily: mjAttribute('font-family'),
fontSize: defaultUnit(mjAttribute('font-size'), 'px'),
fontStyle: mjAttribute('font-style'),
fontWeight: mjAttribute('font-weight'),
lineHeight: mjAttribute('line-height'),
textDecoration: mjAttribute('text-decoration'),
borderRadius: defaultUnit(mjAttribute('border-radius'), 'px')
},
img: {
borderRadius: defaultUnit(mjAttribute('border-radius'), 'px')
},
td1: {
padding: defaultUnit(mjAttribute('inner-padding'))
},
td2: {
width: defaultUnit(mjAttribute('icon-size'), 'px'),
height: defaultUnit(mjAttribute('icon-size'), 'px')
}
});
}
}, {
key: 'isHorizontal',
value: function isHorizontal() {
var mjAttribute = this.props.mjAttribute;
return mjAttribute('mode') == 'horizontal';
}
}, {
key: 'isInTextMode',
value: function isInTextMode() {
var mjAttribute = this.props.mjAttribute;
return mjAttribute('text-mode') === true || mjAttribute('text-mode') === 'true';
}
}, {
key: 'renderSocialButton',
value: function renderSocialButton(platform, share) {
var mjAttribute = this.props.mjAttribute;
var definition = this.getDefinitionForPlatform(platform);
var href = share ? definition.linkAttribute.replace('[[URL]]', mjAttribute(platform + '-href')) : mjAttribute(platform + '-href');
var iconStyle = {
background: mjAttribute(platform + '-icon-color'),
borderRadius: this.styles.img.borderRadius,
width: mjAttribute('icon-size')
};
return _react2.default.createElement(
'tr',
{ key: platform },
_react2.default.createElement(
'td',
{ style: this.styles.td1 },
_react2.default.createElement(
'table',
{
role: 'presentation',
cellPadding: '0',
cellSpacing: '0',
'data-legacy-border': '0',
style: iconStyle },
_react2.default.createElement(
'tbody',
null,
_react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'td',
{
style: this.styles.td2 },
_react2.default.createElement(
'a',
{ href: href, rel: mjAttribute(platform + '-rel') },
_react2.default.createElement('img', {
alt: platform,
height: parseInt(mjAttribute('icon-size')),
src: definition.icon,
style: this.styles.img,
width: parseInt(mjAttribute('icon-size')) })
)
)
)
)
)
),
this.isInTextMode() && _react2.default.createElement(
'td',
{ style: this.styles.tdText },
_react2.default.createElement('a', {
dangerouslySetInnerHTML: { __html: mjAttribute(platform + '-content') },
href: href,
style: this.styles.a })
)
);
}
}, {
key: 'getDefinitionForPlatform',
value: function getDefinitionForPlatform(platform) {
var mjAttribute = this.props.mjAttribute;
if (buttonDefinitions[platform]) {
return (0, _tap2.default)((0, _clone2.default)(buttonDefinitions[platform]), function (buttonDefinition) {
return buttonDefinition.icon = mjAttribute('base-url') + buttonDefinition.icon;
});
}
if (!mjAttribute(platform + '-icon-color') || !mjAttribute(platform + '-icon') || !mjAttribute(platform + '-href') || this.isInTextMode() && !mjAttribute(platform + '-content')) {
return;
}
return {
linkAttribute: "[[URL]]",
icon: mjAttribute(platform + '-icon')
};
}
}, {
key: 'renderSocialButtons',
value: function renderSocialButtons() {
var _this2 = this;
var mjAttribute = this.props.mjAttribute;
var platforms = mjAttribute('display');
if (!platforms) {
return;
}
return platforms.split(' ').map(function (label) {
var platform = label.split(':')[0];
var share = label.split(':')[1];
if (!_this2.getDefinitionForPlatform(platform)) {
return null;
}
return _this2.renderSocialButton(platform, share !== 'url');
});
}
}, {
key: 'renderHorizontal',
value: function renderHorizontal() {
var _this3 = this;
var mjAttribute = this.props.mjAttribute;
var socialButtons = this.renderSocialButtons().map(function (socialButton, index) {
return _react2.default.createElement(
'table',
{
role: 'presentation',
cellPadding: '0',
cellSpacing: '0',
'data-legacy-align': mjAttribute('align'),
'data-legacy-border': '0',
key: 'wrapped-social-button-' + index // eslint-disable-line react/no-array-index-key
, style: _this3.styles.tableHorizontal },
_react2.default.createElement(
'tbody',
null,
socialButton
)
);
}).reduce(function (result, socialButton, index) {
result.push(socialButton);
result.push(_react2.default.createElement('div', {
className: 'mj-social-outlook-line',
key: 'outlook-line-' + index // eslint-disable-line react/no-array-index-key
}));
return result;
}, [_react2.default.createElement('div', { className: 'mj-social-outlook-open', key: 'outlook-open', 'data-legacy-align': mjAttribute('align') })]);
socialButtons[socialButtons.length - 1] = _react2.default.createElement('div', { className: 'mj-social-outlook-close', key: 'outlook-close' });
return socialButtons;
}
}, {
key: 'renderVertical',
value: function renderVertical() {
var mjAttribute = this.props.mjAttribute;
return _react2.default.createElement(
'table',
{
role: 'presentation',
cellPadding: '0',
cellSpacing: '0',
'data-legacy-border': '0',
'data-legacy-align': mjAttribute('align'),
style: this.styles.tableVertical },
_react2.default.createElement(
'tbody',
null,
this.renderSocialButtons()
)
);
}
}, {
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
null,
this.isHorizontal() ? this.renderHorizontal() : this.renderVertical()
);
}
}]);
return Social;
}(_react.Component)) || _class;
Social.tagName = tagName;
Social.parentTag = parentTag;
Social.selfClosingTag = selfClosingTag;
Social.defaultMJMLDefinition = defaultMJMLDefinition;
Social.baseStyles = baseStyles;
Social.buttonDefinitions = buttonDefinitions;
Social.postRender = postRender;
exports.default = Social;
exports.default = { Social: _Social2.default, SocialElement: _SocialElement2.default };
module.exports = exports['default'];

11

package.json
{
"name": "mjml-social",
"description": "mjml-social",
"version": "3.3.3-beta.2",
"version": "4.0.0-alpha.1",
"main": "lib/index.js",

@@ -15,7 +15,10 @@ "repository": {

"homepage": "https://mjml.io",
"scripts": {
"clean": "../../node_modules/.bin/rimraf lib",
"build": "../../node_modules/.bin/babel src --out-dir lib"
},
"dependencies": {
"lodash": "^4.17.4",
"mjml-core": "~3.3.3-beta.2",
"react": "^15.4.2"
"lodash": "^4.17.2",
"mjml-core": "^4.0.0-alpha.1"
}
}

6

README.md

@@ -60,3 +60,2 @@ ## mjml-social

facebook-href | url | button redirection url | [[SHORT_PERMALINK]]
facebook-rel | string | specify the rel attribute | n/a
facebook-icon-color | color | icon color | #3b5998

@@ -67,3 +66,2 @@ font-family | string | font name | Ubuntu, Helvetica, Arial, sans-serif

google-href | url | button redirection url | [[SHORT_PERMALINK]]
google-rel | string | specify the rel attribute | n/a
google-icon-color | color | icon color | #dc4e41

@@ -73,3 +71,2 @@ icon-size | percent/px | icon size | 20px

instagram-href | url | button redirection url | [[SHORT_PERMALINK]]
instagram-rel | string | specify the rel attribute | n/a
instagram-icon-color | color | icon color | #3f729b

@@ -79,3 +76,2 @@ line-height | percent/px | space between lines | 22px

linkedin-href | url | button redirection url | [[SHORT_PERMALINK]]
linkedin-rel | string | specify the rel attribute | n/a
linkedin-icon-color | color | icon color | #0077b5

@@ -85,3 +81,2 @@ mode | string | vertical/horizontal | horizontal

pinterest-href | url | button redirection url | [[SHORT_PERMALINK]]
pinterest-rel | string | specify the rel attribute | n/a
pinterest-icon-color | color | icon color | #bd081c

@@ -92,3 +87,2 @@ text-decoration | string | underline/overline/none | none

twitter-href | url | button redirection url | [[SHORT_PERMALINK]]
twitter-rel | string | specify the rel attribute | n/a
twitter-icon-color | color | icon color | #55acee

@@ -95,0 +89,0 @@ align | string | left/right/center | center

yarn.lock

Sorry, the diff of this file is not supported yet