feat: add possibility to change cloudimage responsive selector

Author: dzmitry-stramavus

examples/plain/src/init.js

@@ -7,6 +7,9 @@ window.ciResponsive = new window.CIResponsive({
   exactSize: false,
   limitFactor: 10,
 
+  // imgSelector: 'data-src',
+  // bgSelector: 'data-bg-src'
+
   //ignoreNodeImgSize: false,
   //saveNodeImgRatio: false,
   //ignoreStyleImgSize: false,

src/blur-hash/ci.config.js

@@ -4,6 +4,8 @@ import { DEVICE_PIXEL_RATIO_LIST } from 'cloudimage-responsive-utils/dist/consta
 
 export const getInitialConfigBlurHash = (config) => {
   const {
+    imgSelector = 'ci-src',
+    bgSelector = 'ci-bg-url',
     token = '',
     domain = 'cloudimg.io',
     lazyLoading = false,
@@ -29,6 +31,8 @@ export const getInitialConfigBlurHash = (config) => {
   } = config;
 
   return {
+    imgSelector,
+    bgSelector,
     token,
     domain,
     lazyLoading,

src/blur-hash/ci.service.js

@@ -57,11 +57,11 @@ export default class CIResponsive {
     const windowScreenBecomesBigger = this.innerWidth < window.innerWidth;
 
     if (isUpdate) {
-      images = document.querySelectorAll('img[ci-src]');
-      backgroundImages = document.querySelectorAll('[ci-bg-url]');
+      images = document.querySelectorAll(`img[${this.config.imgSelector}]`);
+      backgroundImages = document.querySelectorAll(`[${this.config.imgSelector}]`);
     } else {
-      images = filterImages(document.querySelectorAll('img[ci-src]'), 'ci-image');
-      backgroundImages = filterImages(document.querySelectorAll('[ci-bg-url]'), 'ci-bg');
+      images = filterImages(document.querySelectorAll(`img[${this.config.imgSelector}]`), 'ci-image');
+      backgroundImages = filterImages(document.querySelectorAll(`[${this.config.imgSelector}]`), 'ci-bg');
     }
 
     if (images.length > -1) {
@@ -80,8 +80,9 @@ export default class CIResponsive {
   getBasicInfo = (imgNode, isUpdate, windowScreenBecomesBigger, type) => {
     const isImage = type === 'image';
     const { config } = this;
-    const { baseURL, lazyLoading, presets, devicePixelRatioList } = config;
-    const imgProps = isImage ? getImageProps(imgNode) : getBackgroundImageProps(imgNode);
+    const { baseURL, lazyLoading, presets, devicePixelRatioList, imgSelector, bgSelector } = config;
+    const imgProps = isImage ?
+        getImageProps(imgNode, imgSelector) : getBackgroundImageProps(imgNode, bgSelector);
     const { params, imgNodeSRC, blurHash, isLazyCanceled, sizes, isAdaptive, preserveSize, minWindowWidth } = imgProps;
 
     if (!imgNodeSRC) return;

src/common/ci.utils.js

@@ -73,10 +73,10 @@ const getSize = (sizes) => {
   return resultSizes;
 }
 
-export const getImageProps = (image) => {
+export const getImageProps = (image, imgSelector) => {
   const props = {
     ...getCommonImageProps(image),
-    imgNodeSRC: attr(image, 'ci-src') || attr(image, 'data-ci-src') || undefined
+    imgNodeSRC: attr(image, imgSelector) || undefined
   };
   const params = {
     ...getParamsFromURL(props.imgNodeSRC || ''),
@@ -91,10 +91,10 @@ export const getImageProps = (image) => {
   };
 };
 
-export const getBackgroundImageProps = (image) => {
+export const getBackgroundImageProps = (image, bgSelector) => {
   const props = {
     ...getCommonImageProps(image),
-    imgNodeSRC: attr(image, 'ci-bg-url') || attr(image, 'data-ci-bg-url') || undefined,
+    imgNodeSRC: attr(image, bgSelector)|| undefined,
     minWindowWidth: attr(image, 'ci-min-window-width') || attr(image, 'data-min-window-width') || undefined
   };
   const params = {

src/low-preview/ci.config.js

@@ -4,6 +4,8 @@ import { DEVICE_PIXEL_RATIO_LIST } from 'cloudimage-responsive-utils/dist/consta
 
 export const getInitialConfigLowPreview = (config) => {
   const {
+    imgSelector = 'ci-src',
+    bgSelector = 'ci-bg-url',
     token = '',
     domain = 'cloudimg.io',
     lazyLoading = false,
@@ -34,6 +36,8 @@ export const getInitialConfigLowPreview = (config) => {
   } = config;
 
   return {
+    imgSelector,
+    bgSelector,
     token,
     domain,
     lazyLoading,

src/low-preview/ci.service.js

@@ -60,11 +60,11 @@ export default class CIResponsive {
     const windowScreenBecomesBigger = this.innerWidth < window.innerWidth;
 
     if (isUpdate) {
-      images = document.querySelectorAll('img[ci-src]');
-      backgroundImages = document.querySelectorAll('[ci-bg-url]');
+      images = document.querySelectorAll(`img[${this.config.imgSelector}]`);
+      backgroundImages = document.querySelectorAll(`[${this.config.imgSelector}]`);
     } else {
-      images = filterImages(document.querySelectorAll('img[ci-src]'), 'ci-image');
-      backgroundImages = filterImages(document.querySelectorAll('[ci-bg-url]'), 'ci-bg');
+      images = filterImages(document.querySelectorAll(`img[${this.config.imgSelector}]`), 'ci-image');
+      backgroundImages = filterImages(document.querySelectorAll(`[${this.config.imgSelector}]`), 'ci-bg');
     }
 
     if (images.length > -1) {
@@ -83,8 +83,9 @@ export default class CIResponsive {
   getBasicInfo = (imgNode, isUpdate, windowScreenBecomesBigger, type) => {
     const isImage = type === 'image';
     const { config } = this;
-    const { baseURL, lazyLoading, presets, devicePixelRatioList, minLowQualityWidth } = config;
-    const imgProps = isImage ? getImageProps(imgNode) : getBackgroundImageProps(imgNode);
+    const { baseURL, lazyLoading, presets, devicePixelRatioList, minLowQualityWidth, imgSelector, bgSelector } = config;
+    const imgProps = isImage ?
+        getImageProps(imgNode, imgSelector) : getBackgroundImageProps(imgNode, bgSelector);
     const { params, imgNodeSRC, isLazyCanceled, sizes, isAdaptive, preserveSize, minWindowWidth } = imgProps;
 
     if (!imgNodeSRC) return;

src/plain/ci.config.js

@@ -4,6 +4,8 @@ import { DEVICE_PIXEL_RATIO_LIST } from 'cloudimage-responsive-utils/dist/consta
 
 export const getInitialConfigPlain = (config) => {
   const {
+    imgSelector = 'ci-src',
+    bgSelector = 'ci-bg-url',
     token = '',
     domain = 'cloudimg.io',
     lazyLoading = false,
@@ -27,6 +29,8 @@ export const getInitialConfigPlain = (config) => {
   } = config;
 
   return {
+    imgSelector,
+    bgSelector,
     token,
     domain,
     lazyLoading,

src/plain/ci.service.js

@@ -48,11 +48,11 @@ export default class CIResponsive {
     const windowScreenBecomesBigger = this.innerWidth < window.innerWidth;
 
     if (isUpdate) {
-      images = document.querySelectorAll('img[ci-src]');
-      backgroundImages = document.querySelectorAll('[ci-bg-url]');
+      images = document.querySelectorAll(`img[${this.config.imgSelector}]`);
+      backgroundImages = document.querySelectorAll(`[${this.config.imgSelector}]`);
     } else {
-      images = filterImages(document.querySelectorAll('img[ci-src]'), 'ci-image');
-      backgroundImages = filterImages(document.querySelectorAll('[ci-bg-url]'), 'ci-bg');
+      images = filterImages(document.querySelectorAll(`img[${this.config.imgSelector}]`), 'ci-image');
+      backgroundImages = filterImages(document.querySelectorAll(`[${this.config.bgSelector}]`), 'ci-bg');
     }
 
     if (images.length > -1) {
@@ -71,8 +71,9 @@ export default class CIResponsive {
   getBasicInfo = (imgNode, isUpdate, windowScreenBecomesBigger, type) => {
     const isImage = type === 'image';
     const { config } = this;
-    const { baseURL, lazyLoading, presets, devicePixelRatioList } = config;
-    const imgProps = isImage ? getImageProps(imgNode) : getBackgroundImageProps(imgNode);
+    const { baseURL, lazyLoading, presets, devicePixelRatioList, imgSelector, bgSelector } = config;
+    const imgProps = isImage ?
+        getImageProps(imgNode, imgSelector) : getBackgroundImageProps(imgNode, bgSelector);
     const { params, imgNodeSRC, isLazyCanceled, sizes, isAdaptive, preserveSize, minWindowWidth } = imgProps;
 
     if (!imgNodeSRC) return;