Merge pull request #28 from scaleflex/T8076-feat-possibility-to-change-ci-src

T8076 feat possibility to change ci src

Author: amrw-js

CHANGELOG.md

@@ -25,6 +25,14 @@ Types of changes:
 - ...
 
 -------------
+## 4.9.1 - 2022-08-15
+### Fixed
+- `updateImage` method when image doesn't have low-preivew.
+
+## 4.9.0 - 2022-08-11
+### Added
+- Possibility to change ci-src and process image.
+
 ## 4.8.13 - 2022-08-05
 ### Fixed
 - Undefined hostname when adding relative src

README-BLUR-HASH.md

@@ -81,6 +81,7 @@ powered by [Cloudimage](https://www.cloudimage.io/)
 * [Step 3: Implement](#implement)
 * [Step 4: Prevent seeing broken images](#prevent_styles)
 * [Configuration](#configuration)
+* [Methods](#methods)
 * [Image properties](#image_properties)
 * [Lazy loading](#lazy_loading)
 * [Process dynamically loaded images](#dynamically-loaded)
@@ -125,6 +126,7 @@ In order to use Cloudimage responsive plugins on your single-page application, p
 <summary>Angular</summary>
 <a href="https://github.com/scaleflex/ng-cloudimage-responsive">Angular Cloudimage Responsive (Low Quality Preview)</a><br/>
 </details>
+
 ## <a name="requirements"/> Requirements
 
 ### Cloudimage account
@@ -397,8 +399,81 @@ If width and height attributes are NOT set, image container size will be detecte
 *Note*: If only width or height attributes is set, ratio is going to be taken from ci-ratio image attribute
 
 
+## <a name="methods"></a> methods
+
+#### `updateImage`
+
+<u>Type:</u> `function updateImage(newSrc, imgNode, options)`
+
+arguments:
+
+`imgNode: HTMLElement` The image node to be updated.<br/>
+`newSrc: String` The new image src.<br/>
+`options: Object` Options that you need to add on the image, All the <a href="#image_properties">image properties</a> can be added in options.
+
+Example:
+
+```js
+  const image = document.getElementById('cloudimage-image-example');
+  const options = { 'ci-params': 'grey=1', alt: 'dress' };
+
+  window.ciResponsive.updateImage(image, 'dresses-img.jpg', options);
+```
+beside using this method to update image src or options. you can use it to for background images.
+
+Example:
+```js
+  const bgImage = document.getElementById('cloudimage-bg-example');
+  const options = { 'ci-params': 'grey=1', alt: 'house' };
+
+  window.ciResponsive.updateImage(bgImage, 'house-img.jpg', options);
+```
+
+<a href="https://codesandbox.io/s/js-cloudimage-responsive-example-yzp7yz"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+
+#### `addImage`
+
+<u>Type:</u> `function updateImage(newSrc, imgNode, options)`
+
+arguments:
+
+`imgNode: HTMLElement` The image node to be added.<br/>
+
+<u>Supported version: +v4.9.0</u>
+
+Example:
+
+```js
+  const image = document.createElement('img');
+
+  image.setAttribute('ci-src', 'dresses-img.jpg');
+  image.setAttribute('ci-params', 'gery=1');
+
+  document.body.appendChild(image);
+  window.ciResponsive.addImage(image);
+```
+beside using this method to update image src or options. you can use it to for background images.
+
+Example:
+
+```js
+  const bgImage = document.createElement('section');
+  const paragraph = document.createElement('p');
+
+  bgImage.setAttribute('ci-bg-url', 'house-img.jpg');
+  bgImage.setAttribute('ci-params', 'gery=1');
+
+  paragraph.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a nulla dictum';
+
+  bgImage.appendChild(paragraph);
+  document.body.appendChild(bgImage);
+  window.ciResponsive.addImage(bgImage);
+```
+
+<a href="https://codesandbox.io/s/js-cloudimage-responsive-example-8mk13l"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 ## <a name="image_properties"></a> Image properties
 
+
 Cloudimage responsive plugin will make image on your page responsive if you replace the `src` with `ci-src` attribute in the `<img>` tag:
 
 ### ci-src

README-PLAIN.md

@@ -76,6 +76,7 @@ Cloudimage, contact us at
 * [Step 3: Implement](#implement)
 * [Step 4: Prevent seeing broken images](#prevent_styles)
 * [Configuration](#configuration)
+* [Methods](#methods)
 * [Image properties](#image_properties)
 * [Lazy loading](#lazy_loading)
 * [Process dynamically loaded images](#dynamically-loaded)
@@ -381,7 +382,7 @@ Breakpoints shortcuts to use in image size property, can be overwridden.
 
 If width and height attributes are set:
 
-**use** - width & height attributes values will be used to calculate image size (according to user's DPR) and **ratio**. 
+**use** - width & height attributes values will be used to calculate image size (according to user's DPR) and **ratio**.
 
 **take-ratio** - width & height attributes values will be used only to calculate **ratio**.
 
@@ -390,6 +391,78 @@ If width and height attributes are set:
 If width and height attributes are NOT set, image container size will be detected to calculate result image size (according to user's DPR)
 
 *Note*: If only width or height attributes is set, ratio is going to be taken from ci-ratio image attribute
+## <a name="methods"></a> methods
+
+#### `updateImage`
+
+<u>Type:</u> `function updateImage(newSrc, imgNode, options)`
+
+arguments:
+
+`imgNode: HTMLElement` The image node to be updated.<br/>
+`newSrc: String` The new image src.<br/>
+`options: Object` Options that you need to add on the image, All the <a href="#image_properties">image properties</a> can be added in options.
+
+Example:
+
+```js
+  const image = document.getElementById('cloudimage-image-example');
+  const options = { 'ci-params': 'grey=1', alt: 'dress' };
+
+  window.ciResponsive.updateImage(image, 'dresses-img.jpg', options);
+```
+beside using this method to update image src or options. you can use it to for background images.
+
+Example:
+```js
+  const bgImage = document.getElementById('cloudimage-bg-example');
+  const options = { 'ci-params': 'grey=1', alt: 'house' };
+
+  window.ciResponsive.updateImage(bgImage, 'house-img.jpg', options);
+```
+
+<a href="https://codesandbox.io/s/js-cloudimage-responsive-example-vgnpdk"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+
+#### `addImage`
+
+<u>Type:</u> `function updateImage(newSrc, imgNode, options)`
+
+arguments:
+
+`imgNode: HTMLElement` The image node to be added.<br/>
+
+<u>Supported version: +v4.9.0</u>
+
+Example:
+
+```js
+  const image = document.createElement('img');
+
+  image.setAttribute('ci-src', 'dresses-img.jpg');
+  image.setAttribute('ci-params', 'gery=1');
+
+  document.body.appendChild(image);
+  window.ciResponsive.addImage(image);
+```
+beside using this method to update image src or options. you can use it to for background images.
+
+Example:
+
+```js
+  const bgImage = document.createElement('section');
+  const paragraph = document.createElement('p');
+
+  bgImage.setAttribute('ci-bg-url', 'house-img.jpg');
+  bgImage.setAttribute('ci-params', 'gery=1');
+
+  paragraph.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a nulla dictum';
+
+  bgImage.appendChild(paragraph);
+  document.body.appendChild(bgImage);
+  window.ciResponsive.addImage(bgImage);
+```
+
+<a href="https://codesandbox.io/s/js-cloudimage-responsive-example-8mk13l"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 
 ## <a name="image_properties"></a> Image properties
 

README.md

@@ -76,6 +76,7 @@ you can check our all-in-one Digital Asset Management solution
 * [Step 2: Initialize](#initialize)
 * [Step 3: Implement](#implement)
 * [Configuration](#configuration)
+* [Methods](#methods)
 * [Image properties](#image_properties)
 * [Lazy loading](#lazy_loading)
 * [Process dynamically loaded images](#dynamically-loaded)
@@ -308,7 +309,7 @@ Multiple params can be applied, separated by "```&```" e.g. wat_scale=35&wat_gra
 }
 ```
 
-#### alternative syntax 
+#### alternative syntax
 
 ###### Type: **Object**
 
@@ -396,11 +397,11 @@ Breakpoints shortcuts to use in image size property, can be overridden.
 
 ### imageSizeAttributes
 
-###### Type: **String** | possible values: 'use', 'ignore', 'take-ratio' | Default: **'use'** 
+###### Type: **String** | possible values: 'use', 'ignore', 'take-ratio' | Default: **'use'**
 
 If width and height attributes are set:
 
-**use** - width & height attributes values will be used to calculate image size (according to user's DPR) and **ratio**. 
+**use** - width & height attributes values will be used to calculate image size (according to user's DPR) and **ratio**.
 
 **take-ratio** - width & height attributes values will be used only to calculate **ratio**.
 
@@ -410,6 +411,78 @@ If width and height attributes are NOT set, image container size will be detecte
 
 *Note*: If only width or height attributes is set, ratio is going to be taken from ci-ratio image attribute
 
+## <a name="methods"></a> methods
+
+#### `updateImage`
+
+<u>Type:</u> `function updateImage(newSrc, imgNode, options)`
+
+arguments:
+
+`imgNode: HTMLElement` The image node to be updated.<br/>
+`newSrc: String` The new image src.<br/>
+`options: Object` Options that you need to add on the image, All the <a href="#image_properties">image properties</a> can be added in options.
+
+Example:
+
+```js
+  const image = document.getElementById('cloudimage-image-example');
+  const options = { 'ci-params': 'grey=1', alt: 'dress' };
+
+  window.ciResponsive.updateImage(image, 'dresses-img.jpg', options);
+```
+beside using this method to update image src or options. you can use it to for background images.
+
+Example:
+```js
+  const bgImage = document.getElementById('cloudimage-bg-example');
+  const options = { 'ci-params': 'grey=1', alt: 'house' };
+
+  window.ciResponsive.updateImage(bgImage, 'house-img.jpg', options);
+```
+
+<a href="https://codesandbox.io/s/js-cloudimage-responsive-example-cnm8z9"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+
+#### `addImage`
+
+<u>Type:</u> `function updateImage(newSrc, imgNode, options)`
+
+arguments:
+
+`imgNode: HTMLElement` The image node to be added.<br/>
+
+<u>Supported version: +v4.9.0</u>
+
+Example:
+
+```js
+  const image = document.createElement('img');
+
+  image.setAttribute('ci-src', 'dresses-img.jpg');
+  image.setAttribute('ci-params', 'gery=1');
+
+  document.body.appendChild(image);
+  window.ciResponsive.addImage(image);
+```
+beside using this method to update image src or options. you can use it to for background images.
+
+Example:
+
+```js
+  const bgImage = document.createElement('section');
+  const paragraph = document.createElement('p');
+
+  bgImage.setAttribute('ci-bg-url', 'house-img.jpg');
+  bgImage.setAttribute('ci-params', 'gery=1');
+
+  paragraph.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a nulla dictum';
+
+  bgImage.appendChild(paragraph);
+  document.body.appendChild(bgImage);
+  window.ciResponsive.addImage(bgImage);
+```
+
+<a href="https://codesandbox.io/s/js-cloudimage-responsive-example-8mk13l"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 ## <a name="image_properties"></a> Image properties
 
 The Cloudimage responsive plugin will make an image on your page responsive if you replace the `src` with a `ci-src` attribute in the `<img>` tag:

build/blur-hash/js-cloudimage-responsive.min.js

@@ -0,0 +1,11 @@
+/*!
+ * 
+ *  js-cloudimage-responsive v4.9.0 with low quality image placeholder technique
+ *  https://github.com/scaleflex/js-cloudimage-responsive
+ *
+ *  Copyright (c) 2022 scaleflex
+ *  Released under the MIT license
+ *
+ *  Date: 2022-08-15T20:33:53.648Z
+ *
+ */img[ci-src]{opacity:0}div.ci-image-wrapper{display:block;width:100%;overflow:hidden;position:relative}img.ci-image{display:block;width:100%;padding:0!important;position:absolute;top:0;left:0;height:auto}img.ci-image-loaded{opacity:1}img.ci-image-ratio.ci-image-preview{height:100%}.ci-bg,.ci-bg>*{position:relative}.ci-bg:before{content:"";position:absolute;top:0;bottom:0;right:0;left:0;background:inherit;filter:blur(0);transition:filter .4s ease-in-out}.ci-bg.ci-bg-animation:before{filter:blur(10px)}

build/blur-hash/js-cloudimage-responsive.min.js.map

@@ -1,4 +1,5 @@
 const path = require('path');
+const TerserPlugin = require('terser-webpack-plugin');
 const webpack = require('webpack');
 const pkg = require('../../package');
 const isDist = process.env.NODE_ENV === 'dist';
@@ -28,14 +29,20 @@ module.exports = {
         use: "babel-loader",
         exclude: /node_modules/
       },
-      {
+    {
         test: /\.css$/,
         use: ["style-loader", "css-loader"]
       }
     ]
   },
+  optimization: {
+    minimizer: [new TerserPlugin({ extractComments: false })],
+  },
   plugins: [
-    new webpack.BannerPlugin(banner),
+    new webpack.BannerPlugin({
+      banner,
+      entryOnly: true
+    }),
   ],
   resolve: {
     extensions: [".js", ".jsx"]

build/low-preview/js-cloudimage-responsive.min.css

@@ -3,6 +3,7 @@ const webpack = require('webpack');
 const pkg = require('../../package');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const isDist = process.env.NODE_ENV === 'dist';
 
 const now = new Date();
@@ -44,9 +45,7 @@ module.exports = {
   optimization: {
     minimizer: [
       new CssMinimizerPlugin(),
-      new UglifyJsPlugin({
-        include: /\.min\.js$/
-      })
+      new TerserPlugin({ extractComments: false })
     ],
   },
   resolve: {

build/low-preview/js-cloudimage-responsive.min.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const TerserPlugin = require('terser-webpack-plugin');
 const webpack = require('webpack');
 const pkg = require('../../package');
 const isDist = process.env.NODE_ENV === 'dist';
@@ -34,6 +35,9 @@ module.exports = {
       }
     ]
   },
+  optimization: {
+    minimizer: [new TerserPlugin({ extractComments: false })],
+  },
   plugins: [
     new webpack.BannerPlugin(banner),
   ],