wally-ui 1.10.0 → 1.11.1

package/playground/showcase/src/app/components/carousel/carousel.ts

@@ -1,233 +1,285 @@
 import { Component, signal, ViewChild, ElementRef, AfterViewInit, Renderer2, OnDestroy, HostListener, WritableSignal, input, InputSignal } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { it } from 'node:test';
 
 @Component({
   selector: 'wally-carousel',
   imports: [CommonModule],
   templateUrl: './carousel.html',
 })
-export class Carousel implements AfterViewInit, OnDestroy {
+export class Carousel implements AfterViewInit {
   @ViewChild('carouselContainer', { static: false }) carouselContainer!: ElementRef;
 
-  isNavigationIndicator: InputSignal<boolean> = input<boolean>(false);
-  totalItemsCount: WritableSignal<number> = signal<number>(0);
-  currentVisibleItemIndex: WritableSignal<number> = signal<number>(0);
   carouselItemElements: HTMLElement[] = [];
 
-  private gestureState = {
-    startPositionX: 0,
-    startPositionY: 0,
-    currentPositionX: 0,
-    currentPositionY: 0,
-    isCurrentlyDragging: false,
-    gestureStartTime: 0
-  };
-
-  private readonly MINIMUM_SWIPE_DISTANCE = 50;
-  private readonly MINIMUM_SWIPE_VELOCITY = 0.3;
-  private readonly MAXIMUM_SWIPE_DURATION = 300;
-
-  private eventListenerCleanupFunctions: (() => void)[] = [];
-
-  get navigationIndicatorsArray() {
-    return Array(this.totalItemsCount()).fill(0);
-  }
-
   constructor(
     private renderer: Renderer2
   ) { }
 
   ngAfterViewInit(): void {
-    if (this.carouselContainer) {
-      this.initializeCarouselItems();
-      this.setupTouchAndMouseEvents();
-      this.setupAccessibilityAttributes();
-    }
-  }
+    console.log('carouselContainer', this.carouselContainer.nativeElement.children);
 
-  ngOnDestroy(): void {
-    this.eventListenerCleanupFunctions.forEach(cleanupFunction => cleanupFunction());
-  }
-
-  calculateNextItemIndex(currentItemIndex: number): number {
-    return (currentItemIndex + 1) % this.totalItemsCount();
-  }
-
-  calculatePreviousItemIndex(currentItemIndex: number): number {
-    return (currentItemIndex - 1 + this.totalItemsCount()) % this.totalItemsCount();
-  }
-
-  navigateToNextItem(): void {
-    this.currentVisibleItemIndex.set(this.calculateNextItemIndex(this.currentVisibleItemIndex()));
-    this.updateAllItemElementPositions();
-  }
-
-  navigateToPreviousItem(): void {
-    this.currentVisibleItemIndex.set(this.calculatePreviousItemIndex(this.currentVisibleItemIndex()));
-    this.updateAllItemElementPositions();
-  }
-
-  navigateToSpecificItem(targetItemIndex: number): void {
-    this.currentVisibleItemIndex.set(targetItemIndex);
-    this.updateAllItemElementPositions();
-  }
+    this.carouselItemElements = Array.from(this.carouselContainer.nativeElement.children);
+    console.log('carouselItemElements', this.carouselItemElements);
 
-  updateItemElementPosition(carouselItemElement: HTMLElement, itemIndex: number): void {
-    const currentVisibleIndex = this.currentVisibleItemIndex();
 
-    if (itemIndex === currentVisibleIndex) {
-      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(0)');
-    } else if (itemIndex > currentVisibleIndex) {
-      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(110%)');
-    } else {
-      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(-110%)');
-    }
-  }
-
-  updateAllItemElementPositions(): void {
     this.carouselItemElements.forEach((itemElement, itemIndex) => {
-      this.updateItemElementPosition(itemElement, itemIndex);
+      // this.renderer.setStyle(itemElement, 'position', 'absolute');
+      // this.renderer.setStyle(itemElement, 'display', 'flex');
+      // this.renderer.setStyle(itemElement, 'align-items', 'center');
+      // this.renderer.setStyle(itemElement, 'justify-content', 'center');
+      // this.renderer.setStyle(itemElement, 'inset', '0');
+      // this.renderer.setStyle(itemElement, 'padding', '8px');
+      // this.renderer.setStyle(itemElement, 'border-radius', '8px');
+      // this.renderer.setStyle(itemElement, 'transition', 'transform 700ms ease-out');
+
+      // this.renderer.addClass(item, 'flex flex-col items-center gap-4 p-2 rounded-sm transition-all duration-700 ease-in-out');
     });
-  }
-
-  @HostListener('keydown', ['$event'])
-  handleKeyboardNavigation(keyboardEvent: KeyboardEvent): void {
-    switch (keyboardEvent.key) {
-      case 'ArrowLeft':
-        keyboardEvent.preventDefault();
-        this.navigateToPreviousItem();
-        break;
-      case 'ArrowRight':
-        keyboardEvent.preventDefault();
-        this.navigateToNextItem();
-        break;
-      case 'Home':
-        keyboardEvent.preventDefault();
-        this.navigateToSpecificItem(0);
-        break;
-      case 'End':
-        keyboardEvent.preventDefault();
-        this.navigateToSpecificItem(this.totalItemsCount() - 1);
-        break;
-    }
-  }
-
-  private initializeCarouselItems(): void {
-    this.carouselItemElements = Array.from(this.carouselContainer.nativeElement.children);
-    this.totalItemsCount.set(this.carouselItemElements.length);
 
     this.carouselItemElements.forEach((itemElement, itemIndex) => {
-      this.renderer.setStyle(itemElement, 'position', 'absolute');
-      this.renderer.setStyle(itemElement, 'inset', '0');
-      this.renderer.setStyle(itemElement, 'transition', 'transform 700ms ease-out');
-      this.renderer.setStyle(itemElement, 'display', 'flex');
-      this.renderer.setStyle(itemElement, 'align-items', 'center');
-      this.renderer.setStyle(itemElement, 'justify-content', 'center');
       this.updateItemElementPosition(itemElement, itemIndex);
     });
   }
 
-  private setupTouchAndMouseEvents(): void {
-    const carouselContainerElement = this.carouselContainer.nativeElement;
-
-    const touchStartListener = this.renderer.listen(carouselContainerElement, 'touchstart', (event) => this.handleTouchStart(event));
-    const touchMoveListener = this.renderer.listen(carouselContainerElement, 'touchmove', (event) => this.handleTouchMove(event));
-    const touchEndListener = this.renderer.listen(carouselContainerElement, 'touchend', () => this.handleTouchEnd());
-
-    const mouseDownListener = this.renderer.listen(carouselContainerElement, 'mousedown', (event) => this.handleMouseDown(event));
-    const mouseMoveListener = this.renderer.listen(carouselContainerElement, 'mousemove', (event) => this.handleMouseMove(event));
-    const mouseUpListener = this.renderer.listen(carouselContainerElement, 'mouseup', () => this.handleMouseUp());
-    const mouseLeaveListener = this.renderer.listen(carouselContainerElement, 'mouseleave', () => this.handleMouseUp());
-
-    this.eventListenerCleanupFunctions.push(
-      touchStartListener,
-      touchMoveListener,
-      touchEndListener,
-      mouseDownListener,
-      mouseMoveListener,
-      mouseUpListener,
-      mouseLeaveListener
-    );
-
-    this.renderer.setStyle(carouselContainerElement, 'touch-action', 'pan-x');
-  }
-
-  private setupAccessibilityAttributes(): void {
-    const carouselContainerElement = this.carouselContainer.nativeElement;
-
-    this.renderer.setAttribute(carouselContainerElement, 'role', 'region');
-    this.renderer.setAttribute(carouselContainerElement, 'aria-label', 'Carousel');
-    this.renderer.setAttribute(carouselContainerElement, 'tabindex', '0');
-  }
-
-  private handleTouchStart(touchEvent: TouchEvent): void {
-    this.initializeGesture(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
-  }
+  updateItemElementPosition(carouselItemElement: HTMLElement, itemIndex: number): void {
+    // const currentVisibleIndex = this.currentVisibleItemIndex();
 
-  private handleTouchMove(touchEvent: TouchEvent): void {
-    if (this.gestureState.isCurrentlyDragging) {
-      touchEvent.preventDefault();
-      this.updateGesturePosition(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
+    // if (itemIndex === currentVisibleIndex) {
+    if (itemIndex === 2) {
+      console.log('itemIndex', itemIndex);
+      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(10%)');
     }
-  }
-
-  private handleTouchEnd(): void {
-    this.finalizeGestureAndNavigate();
-  }
-
-  private handleMouseDown(mouseEvent: MouseEvent): void {
-    this.initializeGesture(mouseEvent.clientX, mouseEvent.clientY);
-  }
-
-  private handleMouseMove(mouseEvent: MouseEvent): void {
-    if (this.gestureState.isCurrentlyDragging) {
-      mouseEvent.preventDefault();
-      this.updateGesturePosition(mouseEvent.clientX, mouseEvent.clientY);
+    if (itemIndex !== 2) {
+      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(0)');
     }
+    // } else if (itemIndex > currentVisibleIndex) {
+    // this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(110%)');
+    // } else {
+    //   this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(-110%)');
+    // }
   }
 
-  private handleMouseUp(): void {
-    this.finalizeGestureAndNavigate();
-  }
-
-  private initializeGesture(xPosition: number, yPosition: number): void {
-    this.gestureState = {
-      startPositionX: xPosition,
-      startPositionY: yPosition,
-      currentPositionX: xPosition,
-      currentPositionY: yPosition,
-      isCurrentlyDragging: true,
-      gestureStartTime: Date.now()
-    };
-  }
-
-  private updateGesturePosition(xPosition: number, yPosition: number): void {
-    if (!this.gestureState.isCurrentlyDragging) return;
-
-    this.gestureState.currentPositionX = xPosition;
-    this.gestureState.currentPositionY = yPosition;
-  }
-
-  private finalizeGestureAndNavigate(): void {
-    if (!this.gestureState.isCurrentlyDragging) return;
-
-    const horizontalDistanceMoved = this.gestureState.currentPositionX - this.gestureState.startPositionX;
-    const verticalDistanceMoved = this.gestureState.currentPositionY - this.gestureState.startPositionY;
-    const gestureDuration = Date.now() - this.gestureState.gestureStartTime;
-    const gestureVelocity = Math.abs(horizontalDistanceMoved) / gestureDuration;
-
-    if (Math.abs(horizontalDistanceMoved) > Math.abs(verticalDistanceMoved)) {
-      const isValidSwipeGesture = Math.abs(horizontalDistanceMoved) > this.MINIMUM_SWIPE_DISTANCE ||
-        (gestureVelocity > this.MINIMUM_SWIPE_VELOCITY && gestureDuration < this.MAXIMUM_SWIPE_DURATION);
-
-      if (isValidSwipeGesture) {
-        if (horizontalDistanceMoved > 0) {
-          this.navigateToPreviousItem();
-        } else {
-          this.navigateToNextItem();
-        }
-      }
-    }
-    this.gestureState.isCurrentlyDragging = false;
-  }
+  // @ViewChild('carouselContainer', { static: false }) carouselContainer!: ElementRef;
+
+  // isNavigationIndicator: InputSignal<boolean> = input<boolean>(false);
+  // totalItemsCount: WritableSignal<number> = signal<number>(0);
+  // currentVisibleItemIndex: WritableSignal<number> = signal<number>(0);
+  // carouselItemElements: HTMLElement[] = [];
+
+  // private gestureState = {
+  //   startPositionX: 0,
+  //   startPositionY: 0,
+  //   currentPositionX: 0,
+  //   currentPositionY: 0,
+  //   isCurrentlyDragging: false,
+  //   gestureStartTime: 0
+  // };
+
+  // private readonly MINIMUM_SWIPE_DISTANCE = 50;
+  // private readonly MINIMUM_SWIPE_VELOCITY = 0.3;
+  // private readonly MAXIMUM_SWIPE_DURATION = 300;
+
+  // private eventListenerCleanupFunctions: (() => void)[] = [];
+
+  // get navigationIndicatorsArray() {
+  //   return Array(this.totalItemsCount()).fill(0);
+  // }
+
+  // constructor(
+  //   private renderer: Renderer2
+  // ) { }
+
+  // ngAfterViewInit(): void {
+  //   if (this.carouselContainer) {
+  //     this.initializeCarouselItems();
+  //     this.setupTouchAndMouseEvents();
+  //     this.setupAccessibilityAttributes();
+  //   }
+  // }
+
+  // ngOnDestroy(): void {
+  //   this.eventListenerCleanupFunctions.forEach(cleanupFunction => cleanupFunction());
+  // }
+
+  // calculateNextItemIndex(currentItemIndex: number): number {
+  //   return (currentItemIndex + 1) % this.totalItemsCount();
+  // }
+
+  // calculatePreviousItemIndex(currentItemIndex: number): number {
+  //   return (currentItemIndex - 1 + this.totalItemsCount()) % this.totalItemsCount();
+  // }
+
+  // navigateToNextItem(): void {
+  //   this.currentVisibleItemIndex.set(this.calculateNextItemIndex(this.currentVisibleItemIndex()));
+  //   this.updateAllItemElementPositions();
+  // }
+
+  // navigateToPreviousItem(): void {
+  //   this.currentVisibleItemIndex.set(this.calculatePreviousItemIndex(this.currentVisibleItemIndex()));
+  //   this.updateAllItemElementPositions();
+  // }
+
+  // navigateToSpecificItem(targetItemIndex: number): void {
+  //   this.currentVisibleItemIndex.set(targetItemIndex);
+  //   this.updateAllItemElementPositions();
+  // }
+
+  // updateItemElementPosition(carouselItemElement: HTMLElement, itemIndex: number): void {
+  //   const currentVisibleIndex = this.currentVisibleItemIndex();
+
+  //   if (itemIndex === currentVisibleIndex) {
+  //     this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(0)');
+  //   } else if (itemIndex > currentVisibleIndex) {
+  //     this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(110%)');
+  //   } else {
+  //     this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(-110%)');
+  //   }
+  // }
+
+  // updateAllItemElementPositions(): void {
+  //   this.carouselItemElements.forEach((itemElement, itemIndex) => {
+  //     this.updateItemElementPosition(itemElement, itemIndex);
+  //   });
+  // }
+
+  // @HostListener('keydown', ['$event'])
+  // handleKeyboardNavigation(keyboardEvent: KeyboardEvent): void {
+  //   switch (keyboardEvent.key) {
+  //     case 'ArrowLeft':
+  //       keyboardEvent.preventDefault();
+  //       this.navigateToPreviousItem();
+  //       break;
+  //     case 'ArrowRight':
+  //       keyboardEvent.preventDefault();
+  //       this.navigateToNextItem();
+  //       break;
+  //     case 'Home':
+  //       keyboardEvent.preventDefault();
+  //       this.navigateToSpecificItem(0);
+  //       break;
+  //     case 'End':
+  //       keyboardEvent.preventDefault();
+  //       this.navigateToSpecificItem(this.totalItemsCount() - 1);
+  //       break;
+  //   }
+  // }
+
+  // private initializeCarouselItems(): void {
+  //   this.carouselItemElements = Array.from(this.carouselContainer.nativeElement.children);
+  //   this.totalItemsCount.set(this.carouselItemElements.length);
+
+  //   this.carouselItemElements.forEach((itemElement, itemIndex) => {
+  //     this.renderer.setStyle(itemElement, 'position', 'absolute');
+  //     this.renderer.setStyle(itemElement, 'inset', '0');
+  //     this.renderer.setStyle(itemElement, 'transition', 'transform 700ms ease-out');
+  //     this.renderer.setStyle(itemElement, 'display', 'flex');
+  //     this.renderer.setStyle(itemElement, 'align-items', 'center');
+  //     this.renderer.setStyle(itemElement, 'justify-content', 'center');
+  //     this.updateItemElementPosition(itemElement, itemIndex);
+  //   });
+  // }
+
+  // private setupTouchAndMouseEvents(): void {
+  //   const carouselContainerElement = this.carouselContainer.nativeElement;
+
+  //   const touchStartListener = this.renderer.listen(carouselContainerElement, 'touchstart', (event) => this.handleTouchStart(event));
+  //   const touchMoveListener = this.renderer.listen(carouselContainerElement, 'touchmove', (event) => this.handleTouchMove(event));
+  //   const touchEndListener = this.renderer.listen(carouselContainerElement, 'touchend', () => this.handleTouchEnd());
+
+  //   const mouseDownListener = this.renderer.listen(carouselContainerElement, 'mousedown', (event) => this.handleMouseDown(event));
+  //   const mouseMoveListener = this.renderer.listen(carouselContainerElement, 'mousemove', (event) => this.handleMouseMove(event));
+  //   const mouseUpListener = this.renderer.listen(carouselContainerElement, 'mouseup', () => this.handleMouseUp());
+  //   const mouseLeaveListener = this.renderer.listen(carouselContainerElement, 'mouseleave', () => this.handleMouseUp());
+
+  //   this.eventListenerCleanupFunctions.push(
+  //     touchStartListener,
+  //     touchMoveListener,
+  //     touchEndListener,
+  //     mouseDownListener,
+  //     mouseMoveListener,
+  //     mouseUpListener,
+  //     mouseLeaveListener
+  //   );
+
+  //   this.renderer.setStyle(carouselContainerElement, 'touch-action', 'pan-x');
+  // }
+
+  // private setupAccessibilityAttributes(): void {
+  //   const carouselContainerElement = this.carouselContainer.nativeElement;
+
+  //   this.renderer.setAttribute(carouselContainerElement, 'role', 'region');
+  //   this.renderer.setAttribute(carouselContainerElement, 'aria-label', 'Carousel');
+  //   this.renderer.setAttribute(carouselContainerElement, 'tabindex', '0');
+  // }
+
+  // private handleTouchStart(touchEvent: TouchEvent): void {
+  //   this.initializeGesture(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
+  // }
+
+  // private handleTouchMove(touchEvent: TouchEvent): void {
+  //   if (this.gestureState.isCurrentlyDragging) {
+  //     touchEvent.preventDefault();
+  //     this.updateGesturePosition(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
+  //   }
+  // }
+
+  // private handleTouchEnd(): void {
+  //   this.finalizeGestureAndNavigate();
+  // }
+
+  // private handleMouseDown(mouseEvent: MouseEvent): void {
+  //   this.initializeGesture(mouseEvent.clientX, mouseEvent.clientY);
+  // }
+
+  // private handleMouseMove(mouseEvent: MouseEvent): void {
+  //   if (this.gestureState.isCurrentlyDragging) {
+  //     mouseEvent.preventDefault();
+  //     this.updateGesturePosition(mouseEvent.clientX, mouseEvent.clientY);
+  //   }
+  // }
+
+  // private handleMouseUp(): void {
+  //   this.finalizeGestureAndNavigate();
+  // }
+
+  // private initializeGesture(xPosition: number, yPosition: number): void {
+  //   this.gestureState = {
+  //     startPositionX: xPosition,
+  //     startPositionY: yPosition,
+  //     currentPositionX: xPosition,
+  //     currentPositionY: yPosition,
+  //     isCurrentlyDragging: true,
+  //     gestureStartTime: Date.now()
+  //   };
+  // }
+
+  // private updateGesturePosition(xPosition: number, yPosition: number): void {
+  //   if (!this.gestureState.isCurrentlyDragging) return;
+
+  //   this.gestureState.currentPositionX = xPosition;
+  //   this.gestureState.currentPositionY = yPosition;
+  // }
+
+  // private finalizeGestureAndNavigate(): void {
+  //   if (!this.gestureState.isCurrentlyDragging) return;
+
+  //   const horizontalDistanceMoved = this.gestureState.currentPositionX - this.gestureState.startPositionX;
+  //   const verticalDistanceMoved = this.gestureState.currentPositionY - this.gestureState.startPositionY;
+  //   const gestureDuration = Date.now() - this.gestureState.gestureStartTime;
+  //   const gestureVelocity = Math.abs(horizontalDistanceMoved) / gestureDuration;
+
+  //   if (Math.abs(horizontalDistanceMoved) > Math.abs(verticalDistanceMoved)) {
+  //     const isValidSwipeGesture = Math.abs(horizontalDistanceMoved) > this.MINIMUM_SWIPE_DISTANCE ||
+  //       (gestureVelocity > this.MINIMUM_SWIPE_VELOCITY && gestureDuration < this.MAXIMUM_SWIPE_DURATION);
+
+  //     if (isValidSwipeGesture) {
+  //       if (horizontalDistanceMoved > 0) {
+  //         this.navigateToPreviousItem();
+  //       } else {
+  //         this.navigateToNextItem();
+  //       }
+  //     }
+  //   }
+  //   this.gestureState.isCurrentlyDragging = false;
+  // }
 }