Skip to content

Commit 4a5887e

Browse files
Andrea Barbassoatarix83
Andrea Barbasso
authored and
atarix83
committed
Merged in task/ux-plus-cris-2024_02_x/UXP-253 (pull request #64)
Task/ux plus cris 2024 02 x/UXP-253 Approved-by: Giuseppe Digilio
2 parents cc2361e + c9d6cab commit 4a5887e

18 files changed

Lines changed: 183 additions & 99 deletions

‎src/app/home-page/home-page.component.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,10 @@
6060
[sectionId]="sectionId"
6161
[advancedTopSection]="$any(sectionComponent)"></ds-advanced-top-section>
6262

63+
<ds-advanced-top-section *ngSwitchCase="'advanced-top-component'"
64+
[sectionId]="sectionId"
65+
[advancedTopSection]="$any(sectionComponent)"></ds-advanced-top-section>
66+
6367
</div>
6468
</div>
6569
</div>

‎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,
@@ -36,7 +35,7 @@ import { AbstractBrowseElementsComponent } from '../abstract-browse-elements.com
3635
NgxSkeletonLoaderModule,
3736
NgIf,
3837
NgForOf,
39-
NgIf,
38+
NgTemplateOutlet,
4039
],
4140
})
4241
export class ImagesBrowseElementsComponent extends AbstractBrowseElementsComponent implements OnInit {
@@ -56,7 +55,6 @@ export class ImagesBrowseElementsComponent extends AbstractBrowseElementsCompone
5655
totalElements$: Observable<number>;
5756

5857
ngOnInit() {
59-
this.isBrowser = isPlatformBrowser(this.platformId);
6058
super.ngOnInit();
6159

6260
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.spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ describe('CarouselWithThumbnailsComponent', () => {
5454
CarouselWithThumbnailsComponent,
5555
MockComponent(ThumbnailSliderComponent),
5656
],
57+
declarations: [CarouselWithThumbnailsComponent],
5758
providers: [
5859
{ provide: HostWindowService, useValue: hostWindowServicve },
5960
{

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
import { NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';
4+
5+
import { SharedModule } from '../shared.module';
6+
import { SliderModule } from '../slider/slider.module';
7+
import { CarouselWithThumbnailsComponent } from './carousel-with-thumbnails.component';
8+
import { ThemedCarouselWithThumbnailsComponent } from './themed-carousel-with-thumbnails.component';
9+
10+
const COMPONENTS = [
11+
ThemedCarouselWithThumbnailsComponent,
12+
CarouselWithThumbnailsComponent,
13+
];
14+
15+
const MODULES = [
16+
NgbCarouselModule,
17+
CommonModule,
18+
SliderModule,
19+
];
20+
const PROVIDERS = [];
21+
22+
@NgModule({
23+
imports: [
24+
...MODULES,
25+
SharedModule,
26+
],
27+
declarations: [
28+
...COMPONENTS,
29+
],
30+
providers: [
31+
...PROVIDERS,
32+
],
33+
exports: [
34+
...COMPONENTS,
35+
],
36+
})
37+
38+
/**
39+
* This module handles all components, providers and modules that are needed for the menu
40+
*/
41+
export class CarouselWithThumbnailsModule {
42+
43+
}

‎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: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import {
2323
TranslateModule,
2424
} from '@ngx-translate/core';
2525
import { Observable } from 'rxjs';
26-
import { InternalLinkService } from 'src/app/core/services/internal-link.service';
2726

2827
import { toRemoteData } from '../../browse-by/browse-by-metadata/browse-by-metadata.component.spec';
2928
import { SearchManager } from '../../core/browse/search-manager';
@@ -36,6 +35,7 @@ import { DSOChangeAnalyzer } from '../../core/data/dso-change-analyzer.service';
3635
import { FindListOptions } from '../../core/data/find-list-options.model';
3736
import { PaginatedList } from '../../core/data/paginated-list.model';
3837
import { RemoteData } from '../../core/data/remote-data';
38+
import { InternalLinkService } from '../../core/services/internal-link.service';
3939
import {
4040
NativeWindowRef,
4141
NativeWindowService,
@@ -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/carousel/carousel.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,13 @@ import {
3939
switchMap,
4040
take,
4141
} from 'rxjs/operators';
42-
import { InternalLinkService } from 'src/app/core/services/internal-link.service';
4342

4443
import { SearchManager } from '../../core/browse/search-manager';
4544
import { SortOptions } from '../../core/cache/models/sort-options.model';
4645
import { BitstreamDataService } from '../../core/data/bitstream-data.service';
4746
import { PaginatedList } from '../../core/data/paginated-list.model';
4847
import { RemoteData } from '../../core/data/remote-data';
48+
import { InternalLinkService } from '../../core/services/internal-link.service';
4949
import {
5050
NativeWindowRef,
5151
NativeWindowService,

0 commit comments

Comments
 (0)