cloudinary-core - npm Package Compare versions

Comparing version 2.8.0 to 2.8.1

cloudinary-core.d.ts

@@ -861,3 +861,3 @@ export as namespace cloudinary;
         secure_cdn_subdomain?: boolean;
-        secure_distribution?: boolean;
+        secure_distribution?: string;
         shorten?: string;
@@ -864,0 +864,0 @@ type?: string;

package.json

 {
   "name": "cloudinary-core",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "description": "Cloudinary Client Side JS library. Cloudinary streamlines your web application’s image manipulation needs. Cloudinary's cloud-based servers automate image uploading, resizing, cropping, optimizing, sprite generation and more.",
@@ -5,0 +5,0 @@ "main": "cloudinary-core.js",

src/cloudinary.js

@@ -0,1 +1,3 @@
+import {normalizeToArray} from "./util/parse/normalizeToArray";
+
 var applyBreakpoints, closestAbove, defaultBreakpoints, findContainerWidth, maxWidth, updateDpr;
@@ -583,2 +585,3 @@
     }
+
     options = defaults({}, options || {}, this.config());
@@ -634,14 +637,5 @@ let images = nodes
     const responsive = options.responsive != null ? options.responsive : this.config('responsive');
-    elements = (function() {
-      switch (false) {
-        case !isArray(elements):
-          return elements;
-        case elements.constructor.name !== "NodeList":
-          return elements;
-        case !isString(elements):
-          return Array.prototype.slice.call(document.querySelectorAll(elements), 0);
-        default:
-          return [elements];
-      }
-    })();
+
+    elements = normalizeToArray(elements);
+
     let responsiveClass;
@@ -689,4 +683,7 @@ if (this.responsiveConfig && this.responsiveConfig.responsive_class != null) {
           }
-          if (setUrl) {
+          if(options.loading === 'lazy' && !this.isNativeLazyLoadSupported() && this.isLazyLoadSupported() && !elements[0].getAttribute('src')) {
+            this.setImgOnLazyLoad(elements, options);
+          }else if (setUrl) {
             setAttribute(tag, 'src', dataSrc);
+            elements[0].setAttribute('width', elements[0].getAttribute('data-width'));
           }
@@ -700,2 +697,27 @@ }
   /**
+   * Sets width when not using native lazy load
+   * @param img
+   * @param options
+   */
+  setImgOnLazyLoad(img, options){
+    img[0].setAttribute('width', img[0].getAttribute('data-width'));
+  }
+
+  /**
+   * Returns true if Intersection Observer API is supported
+   * @returns {boolean}
+   */
+  isLazyLoadSupported() {
+    return window && 'IntersectionObserver' in window;
+  }
+
+  /**
+   * Returns true if using Chrome
+   * @returns {boolean}
+   */
+  isNativeLazyLoadSupported() {
+    return 'loading' in HTMLImageElement.prototype;
+  }
+
+  /**
    * Returns a {@link Transformation} object, initialized with the specified options, for chaining purposes.
@@ -702,0 +724,0 @@ * @function Cloudinary#transformation

src/parameters.js

@@ -16,7 +16,4 @@ import Expression from './expression';
 import Layer from './layer/layer';
-
 import TextLayer from './layer/textlayer';
-
 import SubtitlesLayer from './layer/subtitleslayer';
-
 import FetchLayer from './layer/fetchlayer';
@@ -95,3 +92,3 @@
 
-  build_array(arg) {
+  static build_array(arg) {
     if(arg == null) {
@@ -124,7 +121,7 @@ return [];
         if ('codec' in param) {
-          video = param['codec'];
+          video = param.codec;
           if ('profile' in param) {
-            video += ":" + param['profile'];
+            video += ":" + param.profile;
             if ('level' in param) {
-              video += ":" + param['level'];
+              video += ":" + param.level;
             }
@@ -140,3 +137,2 @@ }
   }
-
 }
@@ -156,3 +152,3 @@
    */
-  constructor(name, shortName, sep = '.', process) {
+  constructor(name, shortName, sep = '.', process = undefined) {
     super(name, shortName, process);
@@ -193,6 +189,5 @@ this.sep = sep;
   }
-
 }
 
