Update

MurhafSousli · Oct 28, 2024 · b8f0c16 · b8f0c16
1 parent 7cc727f
commit b8f0c16
Show file tree

Hide file tree

Showing 22 changed files with 247 additions and 341 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
@@ -9,7 +9,6 @@ <h1 fxLayout>
     <gallery #gallery id="lab"
              [items]="photos$ | async"
              [centralized]="config.centralized"
-             [autoHeight]="config.autoHeight"
              [itemAutosize]="config.itemAutosize"
              [loadingAttr]="config.loadingAttr"
              [resizeDebounceTime]="config.resizeDebounceTime"
@@ -47,17 +46,18 @@ <h1 fxLayout>
         <gallery-counter [align]="counterConfig.align"/>
       }
 
-      <gallery-thumbs [autosize]="thumbConfig.autosize"
-                      [imageSize]="thumbConfig.imageSize"
-                      [centralized]="thumbConfig.centralized"
-                      [thumbWidth]="thumbConfig.thumbWidth"
-                      [thumbHeight]="thumbConfig.thumbHeight"
-                      [disabled]="thumbConfig.disabled"
-                      [disableScroll]="thumbConfig.disableScroll"
-                      [disableMouseScroll]="thumbConfig.disableMouseScroll"
-                      [position]="thumbConfig.position"
-                      [detach]="thumbConfig.detach"/>
-
+      @if (thumbConfig.thumbs) {
+        <gallery-thumbs [autosize]="thumbConfig.autosize"
+                        [imageSize]="thumbConfig.imageSize"
+                        [centralized]="thumbConfig.centralized"
+                        [thumbWidth]="thumbConfig.thumbWidth"
+                        [thumbHeight]="thumbConfig.thumbHeight"
+                        [disabled]="thumbConfig.disabled"
+                        [disableScroll]="thumbConfig.disableScroll"
+                        [disableMouseScroll]="thumbConfig.disableMouseScroll"
+                        [position]="thumbConfig.position"
+                        [detach]="thumbConfig.detach"/>
+      }
     </gallery>
 
     <div class="buttons-container">
@@ -244,7 +244,8 @@ <h1 fxLayout>
             <mat-checkbox [(ngModel)]="config.centralized">Centralize Slider</mat-checkbox>
           </div>
           <div>
-            <mat-checkbox [(ngModel)]="thumbConfig.centralized">Centralize Thumbnails</mat-checkbox>
+            <mat-checkbox [(ngModel)]="thumbConfig.centralized" [disabled]="!thumbConfig.thumbs">Centralize Thumbnails
+            </mat-checkbox>
           </div>
           <div>
             <mat-checkbox [(ngModel)]="thumbConfig.detach" [disabled]="!thumbConfig.thumbs">Detach thumbnails
@@ -263,15 +264,19 @@ <h1 fxLayout>
           </div>
 
           <div>
-            <mat-checkbox [(ngModel)]="thumbConfig.disableScroll">Disable Thumb Scroll</mat-checkbox>
+            <mat-checkbox [(ngModel)]="thumbConfig.disableScroll" [disabled]="!thumbConfig.thumbs">Disable Thumb
+              Scroll
+            </mat-checkbox>
           </div>
 
           <div>
             <mat-checkbox [(ngModel)]="config.disableMouseScroll">Disable Mouse Scroll</mat-checkbox>
           </div>
 
           <div>
-            <mat-checkbox [(ngModel)]="thumbConfig.disableMouseScroll">Disable Thumb Mouse Scroll</mat-checkbox>
+            <mat-checkbox [(ngModel)]="thumbConfig.disableMouseScroll" [disabled]="!thumbConfig.thumbs">Disable Thumb
+              Mouse Scroll
+            </mat-checkbox>
           </div>
         </div>
       </div>

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
@@ -14,7 +14,7 @@ import {
   GalleryBulletsComponent,
   GalleryCounterComponent,
   GalleryItemDef,
-  ImgRecognizer
+  ImgRecognizer, AutoHeight
 } from 'ng-gallery';
 import { MatInputModule } from '@angular/material/input';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -39,6 +39,7 @@ import { FooterComponent } from '../../shared/footer/footer.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
+    AutoHeight,
     FlexLayoutModule,
     MatIconModule,
     NgIf,
