Merge pull request #93 from VagrantAI-c/development

Release

README.md

@@ -174,6 +174,11 @@ Possible options:
     shouldRecalculateOnResize = true;
     ```
     Whether carousel should recalculate upon window resize. Useful when carousel takes full page width or carousel width is relative to viewport width (either in `%` or `vw`)
+-
+    ```typescript
+    recalculateDebounce = 300;
+    ```
+    Specifies time for which carousel would wait after resize event to recalculate its positions. 0 means no debounce is applied.
 
 #### Outputs
 `itemIndexChange`

projects/ng-carousel/src/lib/private/models/carousel-config.ts

@@ -5,56 +5,85 @@ import { CarouselWidthMode } from '../../carousel-width-mode';
 export class CompleteCarouselConfig<T = any> {
     /**
      * Array of data to display
+     *
+     * Default: []
      */
     items: T[] = [];
     /**
      * Describes how carousel calculates its content width.
      * Consult with corresponding enum to see what options
      * are available.
+     *
+     * Default: CarouselWidthMode.PERCENT
      */
     widthMode: CarouselWidthMode = CarouselWidthMode.PERCENT;
     /**
      * Slide width. It could be pixels or percents, based on mode
      * configuration.
+     *
+     * Default: 100
      */
     slideWidth = 100;
     /**
      * Describes how slides should be positioned relative to
      * carousel viewport
+     *
+     * Default: CarouselAlignMode.CENTER
      */
     alignMode: CarouselAlignMode = CarouselAlignMode.CENTER;
     /**
      * Whether autoplay is enabled
+     *
+     * Default: true
      */
     autoplayEnabled = true;
     /**
      * Time in ms of how long carousel would wait until automatic
      * slide increment. Respects `autoplayEnabled` value.
+     *
+     * Default: 6000
      */
     autoplayDelay = 6000;
     /**
      * Whether mouse drag or gesture panning enabled
+     *
+     * Default: true
      */
     dragEnabled = true;
     /**
      * Whether carousel should start from beginning after last
      * slide
+     *
+     * Default: true
      */
     shouldLoop = true;
     /**
      * Time in ms of how long transition between slides would last
+     *
+     * Default: 280
      */
     transitionDuration = 280;
     /**
      * Whether carousel should automatically recalculate on window resize.
      * This option is recommended when using pixel width mode or left
      * alignment.
+     *
+     * Default: true
      */
     shouldRecalculateOnResize = true;
+    /**
+     * Specifies time for which carousel would wait after resize event
+     * to recalculate its positions. 0 means no debounce is applied.
+     *
+     * Default: 300
+     */
+    recalculateDebounce = 300;
     /**
      * Value in current width mode units which are virtally added to both sides
      * of viewport. Slides within this virtual zone should always be presented
      * whether loop mode is on.
+     *
+     * Default: 5
      */
     threshold = 5;
 
@@ -83,5 +112,8 @@ export class CompleteCarouselConfig<T = any> {
         this.shouldRecalculateOnResize = typeof config?.shouldRecalculateOnResize === 'boolean'
             ? config.shouldRecalculateOnResize
             : true;
+        this.recalculateDebounce = typeof config?.recalculateDebounce === 'number'
+            ? config.recalculateDebounce
+            : 300;
     }
 }

projects/ng-carousel/src/lib/private/views/carousel-engine.component.ts

@@ -1,7 +1,7 @@
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { ChangeDetectionStrategy, Component, ElementRef, Inject, NgZone, OnDestroy, OnInit, PLATFORM_ID, Renderer2, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
-import { fromEvent, NEVER, Observable, Subject, Subscriber } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, mapTo, switchMap, takeUntil } from 'rxjs/operators';
+import { fromEvent, interval, NEVER, Observable, Subject, Subscriber } from 'rxjs';
+import { debounce, distinctUntilChanged, map, mapTo, switchMap, takeUntil } from 'rxjs/operators';
 
 import { AutoplaySuspender } from '../models/autoplay-suspender';
 import { CarouselError } from '../models/carousel-error';
@@ -268,7 +268,13 @@ export class CarouselEngineComponent<T> implements OnInit, OnDestroy {
                         : fromEvent(window, 'resize', {passive: true}).pipe(mapTo(null))
                     : NEVER
                 ),
-                debounceTime(300),
+                debounce(() => this.carousel.carouselStateChanges()
+                    .pipe(
+                        map((state: CarouselState<T>) => state.config.recalculateDebounce),
+                        distinctUntilChanged(),
+                        switchMap((debounceTime: number) => interval(debounceTime)),
+                    )
+                ),
                 takeUntil(this.destroyed$),
             )
             .subscribe(() => {

src/app/app.component.html

@@ -154,6 +154,22 @@ <h2>
                     </div>
                 </div>
             </label>
+            <label class="control-block">
+                <div>Recalculate debounce: {{recalculateDebounce$ | async}}</div>
+                <div class="range-block">
+                    <mat-slider
+                        max="3000"
+                        formControlName="recalculateDebounce"
+                        thumbLabel>
+                    </mat-slider>
+                    <div
+                        aria-hidden="true"
+                        class="range-labels-block mat-caption">
+                        <div>0</div>
+                        <div>3000</div>
+                    </div>
+                </div>
+            </label>
             <div class="control-block">
                 <mat-checkbox formControlName="autoplayEnabled">
                     Autoplay

src/app/app.component.ts

@@ -26,6 +26,7 @@ export class AppComponent implements OnInit, OnDestroy {
         autoplayEnabled: true,
         dragEnabled: true,
         shouldRecalculateOnResize: true,
+        recalculateDebounce: 300,
     };
     readonly configForm = new FormGroup({
         widthMode: new FormControl(this.config.widthMode),
@@ -37,11 +38,13 @@ export class AppComponent implements OnInit, OnDestroy {
         autoplayEnabled: new FormControl(this.config.autoplayEnabled),
         dragEnabled: new FormControl(this.config.dragEnabled),
         shouldRecalculateOnResize: new FormControl(this.config.shouldRecalculateOnResize),
+        recalculateDebounce: new FormControl(this.config.recalculateDebounce),
     });
     readonly slideWidth$ = this.slideWidthChanges();
     readonly widthMode$ = this.widthModeChanges();
     readonly transitionDuration$ = this.transitionDurationChanges();
     readonly slidesQuantity$ = this.slidesQuantityChanges();
+    readonly recalculateDebounce$ = this.recalculateDebounceChanges();
     readonly PX = CarouselWidthMode.PX;
     readonly PERCENT = CarouselWidthMode.PERCENT;
     readonly LEFT = CarouselAlignMode.LEFT;
@@ -103,6 +106,14 @@ export class AppComponent implements OnInit, OnDestroy {
             );
     }
 
+    private recalculateDebounceChanges(): Observable<number> {
+        return this.configForm.valueChanges
+            .pipe(
+                map((form: {recalculateDebounce: number}) => form.recalculateDebounce),
+                startWith(this.configForm.controls.recalculateDebounce.value),
+            );
+    }
+
     private listenConfigChanges(): void {
         this.configForm.valueChanges
             .pipe(