-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
allow customize responsive image src generation. add round size gener…
…ator and default generator
- Loading branch information
1 parent
6c24864
commit ab3cc28
Showing
13 changed files
with
188 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
70 changes: 70 additions & 0 deletions
70
projects/deneb-ui-demo/src/app/responsive-image/responsive-image.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| <div class="demo-container"> | ||
| <div class="ui six doubling cards"> | ||
| <div class="card"> | ||
| <div class="image"> | ||
| <ui-responsive-image src="https://semantic-ui.com/images/avatar/large/elliot.jpg" [size]="{ | ||
| width: '100%', | ||
| height: 'auto', | ||
| ratio: 1, | ||
| originalWidth: 650, | ||
| originalHeight: 650 | ||
| }" ></ui-responsive-image> | ||
| </div> | ||
| </div> | ||
| <div class="card"> | ||
| <div class="image"> | ||
| <ui-responsive-image src="https://semantic-ui.com/images/avatar/large/helen.jpg" [size]="{ | ||
| width: '100%', | ||
| height: 'auto', | ||
| ratio: 1, | ||
| originalWidth: 650, | ||
| originalHeight: 650 | ||
| }" ></ui-responsive-image> | ||
| </div> | ||
| </div> | ||
| <div class="card"> | ||
| <div class="image"> | ||
| <ui-responsive-image src="https://semantic-ui.com/images/avatar/large/jenny.jpg" [size]="{ | ||
| width: '100%', | ||
| height: 'auto', | ||
| ratio: 1, | ||
| originalWidth: 650, | ||
| originalHeight: 650 | ||
| }" ></ui-responsive-image> | ||
| </div> | ||
| </div> | ||
| <div class="card"> | ||
| <div class="image"> | ||
| <ui-responsive-image src="https://semantic-ui.com/images/avatar/large/veronika.jpg" [size]="{ | ||
| width: '100%', | ||
| height: 'auto', | ||
| ratio: 1, | ||
| originalWidth: 650, | ||
| originalHeight: 650 | ||
| }" ></ui-responsive-image> | ||
| </div> | ||
| </div> | ||
| <div class="card"> | ||
| <div class="image"> | ||
| <ui-responsive-image src="https://semantic-ui.com/images/avatar/large/stevie.jpg" [size]="{ | ||
| width: '100%', | ||
| height: 'auto', | ||
| ratio: 1, | ||
| originalWidth: 650, | ||
| originalHeight: 650 | ||
| }" ></ui-responsive-image> | ||
| </div> | ||
| </div> | ||
| <div class="card"> | ||
| <div class="image"> | ||
| <ui-responsive-image src="https://semantic-ui.com/images/avatar/large/steve.jpg" [size]="{ | ||
| width: '100%', | ||
| height: 'auto', | ||
| ratio: 1, | ||
| originalWidth: 650, | ||
| originalHeight: 650 | ||
| }" ></ui-responsive-image> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
Empty file.
23 changes: 23 additions & 0 deletions
23
projects/deneb-ui-demo/src/app/responsive-image/responsive-image.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { ResponsiveImageComponent } from './responsive-image.component'; | ||
|
|
||
| describe('ResponsiveImageComponent', () => { | ||
| let component: ResponsiveImageComponent; | ||
| let fixture: ComponentFixture<ResponsiveImageComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [ResponsiveImageComponent] | ||
| }) | ||
| .compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(ResponsiveImageComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
19 changes: 19 additions & 0 deletions
19
projects/deneb-ui-demo/src/app/responsive-image/responsive-image.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { | ||
| ResponsiveGenerateSrcService, | ||
| RoundGenerateSrcService, | ||
| SRC_GENERATOR_SERVICE | ||
| } from '../../../../irohalab/deneb-ui/src'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-responsive-image', | ||
| templateUrl: './responsive-image.component.html', | ||
| styleUrl: './responsive-image.component.less', | ||
| providers: [ | ||
| // {provide: SRC_GENERATOR_SERVICE, useClass: ResponsiveGenerateSrcService}, | ||
| {provide: SRC_GENERATOR_SERVICE, useClass: RoundGenerateSrcService} | ||
| ] | ||
| }) | ||
| export class ResponsiveImageComponent { | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export const SRC_GENERATOR_SERVICE = 'SRC_GENERATOR_SERVICE'; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
projects/irohalab/deneb-ui/src/responsive-image/responsive.generate-src.service.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { Injectable } from '@angular/core'; | ||
|
|
||
| export interface IResponsiveGenerateSrc { | ||
| /** | ||
| * return an url for the real src, the width or height may be 0 that means it will be automatic to keep ratio. | ||
| * @param src | ||
| * @param width | ||
| * @param height | ||
| * @param originalWidth | ||
| * @param originalHeight | ||
| * @param ratio the client height/width ratio, can be 0 means the width or height is 0 | ||
| */ | ||
| makeRespSrc(src: string, width: number, height: number, originalWidth: number, originalHeight: number, ratio: number): string; | ||
| } | ||
|
|
||
| @Injectable() | ||
| export class ResponsiveGenerateSrcService implements IResponsiveGenerateSrc { | ||
| makeRespSrc(src: string, width: number, height: number, originalWidth: number, originalHeight: number, ratio: number): string { | ||
| return `${src}?size=${width}x${height}`; | ||
| } | ||
| } | ||
|
|
||
| @Injectable() | ||
| export class RoundGenerateSrcService implements IResponsiveGenerateSrc { | ||
| makeRespSrc(src: string, width: number, height: number, originalWidth: number, originalHeight: number, ratio: number): string { | ||
| if (width !== 0) { | ||
| width = Math.round(width / 20) * 20; | ||
| if (height !== 0) { | ||
| height = width * ratio; | ||
| } | ||
| } else if (height !== 0) { | ||
| height = Math.round(height / 20) * 20; | ||
| if (width !== 0) { | ||
| width = height / ratio; | ||
| } | ||
| } | ||
| return `${src}?size=${width}x${height}`; | ||
| } | ||
| } |