feat(#118):add srcset and sizes to lazy-img component

Author: peterpeterparker

webcomponents/lazy-img/src/components.d.ts

@@ -14,14 +14,18 @@ export namespace Components {
 
   interface DeckgoLazyImg {
     'imgAlt': string;
+    'imgSizes': string;
     'imgSrc': string;
+    'imgSrcSet': string;
     'lazyLoad': () => Promise<void>;
     'observerRootMargin': string;
     'observerThreshold': number | number[];
   }
   interface DeckgoLazyImgAttributes extends StencilHTMLAttributes {
     'imgAlt'?: string;
+    'imgSizes'?: string;
     'imgSrc'?: string;
+    'imgSrcSet'?: string;
     'observerRootMargin'?: string;
     'observerThreshold'?: number | number[];
     'onLazyImgDidLoad'?: (event: CustomEvent) => void;

webcomponents/lazy-img/src/components/lazy-img/deckdeckgo-lazy-img.tsx

@@ -14,9 +14,15 @@ export class DeckdeckgoLazyImg {
   @Prop({reflectToAttr: true})
   imgSrc: string;
 
+  @Prop({reflectToAttr: true})
+  imgSrcSet: string;
+
   @Prop({reflectToAttr: true})
   imgAlt: string;
 
+  @Prop({reflectToAttr: true})
+  imgSizes: string;
+
   @Prop()
   observerRootMargin: string = '100px 0px';
 
@@ -80,11 +86,17 @@ export class DeckdeckgoLazyImg {
         img.removeAttribute('data-src');
       }
 
+      if (img && img.hasAttribute('data-srcset')) {
+        img.setAttribute('srcset', img.getAttribute('data-srcset'));
+        img.removeAttribute('data-srcset');
+      }
+
       resolve();
     });
   }
 
   render() {
-    return <img data-src={this.imgSrc} alt={this.imgAlt ? this.imgAlt : this.imgSrc}/>;
+    return <img data-src={this.imgSrc} alt={this.imgAlt ? this.imgAlt : this.imgSrc}
+                data-srcset={this.imgSrcSet ? this.imgSrcSet : undefined} sizes={this.imgSizes ? this.imgSizes : undefined}/>;
   }
 }

webcomponents/lazy-img/src/index.html

@@ -42,5 +42,9 @@
   <deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
   <deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
 
+  <deckgo-lazy-img style="background: red;"
+    img-sizes="(min-width: 40em) 80vw, 100vw"
+    img-src-set="https://deckdeckgo.com/assets/img/deckdeckgo.png 1x, https://deckdeckgo.com/assets/img/deckdeckgo.svg 2x"></deckgo-lazy-img>
+
 </body>
 </html>