feat(img-loader): pass attributes to img element (#111)

* Passthrough of class for image using imgAttributes

* Passthrough of class attribute for _useImg

* Build for deployment

* Pass through attribute dictionary for _useImg

* Attribute object definition

* Updated include statement in index.ts, Readme documentation.

* Updated include statements

* Reverted .gitignore

* Remove dist files from git repo

* Return newline characters to html and css files

* Reverting changes to html and css files

* Revert tslint changes

* @ihadeed requested changes

Author: jamesatfish

README.md

@@ -110,6 +110,7 @@ The `<img-loader>` component takes many attributes that allows you to customize
 | backgroundSize | string | Sets the `background-size` CSS property of the `<img-loader>` element. This is ignored if `useImg` is set to `true`. | contain |
 | backgroundRepeat | string | Sets the `background-repeat` CSS property of the `<img-loader>` element. This is ignored if `useImg` is set to `true`. | no-repeat |
 | fallbackAsPlaceholder | boolean | Use fallback as a placeholder until the image loads. | false |
+| imgAttributes | ImageAttribute[] | An array of ImageAttribute objects (element, value).  If `useImg == true`, this array will be iterated and each object added as an attribute to the generated `<img>` HTML element. | []] |
 
 
 **Note:** The default values can be changed using the [global configuration](https://github.com/zyramedia/ionic-image-loader#global-configuration) feature.
@@ -337,6 +338,36 @@ class MyComponent {
 
 ```
 
+# Passing HTML / CSS Attributes to a generated image
+
+When using ImageLoader to generate an `<img>` element it may be desirable for the generated element to include additional attributes to provide styling or interaction qualities.  The optional `imgAttributes` value can be used to provide such additional attributes which will be included in the generated `<img>` element in the DOM.
+
+Usage:
+
+1. Include the ImageAttribute model in your .ts
+```typescript
+import { ImageAttribute } from 'ionic-image-loader'
+```
+
+2. Generate an array of ImageAttribute objects
+```typescript
+const imageAttributes: ImageAttribute[] = [];
+imageAttributes.push({
+  element: 'class',
+  value: 'circle-photo'
+})
+```
+
+3. Include the `imgAttributes` element in the `img-loader` element of your HTML
+```html
+ <img-loader [src]="..." useImg [imgAttributes]="imageAttributes"> </img-loader>
+```
+
+4. The generated `<img>` tag will be rendered with the specified attributes
+```html
+  <img src="..." class="circle-photo">
+```
+
 <br><br>
 ## Contribution
 - **Having an issue**? or looking for support? [Open an issue](https://github.com/zyra/ionic-image-loader/issues/new) and we will get you the help you need.

package-lock.json

@@ -0,0 +1,4 @@
+export interface ImageAttribute {
+    element: string;
+    value: string;
+}

src/components/image-attribute.ts

@@ -1,6 +1,7 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer } from '@angular/core';
 import { ImageLoader } from '../providers/image-loader';
 import { ImageLoaderConfig } from '../providers/image-loader-config';
+import { ImageAttribute } from './image-attribute';
 
 const propMap: any = {
   display: 'display',
@@ -30,11 +31,50 @@ export class ImgLoader implements OnInit {
    * Whether to show the fallback image instead of a spinner while the image loads
    */
   @Input() fallbackAsPlaceholder: boolean = this._config.fallbackAsPlaceholder;
+
+  /**
+   * Use <img> tag
+   */
+  @Input()
+  set useImg(val: boolean) {
+    this._useImg = val !== false;
+  }
+
+  private _useImg: boolean = this._config.useImg;
+
+
+  /**
+   * Attributes to pass through to img tag if _useImg == true
+   */
+  @Input('imgAttributes') imgAttributes: ImageAttribute[] = [];
+
+  /**
+   * Convenience attribute to disable caching
+   * @param val
+   */
+  @Input()
+  set noCache(val: boolean) {
+    this.cache = val !== false;
+  }
   /**
    * Enable/Disable caching
    * @type {boolean}
    */
   @Input() cache: boolean = true;
+  /**
+   * The URL of the image to load.
+   */
+  @Input()
+  set src(imageUrl: string) {
+    this._src = this.processImageUrl(imageUrl);
+    this.updateImage(this._src);
+  };
+
+  get src(): string {
+    return this._src;
+  }
+
+  private _src: string;
   /**
    * Width of the image. This will be ignored if using useImg.
    */
@@ -83,40 +123,6 @@ export class ImgLoader implements OnInit {
   ) {
   }
 
-  private _src: string;
-
-  get src(): string {
-    return this._src;
-  }
-
-  /**
-   * The URL of the image to load.
-   */
-  @Input()
-  set src(imageUrl: string) {
-    this._src = this.processImageUrl(imageUrl);
-    this.updateImage(this._src);
-  };
-
-  private _useImg: boolean = this._config.useImg;
-
-  /**
-   * Use <img> tag
-   */
-  @Input()
-  set useImg(val: boolean) {
-    this._useImg = val !== false;
-  }
-
-  /**
-   * Convenience attribute to disable caching
-   * @param val
-   */
-  @Input()
-  set noCache(val: boolean) {
-    this.cache = val !== false;
-  }
-
   ngOnInit(): void {
     if (this.fallbackAsPlaceholder && this.fallbackUrl) {
       this.setImage(this.fallbackUrl, false);
@@ -185,6 +191,10 @@ export class ImgLoader implements OnInit {
       // set it's src
       this._renderer.setElementAttribute(this.element, 'src', imageUrl);
 
+      // if imgAttributes are defined, add them to our img element
+      this.imgAttributes.forEach((attribute) => {
+        this._renderer.setElementAttribute(this.element, attribute.element, attribute.value);
+      });
 
       if (this.fallbackUrl && !this._imageLoader.nativeAvailable) {
         this._renderer.listen(this.element, 'error', () => this._renderer.setElementAttribute(this.element, 'src', this.fallbackUrl));

src/components/img-loader.ts

@@ -1,6 +1,7 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { ImgLoader } from './components/img-loader';
 import { ImageLoader } from './providers/image-loader';
+import { ImageAttribute } from './components/image-attribute';
 import { ImageLoaderConfig } from './providers/image-loader-config';
 import { IonicModule } from 'ionic-angular';
 import { File } from '@ionic-native/file';

src/image-loader.module.ts

@@ -1,4 +1,5 @@
 export * from './image-loader.module';
 export * from './components/img-loader';
 export * from './providers/image-loader-config';
+export * from './components/image-attribute';
 export * from './providers/image-loader';