feat: add min-window-width param

Author: dzmitry-stramavus

Diff for: src/blur-hash/ci.service.js

@@ -82,7 +82,7 @@ export default class CIResponsive {
     const { config } = this;
     const { baseURL, lazyLoading, presets, devicePixelRatioList } = config;
     const imgProps = isImage ? getImageProps(imgNode) : getBackgroundImageProps(imgNode);
-    const { params, imgNodeSRC, blurHash, isLazyCanceled, sizes, isAdaptive, preserveSize } = imgProps;
+    const { params, imgNodeSRC, blurHash, isLazyCanceled, sizes, isAdaptive, preserveSize, minWindowWidth } = imgProps;
 
     if (!imgNodeSRC) return;
 
@@ -100,6 +100,11 @@ export default class CIResponsive {
       return;
     }
 
+    if (window.innerWidth < minWindowWidth && !isImage) {
+      imgNode.style.backgroundImage = 'none';
+      return;
+    }
+
     if (isAdaptive) {
       size = getBreakpoint(sizes, presets);
     } else {

Diff for: src/common/ci.utils.js

@@ -94,7 +94,8 @@ export const getImageProps = (image) => {
 export const getBackgroundImageProps = (image) => {
   const props = {
     ...getCommonImageProps(image),
-    imgNodeSRC: attr(image, 'ci-bg-url') || attr(image, 'data-ci-bg-url') || undefined
+    imgNodeSRC: attr(image, 'ci-bg-url') || attr(image, 'data-ci-bg-url') || undefined,
+    minWindowWidth: attr(image, 'ci-min-window-width') || attr(image, 'data-min-window-width') || undefined
   };
   const params = {
     ...getParamsFromURL(props.imgNodeSRC || ''),

Diff for: src/low-preview/ci.service.js

@@ -85,7 +85,7 @@ export default class CIResponsive {
     const { config } = this;
     const { baseURL, lazyLoading, presets, devicePixelRatioList, minLowQualityWidth } = config;
     const imgProps = isImage ? getImageProps(imgNode) : getBackgroundImageProps(imgNode);
-    const { params, imgNodeSRC, isLazyCanceled, sizes, isAdaptive, preserveSize } = imgProps;
+    const { params, imgNodeSRC, isLazyCanceled, sizes, isAdaptive, preserveSize, minWindowWidth } = imgProps;
 
     if (!imgNodeSRC) return;
 
@@ -103,6 +103,11 @@ export default class CIResponsive {
       return;
     }
 
+    if (window.innerWidth < minWindowWidth && !isImage) {
+      imgNode.style.backgroundImage = 'none';
+      return;
+    }
+
     if (isAdaptive) {
       size = getBreakpoint(sizes, presets);
     } else {

Diff for: src/plain/ci.service.js

@@ -73,13 +73,13 @@ export default class CIResponsive {
     const { config } = this;
     const { baseURL, lazyLoading, presets, devicePixelRatioList } = config;
     const imgProps = isImage ? getImageProps(imgNode) : getBackgroundImageProps(imgNode);
-    const { params, imgNodeSRC, isLazyCanceled, sizes, isAdaptive, preserveSize } = imgProps;
+    const { params, imgNodeSRC, isLazyCanceled, sizes, isAdaptive, preserveSize, minWindowWidth } = imgProps;
 
     if (!imgNodeSRC) return;
 
     const [src, isSVG] = getImgSRC(imgNodeSRC, baseURL);
     const lazy = isLazy(lazyLoading, isLazyCanceled, isUpdate);
-    let size
+    let size;
 
     if (!isSupportedInBrowser(true)) {
       if (isImage) {
@@ -91,6 +91,11 @@ export default class CIResponsive {
       return;
     }
 
+    if (window.innerWidth < minWindowWidth && !isImage) {
+      imgNode.style.backgroundImage = 'none';
+      return;
+    }
+
     if (isAdaptive) {
       size = getBreakpoint(sizes, presets);
     } else {