react-cloudimage-responsive - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/index.js

@@ -1,22 +0,233 @@
-'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; }; }();
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _react = require('react');
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-var _react2 = _interopRequireDefault(_react);
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-require('./styles.css');
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 MyComponent = function MyComponent() {
-  return _react2.default.createElement(
-    'h1',
+import React, { Component } from 'react';
+import { findDOMNode } from 'react-dom';
+import CloudimageProvider, { CloudimageContext } from './Provider';
+import { checkOnMedia, checkIfRelativeUrlPath, getImgSrc, getSizeAccordingToPixelRatio, generateUrl, getParentWidth, generateSources, getRatioBySize } from './utils';
+import LazyLoad from 'react-lazyload';
+
+var ImgWrapper = function ImgWrapper(props) {
+  return React.createElement(
+    CloudimageContext.Consumer,
     null,
-    'Cloudimage Responsive plugin'
+    function (context) {
+      return React.createElement(Img, _extends({}, props, { config: context.config }));
+    }
   );
 };
-exports.default = MyComponent;
+
+var Img = function (_Component) {
+  _inherits(Img, _Component);
+
+  function Img() {
+    _classCallCheck(this, Img);
+
+    var _this = _possibleConstructorReturn(this, (Img.__proto__ || Object.getPrototypeOf(Img)).call(this));
+
+    _this.processImage = function () {
+      var imgNode = findDOMNode(_this);
+      var _this$props = _this.props,
+          _this$props$src = _this$props.src,
+          src = _this$props$src === undefined ? '' : _this$props$src,
+          _this$props$config = _this$props.config,
+          config = _this$props$config === undefined ? {} : _this$props$config;
+
+      var operation = _this.props.operation || _this.props.o || config.operation;
+      var parentContainerWidth = getParentWidth(imgNode, config);
+      var size = _this.props.size || _this.props.s || config.size || parentContainerWidth;
+      var filters = _this.props.filters || _this.props.f || config.filters;
+      var isAdaptive = checkOnMedia(size);
+      var isRelativeUrlPath = checkIfRelativeUrlPath(src);
+      var imgSrc = getImgSrc(src, isRelativeUrlPath, config.baseUrl);
+      var resultSize = isAdaptive ? size : getSizeAccordingToPixelRatio(size);
+      var isPreview = !config.isChrome && parentContainerWidth > 400 && config.lazyLoading;
+      var cloudimageUrl = isAdaptive ? generateUrl('width', parentContainerWidth, filters, imgSrc, config) : generateUrl(operation, resultSize, filters, imgSrc, config);
+      var sources = isAdaptive ? generateSources(operation, resultSize, filters, imgSrc, isAdaptive, config) : [];
+      var previewCloudimageUrl = void 0,
+          previewSources = void 0;
+
+      if (isPreview) {
+        previewCloudimageUrl = isAdaptive ? generateUrl('width', parentContainerWidth / 5, 'q10.foil1', imgSrc, config) : generateUrl(operation, resultSize.split('x').map(function (size) {
+          return size / 5;
+        }).join('x'), 'q10.foil1', imgSrc, config);
+        previewSources = isAdaptive ? generateSources(operation, resultSize, 'q10.foil1', imgSrc, isAdaptive, config, true) : [];
+      }
+
+      _this.setState({
+        cloudimageUrl: cloudimageUrl,
+        previewCloudimageUrl: previewCloudimageUrl,
+        previewSources: previewSources,
+        sources: sources,
+        isAdaptive: isAdaptive,
+        size: size,
+        parentContainerWidth: parentContainerWidth,
+        isProcessed: true,
+        isPreview: isPreview
+      });
+    };
+
+    _this.onImageLoad = function (isPreviewLoaded) {
+      if (!_this.state.isPreview) {
+        _this.setState({ isPreviewLoaded: true, isLoaded: true });
+      } else if (isPreviewLoaded) _this.setState({ isLoaded: true });else _this.setState({ isPreviewLoaded: true });
+    };
+
+    _this.state = {
+      cloudimageUrl: '',
+      sources: [],
+      isLoaded: false,
+      isProcessed: false
+    };
+    return _this;
+  }
+
+  _createClass(Img, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.processImage();
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.config.innerWidth !== this.props.config.innerWidth) this.processImage();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _state = this.state,
+          cloudimageUrl = _state.cloudimageUrl,
+          sources = _state.sources,
+          isLoaded = _state.isLoaded,
+          parentContainerWidth = _state.parentContainerWidth,
+          isProcessed = _state.isProcessed,
+          isPreviewLoaded = _state.isPreviewLoaded,
+          previewCloudimageUrl = _state.previewCloudimageUrl,
+          previewSources = _state.previewSources,
+          isPreview = _state.isPreview;
+
+      var _props = this.props,
+          _props$src = _props.src,
+          src = _props$src === undefined ? '' : _props$src,
+          _props$alt = _props.alt,
+          alt = _props$alt === undefined ? '' : _props$alt,
+          _props$className = _props.className,
+          className = _props$className === undefined ? '' : _props$className,
+          _props$config = _props.config,
+          config = _props$config === undefined ? {} : _props$config,
+          _props$ratio = _props.ratio,
+          ratio = _props$ratio === undefined ? null : _props$ratio,
+          o = _props.o,
+          operation = _props.operation,
+          f = _props.f,
+          filters = _props.filters,
+          s = _props.s,
+          size = _props.size,
+          otherProps = _objectWithoutProperties(_props, ['src', 'alt', 'className', 'config', 'ratio', 'o', 'operation', 'f', 'filters', 's', 'size']);
+
+      if (!isProcessed) return React.createElement('picture', null);
+
+      var ratioBySize = getRatioBySize(this.state.size, config);
+      var imageHeight = Math.floor(parentContainerWidth / (ratioBySize || ratio || 1));
+
+      var pictureWithRatioStyles = ratioBySize || ratio ? _extends({}, styles.pictureWithRatio, {
+        paddingBottom: 100 / (ratioBySize || ratio) + '%',
+        background: config.placeholderBackground
+      }) : {};
+      var imgWithRatioStyles = ratioBySize || ratio ? styles.imgWithRatio : {};
+      var imgLoadingStyles = config.imgLoadingAnimation ? _extends({}, styles.imgWithEffect, { filter: 'blur(' + Math.floor(parentContainerWidth / 100) + 'px)' }) : {};
+      var imgLoadedStyles = isLoaded && config.imgLoadingAnimation ? styles.imgLoaded : {};
+
+      var picture = React.createElement(
+        'picture',
+        {
+          className: className + ' cloudimage-image-picture cloudimage-image-' + (isLoaded ? 'loaded' : 'loading'),
+          style: _extends({}, styles.picture, pictureWithRatioStyles)
+        },
+        (!isPreview ? sources : isPreviewLoaded ? sources : previewSources).map(function (source) {
+          return React.createElement('source', {
+            key: source.srcSet,
+            media: source.mediaQuery || '',
+            srcSet: source.srcSet || '',
+            onLoad: function onLoad() {
+              _this2.onImageLoad(isPreviewLoaded);
+            }
+          });
+        }),
+        React.createElement('img', _extends({
+          style: _extends({}, styles.img, imgWithRatioStyles, imgLoadingStyles, imgLoadedStyles),
+          src: !isPreview ? cloudimageUrl : isPreviewLoaded ? cloudimageUrl : previewCloudimageUrl,
+          alt: alt,
+          onLoad: function onLoad() {
+            _this2.onImageLoad(isPreviewLoaded);
+          }
+        }, otherProps))
+      );
+
+      return config.lazyLoading ? React.createElement(
+        LazyLoad,
+        { height: imageHeight, offset: config.lazyLoadOffset },
+        picture
+      ) : picture;
+    }
+  }]);
+
+  return Img;
+}(Component);
+
+var styles = {
+  picture: {
+    display: 'block',
+    width: '100%',
+    overflow: 'hidden',
+    position: 'relative'
+  },
+
+  pictureWithRatio: {
+    overflow: 'hidden',
+    position: 'relative'
+  },
+
+  img: {
+    display: 'block',
+    width: '100%'
+  },
+
+  imgWithRatio: {
+    position: 'absolute',
+    opacity: 1,
+    top: 0,
+    left: 0,
+    height: '100%'
+  },
+
+  imgWithEffect: {
+    transform: 'scale3d(1.1, 1.1, 1)',
+    transition: 'all 0.3s ease-in-out'
+  },
+
+  imgLoading: {
+    opacity: 1
+  },
+
+  imgLoaded: {
+    opacity: 1,
+    filter: 'blur(0px)',
+    transform: 'translateZ(0) scale3d(1, 1, 1)'
+  }
+};
+
+export default ImgWrapper;
+
+export { CloudimageProvider };

package.json

 {
   "name": "react-cloudimage-responsive",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Cloudimage responsive plugin will make your website load the exact image size you need depending on your user's screen size. Multiple pixel ratios are supported.",
@@ -26,6 +26,12 @@ "main": "dist/index.js",
     "babel-preset-env": "^1.7.0",
+    "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
     "css-loader": "^2.0.0",
     "html-webpack-plugin": "^3.2.0",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "react-lazyload": "^2.3.0",
     "style-loader": "^0.23.1",
+    "throttle-debounce": "^2.0.1",
     "webpack": "^4.27.1",
@@ -32,0 +38,0 @@ "webpack-cli": "^3.1.2",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23936

increased by1478.89%

Number of package files

5

increased by66.67%

Lines of code

440

increased by2488.24%

Worsened metrics

Dev dependency count

17

increased by54.55%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes