Merge pull request #491 from MurhafSousli/new-engine

v8.0.0-beta4

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 8.0.0-beta.4
+
+- feat(core): Add `contentVisibilityAuto` option to set the proper `content-visibility` and `contain-intrinsic-size` value on all gallery items/thumbs, in [73b20a9](https://github.com/MurhafSousli/ngx-gallery/pull/491/commits/73b20a9f996371e4a3ad52283b358263fd88546f).
+- feat(core): Use native `loading` attribute on all `img` and `iframe` for native lazy loading.
+- refactor(core): Fix loop issue when sliding with using the mouse, in [1572bea](https://github.com/MurhafSousli/ngx-gallery/pull/491/commits/1572beae2bc58792fac94243f4f3e20c0a61e549).
+- refactor(core): Remove `lazy-image` directive.
+
+## 8.0.0-beta.3
+
+- fix(core): Set current index in sliding event does not work if slider size number has fraction, in [58e89fb](https://github.com/MurhafSousli/ngx-gallery/pull/491/commits/58e89fb3ed0e3837ca08a8111d567d992717ba7a).
+
 ## 8.0.0-beta.2
 
 - fix(lightbox): close button is not displayed, in [506249b](https://github.com/MurhafSousli/ngx-gallery/pull/490/commits/506249bbc5877cd4ed54cf610a42b3a31abcb417).

projects/ng-gallery-demo/src/app/pages/lightbox-example/lightbox-example.component.html

@@ -49,8 +49,7 @@ <h3>Demo</h3>
       <button mat-raised-button mat-ripple class="grid-item" *ngFor="let item of space$ | async; let i = index"
               [lightbox]="i" gallery="lightbox">
 
-        <span class="grid-image" [style.backgroundImage]="'url(' + item.data.thumb + ')'"></span>
-
+        <img class="grid-image" loading="lazy" [src]="item.data.thumb"/>
       </button>
     </div>
 

projects/ng-gallery/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-gallery",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.4",
   "homepage": "https://ngx-gallery.netlify.com/",
   "author": {
     "name": "Murhaf Sousli",

projects/ng-gallery/src/lib/components/gallery-core.component.ts

@@ -9,28 +9,27 @@ import { GalleryConfig } from '../models/config.model';
     <gallery-thumbs *ngIf="config.thumb"
                     [state]="state"
                     [config]="config"
-                    (action)="action.emit($event)"
                     (thumbClick)="thumbClick.emit($event)">
     </gallery-thumbs>
     <div class="g-box">
       <gallery-slider [state]="state"
                       [config]="config"
-                      (action)="action.emit($event)"
+                      [galleryId]="galleryId"
                       (itemClick)="itemClick.emit($event)"
                       (error)="error.emit($event)">
 
         <gallery-nav *ngIf="config.nav && state.items.length > 1"
                      [state]="state"
                      [config]="config"
-                     (action)="action.emit($event)">
+                     [galleryId]="galleryId">
         </gallery-nav>
 
       </gallery-slider>
 
       <gallery-dots *ngIf="config.dots"
                     [state]="state"
                     [config]="config"
-                    (action)="action.emit($event)">
+                    [galleryId]="galleryId">
       </gallery-dots>
 
       <gallery-counter *ngIf="config.counter"
@@ -45,9 +44,9 @@ import { GalleryConfig } from '../models/config.model';
 })
 export class GalleryCoreComponent {
 
+  @Input() galleryId: string;
   @Input() state: GalleryState;
   @Input() config: GalleryConfig;
-  @Output() action = new EventEmitter<string | number>();
   @Output() itemClick = new EventEmitter<number>();
   @Output() thumbClick = new EventEmitter<number>();
   @Output() error = new EventEmitter<GalleryError>();
@@ -91,4 +90,9 @@ export class GalleryCoreComponent {
   @HostBinding('attr.thumbSlidingDisabled') get thumbSlidingDisabled(): boolean {
     return this.config.thumbSlidingDisabled;
   }
+
+  /** Set gallery slider content-visibility-auto style  */
+  @HostBinding('attr.contentVisibilityAuto') get contentVisibilityAuto(): boolean {
+    return this.config.contentVisibilityAuto;
+  }
 }

projects/ng-gallery/src/lib/components/gallery-dots.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, Output, ChangeDetectionStrategy, EventEmitter } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Gallery } from '../services/gallery.service';
 import { GalleryState } from '../models/gallery.model';
 import { GalleryConfig } from '../models/config.model';
 
@@ -11,13 +12,16 @@ import { GalleryConfig } from '../models/config.model';
          [class.g-dot-active]="i === state.currIndex"
          [style.width.px]="config?.dotsSize"
          [style.height.px]="config?.dotsSize"
-         (click)="action.emit(i)">
+         (click)="gallery.ref(this.galleryId).set(i)">
       <div class="g-dot-inner"></div>
     </div>
   `
 })
 export class GalleryDotsComponent {
+  @Input() galleryId: string;
   @Input() state: GalleryState;
   @Input() config: GalleryConfig;
-  @Output() action = new EventEmitter<number>();
+
+  constructor(public gallery: Gallery) {
+  }
 }

projects/ng-gallery/src/lib/components/gallery-item.component.ts

@@ -73,7 +73,7 @@ export class GalleryItemComponent {
   @Input() data: any;
 
   /** Stream that emits when an error occurs */
-  @Output() error = new EventEmitter<Error>();
+  @Output() error = new EventEmitter<ErrorEvent>();
 
   @HostBinding('class.g-active-item') get isActive() {
     return this.index === this.currIndex;

projects/ng-gallery/src/lib/components/gallery-nav.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { Gallery } from '../services/gallery.service';
 import { GalleryState } from '../models/gallery.model';
 import { GalleryConfig } from '../models/config.model';
 
@@ -11,25 +12,25 @@ import { GalleryConfig } from '../models/config.model';
        class="g-nav-prev"
        aria-label="Previous"
        role="button"
-       (click)="action.emit('prev')"
+       (click)="gallery.ref(this.galleryId).prev()"
        [innerHtml]="navIcon"></i>
 
     <i *ngIf="config.loop || state.hasNext"
        class="g-nav-next"
        aria-label="Next"
        role="button"
-       (click)="action.emit('next')"
+       (click)="gallery.ref(this.galleryId).next()"
        [innerHtml]="navIcon"></i>
   `
 })
 export class GalleryNavComponent implements OnInit {
 
   navIcon: SafeHtml;
+  @Input() galleryId: string;
   @Input() state: GalleryState;
   @Input() config: GalleryConfig;
-  @Output() action = new EventEmitter<string>();
 
-  constructor(private _sanitizer: DomSanitizer) {
+  constructor(public gallery: Gallery, private _sanitizer: DomSanitizer) {
   }
 
   ngOnInit() {

projects/ng-gallery/src/lib/components/gallery-slider.component.ts

@@ -15,11 +15,13 @@ import {
 import { Platform } from '@angular/cdk/platform';
 import { Subscription, fromEvent } from 'rxjs';
 import { tap, debounceTime } from 'rxjs/operators';
+import { Gallery } from '../services/gallery.service';
 import { GalleryState, GalleryError } from '../models/gallery.model';
 import { GalleryConfig } from '../models/config.model';
 import { SlidingDirection } from '../models/constants';
 import { SliderAdapter, HorizontalAdapter, VerticalAdapter } from './adapters';
 import { SmoothScrollManager } from '../smooth-scroll';
+import { resizeObservable } from '../utils/resize-observer';
 
 declare const Hammer: any;
 
@@ -49,20 +51,23 @@ export class GallerySliderComponent implements OnInit, OnChanges, OnDestroy {
   private _hammer: any;
 
   /** Subscription reference to slider scroll stream */
-  private _scrollSub$: Subscription;
+  private _scrollObserver$: Subscription;
+
+  /** Subscription reference to host resize stream */
+  private _resizeObserver$: Subscription;
 
   /** Slider adapter */
   adapter: SliderAdapter;
 
+  /** Gallery ID */
+  @Input() galleryId: string;
+
   /** Gallery state */
   @Input() state: GalleryState;
 
   /** Gallery config */
   @Input() config: GalleryConfig;
 
-  /** Stream that emits when the active item should change */
-  @Output() action = new EventEmitter<string | number>();
-
   /** Stream that emits when item is clicked */
   @Output() itemClick = new EventEmitter<number>();
 
@@ -80,7 +85,8 @@ export class GallerySliderComponent implements OnInit, OnChanges, OnDestroy {
   constructor(private _el: ElementRef,
               private _zone: NgZone,
               private _platform: Platform,
-              private _smoothScroll: SmoothScrollManager) {
+              private _smoothScroll: SmoothScrollManager,
+              private _gallery: Gallery) {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -122,22 +128,40 @@ export class GallerySliderComponent implements OnInit, OnChanges, OnDestroy {
   ngOnInit(): void {
     this._zone.runOutsideAngular(() => {
       // Subscribe to slider scroll event
-      this._scrollSub$ = fromEvent(this.slider, 'scroll', { passive: true }).pipe(
+      this._scrollObserver$ = fromEvent(this.slider, 'scroll', { passive: true }).pipe(
         debounceTime(50),
         tap(() => {
           const index: number = this.adapter.measureIndex;
-          // Check if index value is
+          // Check if the index value has no fraction
+          this.slider.style.scrollSnapType = this.adapter.scrollSnapType;
           if (Number.isSafeInteger(index)) {
-            this._zone.run(() => this.action.emit(index));
+            this._zone.run(() => this._gallery.ref(this.galleryId).set(index));
           }
         })
       ).subscribe();
+
+      // Detect if the size of the slider has changed detecting current index on scroll
+      if (this._platform.isBrowser) {
+        this._resizeObserver$ = resizeObservable(this._el.nativeElement).pipe(
+          debounceTime(this.config.resizeDebounceTime),
+          tap(([entry]: ResizeObserverEntry[]) => {
+            const width: number = Math.ceil(entry.contentRect.width);
+            const height: number = Math.ceil(entry.contentRect.height);
+            this.slider.style.width = `${ width }px`;
+            this.slider.style.height = `${ height }px`;
+            if (this.config.contentVisibilityAuto) {
+              this.slider.style.setProperty('--item-contain-intrinsic-size', `${ width }px ${ height }px`);
+            }
+          })
+        ).subscribe();
+      }
     });
   }
 
   ngOnDestroy(): void {
     this.deactivateGestures();
-    this._scrollSub$?.unsubscribe();
+    this._resizeObserver$?.unsubscribe();
+    this._scrollObserver$?.unsubscribe();
   }
 
   trackByFn(index: number, item: any) {
@@ -205,16 +229,19 @@ export class GallerySliderComponent implements OnInit, OnChanges, OnDestroy {
     this._zone.run(() => {
       const delta: number = this.adapter.getPanDelta(e);
       const velocity: number = this.adapter.getPanVelocity(e);
+
+      const galleryRef = this._gallery.ref(this.galleryId);
+
       // Check if scrolled item is great enough to navigate
       if (Math.abs(delta) > this.adapter.clientSize / 2) {
-        return this.action.emit(delta > 0 ? 'prev' : 'next');
+        return delta > 0 ? galleryRef.prev(false) : galleryRef.next(false);
       }
       // Check if velocity is great enough to navigate
       if (Math.abs(velocity) > 0.3) {
-        return this.action.emit(velocity > 0 ? 'prev' : 'next');
+        return velocity > 0 ? galleryRef.prev(false) : galleryRef.next(false);
       }
+      // Need to scroll back manually since the currIndex did not change
       this.scrollToIndex(this.state.currIndex, 'smooth');
-      this.action.emit(this.state.currIndex);
     });
   }
 }

projects/ng-gallery/src/lib/components/gallery-thumbs.component.ts

@@ -16,13 +16,14 @@ import {
   ChangeDetectionStrategy
 } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
-import { fromEvent, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { debounceTime, tap } from 'rxjs/operators';
 import { GalleryConfig } from '../models/config.model';
 import { GalleryState, GalleryError } from '../models/gallery.model';
 import { ThumbnailsPosition, ThumbnailsView } from '../models/constants';
 import { ThumbSliderAdapter, HorizontalThumbAdapter, VerticalThumbAdapter } from './adapters';
 import { SmoothScrollManager } from '../smooth-scroll';
+import { resizeObservable } from '../utils/resize-observer';
 
 declare const Hammer: any;
 
@@ -56,8 +57,8 @@ export class GalleryThumbsComponent implements AfterViewInit, AfterViewChecked,
   /** Thumbnails view enum */
   readonly thumbnailsView = ThumbnailsView;
 
-  /** Subscription reference to window resize stream */
-  private _resizeSub$: Subscription;
+  /** Subscription reference to host resize stream */
+  private _resizeObserver$: Subscription;
 
   /** Slider adapter */
   adapter: ThumbSliderAdapter;
@@ -68,9 +69,6 @@ export class GalleryThumbsComponent implements AfterViewInit, AfterViewChecked,
   /** Gallery config */
   @Input() config: GalleryConfig;
 
-  /** Stream that emits when the active item should change */
-  @Output() action = new EventEmitter<string | number>();
-
   /** Stream that emits when thumb is clicked */
   @Output() thumbClick = new EventEmitter<number>();
 
@@ -123,11 +121,15 @@ export class GalleryThumbsComponent implements AfterViewInit, AfterViewChecked,
         this.width = this.adapter.containerWidth;
         this.height = this.adapter.containerHeight;
 
+        if (this.config.contentVisibilityAuto) {
+          this.slider.style.setProperty('--thumb-contain-intrinsic-size', `${ this.config.thumbWidth }px ${ this.config.thumbHeight }px`);
+        }
+
         if (!changes.config.firstChange) {
           // Keep the correct sliding position when direction changes
           requestAnimationFrame(() => {
             this.scrollToIndex(this.state.currIndex, 'auto');
-          })
+          });
         }
 
         // Reactivate gestures
@@ -154,9 +156,9 @@ export class GalleryThumbsComponent implements AfterViewInit, AfterViewChecked,
     setTimeout(() => this.scrollToIndex(this.state.currIndex, 'auto'), 200);
 
     this._zone.runOutsideAngular(() => {
-      // Update necessary calculation on window resize
+      // Update necessary calculation on host resize
       if (this._platform.isBrowser) {
-        this._resizeSub$ = fromEvent(window, 'resize').pipe(
+        this._resizeObserver$ = resizeObservable(this._el.nativeElement).pipe(
           debounceTime(this.config.resizeDebounceTime),
           tap(() => {
             // Update thumb centralize size
@@ -175,6 +177,7 @@ export class GalleryThumbsComponent implements AfterViewInit, AfterViewChecked,
 
   ngOnDestroy(): void {
     this.deactivateGestures();
+    this._resizeObserver$?.unsubscribe();
   }
 
   trackByFn(index: number, item: any) {
@@ -231,6 +234,5 @@ export class GalleryThumbsComponent implements AfterViewInit, AfterViewChecked,
 
   private deactivateGestures(): void {
     this._hammer?.destroy();
-    this._resizeSub$?.unsubscribe();
   }
 }