Fixed placeholder when using responsive lazy load (#256)

Author: strausr

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

@@ -824,8 +824,8 @@ describe('CloudinaryImage', () => {
       tick();
       fixture.detectChanges();
       const img = des[0].children[0].nativeElement as HTMLImageElement;
-      expect(img.attributes.getNamedItem('src').value).toEqual('http://res.cloudinary.com/' +
-        '@@fake_angular2_sdk@@/image/upload/c_fit,w_30/ar_1,b_auto,c_pad,w_iw_div_2/c_crop,g_north_east,h_10,w_10/c_fill,h_ih,w_iw/f_auto,q_auto/bear');
+      expect(img.attributes.getNamedItem('src').value).toEqual('http://res.cloudinary.com/@@fake_angular2_sdk@@/image/' +
+        'upload/c_fit,w_30/$currWidth_w,$currHeight_h/ar_1,b_auto,c_pad,w_iw_div_2/c_crop,g_north_east,h_10,w_10/c_fill,h_$currHeight,w_$currWidth/f_auto,q_auto/bear');
     }));
   });
   describe('placeholder type vectorize', () => {
@@ -977,5 +977,64 @@ describe('CloudinaryImage', () => {
       }
     });
   });
-});
+  describe('cl-image with responsive and placeholder on lazy load', async () => {
+    @Component({
+      template: `<div class="startWindow"><cl-image loading="lazy" width="300" public-id="bear"></cl-image></div>
+      <div style="margin-top: 700px"><cl-image loading="lazy" width="300" public-id="bear"></cl-image></div>
+      <div style="margin-top: 700px"><cl-image loading="lazy" public-id="bear" responsive width="auto" crop="scale">
+        <cl-placeholder></cl-placeholder>
+      </cl-image></div>
+      <div style="margin-top: 700px"><cl-image loading="lazy" width="300" public-id="bear"></cl-image></div>
+      <div style="margin-top: 700px"><cl-image loading="lazy" width="300" public-id="bear"></cl-image></div>
+      <div style="margin-top: 700px"><cl-image loading="lazy" width="300" public-id="bear"></cl-image></div>
+      <div style="margin-top: 700px"><cl-image loading="lazy" width="300" public-id="bear"></cl-image></div>
+      <div class="endWindow" style="margin-top: 700px"><cl-image loading="lazy" width="300" public-id="bear"></cl-image></div>`
+    })
+    class TestComponent {}
+
+    let fixture: ComponentFixture<TestComponent>;
+    let des: DebugElement[];  // the elements w/ the directive
+    let placeholder: DebugElement[];
+    let testLocalCloudinary: Cloudinary = new Cloudinary(require('cloudinary-core'),
+      { cloud_name: '@@fake_angular2_sdk@@', client_hints: true } as CloudinaryConfiguration);
+    beforeEach(fakeAsync(() => {
+      fixture = TestBed.configureTestingModule({
+        declarations: [CloudinaryTransformationDirective, CloudinaryImage, TestComponent, LazyLoadDirective, CloudinaryPlaceHolder],
+        providers: [{ provide: Cloudinary, useValue: testLocalCloudinary }]
+      }).createComponent(TestComponent);
+
+      fixture.detectChanges(); // initial binding
+      // all elements with an attached CloudinaryImage
+      des = fixture.debugElement.queryAll(By.directive(CloudinaryImage));
+      placeholder = fixture.debugElement.queryAll(By.directive(CloudinaryPlaceHolder));
+      tick();
+      fixture.detectChanges();
+    }));
+    it('Placeholder width should equal img width on Firefox', async () => {
+      const placeholderimg = placeholder[0].children[0].nativeElement as HTMLImageElement;
+      const img = des[2].children[0].nativeElement as HTMLImageElement;
+
+      const delay = 300;
+      const wait = (ms) => new Promise(res => setTimeout(res, ms));
+      const count = async () => document.querySelectorAll('.startWindow').length;
+      const scrollDown = async () => {
+        document.querySelector('.endWindow')
+          .scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });
+      }
+
+      let preCount = 0;
+      let postCount = 0;
+      do {
+        preCount = await count();
+        await scrollDown();
+        await wait(delay);
+        postCount = await count();
+      } while (postCount > preCount);
+      await wait(delay);
 
+      if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
+        expect(placeholderimg.attributes.getNamedItem('width')).toEqual(img.attributes.getNamedItem('width'));
+      }
+    });
+  });
+});

projects/angular-cld/src/lib/cloudinary-image.component.ts

@@ -126,7 +126,7 @@ export class CloudinaryImage
         delete options['responsive'];
       }
       if (this.placeholderComponent) {
-        this.placeholderHandler(options);
+        this.placeholderHandler(options, image);
       }
       if (this.accessibility) {
         this.options = options;
@@ -148,12 +148,23 @@ export class CloudinaryImage
     });
   }
 
-  placeholderHandler(options) {
-    const placeholderOptions = {};
-
-    Object.keys(options).forEach(name => {
-      placeholderOptions[name] = (name === 'width' && !options[name].startsWith('auto') || name === 'height') ? Math.ceil(parseInt(options[name], 10) * 0.1) : options[name];
-    });
+  /**
+   * Handles placeholder options
+   * In case of responsive sets width from resize
+   * In case width or height is known takes 10% of original dimension
+   */
+  placeholderHandler(options, image) {
+    const placeholderOptions = { ...options };
+    if (placeholderOptions['width']) {
+      if (placeholderOptions['width'] === 'auto') {
+        placeholderOptions['width'] = image.getAttribute('data-width');
+      } else {
+        placeholderOptions['width'] = Math.ceil(parseInt(options['width'], 10) * 0.1);
+      }
+    }
+    if (placeholderOptions['height']) {
+      placeholderOptions['height'] = Math.ceil(parseInt(options['height'], 10) * 0.1);
+    }
     this.placeholderComponent.options = placeholderOptions;
   }
 

projects/angular-cld/src/lib/constants.ts

@@ -11,9 +11,10 @@ export const predominantColorTransformPxl = [
   {fetch_format: 'auto', quality: 'auto'}];
 
 export const predominantColorTransform  = [
+  {variables: [['$currWidth', 'w'], ['$currHeight', 'h']]},
   {width: 'iw_div_2', aspect_ratio: 1, crop: 'pad', background: 'auto'},
   {crop: 'crop', width: 10, height: 10, gravity: 'north_east'},
-  {width: 'iw', height: 'ih', crop: 'fill'},
+  {width: '$currWidth', height: '$currHeight', crop: 'fill'},
   {fetch_format: 'auto', quality: 'auto'}];
 
 export const placeholderImageOptions = {