mjml-image - npm Package Compare versions

Comparing version 4.7.1 to 4.8.0

lib/index.js

@@ -8,14 +8,4 @@ "use strict";
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -27,124 +17,129 @@
 
-var _widthParser2 = _interopRequireDefault(require("mjml-core/lib/helpers/widthParser"));
+var _widthParser = _interopRequireDefault(require("mjml-core/lib/helpers/widthParser"));
 
-var MjImage = /*#__PURE__*/function (_BodyComponent) {
-  (0, _inherits2["default"])(MjImage, _BodyComponent);
-
-  var _super = (0, _createSuper2["default"])(MjImage);
-
-  function MjImage() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, MjImage);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+class MjImage extends _mjmlCore.BodyComponent {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "headStyle", breakpoint => `
+    @media only screen and (max-width:${breakpoint}) {
+      table.mj-full-width-mobile { width: 100% !important; }
+      td.mj-full-width-mobile { width: auto !important; }
     }
+  `);
+  }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "headStyle", function (breakpoint) {
-      return "\n    @media only screen and (max-width:".concat(breakpoint, ") {\n      table.mj-full-width-mobile { width: 100% !important; }\n      td.mj-full-width-mobile { width: auto !important; }\n    }\n  ");
-    });
-    return _this;
+  getStyles() {
+    const width = this.getContentWidth();
+    const fullWidth = this.getAttribute('full-width') === 'full-width';
+    const {
+      parsedWidth,
+      unit
+    } = (0, _widthParser.default)(width);
+    return {
+      img: {
+        border: this.getAttribute('border'),
+        'border-left': this.getAttribute('border-left'),
+        'border-right': this.getAttribute('border-right'),
+        'border-top': this.getAttribute('border-top'),
+        'border-bottom': this.getAttribute('border-bottom'),
+        'border-radius': this.getAttribute('border-radius'),
+        display: 'block',
+        outline: 'none',
+        'text-decoration': 'none',
+        height: this.getAttribute('height'),
+        'max-height': this.getAttribute('max-height'),
+        'min-width': fullWidth ? '100%' : null,
+        width: '100%',
+        'max-width': fullWidth ? '100%' : null,
+        'font-size': this.getAttribute('font-size')
+      },
+      td: {
+        width: fullWidth ? null : `${parsedWidth}${unit}`
+      },
+      table: {
+        'min-width': fullWidth ? '100%' : null,
+        'max-width': fullWidth ? '100%' : null,
+        width: fullWidth ? `${parsedWidth}${unit}` : null,
+        'border-collapse': 'collapse',
+        'border-spacing': '0px'
+      }
+    };
   }
 
