Skip to content

Commit

Permalink
feat(DH): Add basiclightbox for thumbnail preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@Angi-Kinas
Angi-Kinas committed Jan 16, 2024
1 parent 2446b01 commit 796a8c3
Show file tree
Hide file tree
Showing 5 changed files with 159 additions and 106 deletions.
1 change: 1 addition & 0 deletions apps/datahub/project.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"tailwind.base.css",
"apps/datahub/src/styles.css",
"node_modules/tippy.js/dist/tippy.css",
"node_modules/basiclightbox/dist/basicLightbox.min.css",
"node_modules/ol/ol.css",
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
],
Expand Down
246 changes: 140 additions & 106 deletions apps/datahub/src/app/record/record-metadata/record-metadata.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,127 +33,161 @@
[metadataQualityDisplay]="metadataQualityDisplay"
></gn-ui-metadata-quality>
</div>
<gn-ui-metadata-contact
(organizationClick)="onOrganizationClick($event)"
[metadata]="facade.metadata$ | async"
<div
*ngIf="lightbox$ | async as lightbox"
data-cy="record-thumbnail"
class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0 mb-3"
>
</gn-ui-metadata-contact>
<gn-ui-metadata-catalog [sourceLabel]="sourceLabel$ | async">
</gn-ui-metadata-catalog>
<gn-ui-thumbnail
class="relative h-full w-full"
[thumbnailUrl]="(facade.metadata$ | async).overviews?.[0]?.url"
fit="cover"
></gn-ui-thumbnail>
<div class="relative">
<gn-ui-button
class="absolute bottom-0 right-0 z-10 mr-2 mb-2"
[type]="'outline'"
[extraClass]="'!p-1'"
(buttonClick)="openLightbox(lightbox)"
>
<mat-icon class="material-symbols-outlined"
>zoom_out_map</mat-icon
>
</gn-ui-button>
</div>
</div>
<div>
<gn-ui-metadata-contact
(organizationClick)="onOrganizationClick($event)"
[metadata]="facade.metadata$ | async"
>
</gn-ui-metadata-contact>
<gn-ui-metadata-catalog [sourceLabel]="sourceLabel$ | async">
</gn-ui-metadata-catalog>
</div>
</div>
</div>
</div>
<div
style="height: 612px"
*ngIf="(displayMap$ | async) || (displayData$ | async)"
id="preview"
>
<div
class="bg-primary-opacity-10 pt-8 overflow-visible sm:pt-5"
style="height: 512px"
style="height: 612px"
*ngIf="(displayMap$ | async) || (displayData$ | async)"
id="preview"
>
<div class="container-lg px-4 lg:mx-auto">
<div>
<div
class="text-[28px] text-title font-title transform sm:translate-y-10"
translate
id="preview"
>
record.metadata.preview
</div>
<mat-tab-group
(selectedIndexChange)="onTabIndexChange($event)"
[selectedIndex]="(displayMap$ | async) ? 0 : 1"
animationDuration="200ms"
mat-stretch-tabs="false"
mat-align-tabs="start"
>
<mat-tab [disabled]="(displayMap$ | async) === false">
<ng-template mat-tab-label>
<span class="tab-header-label sm:ml-32" translate
>record.tab.map</span
<div
class="bg-primary-opacity-10 pt-8 overflow-visible sm:pt-5"
style="height: 512px"
>
<div class="container-lg px-4 lg:mx-auto">
<div>
<div
class="text-[28px] text-title font-title transform sm:translate-y-10"
translate
id="preview"
>
record.metadata.preview
</div>
<mat-tab-group
(selectedIndexChange)="onTabIndexChange($event)"
[selectedIndex]="(displayMap$ | async) ? 0 : 1"
animationDuration="200ms"
mat-stretch-tabs="false"
mat-align-tabs="start"
>
<mat-tab [disabled]="(displayMap$ | async) === false">
<ng-template mat-tab-label>
<span class="tab-header-label sm:ml-32" translate
>record.tab.map</span
>
</ng-template>
<div
class="block"
style="height: 500px"
*ngIf="displayMap$ | async"
>
</ng-template>
<div
class="block"
style="height: 500px"
*ngIf="displayMap$ | async"
>
<gn-ui-map-view></gn-ui-map-view>
</div>
</mat-tab>
<mat-tab [disabled]="(displayData$ | async) === false">
<ng-template mat-tab-label>
<span class="tab-header-label" translate>record.tab.data</span>
</ng-template>
<div class="block" *ngIf="displayData$ | async">
<gn-ui-data-view mode="table"></gn-ui-data-view>
</div>
</mat-tab>
<mat-tab [disabled]="(displayData$ | async) === false">
<ng-template mat-tab-label>
<span class="tab-header-label" translate>record.tab.chart</span>
</ng-template>
<div class="block" *ngIf="displayData$ | async">
<gn-ui-data-view mode="chart"></gn-ui-data-view>
</div>
</mat-tab>
</mat-tab-group>
<gn-ui-map-view></gn-ui-map-view>
</div>
</mat-tab>
<mat-tab [disabled]="(displayData$ | async) === false">
<ng-template mat-tab-label>
<span class="tab-header-label" translate
>record.tab.data</span
>
</ng-template>
<div class="block" *ngIf="displayData$ | async">
<gn-ui-data-view mode="table"></gn-ui-data-view>
</div>
</mat-tab>
<mat-tab [disabled]="(displayData$ | async) === false">
<ng-template mat-tab-label>
<span class="tab-header-label" translate
>record.tab.chart</span
>
</ng-template>
<div class="block" *ngIf="displayData$ | async">
<gn-ui-data-view mode="chart"></gn-ui-data-view>
</div>
</mat-tab>
</mat-tab-group>
</div>
</div>
</div>
</div>
</div>
<gn-ui-data-view-share
*ngIf="(selectedTabIndex$ | async) === 2"
></gn-ui-data-view-share>
<div
id="access"
class="container-lg px-4 lg:mx-auto"
*ngIf="displayDownload$ | async"
>
<datahub-record-downloads class="block mt-5"></datahub-record-downloads>
</div>

