feat(cl-image): Add support for missing cloudinary's transformations

demo/demo.component.css

@@ -4,10 +4,16 @@
     border-bottom: 1px solid #eee;
 }
 
+.chapter-header{
+    font-size: 24px;
+    margin: 40px 0 20px;
+}
+
 .example {
     padding: 20px;
 }
 
 .example p {
     margin: 30px 0 20px;
 }
+

demo/demo.component.html

@@ -14,7 +14,10 @@ <h1 class="page-header">Cloudinary image directive</h1>
             {{ CODE_SAMPLES.components['cl-image']}}
         </code>
     </pre>
-    <p>For example, displaying the image with a public ID of <code>sample</code> uploaded to Cloudinary's <code>demo</code> account in <code>jpg</code> format:</p>
+    <p>Then use the <code>cl-image</code> tag to display your image with the corresponding transformation, as in the following examples</p>
+
+    <!-- 1rst example -->
+    <h2 class="chapter-header">Displaying an image</h2>
     <pre>
         <code class="language-markup">
             {{ CODE_SAMPLES.templates['cl-image'].simple}}
@@ -23,7 +26,8 @@ <h1 class="page-header">Cloudinary image directive</h1>
     <p style="text-align:center;">
         <cl-image public-id="sample" [options]="options" height="334" alt="Sample image" title="Sample image title"></cl-image>
     </p>
-    <p>Displaying the same image with a limited <code>height</code> of 200 pixels</p>
+    <!-- 2nd example -->
+    <h2 class="chapter-header">With a limited height</h2>
     <pre>
         <code class="language-markup">
             {{ CODE_SAMPLES.templates['cl-image']['transform-height']}}
@@ -32,18 +36,7 @@ <h1 class="page-header">Cloudinary image directive</h1>
     <p style="text-align:center;">
         <cl-image public-id="sample" [options]="options" height="200" alt="Sample image" title="Sample image title"></cl-image>
     </p>
-    <div>Image transformations are limited to the following parameters in the current version: 
-        <ul>
-            <li>
-                <a href="http://cloudinary.com/documentation/image_transformations#resizing_and_cropping_images"><code>height</code>, <code>width</code></a>: in pixels only (aspect ratio might be supported in a futur version)
-            </li>
-            <li>
-                <a href="http://cloudinary.com/documentation/image_transformations#resizing_and_cropping_images"><code>crop</code></a>
-            </li>
-            <li><a href="http://cloudinary.com/documentation/image_transformations#control_gravity"><code>gravity</code>, <code>x</code>, <code>y</code></a></li>
-        </ul>
-    </div>
-    <p>For example, displaying the same image cropped to a width of 300 pixels and a height of 200 pixels.</p>
+    <h2 class="chapter-header">Cropped to width and height</h2>
     <pre>
         <code class="language-markup">
             {{ CODE_SAMPLES.templates['cl-image']['transform-crop']}}
@@ -52,7 +45,7 @@ <h1 class="page-header">Cloudinary image directive</h1>
     <p style="text-align:center;">
         <cl-image public-id="sample" [options]="options" width="300" height="200" crop="crop"></cl-image>
     </p>
-    <p>Another example, displaying an image with automatic cropping and fill mode.</p>
+    <h2 class="chapter-header">With automatic cropping</h2>
     <pre>
         <code class="language-markup">
             {{ CODE_SAMPLES.templates['cl-image']['transform-autocrop']}}
@@ -72,4 +65,7 @@ <h1 class="page-header">Cloudinary image directive</h1>
             <p><b>Automatic fill</b></p>
         </span>
     </p>
+    <h2 class="chapter-header">Available transformations</h2>
+    <p>Please check the <a href="https://ekito.github.io/ng2-cloudinary/docs/classes/cloudinarytransforms.html">detailed documentation</a> for an exhaustive list of available transformations.</p>
+    <p>For more details about transformations options, check the <a href="http://cloudinary.com/documentation/image_transformation_reference" >cloudinary image transformation reference documentation</a></p>
 </div>

src/cloudinary-image.component.ts

@@ -33,30 +33,35 @@ export class CloudinaryImageComponent implements OnInit, OnChanges {
     }
 
     @Input()
