js-cloudimg-responsive - npm Package Compare versions

Comparing version 0.0.5 to 1.0.0

dist/ci.service.js

@@ -15,2 +15,4 @@ 'use strict';
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -72,10 +74,9 @@
       ratio: ratio,
-      presets: presets ? (0, _ci.getPresets)(presets, 'presets') : {
-        xs: 575, // up to 576    PHONE
-        sm: 767, // 577 - 768    PHABLET
-        md: 991, // 769 - 992    TABLET
-        lg: 1199, // 993 - 1200   SMALL_LAPTOP_SCREEN
-        xl: 3000 // from 1200    USUALSCREEN
+      presets: presets ? presets : {
+        xs: '(max-width: 575px)', // to 575       PHONE
+        sm: '(min-width: 576px)', // 576 - 767    PHABLET
+        md: '(min-width: 768px)', // 768 - 991    TABLET
+        lg: '(min-width: 992px)', // 992 - 1199   SMALL_LAPTOP_SCREEN
+        xl: '(min-width: 1200px)' // from 1200    USUALSCREEN
       },
-      order: presets ? (0, _ci.getPresets)(presets, 'order') : ['xl', 'lg', 'md', 'sm', 'xs'],
       queryString: queryString,
@@ -116,3 +117,4 @@ innerWidth: window.innerWidth
       var images = (0, _ci.filterImages)(document.querySelectorAll('img[ci-src]'), 'ci-src');
-      var backgroundImages = (0, _ci.filterImages)(document.querySelectorAll('[ci-background]'), 'ci-background');
+      // in progress
+      //const backgroundImages = filterImages(document.querySelectorAll('[ci-background]'), 'ci-background');
 
@@ -122,5 +124,4 @@ images.forEach(function (image) {
       });
-      backgroundImages.forEach(function (image) {
-        _this2.processBackgroundImage(image);
-      });
+      // in progress
+      //backgroundImages.forEach((image) => { this.processBackgroundImage(image); });
     }
