@propbinder/mobile-design 0.0.1 → 0.0.2

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

@@ -0,0 +1,464 @@
+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);
+    }
+  }
+}
+