From d004d2dd8939143bb8c1c854b185e610e84f50cd Mon Sep 17 00:00:00 2001 From: Jonathan Chase Date: Fri, 31 Jan 2020 10:08:17 +0900 Subject: [PATCH] prep release --- README.md | 89 +++++++++++++++++-- license.md | 2 +- .../ngx-picture/src/lib/cloudinary-config.ts | 3 +- .../ngx-picture/src/lib/graph-cms-config.ts | 3 +- .../ngx-picture/src/lib/imagekit-config.ts | 3 +- .../ngx-picture/src/lib/ngx-picture-config.ts | 4 +- .../ngx-picture/src/lib/ngx-picture.module.ts | 2 +- 7 files changed, 93 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 7318365..315e9f1 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,7 @@ import { AppComponent } from './app.component'; export class AppModule {} ``` -## Usage +## Using the ngx-picture component ```html = { + breakpoints: { + [Breakpoints.XSmall]: { h: 10, w: 10 }, + [Breakpoints.Medium]: { h: 100, w: 100 }, + [Breakpoints.Large]: { h: 200, w: 200 } + }, + imageFormats: ['webp', 'jpg'], + srcInterpolator: ( + url: string, + imageFormat: ImageFormat, + breakpoint: string, + breakpointValue: Dimensions + ) => `${url}/w:${breakpointValue.w}/h:${breakpointValue.h}` +}; + +export function srcInterpolator( + url: string, + imageFormat: ImageFormat, + breakpoint: string, + breakpointValue: number +) { + return `${url.split('.')[0]}-${breakpointValue}.${ + imageFormat === 'jpeg' ? 'jpg' : 'webp' + }`; +} + +@NgModule({ + declarations: [AppComponent], + imports: [ + BrowserModule.withServerTransition({ appId: 'serverApp' }), + BrowserAnimationsModule, + MatButtonModule, + MatCardModule, + MatListModule, + NgxPictureModule.forRoot(ngxPictureConfig) + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule {} +``` + +### Changing the image template + +To use a custom img element provide an **ngTemplate** called **#imgTemplate**. + +```html + + + + + +``` + +The data context for the template is: + +```typescript +{ + src: string, + alt: string +} +``` + +## Example of rendered element ```html diff --git a/license.md b/license.md index db65a76..37619f7 100644 --- a/license.md +++ b/license.md @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2019 Useful Software Solutions Ltd +Copyright (c) 2020 Useful Software Solutions Ltd Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: diff --git a/projects/ngx-picture/src/lib/cloudinary-config.ts b/projects/ngx-picture/src/lib/cloudinary-config.ts index 3c4561b..acebeb7 100644 --- a/projects/ngx-picture/src/lib/cloudinary-config.ts +++ b/projects/ngx-picture/src/lib/cloudinary-config.ts @@ -1,12 +1,13 @@ import { DEFAULT_BREAKPOINTS } from './default-breakpoints'; import { NgxPictureConfig } from './ngx-picture-config'; +import { ImageFormat } from './picture/picture.component'; export const CLOUDINARY_CONFIG: NgxPictureConfig = { breakpoints: DEFAULT_BREAKPOINTS, imageFormats: ['webp', 'jpg'], srcInterpolator: ( url: string, - imageFormat: any, + imageFormat: ImageFormat, breakpoint: string, breakpointValue: number ) => diff --git a/projects/ngx-picture/src/lib/graph-cms-config.ts b/projects/ngx-picture/src/lib/graph-cms-config.ts index 02e80f9..84c4739 100644 --- a/projects/ngx-picture/src/lib/graph-cms-config.ts +++ b/projects/ngx-picture/src/lib/graph-cms-config.ts @@ -1,12 +1,13 @@ import { DEFAULT_BREAKPOINTS } from './default-breakpoints'; import { NgxPictureConfig } from './ngx-picture-config'; +import { ImageFormat } from './picture/picture.component'; export const GRAPH_CMS_CONFIG: NgxPictureConfig = { breakpoints: DEFAULT_BREAKPOINTS, imageFormats: ['webp', 'jpg'], srcInterpolator: ( url: string, - imageFormat: any, + imageFormat: ImageFormat, breakpoint: string, breakpointValue: number ) => diff --git a/projects/ngx-picture/src/lib/imagekit-config.ts b/projects/ngx-picture/src/lib/imagekit-config.ts index f0d0041..e0d1d93 100644 --- a/projects/ngx-picture/src/lib/imagekit-config.ts +++ b/projects/ngx-picture/src/lib/imagekit-config.ts @@ -1,12 +1,13 @@ import { DEFAULT_BREAKPOINTS } from './default-breakpoints'; import { NgxPictureConfig } from './ngx-picture-config'; +import { ImageFormat } from './picture/picture.component'; export const IMAGEKIT_CONFIG: NgxPictureConfig = { breakpoints: DEFAULT_BREAKPOINTS, imageFormats: ['webp', 'jpg'], srcInterpolator: ( url: string, - imageFormat: any, + imageFormat: ImageFormat, breakpoint: string, breakpointValue: number ) => { diff --git a/projects/ngx-picture/src/lib/ngx-picture-config.ts b/projects/ngx-picture/src/lib/ngx-picture-config.ts index 02bd648..bedb551 100644 --- a/projects/ngx-picture/src/lib/ngx-picture-config.ts +++ b/projects/ngx-picture/src/lib/ngx-picture-config.ts @@ -1,3 +1,5 @@ +import { ImageFormat } from './picture/picture.component'; + export interface NgxPictureConfig { breakpoints: { [key: string]: T; @@ -5,7 +7,7 @@ export interface NgxPictureConfig { imageFormats?: any[]; srcInterpolator: ( url: string, - imageFormat: any, + imageFormat: ImageFormat, breakpoint: string, breakpointValue: T ) => string; diff --git a/projects/ngx-picture/src/lib/ngx-picture.module.ts b/projects/ngx-picture/src/lib/ngx-picture.module.ts index 68864db..8328b20 100644 --- a/projects/ngx-picture/src/lib/ngx-picture.module.ts +++ b/projects/ngx-picture/src/lib/ngx-picture.module.ts @@ -11,7 +11,7 @@ import { PictureComponent } from './picture/picture.component'; entryComponents: [PictureComponent] }) export class NgxPictureModule { - static forRoot(config: NgxPictureConfig): ModuleWithProviders { + static forRoot(config: NgxPictureConfig): ModuleWithProviders { return { ngModule: NgxPictureModule, providers: [