-var TransformationParam = class TransformationParam extends Param {
+class TransformationParam extends Param {
   /**
@@ -208,3 +203,3 @@ * A parameter that represents a transformation
    */
-  constructor(name, shortName = "t", sep = '.', process) {
+  constructor(name, shortName = "t", sep = '.', process = undefined) {
     super(name, shortName, process);
@@ -214,25 +209,36 @@ this.sep = sep;
 
+  /**
+   * Generate string representations of the transformation.
+   * @returns {*} Returns either the transformation as a string, or an array of string representations.
+   */
   serialize() {
-    if (isEmpty(this.value())) {
-      return '';
-    } else if (allStrings(this.value())) {
-      let joined = this.value().join(this.sep);
+    let result = '';
+    const val = this.value();
+
+    if (isEmpty(val)) {
+      return result;
+    }
+
+    // val is an array of strings so join them
+    if (allStrings(val)) {
+      const joined = val.join(this.sep);  // creates t1.t2.t3 in case multiple named transformations were configured
       if (!isEmpty(joined)) {
-        return `${this.shortName}_${joined}`;
-      } else {
-        return '';
+        // in case options.transformation was not set with an empty string (val != ['']);
+        result = `${this.shortName}_${joined}`;
       }
-    } else {
-      return this.value().map(t=>{
+    } else { // Convert val to an array of strings
+      result = val.map(t => {
         if (isString(t) && !isEmpty(t)) {
           return `${this.shortName}_${t}`;
-        } else if (isFunction(t.serialize)) {
+        }
+        if (isFunction(t.serialize)) {
           return t.serialize();
-        } else if (isPlainObject(t) && !isEmpty(t)) {
+        }
+        if (isPlainObject(t) && !isEmpty(t)) {
           return new Transformation(t).serialize();
-        } else {
-          return undefined;
         }
+        return undefined;
       }).filter(t=>t);
     }
+    return result;
   }
@@ -248,8 +254,11 @@
   }
+}
 
-};
+const number_pattern = "([0-9]*)\\.([0-9]+)|([0-9]+)";
+const offset_any_pattern = "(" + number_pattern + ")([%pP])?";
 
 class RangeParam extends Param {
+
   /**
-   * A parameter that represents a range.
+   * A parameter that represents a range
    * @param {string} name - The name of the parameter in snake_case
@@ -263,12 +272,10 @@ * @param {string} shortName - The name of the serialized form of the parameter
    */
-  constructor(name, shortName, process) {
+  constructor(name, shortName, process = RangeParam.norm_range_value) {
     super(name, shortName, process);
-    this.process || (this.process = this.norm_range_value);
   }
+  static norm_range_value(value) {
 
-  static norm_range_value(value) {
-    var modifier, offset;
-    offset = String(value).match(new RegExp('^' + offset_any_pattern + '$'));
+    let offset = String(value).match(new RegExp('^' + offset_any_pattern + '$'));
     if (offset) {
-      modifier = offset[5] != null ? 'p' : '';
+      let modifier = offset[5] != null ? 'p' : '';
       value = (offset[1] || offset[4]) + modifier;
@@ -278,6 +285,5 @@ }
   }
-
 }
 
-var RawParam = class RawParam extends Param {
+class RawParam extends Param {
   constructor(name, shortName, process = identity) {
@@ -291,16 +297,4 @@ super(name, shortName, process);
 
-};
+}
 
-const LAYER_KEYWORD_PARAMS = [
-  ["font_weight", "normal"],
-  ["font_style", "normal"],
-  ["text_decoration", "none"],
-  ["text_align", null],
-  ["stroke", "none"],
-  ["letter_spacing", null],
-  ["line_spacing", null],
-  ["font_antialias", null],
-  ["font_hinting", null]
-];
-
 class LayerParam extends Param {
@@ -340,6 +334,5 @@ // Parse layer options
 
-  textStyle(layer) {
+  static textStyle(layer) {
     return (new TextLayer(layer)).textStyleIdentifier();
   }
-
 }
@@ -351,3 +344,2 @@
   }
-
 }
@@ -354,0 +346,0 @@

src/transformation.js

@@ -43,3 +43,3 @@ import Expression from './expression';
       }
-    })
+    });
   });
@@ -129,3 +129,3 @@ return target;
     /** @protected */