<div id="links" class="lg:mx-auto">
<div class="container-lg px-4 lg:mx-auto" *ngIf="displayOtherLinks | async">
<datahub-record-otherlinks class="block mt-5"></datahub-record-otherlinks>
<gn-ui-data-view-share
*ngIf="(selectedTabIndex$ | async) === 2"
></gn-ui-data-view-share>
<div
id="access"
class="container-lg px-4 lg:mx-auto"
*ngIf="displayDownload$ | async"
>
<datahub-record-downloads class="block mt-5"></datahub-record-downloads>
</div>

<div *ngIf="displayApi$ | async">
<datahub-record-apis
[isPanelOpen]="isPanelOpen"
class="block mt-6"
></datahub-record-apis>
<div id="links" class="lg:mx-auto">
<div
class="container-lg px-4 lg:mx-auto"
*ngIf="displayOtherLinks | async"
>
<datahub-record-otherlinks
class="block mt-5"
></datahub-record-otherlinks>
</div>

<div *ngIf="displayApi$ | async">
<datahub-record-apis
[isPanelOpen]="isPanelOpen"
class="block mt-6"
></datahub-record-apis>
</div>
</div>
</div>

<div id="related-records" *ngIf="displayRelated$ | async">
<div>
<div class="h-48 overflow-visible">
<div class="container-lg px-4 lg:mx-auto">
<datahub-record-related-records
[records]="facade.related$ | async"
></datahub-record-related-records>
<div id="related-records" *ngIf="displayRelated$ | async">
<div>
<div class="h-48 overflow-visible">
<div class="container-lg px-4 lg:mx-auto">
<datahub-record-related-records
[records]="facade.related$ | async"
></datahub-record-related-records>
</div>
</div>
</div>
</div>
<div class="bg-primary">
<div class="container-lg mx-auto h-[1096px] sm:h-96"></div>
<div class="bg-primary">
<div class="container-lg mx-auto h-[1096px] sm:h-96"></div>
</div>
</div>
</div>
</div>
<div
class="mt-12 p-4 max-w-[600px] m-auto text-[13px]"
*ngIf="facade.error$ | async as error"
>
<gn-ui-search-results-error
*ngIf="error.notFound"
[type]="errorTypes.RECORD_NOT_FOUND"
[recordId]="(facade.metadata$ | async).uniqueIdentifier"
></gn-ui-search-results-error>
<gn-ui-search-results-error
*ngIf="error.otherError"
[type]="errorTypes.RECEIVED_ERROR"
[error]="error.otherError"
></gn-ui-search-results-error>
<div
class="mt-12 p-4 max-w-[600px] m-auto text-[13px]"
*ngIf="facade.error$ | async as error"
>
<gn-ui-search-results-error
*ngIf="error.notFound"
[type]="errorTypes.RECORD_NOT_FOUND"
[recordId]="(facade.metadata$ | async).uniqueIdentifier"
></gn-ui-search-results-error>
<gn-ui-search-results-error
*ngIf="error.otherError"
[type]="errorTypes.RECEIVED_ERROR"
[error]="error.otherError"
></gn-ui-search-results-error>
</div>
</div>
11 changes: 11 additions & 0 deletions apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { filter, map, mergeMap } from 'rxjs/operators'
import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
import { Organization } from '@geonetwork-ui/common/domain/model/record'
import { MdViewFacade } from '@geonetwork-ui/feature/record'
import * as basicLightbox from 'basiclightbox'

@Component({
selector: 'datahub-record-metadata',
Expand Down Expand Up @@ -55,6 +56,11 @@ export class RecordMetadataComponent {
errorTypes = ErrorType
selectedTabIndex$ = new BehaviorSubject(0)

lightbox$ = this.facade.metadata$.pipe(
map((metadata) => metadata?.overviews?.[0]?.url)
)
lightboxInstance: any

constructor(
public facade: MdViewFacade,
private searchService: SearchService,
Expand All @@ -77,4 +83,9 @@ export class RecordMetadataComponent {
.getFiltersForOrgs([org])
.subscribe((filters) => this.searchService.updateFilters(filters))
}

openLightbox(src: string) {
this.lightboxInstance = basicLightbox.create(`<img src="${src}"/>`)
this.lightboxInstance.show()
}
}
6 changes: 6 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@
"@rgrove/parse-xml": "~4.0.1",
"alasql": "^3.1.0",
"axios": "^1.6.0",
"basiclightbox": "^5.0.4",
"chart.js": "^4.2.0",
"chroma-js": "^2.1.2",
"cypress-browser-permissions": "^1.1.0",
Expand Down

0 comments on commit 796a8c3

Please sign in to comment.