FEAT #8956 add thumbnail view

src/frontend/app/list/basket-list.component.html

@@ -21,7 +21,7 @@
                         <mat-paginator #paginatorResultList [length]="resultsLength" [pageSize]="10" class="paginatorResultList"></mat-paginator>
                     </div>
                 </div>
-
+                <mat-card id="viewThumbnail" style="display:none;position: fixed;z-index: 2;"><img src="{{thumbnailUrl}}"/></mat-card>
                 <table #tableBasketListSort="matSort" mat-table [dataSource]="data" matSort matSortActive="res_id"
                     matSortDisableClear matSortDirection="asc" style="width:100%;table-layout: fixed;">
                     <ng-container matColumnDef="res_id">
@@ -89,7 +89,7 @@
                                     <button color="primary" mat-icon-button title="{{lang.diffusionList}}" (click)="$event.stopPropagation();openDiffusionSheet(row)">
                                         <mat-icon fontSet="fas" fontIcon="fa-sitemap fa-2x"></mat-icon>
                                     </button>
-                                    <button color="primary" mat-icon-button title="{{lang.linkDetails}}" (click)="$event.stopPropagation();goToDetail(row);">
+                                    <button color="primary" mat-icon-button title="{{lang.linkDetails}}" (click)="$event.stopPropagation();goToDetail(row);" (mouseenter)="viewThumbnail(row);" (mouseleave)="closeThumbnail();">
                                         <mat-icon fontSet="fas" fontIcon="fa-info-circle fa-2x"></mat-icon>
                                     </button>
                                 </mat-button-toggle-group>

src/frontend/app/list/basket-list.component.ts

@@ -102,6 +102,7 @@ export class BasketListComponent implements OnInit {
     listProperties: any = {};
     currentBasketInfo: any = {};
     currentChrono: string = '';
+    thumbnailUrl: string = '';
 
     @ViewChild('filtersTool') filtersTool: FiltersToolComponent;
 
@@ -232,6 +233,17 @@ export class BasketListComponent implements OnInit {
     filterThis(value: string) {
         this.filtersTool.setInputSearch(value);
     }
+
+    viewThumbnail(row:any) {
+        this.thumbnailUrl = this.coreUrl+'rest/res/' + row.res_id + '/thumbnail';
+        $j('#viewThumbnail').show();
+        $j('#listContent').css({"overflow":"hidden"});
+    }
+
+    closeThumbnail() {
+        $j('#viewThumbnail').hide();
+        $j('#listContent').css({"overflow":"auto"});
+    }
 }
 export interface BasketList {
     resources: any[];