Update for autoheight

MurhafSousli · Oct 20, 2024 · 7cc727f · 7cc727f
1 parent 26e93d3
commit 7cc727f
Show file tree

Hide file tree

Showing 26 changed files with 352 additions and 211 deletions.
diff --git a/projects/ng-gallery-demo/src/app/pages/lab/lab.component.html b/projects/ng-gallery-demo/src/app/pages/lab/lab.component.html
@@ -27,6 +27,12 @@ <h1 fxLayout>
              (itemClick)="onItemClick($event)"
              (thumbClick)="onThumbClick($event)">
 
+      <img *galleryItemDef="let item"
+           galleryImage
+           [src]="item.src"
+           fill
+           [attr.alt]="item.alt"/>
+
       @if (navConfig.nav) {
         <gallery-nav/>
       }
@@ -173,7 +179,8 @@ <h1 fxLayout>
             <mat-checkbox [(ngModel)]="config.itemAutosize" [disabled]="config.autoHeight">Item autosize</mat-checkbox>
           </div>
           <div>
-            <mat-checkbox [(ngModel)]="thumbConfig.autosize" [disabled]="!thumbConfig.thumbs">Thumb autosize</mat-checkbox>
+            <mat-checkbox [(ngModel)]="thumbConfig.autosize" [disabled]="!thumbConfig.thumbs">Thumb autosize
+            </mat-checkbox>
           </div>
 
           <div>
@@ -240,7 +247,8 @@ <h1 fxLayout>
             <mat-checkbox [(ngModel)]="thumbConfig.centralized">Centralize Thumbnails</mat-checkbox>
           </div>
           <div>
-            <mat-checkbox [(ngModel)]="thumbConfig.detach" [disabled]="!thumbConfig.thumbs">Detach thumbnails</mat-checkbox>
+            <mat-checkbox [(ngModel)]="thumbConfig.detach" [disabled]="!thumbConfig.thumbs">Detach thumbnails
+            </mat-checkbox>
           </div>
           <div>
             <mat-checkbox [(ngModel)]="thumbConfig.disabled" [disabled]="!thumbConfig.thumbs">Disable thumbnails' clicks

diff --git a/projects/ng-gallery-demo/src/app/pages/lab/lab.component.ts b/projects/ng-gallery-demo/src/app/pages/lab/lab.component.ts
@@ -1,15 +1,20 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { NgIf, NgFor, AsyncPipe, NgOptimizedImage } from '@angular/common';
 import {
   GalleryItem,
   GalleryConfig,
   LoadingStrategy,
   Orientation,
   ThumbnailsPosition,
   GalleryComponent,
-  GalleryThumbsComponent, GalleryNavComponent, GalleryBulletsComponent, GalleryCounterComponent
+  GalleryThumbsComponent,
+  GalleryNavComponent,
+  GalleryBulletsComponent,
+  GalleryCounterComponent,
+  GalleryItemDef,
+  ImgRecognizer
 } from 'ng-gallery';
 import { MatInputModule } from '@angular/material/input';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -53,6 +58,9 @@ import { FooterComponent } from '../../shared/footer/footer.component';
     GalleryNavComponent,
     GalleryBulletsComponent,
     GalleryCounterComponent,
+    GalleryItemDef,
+    ImgRecognizer,
+    NgOptimizedImage
   ]
 })
 export class LabComponent implements OnInit {

diff --git a/projects/ng-gallery/src/lib/autoplay/autoplay.directive.ts b/projects/ng-gallery/src/lib/autoplay/autoplay.directive.ts
@@ -26,28 +26,28 @@ export class AutoplayDirective {
     // TODO: Should not observe config in the two effects, will be refactored
     // TODO: Make especial inputs for the autoplay directive such as autoplayScrollBehavior
 
-    effect((onCleanup: EffectCleanupRegisterFn) => {
-      const config: GalleryConfig = this._galleryRef.config();
-      const isPlaying: boolean = this._galleryRef.isPlaying();
-
-      untracked(() => {
-        if (isPlaying) {
-          sub = this._imgManager.getActiveItem().pipe(
-            switchMap(() => of({}).pipe(
-              delay(config.autoplayInterval),
-              tap(() => {
-                if (this._galleryRef.hasNext()) {
-                  this._galleryRef.next(config.scrollBehavior);
-                } else {
-                  this._galleryRef.set(0, config.scrollBehavior);
-                }
-              })
-            ))
-          ).subscribe();
-        }
-        onCleanup(() => sub?.unsubscribe());
-      });
-    });
+    // effect((onCleanup: EffectCleanupRegisterFn) => {
+    //   const config: GalleryConfig = this._galleryRef.config();
+    //   const isPlaying: boolean = this._galleryRef.isPlaying();
+    //
+    //   untracked(() => {
+    //     if (isPlaying) {
+    //       sub = this._imgManager.getActiveItem().pipe(
+    //         switchMap(() => of({}).pipe(
+    //           delay(config.autoplayInterval),
+    //           tap(() => {
+    //             if (this._galleryRef.hasNext()) {
+    //               this._galleryRef.next(config.scrollBehavior);
+    //             } else {
+    //               this._galleryRef.set(0, config.scrollBehavior);
+    //             }
+    //           })
+    //         ))
+    //       ).subscribe();
+    //     }
+    //     onCleanup(() => sub?.unsubscribe());
+    //   });
+    // });
 
     effect(() => {
       const autoplay: boolean = this._galleryRef.config().autoplay;