add position input to background image directive (#309)

Author: strausr

projects/angular-cld/src/lib/cloudinary-background-image.directive.spec.ts

@@ -12,7 +12,7 @@ import { CloudinaryTransformationDirective } from './cloudinary-transformation.d
         <cl-transformation effect="sepia"></cl-transformation>
         click me
     </button>
-    <img [clBackgroundImage]="image.public_id" width="100" crop="scale"/>
+    <img [clBackgroundImage]="image.public_id" position="left" width="100" crop="scale"/>
     `
 })
 class TestComponent { }
@@ -56,4 +56,14 @@ describe('CloudinaryBackgroundImageDirective', () => {
     const div = des[1].nativeElement as HTMLDivElement;
     expect(div.style.backgroundImage).toEqual(jasmine.stringMatching(/c_scale,w_100\/some_image_id/));
   });
+
+  it('background image position should default to center', () => {
+    const div = des[0].nativeElement as HTMLDivElement;
+    expect(div.style.backgroundPosition).toEqual('center center');
+  });
+
+  it('should be able to pass background image position', () => {
+    const div = des[1].nativeElement as HTMLDivElement;
+    expect(div.style.backgroundPosition).toEqual('left center');
+  });
 });

projects/angular-cld/src/lib/cloudinary-background-image.directive.ts

@@ -8,6 +8,7 @@ import {CloudinaryTransformationDirective} from './cloudinary-transformation.dir
 export class CloudinaryBackgroundImageDirective implements AfterViewInit {
 
     @Input() clBackgroundImage: string;
+    @Input() position: string = 'center';
 
     @ContentChildren(CloudinaryTransformationDirective)
     transformations: QueryList<CloudinaryTransformationDirective>;
@@ -26,7 +27,7 @@ export class CloudinaryBackgroundImageDirective implements AfterViewInit {
         const imageUrl = this.cloudinary.url(this.clBackgroundImage, options);
         this.renderer.setStyle(nativeElement, 'background-image', `url('${imageUrl}')`);
         this.renderer.setStyle(nativeElement, 'background-repeat', 'no-repeat');
-        this.renderer.setStyle(nativeElement, 'background-position', 'center');
+        this.renderer.setStyle(nativeElement, 'background-position', this.position);
       }
   }
 }