update

MurhafSousli · Sep 17, 2023 · b3a283d · b3a283d
1 parent 04a0ed0
commit b3a283d
Show file tree

Hide file tree

Showing 17 changed files with 614 additions and 491 deletions.
diff --git a/projects/ng-gallery/src/lib/components/adapters/base-adapter.ts b/projects/ng-gallery/src/lib/components/adapters/base-adapter.ts
@@ -1,48 +1,30 @@
-/**
- * A clone of HammerJs constants
- */
-export const DIRECTION_LEFT = 2;
-export const DIRECTION_RIGHT = 4;
-export const DIRECTION_UP = 8;
-export const DIRECTION_DOWN = 16;
+export abstract class SliderAdapter {
 
-export abstract class BaseSliderAdapter {
+  readonly abstract hammerDirection: number;
 
-  abstract scrollSnapType: string;
-
-  abstract panDirection: number;
+  readonly abstract scrollSnapType: string;
 
   abstract get scrollValue(): number;
 
   abstract get clientSize(): number;
 
   abstract get isContentLessThanContainer(): boolean;
 
-  abstract getPanValue(value: number, e: any, behavior: ScrollBehavior): ScrollToOptions;
-
   abstract getScrollToValue(el: Element, behavior: ScrollBehavior): ScrollToOptions;
 
   abstract getCentralizerStartSize(): number;
 
   abstract getCentralizerEndSize(): number;
-}
-
-
-export abstract class ThumbSliderAdapter extends BaseSliderAdapter {
-
-  abstract get thumbSize(): number;
-}
-
 
-export abstract class SliderAdapter extends BaseSliderAdapter {
+  abstract getRoomMargin(): string;
 
-  abstract get measureIndex(): number;
+  abstract getElementRoomMargin(viewport: HTMLElement, el: HTMLElement): string;
 
-  abstract getClientSize(el: HTMLElement): number;
+  abstract getHammerVelocity(e): number;
 
-  abstract getOffsetSize(el: HTMLElement): number;
+  abstract getHammerValue(value: number, delta: number, behavior: ScrollBehavior): ScrollToOptions;
 
-  abstract getPanDelta(e: any): number;
+  // abstract getDraggingValue(value: number, delta: number, behavior: ScrollBehavior): ScrollToOptions;
 
-  abstract getPanVelocity(e: any): number;
+  // abstract getDraggingProperty(e: MouseEvent): number;
 }
diff --git a/projects/ng-gallery/src/lib/components/adapters/common-adapter.ts b/projects/ng-gallery/src/lib/components/adapters/common-adapter.ts
diff --git a/projects/ng-gallery/src/lib/components/adapters/index.ts b/projects/ng-gallery/src/lib/components/adapters/index.ts
@@ -1,3 +1,2 @@
-export * from './thumb-adapters';
 export * from './main-adapters';
 export * from './base-adapter';
diff --git a/projects/ng-gallery/src/lib/components/adapters/main-adapters.ts b/projects/ng-gallery/src/lib/components/adapters/main-adapters.ts
@@ -1,101 +1,124 @@
 import { GalleryConfig } from '../../models/config.model';
 import { SliderAdapter } from './base-adapter';
-import { HorizontalCommonAdapter, VerticalCommonAdapter } from './common-adapter';
 import { SmoothScrollToOptions } from '../../smooth-scroll';
 
-export class HorizontalAdapter extends HorizontalCommonAdapter implements SliderAdapter {
+declare const Hammer: any;
 
-  get measureIndex(): number {
-    return this.slider.scrollLeft / this.slider.clientWidth;
-  }
+export class HorizontalAdapter implements SliderAdapter {
 
-  get isContentLessThanContainer(): boolean {
-    return this.slider.clientWidth >= this.slider.firstElementChild.clientWidth;
+  readonly hammerDirection: number = Hammer?.DIRECTION_HORIZONTAL;
+
+  readonly scrollSnapType: string = 'x mandatory';
+
+  get scrollValue(): number {
+    return this.slider.scrollLeft;
   }
 
-  constructor(public slider: HTMLElement, public config: GalleryConfig) {
-    super(slider, config);
+  get clientSize(): number {
+    return this.slider.clientWidth;
   }
 
-  getClientSize(el: HTMLElement): number {
-    return el.clientWidth;
+  get isContentLessThanContainer(): boolean {
+    return this.slider.clientWidth >= this.slider.firstElementChild.clientWidth;
   }
 
-  getOffsetSize(el: HTMLElement): number {
-    return el.offsetLeft;
+  constructor(public slider: HTMLElement, public config: GalleryConfig) {
   }
 
   getScrollToValue(el: HTMLElement, behavior: ScrollBehavior): SmoothScrollToOptions {
-    const position = el.offsetLeft - ((this.clientSize - el.clientWidth) / 2);
+    const position: number = el.offsetLeft - ((this.clientSize - el.clientWidth) / 2);
     return {
       start: position,
       duration: behavior === 'smooth' ? this.config.slidingDuration : 0,
       easing: this.config.slidingEase
     };
   }
 
-  getPanDelta(e): number {
-    return e.deltaX;
+  getRoomMargin(): string {
+    return `0px 1px 0px 1px`;
   }
 
-  getPanVelocity(e): number {
-    return e.velocityX;
+  getElementRoomMargin(viewport: HTMLElement, el: HTMLElement): string {
+    const rootMargin: number = -1 * ((viewport.clientWidth - el.clientWidth) / 2) + 1;
+    return `0px ${ rootMargin }px 0px ${ rootMargin }px`;
   }
 
   getCentralizerStartSize(): number {
     if (this.isContentLessThanContainer) {
-      const size = this.clientSize - this.slider.firstElementChild.clientWidth;
+      const size: number = this.clientSize - this.slider.firstElementChild.clientWidth;
       return size / 2;
     }
     return (this.clientSize / 2) - (this.slider.firstElementChild.firstElementChild?.clientWidth / 2);
   }
 
   getCentralizerEndSize(): number {
     if (this.isContentLessThanContainer) {
-      const size = this.clientSize - this.slider.firstElementChild.clientWidth;
+      const size: number = this.clientSize - this.slider.firstElementChild.clientWidth;
       return size / 2;
     }
     return (this.clientSize / 2) - (this.slider.firstElementChild.lastElementChild?.clientWidth / 2);
   }
-}
 
-export class VerticalAdapter extends VerticalCommonAdapter implements SliderAdapter {
+  getHammerVelocity(e: any): number {
+    return e.velocityX;
+  }
 
-  get measureIndex(): number {
-    return this.slider.scrollTop / this.slider.clientHeight;
+  getHammerValue(value: number, e: any, behavior: ScrollBehavior): ScrollToOptions {
+    return {
+      behavior,
+      left: value - e.deltaX
+    };
   }
 
-  get isContentLessThanContainer(): boolean {
-    return this.slider.clientHeight >= this.slider.firstElementChild.clientHeight;
+  // getDraggingProperty(e: MouseEvent): number {
+  //   return e.clientX;
+  // }
+
+  // getDraggingValue(value: number, delta: number, behavior: ScrollBehavior): ScrollToOptions {
+  //   return {
+  //     behavior,
+  //     left: value - delta
+  //   };
+  // }
+}
+
+export class VerticalAdapter implements SliderAdapter {
+
+  readonly hammerDirection: number = Hammer?.DIRECTION_VERTICAL;
+
+  readonly scrollSnapType: string = 'y mandatory';
+
+  get scrollValue(): number {
+    return this.slider.scrollTop;
   }
 
-  constructor(public slider: HTMLElement, public config: GalleryConfig) {
-    super(slider, config);
+  get clientSize(): number {
+    return this.slider.clientHeight;
   }
 
-  getClientSize(el: HTMLElement): number {
-    return el.clientHeight;
+  get isContentLessThanContainer(): boolean {
+    return this.slider.clientHeight >= this.slider.firstElementChild.clientHeight;
   }
 
-  getOffsetSize(el: HTMLElement): number {
-    return el.offsetTop;
+  constructor(public slider: HTMLElement, public config: GalleryConfig) {
   }
 
   getScrollToValue(el: HTMLElement, behavior: ScrollBehavior): SmoothScrollToOptions {
-    const position = el.offsetTop - ((this.clientSize - el.clientHeight) / 2);
+    const position: number = el.offsetTop - ((this.clientSize - el.clientHeight) / 2);
     return {
       top: position,
       duration: behavior === 'smooth' ? this.config.slidingDuration : 0,
       easing: this.config.slidingEase
     };
   }
 
-  getPanDelta(e): number {
-    return e.deltaY;
+  getRoomMargin(): string {
+    return `1px 0px 1px 0px`;
   }
 
-  getPanVelocity(e): number {
-    return e.velocityY;
+  getElementRoomMargin(viewport: HTMLElement, el: HTMLElement): string {
+    const rootMargin: number = -1 * ((viewport.clientHeight - el.clientHeight) / 2) + 1;
+    return `${ rootMargin }px 0px ${ rootMargin }px 0px`;
   }
 
   getCentralizerStartSize(): number {
@@ -113,4 +136,26 @@ export class VerticalAdapter extends VerticalCommonAdapter implements SliderAdap
     }
     return (this.clientSize / 2) - (this.slider.firstElementChild.lastElementChild?.clientHeight / 2);
   }
+
+  getHammerVelocity(e: any): number {
+    return e.velocityY;
+  }
+
+  getHammerValue(value: number, e: any, behavior: ScrollBehavior): ScrollToOptions {
+    return {
+      behavior,
+      top: value - e.deltaY
+    };
+  }
+
+  // getDraggingProperty(e: MouseEvent): number {
+  //   return e.clientY;
+  // }
+
+  // getDraggingValue(value: number, delta: number, behavior: ScrollBehavior): ScrollToOptions {
+  //   return {
+  //     behavior,
+  //     top: value - delta
+  //   };
+  // }
 }