-    set format(value: string){
-        this.transforms.format = value;
+    set width(value: number) {
+        this.transforms.width = value;
     }
 
     @Input()
     set height(value: number) {
         this.transforms.height = value;
     }
 
-    @Input()
-    set width(value: number) {
-        this.transforms.width = value;
-    }
-
     @Input()
     set crop(value: string) {
         this.transforms.crop = value;
     }
 
+    @Input('aspect-ratio')
+    set aspect_ratio(value: string) {
+        this.transforms.aspect_ratio = value;
+    }
+
     @Input()
     set gravity(value: string) {
         this.transforms.gravity = value;
     }
 
+    @Input()
+    set zoom(value: number) {
+        this.transforms.zoom = value;
+    }
+
     @Input()
     set x(value: number) {
         this.transforms.x = value;
@@ -67,4 +72,94 @@ export class CloudinaryImageComponent implements OnInit, OnChanges {
         this.transforms.y = value;
     }
 
+    @Input()
+    set format(value: string){
+        this.transforms.format = value;
+    }
+
+    @Input()
+    set quality(value: string) {
+        this.transforms.quality = value;
+    }
+
+    @Input()
+    set radius(value: string) {
+        this.transforms.radius = value;
+    }
+
+    @Input()
+    set angle(value: string) {
+        this.transforms.angle = value;
+    }
+
+    @Input()
+    set effect(value: string) {
+        this.transforms.effect = value;
+    }
+
+    @Input()
+    set opacity(value: number) {
+        this.transforms.opacity = value;
+    }
+
+    @Input()
+    set border(value: string) {
+        this.transforms.border = value;
+    }
+
+    @Input()
+    set background(value: string) {
+        this.transforms.background = value;
+    }
+
+    @Input()
+    set overlay(value: string) {
+        this.transforms.overlay = value;
+    }
+
+    @Input()
+    set underlay(value: string) {
+        this.transforms.underlay = value;
+    }
+
+    @Input('default-image')
+    set default_image(value: string) {
+        this.transforms.default_image = value;
+    }
+
+    @Input()
+    set delay(value: number) {
+        this.transforms.delay = value;
+    }
+
+    @Input()
+    set color(value: string) {
+        this.transforms.color = value;
+    }
+
+    @Input()
+    set dpr(value: string) {
+        this.transforms.dpr = value;
+    }
+
+    @Input()
+    set page(value: number) {
+        this.transforms.page = value;
+    }
+
+    @Input()
+    set density(value: number) {
+        this.transforms.density = value;
+    }
+
+    @Input()
+    set flags(value: string) {
+        this.transforms.flags = value;
+    }
+
+    @Input()
+    set transformation(value: string) {
+        this.transforms.transformation = value;
+    }
+
 }

src/cloudinary-image.service.ts

@@ -21,12 +21,12 @@ export class CloudinaryImageService {
 function getTransformationForUrlSegment(transforms: CloudinaryTransforms): string {
     let transformSegment: string = '';
 
-    transformSegment += toPropertySegment(transformSegment, 'height', transforms.height);
-    transformSegment += toPropertySegment(transformSegment, 'width', transforms.width);
-    transformSegment += toPropertySegment(transformSegment, 'gravity', transforms.gravity);
-    transformSegment += toPropertySegment(transformSegment, 'crop', transforms.crop);
-    transformSegment += toPropertySegment(transformSegment, 'x', transforms.x);
-    transformSegment += toPropertySegment(transformSegment, 'y', transforms.y);
+    //Loop on all transformations
+    for (let key in transforms) {
+        if (key !== 'format') {
+            transformSegment += toPropertySegment(transformSegment, key, transforms[key]);
+        }
+    }
 
     if (transformSegment.length > 0) {
         transformSegment += '/';
@@ -35,15 +35,15 @@ function getTransformationForUrlSegment(transforms: CloudinaryTransforms): strin
     return transformSegment;
 }
 
-function toPropertySegment(segment: string, name: string, value: any): string {
+function toPropertySegment(segment: string, transformation: string, value: any): string {
     let newSegment: string = '';
 
-    if (name && value) {
+    if (transformation && value) {
         if (segment.length > 0) {
             newSegment += ',';
         }
 
-        newSegment += name.substring(0, 1).toLowerCase() + '_' + value;
+        newSegment += CloudinaryTransforms.URL_PARAMS[transformation] + '_' + value;
     }
     return newSegment;
 }

src/cloudinary-transforms.class.ts

@@ -1,10 +1,56 @@
 export class CloudinaryTransforms {
-    format: string;
-    height: number;
+    static URL_PARAMS: { [key: string] : string; } = {
+        'width'         : 'w',
+        'height'        : 'h',
+        'crop'          : 'c',
+        'aspect_ratio'  : 'ar',
+        'gravity'       : 'g',
+        'zoom'          : 'z',
+        'x'             : 'x',
+        'y'             : 'y',
+        'quality'       : 'q',
+        'radius'        : 'r',
+        'angle'         : 'a',
+        'effect'        : 'e',
+        'opacity'       : 'o',
+        'border'        : 'bo',
+        'background'    : 'b',
+        'overlay'       : 'l',
+        'underlay'      : 'u',
+        'default_image' : 'd',
+        'delay'         : 'dl',
+        'color'         : 'co',
+        'dpr'           : 'dpr',
+        'page'          : 'pg',
+        'density'       : 'dn',
+        'flags'         : 'fl',
+        'transformation': 't'
+    };
+
     width: number;
+    height: number;
     crop: string;
+    aspect_ratio: string;
     gravity: string;
+    zoom: number;
     x: number;
     y: number;
-
+    format: string;
+    quality: string;
+    radius: string;
+    angle: string;
+    effect: string;
+    opacity: number;
+    border: string;
+    background: string;
+    overlay: string;
+    underlay: string;
+    default_image: string;
+    delay: number;
+    color: string;
+    dpr: string;
+    page: number;
+    density: number;
+    flags: string;
+    transformation: string;
 }