chore: reformat responsive.ts

Author: lbendavid-cloudinary

packages/html/src/plugins/responsive.ts

@@ -6,7 +6,7 @@ import {isNum} from '../utils/isNum.js';
 import {isBrowser} from "../utils/isBrowser.js";
 import {Action} from "@cloudinary/url-gen/internal/Action";
 import {isImage} from "../utils/isImage.js";
-import {getAnalyticsOptions} from "../utils/analytics";
+import {getAnalyticsOptions} from '../utils/analytics'
 
 /**
  * @namespace
@@ -18,7 +18,7 @@ import {getAnalyticsOptions} from "../utils/analytics";
  * <AdvancedImage cldImg={img} plugins={[responsive({steps: [800, 1000, 1400]})]} />
  */
 export function responsive({steps}:{steps?: number | number[]}={}): Plugin{
-    return responsivePlugin.bind(null, steps);
+  return responsivePlugin.bind(null, steps);
 }
 
 /**
@@ -31,29 +31,29 @@ export function responsive({steps}:{steps?: number | number[]}={}): Plugin{
  */
 function responsivePlugin(steps?: number | number[], element?:HTMLImageElement, responsiveImage?: CloudinaryImage, htmlPluginState?: HtmlPluginState, analyticsOptions?: AnalyticsOptions): Promise<void | string> | boolean {
 
-    if(!isBrowser()) return true;
+  if(!isBrowser()) return true;
 
-    if(!isImage(element)) return;
+  if(!isImage(element)) return;
 
-    return new Promise((resolve)=>{
-        htmlPluginState.cleanupCallbacks.push(()=>{
-            window.removeEventListener("resize", resizeRef);
-            resolve('canceled');
-        });
+  return new Promise((resolve)=>{
+    htmlPluginState.cleanupCallbacks.push(()=>{
+      window.removeEventListener("resize", resizeRef);
+      resolve('canceled');
+    });
 
-        // Use a tagged generic action that can be later searched and replaced.
-        responsiveImage.addAction(new Action().setActionTag('responsive'));
-        // Immediately run the resize plugin, ensuring that first render gets a responsive image.
-        onResize(steps, element, responsiveImage, analyticsOptions);
+    // Use a tagged generic action that can be later searched and replaced.
+    responsiveImage.addAction(new Action().setActionTag('responsive'));
+    // Immediately run the resize plugin, ensuring that first render gets a responsive image.
+    onResize(steps, element, responsiveImage, analyticsOptions);
 
-        let resizeRef: any;
-        htmlPluginState.pluginEventSubscription.push(()=>{
-            window.addEventListener('resize', resizeRef = debounce(()=>{
-                onResize(steps, element, responsiveImage, analyticsOptions);
-            }, 100));
-        });
-        resolve();
+    let resizeRef: any;
+    htmlPluginState.pluginEventSubscription.push(()=>{
+      window.addEventListener('resize', resizeRef = debounce(()=>{
+        onResize(steps, element, responsiveImage, analyticsOptions);
+      }, 100));
     });
+    resolve();
+  });
 }
 
 /**
@@ -65,8 +65,8 @@ function responsivePlugin(steps?: number | number[], element?:HTMLImageElement,
  * @param analyticsOptions {AnalyticsOptions} analytics options for the url to be created
  */
 function onResize(steps?: number | number[], element?:HTMLImageElement, responsiveImage?: CloudinaryImage, analyticsOptions?: AnalyticsOptions){
-    updateByContainerWidth(steps, element, responsiveImage);
-    element.src = responsiveImage.toURL(getAnalyticsOptions(analyticsOptions));
+  updateByContainerWidth(steps, element, responsiveImage);
+  element.src = responsiveImage.toURL(getAnalyticsOptions(analyticsOptions));
 }
 
 /**
@@ -77,24 +77,24 @@ function onResize(steps?: number | number[], element?:HTMLImageElement, responsi
  * @param responsiveImage {CloudinaryImage}
  */
 function updateByContainerWidth(steps?: number | number[], element?:HTMLImageElement, responsiveImage?: CloudinaryImage){
-    // Default value for responsiveImgWidth, used when no steps are passed.
-    let responsiveImgWidth = element.parentElement.clientWidth;
+  // Default value for responsiveImgWidth, used when no steps are passed.
+  let responsiveImgWidth = element.parentElement.clientWidth;
 
-    if(isNum(steps)){
-        const WIDTH_INTERVALS = steps as number;
-        // We need to force the container width to be intervals of max width.
-        responsiveImgWidth = Math.ceil(responsiveImgWidth / WIDTH_INTERVALS ) * WIDTH_INTERVALS;
+  if(isNum(steps)){
+    const WIDTH_INTERVALS = steps as number;
+    // We need to force the container width to be intervals of max width.
+    responsiveImgWidth = Math.ceil(responsiveImgWidth / WIDTH_INTERVALS ) * WIDTH_INTERVALS;
 
-    } else if(Array.isArray(steps)){
-        responsiveImgWidth = steps.reduce((prev, curr) =>{
-            return (Math.abs(curr - responsiveImgWidth) < Math.abs(prev - responsiveImgWidth) ? curr : prev);
-        });
-    }
-
-    responsiveImage.transformation.actions.forEach((action, index) => {
-        if (action instanceof Action && action.getActionTag() === 'responsive') {
-            responsiveImage.transformation.actions[index]  = scale(responsiveImgWidth).setActionTag('responsive');
-        }
+  } else if(Array.isArray(steps)){
+    responsiveImgWidth = steps.reduce((prev, curr) =>{
+      return (Math.abs(curr - responsiveImgWidth) < Math.abs(prev - responsiveImgWidth) ? curr : prev);
     });
+  }
+
+  responsiveImage.transformation.actions.forEach((action, index) => {
+    if (action instanceof Action && action.getActionTag() === 'responsive') {
+      responsiveImage.transformation.actions[index]  = scale(responsiveImgWidth).setActionTag('responsive');
+    }
+  });
 }