@propbinder/mobile-design 0.0.2 → 0.0.21

package/src/components/lightbox/ds-mobile-lightbox-image.ts

@@ -1,464 +0,0 @@
-import {
-  Component,
-  signal,
-  computed,
-  ViewChild,
-  ElementRef,
-  AfterViewInit,
-  OnDestroy,
-  OnInit,
-  CUSTOM_ELEMENTS_SCHEMA,
-  HostListener
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {
-  IonSpinner,
-  GestureController,
-  Gesture
-} from '@ionic/angular/standalone';
-import { Share } from '@capacitor/share';
-import { Haptics, ImpactStyle } from '@capacitor/haptics';
-import { DsIconButtonComponent } from '@propbinder/design-system';
-import { DsAvatarComponent } from '@propbinder/design-system';
-import { DsMobileLightboxHeaderComponent } from './ds-mobile-lightbox-header';
-import { DsMobileLightboxFooterComponent } from './ds-mobile-lightbox-footer';
-import type { LightboxImage, LightboxAuthor } from './ds-mobile-lightbox.service';
-import Swiper from 'swiper';
-import type { SwiperOptions } from 'swiper/types';
-
-/**
- * DsMobileLightboxImageComponent
- * 
- * Full-screen image lightbox component with Swiper.js navigation and pinch-zoom.
- * 
- * This component is typically not used directly - use DsMobileLightboxService instead.
- * 
- * Features:
- * - Swiper.js for smooth image navigation
- * - Pinch to zoom in/out
- * - Double-tap to toggle zoom
- * - Swipe down to close (when not zoomed)
- * - Image counter and navigation controls
- * 
- * @example
- * ```typescript
- * // Don't instantiate directly - use the service:
- * constructor(private lightbox: DsMobileLightboxService) {}
- * 
- * openImage() {
- *   this.lightbox.openImages({
- *     images: [{ type: 'image', src: 'image.jpg', title: 'My Image' }]
- *   });
- * }
- * ```
- */
-@Component({
-  selector: 'ds-mobile-lightbox-image',
-  standalone: true,
-  imports: [
-    CommonModule,
-    IonSpinner,
-    DsIconButtonComponent,
-    DsAvatarComponent,
-    DsMobileLightboxHeaderComponent,
-    DsMobileLightboxFooterComponent
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <div class="lightbox-overlay" 
-      [class.zoomed]="isZoomed()">
-      
-      <div class="lightbox-wrapper">
-        <!-- Header with author info and close button -->
-        <ds-mobile-lightbox-header 
-          [author]="author"
-          (closeClick)="close()"
-        />
-
-        <!-- Swiper container -->
-        <div class="swiper-container" #swiperContainer>
-          <div class="swiper-wrapper">
-            @for (image of images; track image.src; let i = $index) {
-              <div class="swiper-slide">
-                <div class="image-zoom-container" [attr.data-index]="i">
-                  <img 
-                    [src]="image.src"
-                    [alt]="image.alt || 'Lightbox image'"
-                    class="lightbox-image"
-                    (load)="onImageLoad(i)"
-                    (error)="onImageError(i)">
-                </div>
-              </div>
-            }
-          </div>
-        </div>
-          
-        <!-- Loading indicator -->
-        @if (isLoading()) {
-          <div class="loading-spinner">
-            <ion-spinner name="crescent"></ion-spinner>
-          </div>
-        }
-
-        <!-- Footer with navigation and actions -->
-        <ds-mobile-lightbox-footer
-          [showNavigation]="showControls && images.length > 1"
-          [currentIndex]="currentIndex()"
-          [totalImages]="images.length"
-          [isLiked]="isLiked()"
-          [likeCount]="likeCount()"
-          [commentCount]="commentCount()"
-          (prevClick)="previousImage()"
-          (nextClick)="nextImage()"
-          (likeClick)="onLikeToggle()"
-          (commentClick)="onReply()"
-          (shareClick)="onShare()"
-        />
-      </div>
-    </div>
-  `,
-  styleUrl: './ds-mobile-lightbox.css'
-})
-export class DsMobileLightboxImageComponent implements OnInit, AfterViewInit, OnDestroy {
-  // Inputs (passed from service as regular properties, not signals)
-  images!: LightboxImage[];
-  author?: LightboxAuthor;
-  initialIndex: number = 0;
-  enableZoom: boolean = true;
-  showControls: boolean = true;
-  enableSwipe: boolean = true;
-  showInfo: boolean = true;
-  animation: 'fade' | 'zoom' | 'slide' = 'fade';
-  onCloseRequested?: () => void;
-
-  // View children
-  @ViewChild('swiperContainer', { read: ElementRef }) swiperContainer!: ElementRef<HTMLDivElement>;
-
-  // State
-  currentIndex = signal(0);
-  scale = signal(1);
-  isZoomed = signal(false);
-  isLoading = signal(true);
-  hasError = signal(false);
-  
-  // Action states
-  isLiked = signal(false);
-  likeCount = signal(0);
-  commentCount = signal(0);
-
-  // Computed
-  currentImage = computed(() => this.images[this.currentIndex()]);
-
-  // Swiper instance
-  private swiper?: Swiper;
-  private zoomData: Map<number, { scale: number; x: number; y: number }> = new Map();
-
-  constructor(
-    private gestureCtrl: GestureController
-  ) {}
-
-  ngOnInit(): void {
-    // Set initial index from the passed property
-    if (this.initialIndex !== undefined) {
-      this.currentIndex.set(this.initialIndex);
-    }
-    
-    // Initialize action states from current image
-    const currentImg = this.images[this.currentIndex()];
-    if (currentImg) {
-      this.isLiked.set(currentImg.isLiked ?? false);
-      this.likeCount.set(currentImg.likeCount ?? 0);
-      this.commentCount.set(currentImg.commentCount ?? 0);
-    }
-  }
-
-  ngAfterViewInit(): void {
-    setTimeout(() => {
-      this.initializeSwiper();
-      this.initializeZoomGestures();
-    }, 100);
-  }
-
-  ngOnDestroy(): void {
-    // Clean up Swiper
-    if (this.swiper) {
-      this.swiper.destroy();
-      this.swiper = undefined;
-    }
-  }
-  /**
-   * Initialize Swiper for image navigation
-   */
-  private initializeSwiper(): void {
-    if (!this.swiperContainer) {
-      console.error('[Lightbox] Swiper container not found');
-      return;
-    }
-
-    const swiperOptions: SwiperOptions = {
-      initialSlide: this.initialIndex,
-      speed: 300,
-      resistance: true,
-      resistanceRatio: 0.85,
-      slidesPerView: 1,
-      spaceBetween: 0,
-      touchRatio: 1,
-      longSwipesRatio: 0.5,
-      threshold: 10,
-      on: {
-        slideChange: (swiper) => {
-          this.currentIndex.set(swiper.activeIndex);
-          this.updateActionStates();
-          
-          // Check if the image is already loaded
-          const currentSlide = swiper.slides[swiper.activeIndex];
-          const img = currentSlide?.querySelector('img');
-          if (img && img.complete && img.naturalHeight !== 0) {
-            // Image is already loaded
-          this.isLoading.set(false);
-          }
-        },
-        slideChangeTransitionStart: () => {
-          // Don't show loading spinner if image is already loaded
-          const currentSlide = this.swiper?.slides[this.swiper.activeIndex];
-          const img = currentSlide?.querySelector('img');
-          if (!img || !img.complete || img.naturalHeight === 0) {
-          this.isLoading.set(true);
-          }
-        }
-      }
-    };
-
-    this.swiper = new Swiper(this.swiperContainer.nativeElement, swiperOptions);
-    
-    // Check if the initial image is already loaded
-    setTimeout(() => {
-      const currentSlide = this.swiper?.slides[this.currentIndex()];
-      const img = currentSlide?.querySelector('img');
-      if (img && img.complete && img.naturalHeight !== 0) {
-    this.isLoading.set(false);
-      }
-    }, 0);
-  }
-
-  /**
-   * Initialize pinch-zoom gestures for all slides
-   */
-  private initializeZoomGestures(): void {
-    if (!this.enableZoom) return;
-
-    const slides = this.swiperContainer.nativeElement.querySelectorAll('.image-zoom-container');
-    
-    slides.forEach((slide, index) => {
-      this.initializeZoomForSlide(slide as HTMLElement, index);
-    });
-  }
-
-  /**
-   * Initialize zoom gestures for a specific slide
-   */
-  private initializeZoomForSlide(container: HTMLElement, index: number): void {
-    let initialDistance = 0;
-    let initialScale = 1;
-    let currentScale = 1;
-    let lastTap = 0;
-
-    // Double-tap to zoom
-    container.addEventListener('click', (event: MouseEvent) => {
-      const now = Date.now();
-      const timeSinceLastTap = now - lastTap;
-
-      if (timeSinceLastTap < 300 && timeSinceLastTap > 0) {
-        event.preventDefault();
-        this.toggleZoom(container, index);
-      }
-
-      lastTap = now;
-    });
-
-    // Pinch to zoom
-    const getTouchDistance = (touches: TouchList) => {
-      const dx = touches[0].clientX - touches[1].clientX;
-      const dy = touches[0].clientY - touches[1].clientY;
-      return Math.sqrt(dx * dx + dy * dy);
-    };
-
-    container.addEventListener('touchstart', (event: TouchEvent) => {
-      if (event.touches.length === 2) {
-        event.preventDefault();
-        initialDistance = getTouchDistance(event.touches);
-        const zoomData = this.zoomData.get(index) || { scale: 1, x: 0, y: 0 };
-        initialScale = zoomData.scale;
-        
-        // Disable Swiper when zooming
-        if (this.swiper) {
-          this.swiper.allowTouchMove = false;
-        }
-      }
-    }, { passive: false });
-
-    container.addEventListener('touchmove', (event: TouchEvent) => {
-      if (event.touches.length === 2) {
-        event.preventDefault();
-        
-        const currentDistance = getTouchDistance(event.touches);
-        const pinchScale = currentDistance / initialDistance;
-        
-        currentScale = Math.max(1, Math.min(initialScale * pinchScale, 4));
-        
-        const img = container.querySelector('img');
-        if (img) {
-          img.style.transform = `scale(${currentScale})`;
-        }
-        
-        if (currentScale > 1) {
-          this.isZoomed.set(true);
-        } else {
-          this.isZoomed.set(false);
-        }
-      }
-    }, { passive: false });
-
-    container.addEventListener('touchend', (event: TouchEvent) => {
-      if (event.touches.length < 2) {
-        // Save zoom state
-        this.zoomData.set(index, { scale: currentScale, x: 0, y: 0 });
-        
-        // Re-enable Swiper if not zoomed
-        if (this.swiper && currentScale <= 1) {
-          this.swiper.allowTouchMove = true;
-        }
-      }
-    });
-  }
-
-  /**
-   * Toggle zoom on double-tap
-   */
-  private toggleZoom(container: HTMLElement, index: number): void {
-    const zoomData = this.zoomData.get(index) || { scale: 1, x: 0, y: 0 };
-    const img = container.querySelector('img');
-    
-    if (!img) return;
-
-    if (zoomData.scale > 1) {
-      // Zoom out
-      img.style.transform = 'scale(1)';
-      this.zoomData.set(index, { scale: 1, x: 0, y: 0 });
-      this.isZoomed.set(false);
-      if (this.swiper) {
-        this.swiper.allowTouchMove = true;
-      }
-    } else {
-      // Zoom in
-      img.style.transform = 'scale(2)';
-      this.zoomData.set(index, { scale: 2, x: 0, y: 0 });
-      this.isZoomed.set(true);
-      if (this.swiper) {
-        this.swiper.allowTouchMove = false;
-      }
-    }
-  }
-
-  /**
-   * Update action states (like, comments) when slide changes
-   */
-  private updateActionStates(): void {
-    const currentImg = this.images[this.currentIndex()];
-    if (currentImg) {
-      this.isLiked.set(currentImg.isLiked ?? false);
-      this.likeCount.set(currentImg.likeCount ?? 0);
-      this.commentCount.set(currentImg.commentCount ?? 0);
-    }
-  }
-
-  /**
-   * Close the lightbox
-   */
-  close(): void {
-    if (this.onCloseRequested) {
-      this.onCloseRequested();
-    }
-  }
-
-  /**
-   * Handle share button click
-   */
-  async onShare(): Promise<void> {
-    console.log('[Lightbox] Share button clicked');
-    const currentImg = this.currentImage();
-    
-    try {
-      await Share.share({
-        title: currentImg.title || 'Shared Image',
-        url: currentImg.src,
-        dialogTitle: 'Share Image',
-      });
-    } catch (error) {
-      console.error('[Lightbox] Share failed:', error);
-    }
-  }
-
-  /**
-   * Handle like button toggle
-   */
-  onLikeToggle(): void {
-    console.log('[Lightbox] Like button toggled');
-    this.isLiked.update(liked => !liked);
-    
-    if (this.isLiked()) {
-      this.likeCount.update(count => count + 1);
-    } else {
-      this.likeCount.update(count => Math.max(0, count - 1));
-    }
-  }
-
-  /**
-   * Handle reply/comment button click
-   */
-  onReply(): void {
-    console.log('[Lightbox] Reply button clicked');
-    if (this.onCloseRequested) {
-      this.onCloseRequested();
-    }
-  }
-
-  /**
-   * Navigate to the next image
-   */
-  nextImage(): void {
-    if (this.swiper && this.currentIndex() < this.images.length - 1) {
-      this.swiper.slideNext();
-    }
-  }
-
-  /**
-   * Navigate to the previous image
-   */
-  previousImage(): void {
-    if (this.swiper && this.currentIndex() > 0) {
-      this.swiper.slidePrev();
-    }
-  }
-
-  /**
-   * Handle image load success
-   */
-  onImageLoad(index: number): void {
-    if (index === this.currentIndex()) {
-      this.isLoading.set(false);
-    }
-  }
-
-  /**
-   * Handle image load error
-   */
-  onImageError(index: number): void {
-    if (index === this.currentIndex()) {
-      console.error(`[Lightbox] Image ${index} failed to load`);
-      this.isLoading.set(false);
-      this.hasError.set(true);
-    }
-  }
-}
-