Skip to content

Commit ddad93a

Browse files
author
Andrea Barbasso
committed
[UXP-253] use control flow syntax
1 parent bbccc53 commit ddad93a

12 files changed

Lines changed: 102 additions & 82 deletions

File tree

‎src/app/shared/browse-most-elements/images-browse-elements/images-browse-elements.component.html‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,27 @@
11
<div class="grid-wrapper" [class.max-items-4]="(totalElements$ | async) < 4">
22
<ng-container *ngFor="let item of (searchResultArray$ | async); let i = index; let last = last">
3-
<ng-container *ngIf="isBrowser && !isLoading; else imageSkeleton">
4-
<img [src]="(itemToImageHrefMap$ | async)?.get(item.uuid)" alt="hidden-image" style="display: none" #image>
5-
<div class="thumbnail-container"
6-
[class.landscape]="(totalElements$ | async) > 6 && image.naturalWidth > maxSquareRatio * image.naturalHeight"
7-
[class.portrait]="(totalElements$ | async) > 6 && image.naturalHeight > maxSquareRatio * image.naturalWidth">
8-
<div class="thumbnail-inner-container w-100 h-100 position-relative"
9-
[dsBackgroundImage]="(itemToImageHrefMap$ | async)?.get(item.uuid)">
10-
<ds-type-badge [object]="item"></ds-type-badge>
11-
<a [routerLink]="[getItemPageRoute(item)]" class="h-100 mw-100 p-3">
12-
<p class="h4 text-center m-0">{{ item.firstMetadataValue('dc.title') }}</p>
13-
</a>
3+
@defer {
4+
@if (!isLoading) {
5+
<img [src]="(itemToImageHrefMap$ | async)?.get(item.uuid)" alt="hidden-image" style="display: none" #image>
6+
<div class="thumbnail-container"
7+
[class.landscape]="(totalElements$ | async) > 6 && image.naturalWidth > maxSquareRatio * image.naturalHeight"
8+
[class.portrait]="(totalElements$ | async) > 6 && image.naturalHeight > maxSquareRatio * image.naturalWidth">
9+
<div class="thumbnail-inner-container w-100 h-100 position-relative"
10+
[dsBackgroundImage]="(itemToImageHrefMap$ | async)?.get(item.uuid)">
11+
<ds-type-badge [object]="item"></ds-type-badge>
12+
<a [routerLink]="[getItemPageRoute(item)]" class="h-100 mw-100 p-3">
13+
<p class="h4 text-center m-0">{{ item.firstMetadataValue('dc.title') }}</p>
14+
</a>
15+
</div>
1416
</div>
15-
</div>
17+
} @else {
18+
<ng-container *ngTemplateOutlet="imageSkeleton"></ng-container>
19+
}
20+
} @placeholder {
21+
<ng-container *ngTemplateOutlet="imageSkeleton"></ng-container>
22+
}
1623
</ng-container>
1724
<ng-template #imageSkeleton>
1825
<ngx-skeleton-loader class="thumbnail-container w-100 h-100" [theme]="{height: '100%', width: '100%'}"></ngx-skeleton-loader>
1926
</ng-template>
20-
</ng-container>
2127
</div>