-  (0, _createClass2["default"])(MjImage, [{
-    key: "getStyles",
-    value: function getStyles() {
-      var width = this.getContentWidth();
-      var fullWidth = this.getAttribute('full-width') === 'full-width';
+  getContentWidth() {
+    const width = this.getAttribute('width') ? parseInt(this.getAttribute('width'), 10) : Infinity;
+    const {
+      box
+    } = this.getBoxWidths();
+    return (0, _min2.default)([box, width]);
+  }
 
-      var _widthParser = (0, _widthParser2["default"])(width),
-          parsedWidth = _widthParser.parsedWidth,
-          unit = _widthParser.unit;
+  renderImage() {
+    const height = this.getAttribute('height');
+    const img = `
+      <img
+        ${this.htmlAttributes({
+      alt: this.getAttribute('alt'),
+      height: height && (height === 'auto' ? height : parseInt(height, 10)),
+      src: this.getAttribute('src'),
+      srcset: this.getAttribute('srcset'),
+      sizes: this.getAttribute('sizes'),
+      style: 'img',
+      title: this.getAttribute('title'),
+      width: this.getContentWidth(),
+      usemap: this.getAttribute('usemap')
+    })}
+      />
+    `;
 
-      return {
-        img: {
-          border: this.getAttribute('border'),
-          'border-left': this.getAttribute('left'),
-          'border-right': this.getAttribute('right'),
-          'border-top': this.getAttribute('top'),
-          'border-bottom': this.getAttribute('bottom'),
-          'border-radius': this.getAttribute('border-radius'),
-          display: 'block',
-          outline: 'none',
-          'text-decoration': 'none',
-          height: this.getAttribute('height'),
-          'max-height': this.getAttribute('max-height'),
-          'min-width': fullWidth ? '100%' : null,
-          width: '100%',
-          'max-width': fullWidth ? '100%' : null,
-          'font-size': this.getAttribute('font-size')
-        },
-        td: {
-          width: fullWidth ? null : "".concat(parsedWidth).concat(unit)
-        },
-        table: {
-          'min-width': fullWidth ? '100%' : null,
-          'max-width': fullWidth ? '100%' : null,
-          width: fullWidth ? "".concat(parsedWidth).concat(unit) : null,
-          'border-collapse': 'collapse',
-          'border-spacing': '0px'
-        }
-      };
+    if (this.getAttribute('href')) {
+      return `
+        <a
+          ${this.htmlAttributes({
+        href: this.getAttribute('href'),
+        target: this.getAttribute('target'),
+        rel: this.getAttribute('rel'),
+        name: this.getAttribute('name')
+      })}
+        >
+          ${img}
+        </a>
+      `;
     }
-  }, {
-    key: "getContentWidth",
-    value: function getContentWidth() {
-      var width = this.getAttribute('width') ? parseInt(this.getAttribute('width'), 10) : Infinity;
 
-      var _this$getBoxWidths = this.getBoxWidths(),
-          box = _this$getBoxWidths.box;
+    return img;
+  }
 
-      return (0, _min2["default"])([box, width]);
-    }
-  }, {
-    key: "renderImage",
-    value: function renderImage() {
-      var height = this.getAttribute('height');
-      var img = "\n      <img\n        ".concat(this.htmlAttributes({
-        alt: this.getAttribute('alt'),
-        height: height && (height === 'auto' ? height : parseInt(height, 10)),
-        src: this.getAttribute('src'),
-        srcset: this.getAttribute('srcset'),
-        sizes: this.getAttribute('sizes'),
-        style: 'img',
-        title: this.getAttribute('title'),
-        width: this.getContentWidth(),
-        usemap: this.getAttribute('usemap')
-      }), "\n      />\n    ");
+  render() {
+    return `
+      <table
+        ${this.htmlAttributes({
+      border: '0',
+      cellpadding: '0',
+      cellspacing: '0',
+      role: 'presentation',
+      style: 'table',
+      class: this.getAttribute('fluid-on-mobile') ? 'mj-full-width-mobile' : null
+    })}
+      >
+        <tbody>
+          <tr>
+            <td ${this.htmlAttributes({
+      style: 'td',
+      class: this.getAttribute('fluid-on-mobile') ? 'mj-full-width-mobile' : null
+    })}>
+              ${this.renderImage()}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `;
+  }
 
-      if (this.getAttribute('href')) {
-        return "\n        <a\n          ".concat(this.htmlAttributes({
-          href: this.getAttribute('href'),
-          target: this.getAttribute('target'),
-          rel: this.getAttribute('rel'),
-          name: this.getAttribute('name')
-        }), "\n        >\n          ").concat(img, "\n        </a>\n      ");
-      }
+}
 
-      return img;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return "\n      <table\n        ".concat(this.htmlAttributes({
-        border: '0',
-        cellpadding: '0',
-        cellspacing: '0',
-        role: 'presentation',
-        style: 'table',
-        "class": this.getAttribute('fluid-on-mobile') ? 'mj-full-width-mobile' : null
-      }), "\n      >\n        <tbody>\n          <tr>\n            <td ").concat(this.htmlAttributes({
-        style: 'td',
-        "class": this.getAttribute('fluid-on-mobile') ? 'mj-full-width-mobile' : null
-      }), ">\n              ").concat(this.renderImage(), "\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    ");
-    }
-  }]);
-  return MjImage;
-}(_mjmlCore.BodyComponent);
-
-exports["default"] = MjImage;
-(0, _defineProperty2["default"])(MjImage, "tagOmission", true);
-(0, _defineProperty2["default"])(MjImage, "allowedAttributes", {
+exports.default = MjImage;
+(0, _defineProperty2.default)(MjImage, "componentName", 'mj-image');
+(0, _defineProperty2.default)(MjImage, "tagOmission", true);
+(0, _defineProperty2.default)(MjImage, "allowedAttributes", {
   alt: 'string',
@@ -179,3 +174,3 @@ href: 'string',
 });
-(0, _defineProperty2["default"])(MjImage, "defaultAttributes", {
+(0, _defineProperty2.default)(MjImage, "defaultAttributes", {
   align: 'center',
@@ -182,0 +177,0 @@ border: '0',

package.json

 {
   "name": "mjml-image",
   "description": "mjml-image",
-  "version": "4.7.1",
+  "version": "4.8.0",
   "main": "lib/index.js",
@@ -26,3 +26,3 @@ "files": [
     "lodash": "^4.17.15",
-    "mjml-core": "4.7.1"
+    "mjml-core": "4.8.0"
   },
@@ -33,3 +33,3 @@ "devDependencies": {
   },
-  "gitHead": "6bb3e08efb912765d5195d35dc19ce61cdd6306a"
+  "gitHead": "6037a02810ea9a0cb62965ba81712fdf536b958b"
 }

README.md

@@ -30,2 +30,6 @@ ## mj-image
 border                        | string        | css border definition          | none
+border-top                    | string        | css border definition          | none
+border-bottom                 | string        | css border definition          | none
+border-left                   | string        | css border definition          | none
+border-right                  | string        | css border definition          | none
 border-radius                 | px            | border radius                  | n/a
@@ -37,2 +41,3 @@ container-background-color    | color         | inner element background color | n/a
 href                          | url           | link to redirect to on click   | n/a
+name                          | string        | specify the link name attribute | n/a
 padding                       | px            | supports up to 4 parameters    | 10px 25px
@@ -51,2 +56,1 @@ padding-bottom                | px            | bottom offset                  | n/a
 width                         | px            | image width                    | 100%
-

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

354

increased by1.43%

Number of lines in readme file

54

increased by8%

Worsened metrics

Total package byte prevSize

17656

decreased by-5.72%

Dependency changes

• + Addedcliui@7.0.4(transitive)

• + Addedcommander@2.20.3(transitive)

• + Addeddetect-node@2.0.4(transitive)

• + Addedescalade@3.2.0(transitive)

• + Addedhtml-minifier@4.0.0(transitive)

• + Addedmjml-core@4.8.0(transitive)

• + Addedmjml-migrate@4.8.0(transitive)

• + Addedmjml-parser-xml@4.8.0(transitive)

• + Addedmjml-validator@4.8.0(transitive)

• + Addeduglify-js@3.19.3(transitive)

• + Addedy18n@5.0.8(transitive)

• + Addedyargs@16.2.0(transitive)

• + Addedyargs-parser@20.2.9(transitive)

• - Removedcamelcase@5.3.1(transitive)

• - Removedcliui@6.0.0(transitive)

• - Removedcommander@2.17.12.19.0(transitive)

• - Removeddecamelize@1.2.0(transitive)

• - Removedfind-up@4.1.0(transitive)

• - Removedhtml-minifier@3.5.21(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedlocate-path@5.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedmjml-core@4.7.1(transitive)

• - Removedmjml-migrate@4.7.1(transitive)

• - Removedmjml-parser-xml@4.7.1(transitive)

• - Removedmjml-validator@4.7.1(transitive)

• - Removedp-limit@2.3.0(transitive)

• - Removedp-locate@4.1.0(transitive)

• - Removedp-try@2.2.0(transitive)

• - Removedpath-exists@4.0.0(transitive)

• - Removedrequire-main-filename@2.0.0(transitive)

• - Removedset-blocking@2.0.0(transitive)

• - Removeduglify-js@3.4.10(transitive)

• - Removedwarning@3.0.0(transitive)

• - Removedwhich-module@2.0.1(transitive)

• - Removedwrap-ansi@6.2.0(transitive)

• - Removedy18n@4.0.3(transitive)

• - Removedyargs@15.4.1(transitive)

• - Removedyargs-parser@18.1.3(transitive)

• Updatedmjml-core@4.8.0