Skip to content

Commit ee1ab5c

Browse files
author
Jack Matthews
authored
Merge pull request #7 from thisissoon/feature/responsive-image-format
refactor(app): Changed the models for ResponsiveImage and RetinaImage…
2 parents 7735de0 + 8b9bd4a commit ee1ab5c

File tree

6 files changed

+76
-64
lines changed

6 files changed

+76
-64
lines changed

‎README.md‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ A working example can be found inside [/src](https://github.com/thisissoon/angul
4949
[sizes]="sizes"
5050
imgClass="foo"
5151
alt="lorem ipsum"
52-
(imagePlaceholderLoaded)="onPlaceholderLoad($event)"
53-
(imageLoaded)="onFullResLoad($event)">
52+
(placeholderLoaded)="onPlaceholderLoad($event)"
53+
(imageLoaded)="onImageLoad($event)">
5454
</sn-image-loader>
5555
```
5656

@@ -67,25 +67,30 @@ export class AppComponent {
6767
image: ResponsiveImage = {
6868
placeholder: 'http://via.placeholder.com/35x15?text=placeholder',
6969
fallback: 'http://via.placeholder.com/350x150?text=fallback',
70-
xs: {
71-
'@1x': 'http://via.placeholder.com/150x350?text=xs+1x',
72-
'@2x': 'http://via.placeholder.com/300x700?text=xs+2x'
73-
},
74-
md: {
75-
'@1x': 'http://via.placeholder.com/350x250?text=md+1x',
76-
'@2x': 'http://via.placeholder.com/700x500?text=md+2x'
77-
},
78-
lg: {
79-
'@1x': 'http://via.placeholder.com/700x400?text=lg+1x',
80-
'@2x': 'http://via.placeholder.com/1400x800?text=lg+2x'
81-
}
70+
images: [
71+
{
72+
size: 'xs',
73+
x1: 'http://via.placeholder.com/150x350?text=xs+1x',
74+
x2: 'http://via.placeholder.com/300x700?text=xs+2x'
75+
},
76+
{
77+
size: 'md',
78+
x1: 'http://via.placeholder.com/350x250?text=md+1x',
79+
x2: 'http://via.placeholder.com/700x500?text=md+2x'
80+
},
81+
{
82+
size: 'lg',
83+
x1: 'http://via.placeholder.com/700x400?text=lg+1x',
84+
x2: 'http://via.placeholder.com/1400x800?text=lg+2x'
85+
}
86+
]
8287
};
8388

8489
public onPlaceholderLoad(imageLoadedEvent: ImageLoadedEvent) {
8590
// Do something
8691
}
8792

88-
public onFullResLoad(imageLoadedEvent: ImageLoadedEvent) {
93+
public onImageLoad(imageLoadedEvent: ImageLoadedEvent) {
8994
// Do something
9095
}
9196
}

‎src/app/app.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ <h3>Top image</h3>
88
></sn-image-loader>
99

1010
<h1>Scroll down for bottom image ↓</h1>
11-
<h3>Bottom image placeholder loaded: <span class="placeholder-boolean">{{ imagePlaceholderLoaded }}</span></h3>
11+
<h3>Bottom placeholder loaded: <span class="placeholder-boolean">{{ placeholderLoaded }}</span></h3>
1212
<div class="spacer"></div>
1313

1414
<h3>Bottom image</h3>
@@ -17,8 +17,8 @@ <h3>Bottom image</h3>
1717
[sizes]="sizes"
1818
imgClass="img img--bottom"
1919
alt="lorem ipsum"
20-
(imagePlaceholderLoaded)="onPlaceholderLoad($event)"
21-
(imageLoaded)="onFullResLoad($event)"
20+
(placeholderLoaded)="onPlaceholderLoad($event)"
21+
(imageLoaded)="onImageLoad($event)"
2222
class="sn-image-loader sn-image-loader--bottom"
2323
></sn-image-loader>
2424
<h3>Bottom image imageLoaded event count: <span class="full-res-count">{{ imageLoadedEventCount }}</span></h3>

‎src/app/app.component.ts‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,23 @@ export class AppComponent {
1717
image: ResponsiveImage = {
1818
placeholder: 'http://via.placeholder.com/35x15?text=placeholder',
1919
fallback: 'http://via.placeholder.com/350x150?text=fallback',
20-
xs: {
21-
'@1x': 'http://via.placeholder.com/150x350?text=xs+1x',
22-
'@2x': 'http://via.placeholder.com/300x700?text=xs+2x'
23-
},
24-
md: {
25-
'@1x': 'http://via.placeholder.com/350x250?text=md+1x',
26-
'@2x': 'http://via.placeholder.com/700x500?text=md+2x'
27-
},
28-
lg: {
29-
'@1x': 'http://via.placeholder.com/700x400?text=lg+1x',
30-
'@2x': 'http://via.placeholder.com/1400x800?text=lg+2x'
31-
}
20+
images: [
21+
{
22+
size: 'xs',
23+
x1: 'http://via.placeholder.com/150x350?text=xs+1x',
24+
x2: 'http://via.placeholder.com/300x700?text=xs+2x'
25+
},
26+
{
27+
size: 'md',
28+
x1: 'http://via.placeholder.com/350x250?text=md+1x',
29+
x2: 'http://via.placeholder.com/700x500?text=md+2x'
30+
},
31+
{
32+
size: 'lg',
33+
x1: 'http://via.placeholder.com/700x400?text=lg+1x',
34+
x2: 'http://via.placeholder.com/1400x800?text=lg+2x'
35+
}
36+
]
3237
};
3338

3439
/**
@@ -37,7 +42,7 @@ export class AppComponent {
3742
* @type {boolean}
3843
* @memberof AppComponent
3944
*/
40-
imagePlaceholderLoaded = false;
45+
placeholderLoaded = false;
4146

4247
/**
4348
* Incremented on each image load event.
@@ -54,7 +59,7 @@ export class AppComponent {
5459
* @memberof AppComponent
5560
*/
5661
public onPlaceholderLoad(imageLoadedEvent: ImageLoadedEvent) {
57-
this.imagePlaceholderLoaded = true;
62+
this.placeholderLoaded = true;
5863
}
5964

6065
/**
@@ -63,7 +68,7 @@ export class AppComponent {
6368
*
6469
* @memberof AppComponent
6570
*/
66-
public onFullResLoad(imageLoadedEvent: ImageLoadedEvent) {
71+
public onImageLoad(imageLoadedEvent: ImageLoadedEvent) {
6772
this.imageLoadedEventCount++;
6873
}
6974
}

‎src/app/image-loader/image-loader.component.spec.ts‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,23 @@ describe('ImageLoaderComponent', () => {
2424
const image: ResponsiveImage = {
2525
placeholder: 'http://via.placeholder.com/35x15?text=placeholder',
2626
fallback: 'http://via.placeholder.com/350x150?text=fallback',
27-
xs: {
28-
'@1x': 'http://via.placeholder.com/150x350?text=xs+1x',
29-
'@2x': 'http://via.placeholder.com/300x700?text=xs+2x'
30-
},
31-
md: {
32-
'@1x': 'http://via.placeholder.com/350x250?text=md+1x',
33-
'@2x': 'http://via.placeholder.com/700x500?text=md+2x'
34-
},
35-
lg: {
36-
'@1x': 'http://via.placeholder.com/700x400?text=lg+1x',
37-
'@2x': 'http://via.placeholder.com/1400x800?text=lg+2x'
38-
}
27+
images: [
28+
{
29+
size: 'xs',
30+
x1: 'http://via.placeholder.com/150x350?text=xs+1x',
31+
x2: 'http://via.placeholder.com/300x700?text=xs+2x'
32+
},
33+
{
34+
size: 'md',
35+
x1: 'http://via.placeholder.com/350x250?text=md+1x',
36+
x2: 'http://via.placeholder.com/700x500?text=md+2x'
37+
},
38+
{
39+
size: 'lg',
40+
x1: 'http://via.placeholder.com/700x400?text=lg+1x',
41+
x2: 'http://via.placeholder.com/1400x800?text=lg+2x'
42+
}
43+
]
3944
};
4045

4146
beforeEach(async(() => {
@@ -72,7 +77,7 @@ describe('ImageLoaderComponent', () => {
7277
});
7378

7479
it('should fire placeholder loaded event on image load when loaded is false', () => {
75-
const spy = spyOn(component.imagePlaceholderLoaded, 'emit');
80+
const spy = spyOn(component.placeholderLoaded, 'emit');
7681
component.loaded = false;
7782
const imageElement = fixture.debugElement.query(By.css('img'));
7883
imageElement.triggerEventHandler('load', null);

‎src/app/image-loader/image-loader.component.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import 'rxjs/add/operator/debounceTime';
1717

1818
import * as classes from './shared/classes';
1919
import * as events from './shared/events';
20-
import { ImageLoadedEvent, ResponsiveImage, RetinaImage, Size, Breakpoint, Retina } from './shared';
20+
import { ImageLoadedEvent, ResponsiveImage, RetinaImage, Size, Breakpoint } from './shared';
2121
import { WindowRef } from '@thisissoon/angular-inviewport';
2222

2323
/**
@@ -30,8 +30,8 @@ import { WindowRef } from '@thisissoon/angular-inviewport';
3030
* [image]="image"
3131
* [sizes]="sizes"
3232
* imgClass="foo"
33-
* (imagePlaceholderLoaded)="onPlaceholderLoad($event)"
34-
* (imageLoaded)="onFullResLoad($event)"
33+
* (placeholderLoaded)="onPlaceholderLoad($event)"
34+
* (imageLoaded)="onImageLoad($event)"
3535
* alt="lorem ipsum">
3636
* </sn-image-loader>
3737
* ```
@@ -156,7 +156,7 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
156156
* @memberof ImageLoaderComponent
157157
*/
158158
@Output()
159-
public imagePlaceholderLoaded: EventEmitter<ImageLoadedEvent> = new EventEmitter<ImageLoadedEvent>();
159+
public placeholderLoaded: EventEmitter<ImageLoadedEvent> = new EventEmitter<ImageLoadedEvent>();
160160
/**
161161
* Output for full res image loaded event.
162162
*
@@ -272,8 +272,9 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
272272
*/
273273
public preloadImage(): void {
274274
if (this.inViewport && this.notLoaded) {
275-
const imageNormal = this.image[this.size]['@1x'];
276-
const imageRetina = this.image[this.size]['@2x'];
275+
const retinaImg = this.image.images.filter(retinaImage => retinaImage.size === this.size)[0];
276+
const imageNormal = retinaImg.x1;
277+
const imageRetina = retinaImg.x2;
277278
this.supportsSrcSet ?
278279
this.preloadSrcset = `${imageNormal} 1x, ${imageRetina} 2x` :
279280
this.preloadSrc = `${imageNormal}`;
@@ -286,8 +287,9 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
286287
* @memberof ImageLoaderComponent
287288
*/
288289
public onImagePreload(): void {
289-
const imageNormal = this.image[this.size]['@1x'];
290-
const imageRetina = this.image[this.size]['@2x'];
290+
const retinaImg = this.image.images.filter(retinaImage => retinaImage.size === this.size)[0];
291+
const imageNormal = retinaImg.x1;
292+
const imageRetina = retinaImg.x2;
291293
this.supportsSrcSet ?
292294
this.srcset = `${imageNormal} 1x, ${imageRetina} 2x` :
293295
this.src = this.preloadSrc;
@@ -306,7 +308,7 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
306308
srcset: this.srcset
307309
};
308310
if (!this.loaded) {
309-
this.imagePlaceholderLoaded.emit(eventData);
311+
this.placeholderLoaded.emit(eventData);
310312
return;
311313
}
312314
this.imageLoaded.emit(eventData);

‎src/app/image-loader/shared/image.model.ts‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,17 @@
11
export interface ResponsiveImage {
2-
xs?: RetinaImage;
3-
sm?: RetinaImage;
4-
md?: RetinaImage;
5-
lg?: RetinaImage;
6-
xl?: RetinaImage;
72
placeholder: string;
83
fallback: string;
4+
images: RetinaImage[];
95
}
106

117
export interface RetinaImage {
12-
'@1x'?: string;
13-
'@2x'?: string;
8+
size: Size;
9+
x1?: string;
10+
x2?: string;
1411
}
1512

1613
export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
1714

18-
export type Retina = '@1x' | '@2x';
19-
2015
export interface Breakpoint {
2116
size: Size;
2217
width: number;

0 commit comments

Comments
 (0)