‎src/app/shared/browse-most-elements/images-browse-elements/images-browse-elements.component.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import {
22
AsyncPipe,
3-
isPlatformBrowser,
43
NgForOf,
5-
NgIf,
4+
NgTemplateOutlet,
65
} from '@angular/common';
76
import {
87
Component,
@@ -35,7 +34,7 @@ import { AbstractBrowseElementsComponent } from '../abstract-browse-elements.com
3534
RouterLink,
3635
NgxSkeletonLoaderModule,
3736
NgForOf,
38-
NgIf,
37+
NgTemplateOutlet,
3938
],
4039
})
4140
export class ImagesBrowseElementsComponent extends AbstractBrowseElementsComponent implements OnInit {
@@ -55,7 +54,6 @@ export class ImagesBrowseElementsComponent extends AbstractBrowseElementsCompone
5554
totalElements$: Observable<number>;
5655

5756
ngOnInit() {
58-
this.isBrowser = isPlatformBrowser(this.platformId);
5957
super.ngOnInit();
6058

6159
this.itemToImageHrefMap$ = this.searchResultArray$.pipe(

‎src/app/shared/browse-most-elements/slider-browse-elements/slider-browse-elements.component.html‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,21 @@
88
<div class="flex-fill d-flex flex-row gapx-3 flex-nowrap card-element-wrapper justify-content-center">
99
<ng-container *ngFor="let item of (selectedSearchResultArray$ | async); let i = index; let last = last">
1010
<div class="card">
11-
<ng-container *ngIf="isBrowser && !isLoading; else imageSkeleton">
12-
<img [src]="(itemToImageHrefMap$ | async)?.get(item.uuid)" alt="hidden-image" style="display: none" #image />
13-
<div class="thumbnail-container h-50">
14-
<div class="thumbnail-inner-container w-100 h-100 position-relative"
15-
[dsBackgroundImage]="(itemToImageHrefMap$ | async)?.get(item.uuid)">
16-
<ds-type-badge class="pl-1" [object]="item"></ds-type-badge>
11+
@defer {
12+
@if (!isLoading) {
13+
<img [src]="(itemToImageHrefMap$ | async)?.get(item.uuid)" alt="hidden-image" style="display: none" #image />
14+
<div class="thumbnail-container h-50">
15+
<div class="thumbnail-inner-container w-100 h-100 position-relative"
16+
[dsBackgroundImage]="(itemToImageHrefMap$ | async)?.get(item.uuid)">
17+
<ds-type-badge class="pl-1" [object]="item"></ds-type-badge>
18+
</div>
1719
</div>
18-
</div>
19-
</ng-container>
20+
} @else {
21+
<ng-container *ngTemplateOutlet="imageSkeleton"></ng-container>
22+
}
23+
} @placeholder {
24+
<ng-container *ngTemplateOutlet="imageSkeleton"></ng-container>
25+
}
2026
<ng-template #imageSkeleton>
2127
<ngx-skeleton-loader class="thumbnail-container h-50" [theme]="{height: '100%', width: '100%'}"></ngx-skeleton-loader>
2228
</ng-template>

‎src/app/shared/browse-most-elements/slider-browse-elements/slider-browse-elements.component.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
NgClass,
55
NgForOf,
66
NgIf,
7+
NgTemplateOutlet,
78
} from '@angular/common';
89
import {
910
AfterViewInit,
@@ -37,6 +38,7 @@ import { BtnDisabledDirective } from '../../btn-disabled.directive';
3738
import { hasValue } from '../../empty.util';
3839
import { ThemedTypeBadgeComponent } from '../../object-collection/shared/badges/type-badge/themed-type-badge.component';
3940
import { BackgroundImageDirective } from '../../utils/background-image.directive';
41+
import { VarDirective } from '../../utils/var.directive';
4042
import { AbstractBrowseElementsComponent } from '../abstract-browse-elements.component';
4143

4244
@Component({
@@ -56,6 +58,8 @@ import { AbstractBrowseElementsComponent } from '../abstract-browse-elements.com
5658
RouterLink,
5759
NgbTooltipModule,
5860
NgClass,
61+
NgTemplateOutlet,
62+
VarDirective,
5963
],
6064
})
6165
export class SliderBrowseElementsComponent extends AbstractBrowseElementsComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {

‎src/app/shared/carousel-with-thumbnails/carousel-with-thumbnails.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { Item } from '../../core/shared/item.model';
3030
import { getItemPageRoute } from '../../item-page/item-page-routing-paths';
3131
import { CarouselOptions } from '../carousel/carousel-options.model';
3232
import { HostWindowService } from '../host-window.service';
33+
import { ThumbnailSliderComponent } from '../slider/thumbnail-slider/thumbnail-slider.component';
3334

3435
@Component({
3536
selector: 'ds-base-carousel-with-thumbnails',

‎src/app/shared/carousel/carousel.component.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,18 @@
1616
'height': carouselOptions.keepAspectRatio ? null : carouselOptions.carouselHeightPx + 'px',
1717
'aspect-ratio': carouselOptions.keepAspectRatio ? carouselOptions.aspectRatio : null
1818
}">
19-
<div class="picsum-img-wrapper" *ngIf="isBrowser; else imageSkeleton">
20-
<img
21-
*ngIf="(itemToImageHrefMap$ | async).get(item.indexableObject.uuid); let href"
22-
[src]="href"
23-
[alt]="item.indexableObject.metadata[title][0].value" class="img-fluid"
24-
[ngClass]="{'w-100': carouselOptions.fitWidth, 'h-100': carouselOptions.fitHeight}">
25-
</div>
26-
<ng-template #imageSkeleton>
19+
@defer {
20+
<div class="picsum-img-wrapper">
21+
<img
22+
*ngIf="(itemToImageHrefMap$ | async).get(item.indexableObject.uuid); let href"
23+
[src]="href"
24+
[alt]="item.indexableObject.metadata[title][0].value" class="img-fluid"
25+
[ngClass]="{'w-100': carouselOptions.fitWidth, 'h-100': carouselOptions.fitHeight}">
26+
</div>
27+
} @placeholder {
2728
<ngx-skeleton-loader style="width: 100%; height: 100%;"
2829
[theme]="{height: '100%', width: '100%'}"></ngx-skeleton-loader>
29-
</ng-template>
30+
}
3031
<div class="carousel-caption" *ngIf="item.indexableObject.metadata">
3132
<div class="carousel-caption-inner">
3233
<h1 data-test="carouselObjTitle" [class]="carouselOptions.titleStyle" class="h3"

‎src/app/shared/carousel/carousel.component.spec.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -240,12 +240,6 @@ describe('CarouselComponent', () => {
240240
done();
241241
});
242242

243-
it('should render image', (done) => {
244-
const image = fixture.debugElement.queryAll(By.css('.picsum-img-wrapper'));
245-
expect(image.length).toBe(1);
246-
done();
247-
});
248-
249243
describe('when no data', () => {
250244
beforeEach(() => {
251245
fixture = TestBed.createComponent(CarouselComponent);

‎src/app/shared/explore/section-component/grid-section/grid-section.component.html‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,28 @@ <h2>
2020
</div>
2121
</div>
2222
</div>
23-
<ng-container *ngIf="isBrowser && !isLoading; else skeletons">
24-
<ng-container *ngFor="let item of searchResults | slice:0:8; index as i">
25-
<div class="cris-section-element-background text-center position-relative d-flex flex-column
23+
@defer {
24+
@if (!isLoading) {
25+
@for (item of (searchResults | slice:0:8); track item.indexableObject?.uuid) {
26+
<div class="cris-section-element-background text-center position-relative d-flex flex-column
2627
justify-content-between align-items-center path-item"
27-
[dsBackgroundImage]="(itemToImageHrefMap$ | async).get(item.indexableObject?.uuid)"
28-
>
29-
<a [routerLink]="[getItemPageRoute(item.indexableObject)]" class="mw-100 p-3">
30-
<p class="text-center m-0 text-truncate">{{ item.indexableObject?.firstMetadataValue('dc.title') }}</p>
31-
</a>
32-
</div>
33-
</ng-container>
34-
</ng-container>
28+
[dsBackgroundImage]="(itemToImageHrefMap$ | async).get(item.indexableObject?.uuid)"
29+
>
30+
<a [routerLink]="[getItemPageRoute(item.indexableObject)]" class="mw-100 p-3">
31+
<p class="text-center m-0 text-truncate">{{ item.indexableObject?.firstMetadataValue('dc.title') }}</p>
32+
</a>
33+
</div>
34+
}
35+
} @else {
36+
<ng-container *ngTemplateOutlet="skeletons"></ng-container>
37+
}
38+
} @placeholder {
39+
<ng-container *ngTemplateOutlet="skeletons"></ng-container>
40+
}
3541
<ng-template #skeletons>
36-
<ngx-skeleton-loader *ngFor="let i of [1, 2, 3, 4, 5, 6, 7, 8]"
37-
class="w-100 h-100 aspect-ratio-1" [theme]="{height: '100%', width: '100%'}"></ngx-skeleton-loader>
42+
@for (i of [1, 2, 3, 4, 5, 6, 7, 8]; track i) {
43+
<ngx-skeleton-loader class="w-100 h-100 aspect-ratio-1" [theme]="{height: '100%', width: '100%'}"></ngx-skeleton-loader>
44+
}
3845
</ng-template>
3946

4047
</div>

‎src/app/shared/explore/section-component/grid-section/grid-section.component.ts‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import {
22
AsyncPipe,
3-
isPlatformBrowser,
4-
NgForOf,
5-
NgIf,
3+
NgTemplateOutlet,
64
SlicePipe,
75
} from '@angular/common';
86
import {
@@ -69,14 +67,13 @@ import { PaginatedSearchOptions } from '../../../search/models/paginated-search-
6967
templateUrl: './grid-section.component.html',
7068
styleUrls: ['./grid-section.component.scss'],
7169
imports: [
72-
NgForOf,
7370
SlicePipe,
7471
AsyncPipe,
7572
TranslateModule,
7673
BackgroundImageDirective,
7774
RouterLink,
7875
NgxSkeletonLoaderModule,
79-
NgIf,
76+
NgTemplateOutlet,
8077
],
8178
standalone: true,
8279
})
@@ -110,8 +107,6 @@ export class GridSectionComponent implements OnInit {
110107

111108
itemToImageHrefMap$ = new BehaviorSubject<Map<string, string>>(new Map<string, string>());
112109

113-
isBrowser: boolean;
114-
115110
isLoading = true;
116111

117112
constructor(
@@ -126,8 +121,6 @@ export class GridSectionComponent implements OnInit {
126121
}
127122

128123
ngOnInit() {
129-
this.isBrowser = isPlatformBrowser(this.platformId);
130-
131124
const pagination = Object.assign(new PaginationComponentOptions(), {
132125
id: 'search-object-pagination',
133126
pageSize: 8,

‎src/app/shared/slider/link-slider/link-slider.component.html‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,19 @@
1414
[href]="getItemLink(item)"
1515
target="_blank"
1616
class="img-container-el">
17-
<ng-container *ngIf="isBrowser && (itemsImagesLoading$ | async) === false; else imageSkeleton">
18-
<ng-container
19-
*ngIf="(itemToImageHrefMap$ | async)?.get(item.uuid); let href; else defaultPreviewImage">
20-
<img [src]="href" [alt]="item.metadata[title]?.[0].value">
21-
</ng-container>
22-
<ng-template #defaultPreviewImage>
23-
<img [src]="placeholderSrc" [alt]="item.metadata[title]?.[0].value">
24-
</ng-template>
25-
</ng-container>
17+
@defer {
18+
@if ((itemsImagesLoading$ | async) === false) {
19+
@if ((itemToImageHrefMap$ | async)?.get(item.uuid); as href) {
20+
<img [src]="href" [alt]="item.metadata[title]?.[0].value">
21+
} @else {
22+
<img [src]="placeholderSrc" [alt]="item.metadata[title]?.[0].value">
23+
}
24+
} @else {
25+
<ng-container *ngTemplateOutlet="imageSkeleton"></ng-container>
26+
}
27+
} @placeholder {
28+
<ng-container *ngTemplateOutlet="imageSkeleton"></ng-container>
29+
}
2630
<ng-template #imageSkeleton>
2731
<ngx-skeleton-loader class="h-100 w-100" [theme]="{height: '100%', width: '100%'}"></ngx-skeleton-loader>
2832
</ng-template>

0 commit comments

Comments
 (0)