@@ -150,2 +151,6 @@ }, {
       var isAdaptive = (0, _ci.checkOnMedia)(size);
+      size = isAdaptive ? (0, _ci.getAdaptiveSize)(size, this.config) : size;
+
+      if (isAdaptive && isUpdate) return;
+
       var ratioBySize = (0, _ci.getRatioBySize)(size, this.config);
@@ -157,3 +162,2 @@ var imageHeight = Math.floor(parentContainerWidth / (ratioBySize || ratio));
       ratio = ratio || this.config.ratio;
-      size = isAdaptive ? eval('(' + size + ')') : size;
 
@@ -165,5 +169,4 @@ var isRelativeUrlPath = (0, _ci.checkIfRelativeUrlPath)(src);
       var isPreview = parentContainerWidth > 400 && this.config.lazyLoading;
-      var cloudimageUrl = isAdaptive ? (0, _ci.generateUrl)('width', parentContainerWidth, filters, imgSrc, this.config) : (0, _ci.generateUrl)(operation, resultSize, filters, imgSrc, this.config);
 
-      if (this.config.imgLoadingAnimation) {
+      if (this.config.imgLoadingAnimation && !isUpdate) {
         this.setAnimation(image, parentContainerWidth);
@@ -188,26 +191,25 @@ }
 
-      if (isAdaptive && !isPreview) {
+      if (isAdaptive) {
+        var fallbackImageUrl = (0, _ci.generateUrl)('width', (0, _ci.getSizeAccordingToPixelRatio)(parentContainerWidth), filters, imgSrc, this.config);
         this.wrapWithPicture(image);
+        var onImageLoad = function onImageLoad() {
+          wrapper.style.background = 'transparent';
+          wrapper.style.paddingBottom = '0';
+          (0, _ci.removeClass)(image, 'ci-image-ratio');
+          (0, _ci.removeClass)(wrapper, 'ci-image-wrapper-ratio');
+          _this3.finishAnimation(image);
+        };
 
-        var sources = (0, _ci.generateSources)(operation, resultSize, filters, imgSrc, isAdaptive, this.config);
+        if (!isPreview) {
+          var sources = (0, _ci.generateSources)(operation, resultSize, filters, imgSrc, isAdaptive, this.config);
 
-        this.addSources(image, sources);
-        this.setSrc(image, cloudimageUrl);
+          this.addSources(image, sources);
+          this.setSrc(image, fallbackImageUrl);
 
-        if (this.config.imgLoadingAnimation) {
-          image.onload = function () {
-            wrapper.style.background = 'transparent';
-            _this3.finishAnimation(image);
-          };
-        }
-      } else if (isAdaptive && isPreview && isRatio) {
-        this.wrapWithPicture(image);
-
-        var previewImg = null;
-        var container = image.parentNode.parentNode;
-        var isPreviewImg = container.className.indexOf('ci-with-preview-image') > -1;
-
-        if (isPreviewImg) {
-          previewImg = container.querySelector('img.ci-image-preview');
+          if (this.config.imgLoadingAnimation) {
+            image.onload = onImageLoad;
+          }
         } else {
+          var previewImg = null;
+          var container = image.parentNode.parentNode;
           var pictureElem = container.querySelector('picture');
@@ -219,27 +221,27 @@
           container.insertBefore(previewImg, pictureElem);
-        }
 
-        this.wrapWithPicture(previewImg);
+          this.wrapWithPicture(previewImg);
 
-        this.setAnimation(previewImg, parentContainerWidth);
+          if (!isUpdate) this.setAnimation(previewImg, parentContainerWidth);
 
-        var config = _extends({}, this.config, { queryString: '' });
-        var url = (0, _ci.generateUrl)('width', parentContainerWidth / 5, 'q5.foil1', imgSrc, config);
-        var _sources = (0, _ci.generateSources)(operation, resultSize, filters, imgSrc, isAdaptive, this.config);
-        var previewSources = (0, _ci.generateSources)(operation, resultSize, 'q5.foil1', imgSrc, isAdaptive, config, true);
+          var config = _extends({}, this.config, { queryString: '' });
+          var url = (0, _ci.generateUrl)('width', parentContainerWidth / 5, 'q5.foil1', imgSrc, config);
+          var _sources = (0, _ci.generateSources)(operation, resultSize, filters, imgSrc, isAdaptive, this.config);
+          var previewSources = (0, _ci.generateSources)(operation, resultSize, 'q5.foil1', imgSrc, isAdaptive, config, true);
 
-        this.addSources(previewImg, previewSources);
-        this.addSources(image, _sources);
+          this.addSources(previewImg, previewSources);
+          this.addSources(image, _sources);
 
-        this.setSrc(previewImg, url);
-        this.setSrc(image, cloudimageUrl);
+          this.setSrc(previewImg, url);
+          this.setSrc(image, fallbackImageUrl);
 
-        image.onload = function () {
-          wrapper.style.background = 'transparent';
-          previewImg.style.display = 'none';
-          _this3.finishAnimation(image);
-        };
+          image.onload = function () {
+            onImageLoad();
+            previewImg.style.display = 'none';
+          };
+        }
       } else if (isPreview && isRatio) {
+        var cloudimageUrl = (0, _ci.generateUrl)(operation, resultSize, filters, imgSrc, this.config);
         var _container = image.parentNode;
-        var _isPreviewImg = _container.className.indexOf('ci-with-preview-image') > -1;
+        var isPreviewImg = _container.className.indexOf('ci-with-preview-image') > -1;
         var _config = _extends({}, this.config, { queryString: '' });
@@ -252,3 +254,3 @@ var _size = resultSize.split('x').map(function (size) {
 
-        if (_isPreviewImg) {
+        if (isPreviewImg) {
           _previewImg = _container.querySelector('img.ci-image-preview');
@@ -262,3 +264,3 @@ } else {
 
-        this.setAnimation(_previewImg, parentContainerWidth);
+        if (!isUpdate) this.setAnimation(_previewImg, parentContainerWidth);
         this.setSrc(_previewImg, _url, 'data-src');
@@ -274,2 +276,4 @@
       } else {
+        var _cloudimageUrl = (0, _ci.generateUrl)(operation, resultSize, filters, imgSrc, this.config);
+
         image.onload = function () {
@@ -279,3 +283,3 @@ wrapper.style.background = 'transparent';
         };
-        this.setSrc(image, cloudimageUrl);
+        this.setSrc(image, _cloudimageUrl);
       }
@@ -385,12 +389,24 @@ }
 
-      previewSources.forEach(function (previewSources) {
-        var source = document.createElement('source');
+      [].concat(_toConsumableArray(previewSources.slice(1).reverse())).forEach(function (_ref) {
+        var mediaQuery = _ref.mediaQuery,
+            srcSet = _ref.srcSet;
 
-        source.media = previewSources.mediaQuery;
-        _this4.setSrcset(source, previewSources.srcSet);
+        var source = _this4.createSrouce(mediaQuery, srcSet);
 
         (0, _ci.insertSource)(image, source);
       });
+
+      (0, _ci.insertSource)(image, this.createSrouce(null, previewSources[0].srcSet));
     }
   }, {
+    key: 'createSrouce',
+    value: function createSrouce(mediaQuery, srcSet) {
+      var source = document.createElement('source');
+
+      if (mediaQuery) source.media = mediaQuery;
+      this.setSrcset(source, srcSet);
+
+      return source;
+    }
+  }, {
     key: 'updateSources',
@@ -397,0 +413,0 @@ value: function updateSources(image, previewSources, sources) {

dist/ci.utils.js

@@ -9,28 +9,9 @@ 'use strict';
 
-var getPresets = function getPresets() {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  var type = arguments[1];
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
-  var splittedValues = value.split('|');
-  var result = { presets: {}, order: [] };
-
-  for (var i = 0; i < splittedValues.length; i++) {
-    var splittedParam = splittedValues[i] && splittedValues[i].split(':');
-    var prop = splittedParam[0] && splittedParam[0].trim();
-    var val = splittedParam[1] && splittedParam[1].trim();
-
-    if (prop && val) {
-      result.presets[prop] = val;
-      result.order.unshift(prop);
-    }
-  }
-
-  return result[type];
-};
-
 var checkOnMedia = function checkOnMedia(size) {
   try {
-    var object = eval('(' + size + ')');
+    var array = size.split(',');
 
-    return object && (typeof object === 'undefined' ? 'undefined' : _typeof(object)) === "object";
+    return array.length > 1;
   } catch (e) {
@@ -112,17 +93,8 @@ return false;
   if (isAdaptive) {
-    var orderFiltered = [];
+    size.forEach(function (_ref) {
+      var nextSize = _ref.size,
+          mediaQuery = _ref.media;
 
-    for (var i = 0; i < config.order.length; i++) {
-      var nextSize = size[config.order[i]];
-
-      if (nextSize) orderFiltered.unshift(config.order[i]);
-    }
-
-    for (var _i = 0; _i < orderFiltered.length; _i++) {
-      var isLast = !(_i < orderFiltered.length - 1);
-      var nextSizeType = isLast ? orderFiltered[_i - 1] : orderFiltered[_i];
-      var _nextSize = size[orderFiltered[_i]];
-
       if (isPreview) {
-        _nextSize = _nextSize.split('x').map(function (size) {
+        nextSize = nextSize.split('x').map(function (size) {
           return size / 5;
@@ -133,7 +105,4 @@ }).join('x');
 
-      var srcSet = generateSrcset(operation, _nextSize, filters, imgSrc, config);
-      var mediaQuery = '(' + (isLast ? 'min' : 'max') + '-width: ' + (config.presets[nextSizeType] + (isLast ? 1 : 0)) + 'px)';
-
-      sources.push({ mediaQuery: mediaQuery, srcSet: srcSet });
-    }
+      sources.push({ mediaQuery: mediaQuery, srcSet: generateSrcset(operation, nextSize, filters, imgSrc, config) });
+    });
   } else {
@@ -151,3 +120,2 @@ if (isPreview) {
   }
-
   return sources;
@@ -163,2 +131,16 @@ };
 
+var getAdaptiveSize = function getAdaptiveSize(size, config) {
+  var arrayOfSizes = size.split(',');
+  var sizes = [];
+
+  arrayOfSizes.forEach(function (string) {
+    var groups = string.match(/((?<variable>[a-z_][a-z_]*)|(?<media>\([\S\s]*\)))\s*(?<size>[0-9xp]*)/).groups;
+    var media = groups.media ? groups.media : config.presets[groups.variable];
+
+    sizes.push({ media: media, size: groups.size });
+  });
+
+  return sizes;
+};
+
 var getRatioBySize = function getRatioBySize(size, config) {
@@ -169,22 +151,5 @@ var width = void 0,
   if ((typeof size === 'undefined' ? 'undefined' : _typeof(size)) === 'object') {
-    var breakPoint = getBreakPoint(config);
-    var orderIndex = config.order.indexOf(breakPoint);
-    var breakPointSize = null;
+    var breakPointSource = getBreakPoint(size);
+    var breakPointSize = breakPointSource ? breakPointSource.size : size[0].size;
 
-    do {
-      var nextBreakpoint = config.order[orderIndex];
-      breakPointSize = size[nextBreakpoint];
-      orderIndex--;
-    } while (!breakPointSize && orderIndex >= 0);
-
-    if (!breakPointSize) {
-      var _orderIndex = config.order.indexOf(breakPoint);
-
-      do {
-        var _nextBreakpoint = config.order[_orderIndex];
-        breakPointSize = size[_nextBreakpoint];
-        _orderIndex++;
-      } while (!breakPointSize && _orderIndex <= config.order.length);
-    }
-
     width = breakPointSize.toString().split('x')[0];
@@ -202,12 +167,6 @@ height = breakPointSize.toString().split('x')[1];
 
-var getBreakPoint = function getBreakPoint(config) {
-  var presets = config.presets,
-      order = config.order;
-
-  var innerWidth = window.innerWidth;
-  var prevBreakPointLimit = order.findIndex(function (item) {
-    return presets[item] < innerWidth;
+var getBreakPoint = function getBreakPoint(size) {
+  return [].concat(_toConsumableArray(size)).reverse().find(function (item) {
+    return window.matchMedia(item.media).matches;
   });
-
-  return order[prevBreakPointLimit - 1] || order[prevBreakPointLimit] || order[order.length - 1];
 };
@@ -261,18 +220,3 @@
 
-//const insertSource = (element, value) => {
-//  let template = document.createElement('template');
-//
-//  if ('content' in template) {
-//    template.innerHTML = value;
-//    element.parentNode.insertBefore(template.content.firstChild, element);
-//  } else {
-//    template = document.createElement('div');
-//    template.innerHTML = value;
-//    element.parentNode.insertBefore(template.firstChild, element);
-//  }
-//};
-
 var insertSource = function insertSource(element, source) {
-  //let template = document.createElement('template');
-
   element.parentNode.insertBefore(source, element);
@@ -293,3 +237,2 @@ };
 
-exports.getPresets = getPresets;
 exports.checkOnMedia = checkOnMedia;
@@ -308,2 +251,3 @@ exports.checkIfRelativeUrlPath = checkIfRelativeUrlPath;
 exports.addClass = addClass;
-exports.removeClass = removeClass;
+exports.removeClass = removeClass;
+exports.getAdaptiveSize = getAdaptiveSize;

package.json

 {
   "name": "js-cloudimg-responsive",
-  "version": "0.0.5",
+  "version": "1.0.0",
+  "main": "dist/index.js",
   "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.",
-  "main": "dist/index.js",
+  "author": "scaleflex",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scaleflex/js-cloudimage-responsive"
+  },
+  "homepage": "https://github.com/scaleflex/js-cloudimage-responsive#readme",
+  "keywords": [
+    "image",
+    "images",
+    "cloudimage",
+    "responsive images",
+    "lazy loading",
+    "web acceleration",
+    "image management",
+    "image resizing",
+    "image compression",
+    "image optimization",
+    "image CDN",
+    "image CDN",
+    "webp",
+    "jpeg xr",
+    "jpg optimization",
+    "image resizing and CDN",
+    "crop",
+    "resize"
+  ],
   "scripts": {
-    "build": "webpack --mode production --config webpack-build.config.js",
-    "build-lazysizes": "webpack --mode production --config webpack-lazysizes-build.config.js",
-    "transpile": "babel src -d dist --copy-files",
-    "prepublishOnly": "npm run transpile",
-    "start-demo": "webpack-dev-server --mode development --config webpack-demo.config.js",
-    "build-demo": "webpack --mode production  --config webpack-demo.config.js",
+    "start-demo": "webpack-dev-server --mode development --config config/webpack-demo.config.js",
+    "clean-build": "rm -rf build",
+    "build": "npm run clean-build && webpack --mode production --config config/webpack-build.config.js",
+    "build-lazysizes": "webpack --mode production --config config/webpack-lazysizes-build.config.js",
+    "clean-dist": "rm -rf dist",
+    "dist": "npm run clean-dist && babel src -d dist --copy-files",
+    "clean-demo": "rm -rf examples/dist",
+    "build-demo": "npm run clean-demo && webpack --mode production  --config config/webpack-demo.config.js",
     "deploy-demo": "gh-pages -d examples/dist",
     "publish-demo": "npm run build-demo && npm run deploy-demo"
   },
+  "dependencies": {
+    "throttle-debounce": "^2.0.1"
+  },
   "devDependencies": {
@@ -32,3 +64,2 @@ "babel-cli": "^6.26.0",
     "style-loader": "^0.23.1",
-    "throttle-debounce": "^2.0.1",
     "webpack": "^4.28.4",
@@ -38,6 +69,3 @@ "webpack-cli": "^3.2.1",
     "webpack-stream": "^3.1.0"
-  },
-  "dependencies": {
-    "lazysizes": "^4.1.5"
   }
 }

README.md

@@ -1,13 +0,54 @@
-![](https://demo.cloudimg.io/width/800/none/sample.li/Cloudimage_diagram.jpeg)
+[![Release](https://img.shields.io/badge/release-v1.0.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-responsive/releases)
+[![Free plan](https://img.shields.io/badge/price-includes%20free%20plan-green.svg)](https://www.cloudimage.io/en/home#b38181a6-b9c8-4015-9742-7b1a1ad382d5)
+[![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.it/en/home)
 
-powered by [Cloudimage](https://www.cloudimage.io/)
-([Watch the video here](https://www.youtube.com/watch?time_continue=2&v=JFZSE1vYb0k))
+[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Responsive%20images,%20now%20easier%20than%20ever&url=https://scaleflex.github.io/js-cloudimage-responsive/&via=cloudimage&hashtags=images,cloudimage,responsive_images,lazy_loading,web_acceleration,image_managementimage_resizing,image_compression,image_optimization,image_CDN,image_CDNwebp,jpeg_xr,jpg_optimization,image_resizing_and_CDN,cropresize)
 
-## Cloudimage JS Plugin
+<p align="center">
+	<img
+		height="175"
+		alt="The Lounge"
+		src="https://scaleflex.airstore.io/filerobot/filerobot-cloudimage.png?sanitize=true">
+</p>
 
-Cloudimage Responsive plugin will resize, compress and accelerate images across the World in your application. It leverages the HTML5 `<picture>` and `srcset` elements to deliver the right image size based on the client's screen size and pixel ratio (retina or non-retina).
+<h1 align="center">
+   JS Cloudimage Responsive
+</h1>
 
+<p align="center">
+	<strong>
+		<a href="#table_of_contents">Docs</a>
+		•
+		<a href="https://scaleflex.github.io/js-cloudimage-responsive/" target="_blank">Demo</a>
+		•
+		<a href="#" target="_blank">Why?</a>
+	</strong>
+</p>
 
-**NOTE:** Your original (master) images should be stored on a server or storage bucket (S3, Google Cloud, Azure Blob...) reachable over HTTP or HTTPS by Cloudimage. If you want to upload your master images to Cloudimage, contact us at [[e-mail]](mailto:[e-mail]).
+The plugin detects the width of image's container and pixel ratio
+density of your device to load the exact image size you need.
+It process images via Cloudimage.io service which offers comprehensive
+automated image optimization solutions.
 
+When an image is first loaded on your website or mobile app,
+Cloudimage's resizing servers will download your origin image from
+your origin server, resize it and deliver to your user via rocket fast
+Content Delivery Networks (CDNs). Once the image is resized
+in the format of your choice, Cloudimage will push it to a Content
+Delivery Network, which will in turn deliver it rocket fast to
+your visitors, responsively across various screen sizes.
+
+**NOTE:** Your original (master) images should be stored on a server
+or storage bucket (S3, Google Cloud, Azure Blob...) reachable over
+HTTP or HTTPS by Cloudimage. If you want to upload your master images to
+Cloudimage, contact us at
+[[e-mail]](mailto:[e-mail]).
+
+![](https://demo.cloudimg.io/width/800/none/sample.li/Cloudimage_diagram.jpeg)
+
+powered by [Cloudimage](https://www.cloudimage.io/)
+([Watch the video here](https://www.youtube.com/watch?time_continue=2&v=JFZSE1vYb0k))
+
 ## Table of contents
@@ -23,3 +64,5 @@
 * [Browser support](#browser_support)
+* [Filerobot UI Family](#ui_family)
 * [Contributing](#contributing)
+* [License](#license)
 
@@ -29,3 +72,8 @@
 
-To see the Cloudimage Responsive plugin in action, please check out the [Demo page](https://scaleflex.github.io/js-cloudimage-responsive/). Play with your browser's viewport size and observe your Inspector's Network tab to see how Cloudimage delivers the optimal image size to your browser, hence accelerating the overall page loading time.
+To see the Cloudimage Responsive plugin in action, please check out the
+[Demo page](https://scaleflex.github.io/js-cloudimage-responsive/).
+Play with your browser's window size and observe your
+Inspector's Network tab to see how Cloudimage delivers the optimal
+image size to your browser, hence accelerating the overall page
+loading time.
 
@@ -37,3 +85,3 @@ ## <a name="installation"></a> Installation
 ```
-<script src="https://scaleflex.airstore.io/filerobot/plugins/js-cloudimage-responsive.v0.0.5.min.js"></script>
+<script src="https://scaleflex.airstore.io/filerobot/js-cloudimage-responsive/v1.0.0.min.js"></script>
 ```
@@ -80,7 +128,13 @@
 
-NOTE: "ratio" is recommended to prevent page layout jumping and to leverage visibility checking and thus lazy loading. Every other means to make the image have a certain height is also ok.
+NOTE: "ratio" is recommended to prevent page layout jumping and to
+leverage visibility checking and thus lazy loading.
 
 ## <a name="requirements"/> Requirements
 
-To use the Cloudimage Responsive plugin, you will need a Cloudimage token. Don't worry, it only takes seconds to get one by registering [here](https://www.cloudimage.io/en/register_page). Once your token is created, you can configure it as described below. This token allows you to use 25GB of image cache and 25GB of worldwide CDN traffic per month for free.
+To use the Cloudimage Responsive plugin, you will need a
+Cloudimage token. Don't worry, it only takes seconds to get one by
+registering [here](https://www.cloudimage.io/en/register_page).
+Once your token is created, you can configure it as described below.
+This token allows you to use 25GB of image cache and 25GB of worldwide
+CDN traffic per month for free.
 
@@ -93,3 +147,6 @@ ## <a name="configuration"></a> Config
 
-Your Cloudimage customer token. [Subscribe](https://www.cloudimage.io/en/register_page) for a Cloudimage account to get one. The subscription takes less than a minute and is totally free
+Your Cloudimage customer token.
+[Subscribe](https://www.cloudimage.io/en/register_page) for a
+Cloudimage account to get one. The subscription takes less than a
+minute and is totally free
 
@@ -108,9 +165,2 @@ ### lazyLoading
 
-### lazyLoadOffset
-
-###### Type: **Number** | Default: **100** | _required_
-
-Preload an image even if it's e.g. 100px below the viewport
-(user have to scroll 100px more to see this image)
-
 ### filters
@@ -122,3 +172,5 @@
 rotation to apply filters on your image by default
+[see doc](https://docs.cloudimage.io/go/cloudimage-documentation/en/filters/)
 
+
 ### placeholderBackground
@@ -128,4 +180,3 @@
 
-Parameters like fcontrast, fpixelate, fgaussian, backtransparent,
-rotation to apply filters on your image by default
+Placeholder background while the image or preview image is loading
 
@@ -138,3 +189,20 @@ ### baseUrl
 
+### presets
 
+###### Type: **Object**
+
+Default:
+
+```javascript
+{
+    xs: '(max-width: 575px)', // to 575       PHONE
+    sm: '(min-width: 576px)', // 576 - 767    PHABLET
+    md: '(min-width: 768px)', // 768 - 991    TABLET
+    lg: '(min-width: 992px)', // 992 - 1199   SMALL_LAPTOP_SCREEN
+    xl: '(min-width: 1200px)' // from 1200    USUALSCREEN
+}
+```
+
+Breakpoints shortcuts to use in image size property.
+
 ## <a name="image_properties"></a> Image properties
@@ -146,3 +214,4 @@
 
-Original image hosted on your web server.
+Original image hosted on your web server. You can use absolute path or
+relative to baseUrl in your config.
 
@@ -167,3 +236,3 @@ ### operation/o
 
-###### Type: **String/Object** | Default: **undefined** | _optional_
+###### Type: **String** | Default: **undefined** | _optional_
 
@@ -180,9 +249,8 @@ Size of an image which is used as a base for creating retina ready and responsive image element.
 
-s={{ xs: '50x100', sm:'100x125', md: '150x150', lg:'200x175', xl:'300x200' }}
+s="sm 800x400, (min-width: 620px) 200x20, md 1000x1350, lg 1400x1200, xl 1600x1000"
 
-*You can drop some breakpoints, for example s={{ sm:'100x125', xl:'300x200' }}
+*You can drop some breakpoints, for example s="md 1000x1350, lg 1400x1200
 
-**NOTE:** if size is set to **undefined**, Cloudimage uses a special
-algorithm to detect the width of image container and set the image size
-accordingly.
+**NOTE:** if size is not set, the plugin uses a special algorithm to
+detect the width of image container and set the image size accordingly.
 
@@ -213,9 +281,12 @@ ### filters/f
 
-it is recommended to prevent page layout jumping and to leverage visibility checking and thus lazy loading. Every other means to make the image have a certain height is also ok.
+it is recommended to prevent page layout jumping and to leverage
+visibility checking and thus lazy loading.
 
 ## <a name="lazy_loading"></a> Lazy Loading
 
-Lazy loading is not included into js-cloudimage-responsive by default. There are a few great libraries to do it.
+Lazy loading is not included into js-cloudimage-responsive by default.
+There are a few great libraries to do it.
 
-The example below uses [lazysizes](https://github.com/aFarkas/lazysizes) library using Intersection Observer API.
+The example below uses [lazysizes](https://github.com/aFarkas/lazysizes)
+library using Intersection Observer API.
 
@@ -241,3 +312,2 @@ add the following scripts right after js-cloudimage-responsive script
       filters: 'q35.foil1',
-      lazyLoadOffset: 100,
       lazyLoading: true
@@ -248,4 +318,3 @@ });
     ciResponsive.init();
-
-    window.lazySizes.init();
+    lazySizes.init();
 </script>
@@ -258,10 +327,23 @@ ```
 
-NOTE: If you use lazy loading with IntersectionObserver, you must manually add the [IntersectionObserver polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) for cross-browser support.
+NOTE: If you use lazy loading with IntersectionObserver, you must
+manually add the [IntersectionObserver polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill)
+for cross-browser support.
 
-## <a name="contributing"></a> Contributing!
+## <a name="ui_family"></a>Filerobot UI Familiy
 
+* [React Cloudimage Responsive](https://github.com/scaleflex/react-cloudimage-responsive)
+* [Angular Cloudimage Responsive](https://github.com/scaleflex/ng-cloudimage-responsive)
+* [Image Editor](https://github.com/scaleflex/filerobot-image-editor)
+* [Uploader](https://github.com/scaleflex/filerobot-uploader)
+
+## <a name="contributing"></a>Contributing!
+
 All contributions are super welcome!
 
+
+## <a name="license"></a>License
+Filerobot Uploader is provided under the [MIT License](https://opensource.org/licenses/MIT)
+
 ***
 
 To see the full cloudimage documentation [click here](https://docs.cloudimage.io/go/cloudimage-documentation)

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

19

decreased by-5%

Number of low maintenance alerts

2

decreased by-33.33%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

334

increased by32.54%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

54235

decreased by-64.86%

Number of package files

8

decreased by-46.67%

Lines of code

995

decreased by-11.63%

Dependency changes

• + Addedthrottle-debounce@^2.0.1

• + Addedthrottle-debounce@2.3.0(transitive)

• - Removedlazysizes@^4.1.5

• - Removedlazysizes@4.1.8(transitive)