Add missing definitions and fix pictureTag arguments (#278)

cloudinary · Dec 18, 2021 · eec1015 · eec1015
1 parent d0c109b
commit eec1015
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 4 deletions.
diff --git a/src/cloudinary.js b/src/cloudinary.js
@@ -279,11 +279,12 @@ class Cloudinary {
    * @function Cloudinary#PictureTag
    * @param {string} publicId - the public ID of the resource
    * @param {Object} options - additional options to pass to the new ImageTag instance
+   * @param {Array<Object>} sources - the sources definitions
    * @return {PictureTag} A PictureTag that is attached (chained) to this Cloudinary instance
    */
-  pictureTag(publicId, options) {
+  pictureTag(publicId, options, sources) {
     var tag;
-    tag = new PictureTag(publicId, this.config());
+    tag = new PictureTag(publicId, this.config(), sources);
     tag.transformation().fromOptions(options);
     return tag;
   }

diff --git a/src/tags/picturetag.js b/src/tags/picturetag.js
@@ -5,7 +5,7 @@ import SourceTag from './sourcetag';
 import {extractUrlParams} from "../util";
 
 class PictureTag extends HtmlTag {
-  constructor(publicId, options = {}, sources) {
+  constructor(publicId, options = {}, sources = []) {
     super('picture', publicId, options);
     this.widthList = sources;
   }

diff --git a/test/spec/automatic/tagspec.js b/test/spec/automatic/tagspec.js
@@ -519,4 +519,51 @@ describe("PictureTag", function(){
       "</picture>";
     expect(tag.toHtml()).toBe(exp_tag);
   });
+
+  describe("pictureTag", function(){
+    let defaultUploadPath, config, cl;
+    config = {'cloud_name': 'test123'};
+    defaultUploadPath = `${protocol}//res.cloudinary.com/${config.cloud_name}/image/upload/`;
+
+    beforeEach(function () {
+      cl = new Cloudinary(config);
+    });
+
+    it("should generate a picture tag", function () {
+      let tag = cl.pictureTag('image_id').toHtml();
+      return expect(tag).toBe(`<picture><img src="${defaultUploadPath}image_id"></picture>`);
+    });
+
+    it("should generate a picture tag with options", function () {
+      let tag = cl.pictureTag('image_id', {width: 150, crop: "fill"}).toHtml();
+      return expect(tag).toBe(`<picture><img src="${defaultUploadPath}c_fill,w_150/image_id" width="150"></picture>`);
+    });
+
+    it("should generate a picture tag with options and sources", function () {
+      let tag = cl.pictureTag(
+          'image_id',
+          {
+            width: 150,
+            crop: "fill"
+          },
+          [
+            {
+              "max_width": 200,
+              "transformation": {
+                "crop": "scale",
+                "effect": "sepia",
+                "angle": 17,
+                "width": 100
+              }
+            }
+          ]
+      ).toHtml();
+      return expect(tag).toBe(
+          `<picture>` +
+          `<source media="(max-width: 200px)" srcset="${defaultUploadPath}c_fill,w_150/a_17,c_scale,e_sepia,w_100/image_id">` +
+          `<img src="${defaultUploadPath}c_fill,w_150/image_id" width="150">` +
+          `</picture>`
+      );
+    });
+  });
 });
diff --git a/types/cloudinary-core-tests.ts b/types/cloudinary-core-tests.ts
@@ -74,6 +74,42 @@ const publicId = 'imagePublicId';
 cld.image(publicId); // image.src == http://res.cloudinary.com/demo/image/upload/${publicId}
 
 
+cld.pictureTag(publicId, {
+    cloud_name: "test123",
+    width: 100,
+    height: 100,
+    crop: "fill",
+});
+
+
+cld.pictureTag(publicId, {
+    cloud_name: "test123",
+    width: 100,
+    height: 100,
+    crop: "fill",
+}, [
+    {
+        "max_width": 200,
+        "transformation": {
+            "crop": "scale",
+            "effect": "sepia",
+            "angle": 17,
+            "width": 100
+        }
+    }
+]);
+
+
+cld.sourceTag(publicId);
+
+
+cld.sourceTag(publicId, {
+    width: 100,
+    height: 100,
+    crop: "fill",
+});
+
+
 cld.video(publicId); // video == <video poster="http://res.cloudinary.com/demo/video/upload/${publicId}.jpg"><source src="http://res.cloudinary.com/demo/video/upload/${publicId}.webm" type="video/webm"><source src="http://res.cloudinary.com/demo/video/upload/${publicId}.mp4" type="video/mp4"><source src="http://res.cloudinary.com/demo/video/upload/${publicId}.ogv" type="video/ogg"></video>
 
 

diff --git a/types/cloudinary-core.d.ts b/types/cloudinary-core.d.ts
@@ -451,12 +451,25 @@ export class ImageTag extends HtmlTag {
  * @extends HtmlTag
  * @param {string} [publicId]
  * @param {Object} [options]
+ * @param {Array<Object>} [widthList]
  */
 export class PictureTag extends HtmlTag {
-    static "new"(publicId: string, options?: Transformation.Options, widthList?: Array<[number, number, Transformation]>): PictureTag;
+    static "new"(publicId: string, options?: Transformation.Options, widthList?: Array<Object>): PictureTag;
     static "new"(name: string, publicId: string, options?: Transformation.Options): PictureTag;
 }
 
+/**
+ * Creates an HTML (DOM) Source tag using Cloudinary as the source.
+ * @constructor SourceTag
+ * @extends HtmlTag
+ * @param {string} [publicId]
+ * @param {Object} [options]
+ */
+export class SourceTag extends HtmlTag {
+    static "new"(publicId: string, options?: Transformation.Options): SourceTag;
+    static "new"(name: string, publicId: string, options?: Transformation.Options): SourceTag;
+}
+
 /**
  * Creates an HTML (DOM) Video tag using Cloudinary as the source.
  * @constructor VideoTag
@@ -735,6 +748,25 @@ export class Cloudinary {
      */
     imageTag(publicId: string, options?: Transformation | Transformation.Options): ImageTag;
 
+    /**
+     * Creates a new PictureTag instance, configured using this own's configuration.
+     * @function Cloudinary#pictureTag
+     * @param {string} publicId - the public ID of the resource
+     * @param {Object} options - additional options to pass to the new PictureTag instance
+     * @param {Array<Object>} sources - the sources definitions
+     * @return {PictureTag} An PictureTag that is attached (chained) to this Cloudinary instance
+     */
+    pictureTag(publicId: string, options?: Transformation | Transformation.Options, sources?: Array<object>): PictureTag;
+
+    /**
+     * Creates a new SourceTag instance, configured using this own's configuration.
+     * @function Cloudinary#sourceTag
+     * @param {string} publicId - the public ID of the resource
+     * @param {Object} options - additional options to pass to the new SourceTag instance
+     * @return {SourceTag} An SourceTag that is attached (chained) to this Cloudinary instance
+     */
+    sourceTag(publicId: string, options?: Transformation | Transformation.Options): SourceTag;
+
     /**
      * Generate an image tag for the video thumbnail.
      * @function Cloudinary#video_thumbnail
@@ -877,6 +909,7 @@ declare let _default: {
     Layer: Layer,
     Param: Param,
     PictureTag: PictureTag,
+    SourceTag: SourceTag,
     SubtitlesLayer: SubtitlesLayer,
     TextLayer: TextLayer,
     Transformation: Transformation,