From 482f6b559718390a316cce2c6a0892d8e9991436 Mon Sep 17 00:00:00 2001 From: jamesatfish Date: Sat, 15 Sep 2018 06:35:42 +1000 Subject: [PATCH] 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 --- README.md | 31 ++++++++++++ package-lock.json | 11 +++++ src/components/image-attribute.ts | 4 ++ src/components/img-loader.ts | 78 +++++++++++++++++-------------- src/image-loader.module.ts | 1 + src/index.ts | 1 + 6 files changed, 92 insertions(+), 34 deletions(-) create mode 100644 src/components/image-attribute.ts diff --git a/README.md b/README.md index 93deaa9..649ce8a 100644 --- a/README.md +++ b/README.md @@ -110,6 +110,7 @@ The `` component takes many attributes that allows you to customize | backgroundSize | string | Sets the `background-size` CSS property of the `` element. This is ignored if `useImg` is set to `true`. | contain | | backgroundRepeat | string | Sets the `background-repeat` CSS property of the `` 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 `` 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 `` 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 `` 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 + +``` + +4. The generated `` tag will be rendered with the specified attributes +```html + +``` +

## 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. diff --git a/package-lock.json b/package-lock.json index 311b48e..ba3cdee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,6 @@ { "name": "ionic-image-loader", + "version": "4.2.2", "version": "5.0.5", "lockfileVersion": 1, "requires": true, @@ -109,6 +110,16 @@ "through": "2.3.8" } }, + "JSONStream": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz", + "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=", + "dev": true, + "requires": { + "jsonparse": "1.3.1", + "through": "2.3.8" + } + }, "add-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/add-stream/-/add-stream-1.0.0.tgz", diff --git a/src/components/image-attribute.ts b/src/components/image-attribute.ts new file mode 100644 index 0000000..05249f4 --- /dev/null +++ b/src/components/image-attribute.ts @@ -0,0 +1,4 @@ +export interface ImageAttribute { + element: string; + value: string; +} diff --git a/src/components/img-loader.ts b/src/components/img-loader.ts index 48db29f..1a2e0a5 100644 --- a/src/components/img-loader.ts +++ b/src/components/img-loader.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 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 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)); diff --git a/src/image-loader.module.ts b/src/image-loader.module.ts index 1a26ade..584e9d8 100644 --- a/src/image-loader.module.ts +++ b/src/image-loader.module.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'; diff --git a/src/index.ts b/src/index.ts index 251e5dd..913c8f0 100644 --- a/src/index.ts +++ b/src/index.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';