-    this.rawParam = function (value, name, abbr, defaultValue, process = identity) {
+    this.rawParam = function (value, name, abbr, defaultValue, process) {
       process = lastArgCallback(arguments);
@@ -136,3 +136,3 @@ trans[name] = new RawParam(name, abbr, process).set(value);
     /** @protected */
-    this.rangeParam = function (value, name, abbr, defaultValue, process = identity) {
+    this.rangeParam = function (value, name, abbr, defaultValue, process) {
       process = lastArgCallback(arguments);
@@ -143,3 +143,3 @@ trans[name] = new RangeParam(name, abbr, process).set(value);
     /** @protected */
-    this.arrayParam = function (value, name, abbr, sep = ":", defaultValue = [], process = identity) {
+    this.arrayParam = function (value, name, abbr, sep = ":", defaultValue = [], process = undefined) {
       process = lastArgCallback(arguments);
@@ -150,3 +150,3 @@ trans[name] = new ArrayParam(name, abbr, sep, process).set(value);
     /** @protected */
-    this.transformationParam = function (value, name, abbr, sep = ".", defaultValue, process = identity) {
+    this.transformationParam = function (value, name, abbr, sep = ".", defaultValue = undefined, process = undefined) {
       process = lastArgCallback(arguments);
@@ -279,7 +279,6 @@ trans[name] = new TransformationParam(name, abbr, sep, process).set(value);
    */
-  fromOptions(options) {
+  fromOptions(options = {}) {
     if (options instanceof TransformationBase) {
       this.fromTransformation(options);
     } else {
-      options || (options = {});
       if (isString(options) || isArray(options)) {
@@ -408,3 +407,3 @@ options = {
    */
-  listNames() {
+  static listNames() {
     return Transformation.methods;
@@ -419,12 +418,11 @@ }
   toHtmlAttributes() {
-    var attrName, height, key, options, ref2, ref3, value, width;
+    var attrName, height, options, ref2, ref3, value, width;
     options = {};
-    for (key in this.otherOptions) {
+    Object.keys(this.otherOptions).forEach(key=>{
       value = this.otherOptions[key];
-      if (contains(Transformation.PARAM_NAMES, snakeCase(key))) {
-        continue;
+      if (!contains(Transformation.PARAM_NAMES, snakeCase(key))) {
+        attrName = /^html_/.test(key) ? key.slice(5) : key;
+        options[attrName] = value;
       }
-      attrName = /^html_/.test(key) ? key.slice(5) : key;
-      options[attrName] = value;
-    }
+    });
     // convert all "html_key" to "key" with the same value
@@ -440,9 +438,9 @@ this.keys().forEach(key => {
       if (parseFloat(width) >= 1.0) {
-        if (options['width'] == null) {
-          options['width'] = width;
+        if (options.width == null) {
+          options.width = width;
         }
       }
       if (parseFloat(height) >= 1.0) {
-        if (options['height'] == null) {
-          options['height'] = height;
+        if (options.height == null) {
+          options.height = height;
         }
@@ -454,3 +452,3 @@ }
 
-  isValidParamName(name) {
+  static isValidParamName(name) {
     return Transformation.methods.indexOf(camelCase(name)) >= 0;
@@ -483,5 +481,4 @@ }
   }
+}
 
-};
-
 const VAR_NAME_RE = /^\$[a-zA-Z0-9]+$/;
@@ -518,7 +515,7 @@
 
-function processCustomFunction(value) {
-  if (value.function_type === "remote") {
-    return [value.function_type, btoa(value.source)].join(":")
-  } else if (value.function_type === "wasm") {
-    return [value.function_type, value.source].join(":")
+function processCustomFunction({function_type, source}) {
+  if (function_type === 'remote') {
+    return [function_type, btoa(source)].join(":");
+  } else if (function_type === 'wasm') {
+    return [function_type, source].join(":");
   }
@@ -556,5 +553,5 @@ }
    * t = new cloudinary.Transformation( {angle: 20, crop: "scale", width: "auto"});
-   * @see <a href="https://cloudinary.com/documentation/image_transformation_reference" 
+   * @see <a href="https://cloudinary.com/documentation/image_transformation_reference"
    *  target="_blank">Available image transformations</a>
-   * @see <a href="https://cloudinary.com/documentation/video_transformation_reference" 
+   * @see <a href="https://cloudinary.com/documentation/video_transformation_reference"
    *  target="_blank">Available video transformations</a>
@@ -644,3 +641,3 @@ */
   }
-  
+
   defaultImage(value) {
@@ -647,0 +644,0 @@ return this.param(value, "default_image", "d");

src/url.js

@@ -285,3 +285,4 @@ import Transformation from './transformation';
     .join('/')
-    .replace(/([^:])\/+/g, '$1/');
+    .replace(/([^:])\/+/g, '$1/') // replace '///' with '//'
+    .replace(' ', '%20');
 }
@@ -288,0 +289,0 @@

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

Improved metrics

Total package byte prevSize

1785027

increased by1.02%

Number of package files

46

increased by2.22%

Lines of code

21990

increased by0.56%

Worsened metrics

Number of low supply chain risk alerts

13

increased by8.33%

No dependency changes