@@ -113,7 +114,7 @@ export class LabComponent implements OnInit {
   indexChange$ = new BehaviorSubject<any>({ active: false });
 
   constructor(pixabay: Pixabay, private _title: Title) {
-    this.photos$ = pixabay.getHDImages('jet fighter');
+    this.photos$ = pixabay.getHDImages('tropical');
   }
 
   ngOnInit() {
@@ -130,7 +131,7 @@ export class LabComponent implements OnInit {
       autoplayInterval: 3000,
       loadingStrategy: LoadingStrategy.Preload,
       orientation: Orientation.Horizontal,
-      autoHeight: false,
+      autoHeight: true,
       itemAutosize: false,
       scrollBehavior: 'smooth',
       loadingAttr: 'lazy',

diff --git a/projects/ng-gallery/src/lib/components/gallery-slider.component.ts b/projects/ng-gallery/src/lib/components/gallery-slider.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject, output, OutputEmitterRef, ChangeDetectionStrategy } from '@angular/core';
+import { Component, inject, output, OutputEmitterRef, ChangeDetectionStrategy, viewChild } from '@angular/core';
 import { GalleryError } from '../models/gallery.model';
 import { GalleryRef } from '../services/gallery-ref';
 import { SmoothScroll } from '../smooth-scroll';
@@ -8,7 +8,6 @@ import { GalleryItemComponent } from './gallery-item.component';
 import { ScrollSnapType } from '../services/scroll-snap-type';
 import { ResizeSensor } from '../services/resize-sensor';
 import { SliderComponent } from './slider/slider';
-import { AutoHeight } from '../observers/auto-height';
 
 @Component({
   standalone: true,
@@ -17,7 +16,6 @@ import { AutoHeight } from '../observers/auto-height';
     <g-slider [orientation]="galleryRef.config().orientation"
               [autosize]="galleryRef.config().itemAutosize"
               [centralized]="galleryRef.config().centralized"
-
               resizeSensor
               smoothScroll
               intersectionSensor
@@ -55,14 +53,16 @@ import { AutoHeight } from '../observers/auto-height';
     HammerSliding,
     ScrollSnapType,
     GalleryItemComponent,
-    SliderComponent,
-    AutoHeight
+    SliderComponent
   ]
 })
 export class GallerySliderComponent {
 
   readonly galleryRef: GalleryRef = inject(GalleryRef);
 
+  // TODO: Allow auto-height to access resize sensor
+  resizeSensor = viewChild(ResizeSensor);
+
   /** Stream that emits when thumb is clicked */
   itemClick: OutputEmitterRef<number> = output<number>();
 

diff --git a/projects/ng-gallery/src/lib/components/gallery-slider.scss b/projects/ng-gallery/src/lib/components/gallery-slider.scss
@@ -19,6 +19,11 @@
   height: var(--slider-height, 100%);
   width: var(--slider-width, 100%);
 
+  //&.g-resizing {
+  //  // Changes the height of the slider to match the active item height
+  //  height: var(--slider-auto-height, 100%);
+  //}
+
   overflow: var(--slider-overflow);
   scroll-snap-type: var(--slider-scroll-snap-type);
   scroll-snap-stop: always;
@@ -48,13 +53,13 @@
     display: none;
   }
 
-  &.g-resizing {
-    ::ng-deep {
-      gallery-item {
-        visibility: hidden;
-      }
-    }
-  }
+  //&.g-resizing {
+  //  ::ng-deep {
+  //    gallery-item {
+  //      visibility: hidden;
+  //    }
+  //  }
+  //}
 
   &.g-sliding, &.g-scrolling {
     // Disable mouse click on gallery items/thumbnails when the slider is being dragged using the mouse

diff --git a/projects/ng-gallery/src/lib/components/gallery.component.ts b/projects/ng-gallery/src/lib/components/gallery.component.ts
@@ -14,7 +14,7 @@ import {
   TemplateRef,
   OutputEmitterRef,
   ChangeDetectionStrategy,
-  InputSignalWithTransform
+  InputSignalWithTransform, viewChild
 } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { Directionality } from '@angular/cdk/bidi';
@@ -41,7 +41,7 @@ import { GallerySliderComponent } from './gallery-slider.component';
     '[attr.dir]': 'dir.value',
     '[attr.debug]': 'debug()',
     '[attr.imageSize]': 'imageSize()',
-    '[attr.autoHeight]': 'autoHeight()',
+    // '[attr.autoHeight]': 'autoHeight()',
     '[attr.orientation]': 'orientation()',
     '[attr.itemAutosize]': 'itemAutosize()',
     '[attr.scrollDisabled]': 'disableScroll()'
@@ -71,6 +71,8 @@ import { GallerySliderComponent } from './gallery-slider.component';
 })
 export class GalleryComponent {
 
+  slider = viewChild(GallerySliderComponent);
+
   /**
    * The gallery reference instance
    */
@@ -128,9 +130,9 @@ export class GalleryComponent {
   /**
    * Automatically adjusts the gallery's height to fit the content
    */
-  autoHeight: InputSignalWithTransform<boolean, string | boolean> = input<boolean, string | boolean>(this._config.autoHeight, {
-    transform: booleanAttribute
-  });
+  // autoHeight: InputSignalWithTransform<boolean, string | boolean> = input<boolean, string | boolean>(this._config.autoHeight, {
+  //   transform: booleanAttribute
+  // });
 
   /**
    * Automatically cycle through items at time interval
@@ -283,7 +285,7 @@ export class GalleryComponent {
       disableScroll: this.disableScroll(),
       disableMouseScroll: this.disableMouseScroll(),
       itemAutosize: this.itemAutosize(),
-      autoHeight: this.autoHeight()
+      // autoHeight: this.autoHeight()
     };
   });
 

diff --git a/projects/ng-gallery/src/lib/components/gallery.scss b/projects/ng-gallery/src/lib/components/gallery.scss
@@ -13,7 +13,7 @@
 
   gap: var(--g-gutter-size);
   width: 100%;
-  width: 776px;
+  //width: 776px;
   height: 500px;
   min-height: 100%;
   max-height: 100%;
@@ -33,6 +33,16 @@
   --g-item-height: 100%;
   --g-item-max-height: var(--slider-height);
 
+  &.g-resizing {
+    // Changes the height of the slider to match the active item height
+    //--slider-height: var(--slider-auto-height) !important;
+    //::ng-deep {
+    //  .g-slider {
+    //    height: var(--slider-auto-height) !important;
+    //  }
+    //}
+  }
+
   &[gallerize] {
     --g-item-cursor: pointer;
   }

diff --git a/projects/ng-gallery/src/lib/components/items/items.ts b/projects/ng-gallery/src/lib/components/items/items.ts
@@ -1,12 +1,13 @@
 import {
-  computed,
   Directive,
-  ElementRef,
-  inject, Injector,
+  inject,
+  signal,
+  computed,
   input,
-  InputSignal,
   Signal,
-  signal,
+  Injector,
+  ElementRef,
+  InputSignal,
   WritableSignal
 } from '@angular/core';
 import { toObservable } from '@angular/core/rxjs-interop';

diff --git a/projects/ng-gallery/src/lib/components/slider/slider.ts b/projects/ng-gallery/src/lib/components/slider/slider.ts
@@ -27,8 +27,7 @@ import { SliderItem } from '../items/items';
     '[attr.autosize]': 'autosize()',
   },
   selector: 'g-slider',
-  template: `
-    <ng-content/>`,
+  template: '<ng-content/>',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SliderComponent {

diff --git a/projects/ng-gallery/src/lib/gestures/hammer-sliding.directive.ts b/projects/ng-gallery/src/lib/gestures/hammer-sliding.directive.ts
@@ -9,7 +9,7 @@ import {
   ElementRef,
   InputSignal,
   WritableSignal,
-  EffectCleanupRegisterFn
+  EffectCleanupRegisterFn, InputSignalWithTransform, booleanAttribute
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { HammerGestureConfig } from '@angular/platform-browser';
@@ -53,6 +53,10 @@ export class HammerSliding {
 
   sliding: WritableSignal<boolean> = signal<boolean>(false);
 
+  isThumbs: InputSignalWithTransform<boolean, string | boolean> = input<boolean, string | boolean>(false, {
+    transform: booleanAttribute
+  });
+
   constructor() {
     if (this._platform.ANDROID || this._platform.IOS || !(this._document.defaultView as any).Hammer) return;
 
@@ -90,6 +94,11 @@ export class HammerSliding {
           mc.on('panend', (e: any) => {
             this._document.onselectstart = null;
 
+            if (this.isThumbs()) {
+              this.sliding.set(false);
+              return;
+            }
+
             const index: number = this.getIndexOnMouseUp(e, this.slider.adapter());
             if (index !== -1) {
               this._zone.run(() => {