Add accessibility mode attribute to cl-image (#246)

* Add accessibility mode attribute to cl-image

Author: strausr

src/cloudinary-image.component.spec.ts

@@ -855,4 +855,67 @@ describe('CloudinaryImage', () => {
       expect(img.attributes.getNamedItem('src').value).toEqual(jasmine.stringMatching('e_sepia/c_fit,w_30/e_blur:2000,f_auto,q_1/bear'));
     }));
   });
+  describe('cl-image with acessibility modes', () => {
+    @Component({
+      template: `<cl-image public-id="bear" accessibility="darkmode"></cl-image>
+      <cl-image public-id="bear" accessibility="monochrome"></cl-image>
+      <cl-image public-id="bear" accessibility="brightmode"></cl-image>
+      <cl-image public-id="bear" accessibility="colorblind"></cl-image>`
+    })
+    class TestComponent {}
+
+    let fixture: ComponentFixture<TestComponent>;
+    let des: DebugElement[];  // the elements w/ the directive
+    let testLocalCloudinary: Cloudinary = new Cloudinary(require('cloudinary-core'),
+      { cloud_name: '@@fake_angular2_sdk@@', client_hints: true } as CloudinaryConfiguration);
+    beforeEach(() => {
+      fixture = TestBed.configureTestingModule({
+        declarations: [CloudinaryTransformationDirective, CloudinaryImage, TestComponent],
+        providers: [{ provide: Cloudinary, useValue: testLocalCloudinary }]
+      }).createComponent(TestComponent);
+      fixture.detectChanges(); // initial binding
+      des = fixture.debugElement.queryAll(By.directive(CloudinaryImage));
+    });
+    it('creates an img element with accessibility darkmode', fakeAsync(() => {
+      const img = des[0].children[0].nativeElement as HTMLImageElement;
+      expect(img.attributes.getNamedItem('src').value).toEqual(jasmine.stringMatching('e_tint:75:black/bear'));
+    }));
+    it('creates an img element with accessibility monochrome', fakeAsync(() => {
+      const img = des[1].children[0].nativeElement as HTMLImageElement;
+      expect(img.attributes.getNamedItem('src').value).toEqual(jasmine.stringMatching('e_grayscale/bear'));
+    }));
+    it('creates an img element with accessibility brightmode', fakeAsync(() => {
+      const img = des[2].children[0].nativeElement as HTMLImageElement;
+      expect(img.attributes.getNamedItem('src').value).toEqual(jasmine.stringMatching('e_tint:50:white/bear'));
+    }));
+    it('creates an img element with accessibility colorblind', fakeAsync(() => {
+      const img = des[3].children[0].nativeElement as HTMLImageElement;
+      expect(img.attributes.getNamedItem('src').value).toEqual(jasmine.stringMatching('e_assist_colorblind/bear'));
+    }));
+  });
+  describe('cl-image with acessibility modes and transformation', () => {
+    @Component({
+      template: `<cl-image public-id="bear" accessibility="darkmode" effect="grayscale" overlay="sample">
+        <cl-transformation effect="sepia"></cl-transformation>
+      </cl-image>`
+    })
+    class TestComponent {}
+
+    let fixture: ComponentFixture<TestComponent>;
+    let des: DebugElement[];  // the elements w/ the directive
+    let testLocalCloudinary: Cloudinary = new Cloudinary(require('cloudinary-core'),
+      { cloud_name: '@@fake_angular2_sdk@@', client_hints: true } as CloudinaryConfiguration);
+    beforeEach(() => {
+      fixture = TestBed.configureTestingModule({
+        declarations: [CloudinaryTransformationDirective, CloudinaryImage, TestComponent],
+        providers: [{ provide: Cloudinary, useValue: testLocalCloudinary }]
+      }).createComponent(TestComponent);
+      fixture.detectChanges(); // initial binding
+      des = fixture.debugElement.queryAll(By.directive(CloudinaryImage));
+    });
+    it('creates an img element with accessibility darkmode without overwriting effect', fakeAsync(() => {
+      const img = des[0].children[0].nativeElement as HTMLImageElement;
+      expect(img.attributes.getNamedItem('src').value).toEqual(jasmine.stringMatching('e_sepia/e_grayscale,l_sample/e_tint:75:black/bear'));
+    }));
+  });
 });

src/cloudinary-image.component.ts

@@ -17,12 +17,13 @@ import { Cloudinary } from './cloudinary.service';
 import { CloudinaryTransformationDirective } from './cloudinary-transformation.directive';
 import { CloudinaryPlaceHolder } from './cloudinary-placeholder.component';
 import { isBrowser } from './cloudinary.service';
+import { accessibilityEffect } from './constants';
 
 @Component({
   selector: 'cl-image',
   template: `<img [ngStyle]="{opacity: shouldShowPlaceHolder ? '0' : '1', position: shouldShowPlaceHolder ? 'absolute' : 'unset'}"(load)="hasLoaded()">
   <div [style.display]="shouldShowPlaceHolder ? 'inline' : 'none'">
-      <ng-content></ng-content>
+    <ng-content></ng-content>
   </div>
   `,
 })
@@ -33,6 +34,7 @@ export class CloudinaryImage
   @Input('loading') loading: string;
   @Input('width') width?: string;
   @Input('height') height?: string;
+  @Input('accessibility') accessibility?: string;
 
   @ContentChildren(CloudinaryTransformationDirective)
   transformations: QueryList<CloudinaryTransformationDirective>;
@@ -43,6 +45,7 @@ export class CloudinaryImage
 
   observer: MutationObserver;
   shouldShowPlaceHolder: boolean = true;
+  options: object = {};
 
   constructor(private el: ElementRef, private cloudinary: Cloudinary) {}
 
@@ -109,6 +112,7 @@ export class CloudinaryImage
       image.onerror = e => {
         this.onError.emit(e);
       }
+
       const options = this.cloudinary.toCloudinaryAttributes(
         nativeElement.attributes,
         this.transformations
@@ -121,6 +125,10 @@ export class CloudinaryImage
       if (this.placeholderComponent) {
         this.placeholderHandler(options);
       }
+      if (this.accessibility) {
+        this.options = options;
+        options.src = this.accessibilityModeHandler();
+      }
       const imageTag = this.cloudinary.imageTag(this.publicId, options);
 
       this.setElementAttributes(image, imageTag.attributes());
@@ -145,4 +153,9 @@ export class CloudinaryImage
     })
     this.placeholderComponent.options = placeholderOptions;
   }
+
+  accessibilityModeHandler() {
+    return this.cloudinary.url(this.publicId, {transformation: [this.options, accessibilityEffect[this.accessibility]]});
+  }
 }
+

src/constants.ts

@@ -0,0 +1,6 @@
+export const accessibilityEffect = {
+  'darkmode': {effect: 'tint:75:black'},
+  'brightmode': {effect: 'tint:50:white'},
+  'monochrome': {effect: 'grayscale'},
+  'colorblind': {effect: 'assist_colorblind'}
+}