@propbinder/mobile-design 0.2.47 → 0.2.50

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

@@ -0,0 +1,529 @@
+import {
+  Component,
+  signal,
+  computed,
+  ViewChild,
+  ElementRef,
+  AfterViewInit,
+  OnDestroy,
+  OnInit,
+  CUSTOM_ELEMENTS_SCHEMA
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  IonContent,
+  IonSpinner,
+  ModalController,
+  GestureController,
+  Gesture
+} from '@ionic/angular/standalone';
+import { Share } from '@capacitor/share';
+import { DsIconButtonComponent } from '@propbinder/design-system';
+import { DsAvatarComponent } from '@propbinder/design-system';
+import type { LightboxImage, LightboxAuthor } from './ds-mobile-lightbox.service';
+
+/**
+ * DsMobileLightboxComponent
+ * 
+ * Full-screen image lightbox component with native mobile gestures.
+ * Supports swipe navigation, pinch-to-zoom, and double-tap zoom.
+ * 
+ * This component is typically not used directly - use DsMobileLightboxService instead.
+ * 
+ * Features:
+ * - Swipe left/right to navigate between images
+ * - Pinch to zoom in/out
+ * - Double-tap to toggle zoom
+ * - Swipe down to close (when not zoomed)
+ * - Image counter and navigation controls
+ * - Optional title and description display
+ * 
+ * @example
+ * ```typescript
+ * // Don't instantiate directly - use the service:
+ * constructor(private lightbox: DsMobileLightboxService) {}
+ * 
+ * openImage() {
+ *   this.lightbox.open({
+ *     images: [{ src: 'image.jpg', title: 'My Image' }]
+ *   });
+ * }
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-lightbox',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonContent,
+    IonSpinner,
+    DsIconButtonComponent,
+    DsAvatarComponent
+  ],
+  styleUrls: ['../shared/mobile-common.css', './ds-mobile-lightbox.css'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <ion-content 
+      [fullscreen]="true"
+      [scrollY]="false"
+      [scrollX]="false"
+      class="lightbox-content"
+      [class.zoomed]="isZoomed()">
+      
+      <div class="lightbox-wrapper">
+        <!-- Header with action buttons -->
+        <div class="lightbox-header">
+          <!-- Action buttons row -->
+          <div class="header-actions">
+            <ds-icon-button
+              icon="remixCloseLine"
+              variant="ghost"
+              size="md"
+              (click)="close()"
+              class="close-button"
+              aria-label="Luk lyskasse">
+            </ds-icon-button>
+            
+            <ds-icon-button
+              icon="remixShare2Line"
+              variant="ghost"
+              size="md"
+              (click)="onShare()"
+              class="share-button"
+              aria-label="Del billede">
+            </ds-icon-button>
+          </div>
+        </div>
+
+        <!-- Image container with gesture support -->
+        <div class="lightbox-container" #container>
+          <div 
+            class="image-wrapper"
+            #imageWrapper
+            [style.transform]="transform()">
+            <img 
+              #image
+              [src]="currentImage().src"
+              [alt]="currentImage().alt || 'Lightbox image'"
+              class="lightbox-image"
+              (load)="onImageLoad()"
+              (error)="onImageError()">
+          </div>
+          
+          <!-- Loading indicator -->
+          @if (isLoading()) {
+            <div class="loading-spinner">
+              <ion-spinner name="crescent"></ion-spinner>
+            </div>
+          }
+          
+          <!-- Error message -->
+          @if (hasError()) {
+            <div class="error-message">
+              <p>Failed to load image</p>
+            </div>
+          }
+        </div>
+
+        <!-- Navigation controls -->
+        @if (showControls && images.length > 1) {
+          <div class="lightbox-controls">
+            <button 
+              class="nav-button prev"
+              (click)="previousImage()"
+              [disabled]="currentIndex() === 0"
+              aria-label="Forrige billede">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </button>
+            
+            <div class="counter">
+              {{ currentIndex() + 1 }} / {{ images.length }}
+            </div>
+            
+            <button 
+              class="nav-button next"
+              (click)="nextImage()"
+              [disabled]="currentIndex() === images.length - 1"
+              aria-label="Næste billede">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </button>
+          </div>
+        }
+
+        <!-- Caption at bottom -->
+        @if (showInfo && author) {
+          <div class="lightbox-caption" [class.with-controls]="showControls && images.length > 1">
+            <!-- Author meta -->
+            <div class="author-details">
+              <ds-avatar
+                [initials]="author.avatarInitials ?? ''"
+                [type]="author.avatarType ?? 'initials'"
+                [src]="author.avatarSrc ?? ''"
+                size="md"
+              />
+              <div class="author-details">
+                <div class="author-name">{{ author.name }}</div>
+                @if (author.role || author.timestamp) {
+                  <div class="author-meta">
+                    @if (author.role) {
+                      <span>{{ author.role }}</span>
+                    }
+                    @if (author.role && author.timestamp) {
+                      <span class="separator">·</span>
+                    }
+                    @if (author.timestamp) {
+                      <span>{{ author.timestamp }}</span>
+                    }
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        }
+      </div>
+    </ion-content>
+  `
+})
+export class DsMobileLightboxComponent 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';
+
+  // View children
+  @ViewChild('container', { read: ElementRef }) containerRef!: ElementRef<HTMLDivElement>;
+  @ViewChild('imageWrapper', { read: ElementRef }) imageWrapperRef!: ElementRef<HTMLDivElement>;
+  @ViewChild('image', { read: ElementRef }) imageRef!: ElementRef<HTMLImageElement>;
+
+  // State
+  currentIndex = signal(0);
+  scale = signal(1);
+  translateX = signal(0);
+  translateY = signal(0);
+  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()]);
+  transform = computed(() => {
+    const s = this.scale();
+    const x = this.translateX();
+    const y = this.translateY();
+    return `scale(${s}) translate(${x}px, ${y}px)`;
+  });
+
+  // Gesture tracking
+  private gesture?: Gesture;
+  private swipeGesture?: Gesture;
+  private pinchGesture?: Gesture;
+  private initialScale = 1;
+  private initialTranslateX = 0;
+  private initialTranslateY = 0;
+  private lastPinchScale = 1;
+
+  constructor(
+    private modalController: ModalController,
+    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 {
+    console.log('[Lightbox] ngAfterViewInit called');
+    console.log('[Lightbox] Current image:', this.currentImage());
+    console.log('[Lightbox] Images array:', this.images);
+    console.log('[Lightbox] Container ref:', this.containerRef?.nativeElement);
+    console.log('[Lightbox] Image wrapper ref:', this.imageWrapperRef?.nativeElement);
+    console.log('[Lightbox] Image ref:', this.imageRef?.nativeElement);
+    
+    // Initialize gestures after view is ready
+    if (this.enableZoom) {
+      this.initializeZoomGesture();
+      this.initializePinchZoom();
+    }
+    if (this.enableSwipe) {
+      this.initializeSwipeGesture();
+    }
+  }
+
+  ngOnDestroy(): void {
+    // Clean up gestures
+    this.gesture?.destroy();
+    this.swipeGesture?.destroy();
+    this.pinchGesture?.destroy();
+  }
+
+  /**
+   * Initialize double-tap zoom gesture
+   */
+  private initializeZoomGesture(): void {
+    if (!this.imageWrapperRef) return;
+
+    let lastTap = 0;
+    const element = this.imageWrapperRef.nativeElement;
+
+    element.addEventListener('click', (event: MouseEvent) => {
+      const now = Date.now();
+      const timeSinceLastTap = now - lastTap;
+
+      if (timeSinceLastTap < 300 && timeSinceLastTap > 0) {
+        // Double tap detected
+        event.preventDefault();
+        this.onDoubleTap();
+      }
+
+      lastTap = now;
+    });
+  }
+
+  /**
+   * Initialize pinch-to-zoom gesture
+   */
+  private initializePinchZoom(): void {
+    if (!this.imageWrapperRef) return;
+
+    const element = this.imageWrapperRef.nativeElement;
+    let initialDistance = 0;
+    let initialCenterX = 0;
+    let initialCenterY = 0;
+
+    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);
+    };
+
+    const getTouchCenter = (touches: TouchList) => {
+      return {
+        x: (touches[0].clientX + touches[1].clientX) / 2,
+        y: (touches[0].clientY + touches[1].clientY) / 2
+      };
+    };
+
+    element.addEventListener('touchstart', (event: TouchEvent) => {
+      if (event.touches.length === 2) {
+        event.preventDefault();
+        initialDistance = getTouchDistance(event.touches);
+        const center = getTouchCenter(event.touches);
+        initialCenterX = center.x;
+        initialCenterY = center.y;
+        this.initialScale = this.scale();
+        this.lastPinchScale = 1;
+      }
+    }, { passive: false });
+
+    element.addEventListener('touchmove', (event: TouchEvent) => {
+      if (event.touches.length === 2) {
+        event.preventDefault();
+        
+        const currentDistance = getTouchDistance(event.touches);
+        const pinchScale = currentDistance / initialDistance;
+        
+        // Calculate new scale
+        let newScale = this.initialScale * pinchScale;
+        newScale = Math.max(1, Math.min(newScale, 4)); // Clamp between 1x and 4x
+        
+        this.scale.set(newScale);
+        
+        if (newScale > 1) {
+          this.isZoomed.set(true);
+        } else {
+          this.isZoomed.set(false);
+          this.translateX.set(0);
+          this.translateY.set(0);
+        }
+        
+        this.lastPinchScale = pinchScale;
+      }
+    }, { passive: false });
+
+    element.addEventListener('touchend', (event: TouchEvent) => {
+      if (event.touches.length < 2) {
+        // Reset to 1x if we're close to it
+        if (this.scale() < 1.1) {
+          this.resetZoom();
+        }
+      }
+    });
+  }
+
+  /**
+   * Initialize swipe gesture for navigation
+   */
+  private initializeSwipeGesture(): void {
+    if (!this.containerRef) return;
+
+    this.swipeGesture = this.gestureCtrl.create({
+      el: this.containerRef.nativeElement,
+      gestureName: 'swipe-navigate',
+      direction: 'x',
+      threshold: 50,
+      onStart: () => {
+        this.initialTranslateX = this.translateX();
+      },
+      onMove: (detail) => {
+        // Only allow swipe if not zoomed
+        if (!this.isZoomed() && detail.deltaX !== undefined) {
+          this.translateX.set(this.initialTranslateX + detail.deltaX / 2);
+        }
+      },
+      onEnd: (detail) => {
+        if (!this.isZoomed() && detail.deltaX !== undefined) {
+          const threshold = 100;
+          
+          if (detail.deltaX > threshold) {
+            // Swipe right - previous image
+            this.previousImage();
+          } else if (detail.deltaX < -threshold) {
+            // Swipe left - next image
+            this.nextImage();
+          } else {
+            // Reset position
+            this.translateX.set(0);
+          }
+        }
+      }
+    }, true);
+
+    this.swipeGesture.enable();
+  }
+
+  /**
+   * Close the lightbox
+   */
+  close(): void {
+    this.modalController.dismiss();
+  }
+
+  async onShare(): Promise<void> {
+    console.log('[Lightbox] Share button clicked');
+    const currentImg = this.currentImage();
+    
+    if (!currentImg?.src) return;
+    
+    try {
+      // Use Capacitor Share API for native share sheet
+      await Share.share({
+        title: currentImg.title || 'Image',
+        text: currentImg.description || '',
+        url: currentImg.src,
+        dialogTitle: 'Share Image'
+      });
+      
+      console.log('[Lightbox] Image shared successfully');
+    } catch (error) {
+      console.error('[Lightbox] Error sharing image:', error);
+      // If share fails or is cancelled, do nothing
+      // Note: User canceling the share dialog will throw an error, which is expected
+    }
+  }
+
+  onLike(event: { active: boolean; count: number }): void {
+    console.log('[Lightbox] Like toggled:', event);
+    this.isLiked.set(event.active);
+    this.likeCount.set(event.count);
+    // You can emit an event or call a service here to persist the like
+  }
+
+  onReply(): void {
+    console.log('[Lightbox] Reply button clicked');
+    // Close the lightbox and navigate to reply/comment interface
+    // Or open a bottom sheet for quick reply
+    this.modalController.dismiss({ action: 'reply' });
+  }
+
+  /**
+   * Navigate to the next image
+   */
+  nextImage(): void {
+    if (this.currentIndex() < this.images.length - 1) {
+      this.resetZoom();
+      this.currentIndex.update(i => i + 1);
+      this.isLoading.set(true);
+      this.hasError.set(false);
+    }
+  }
+
+  /**
+   * Navigate to the previous image
+   */
+  previousImage(): void {
+    if (this.currentIndex() > 0) {
+      this.resetZoom();
+      this.currentIndex.update(i => i - 1);
+      this.isLoading.set(true);
+      this.hasError.set(false);
+    }
+  }
+
+  /**
+   * Handle double-tap to toggle zoom
+   */
+  onDoubleTap(): void {
+    if (!this.enableZoom) return;
+    
+    if (this.isZoomed()) {
+      this.resetZoom();
+    } else {
+      this.scale.set(2);
+      this.isZoomed.set(true);
+    }
+  }
+
+  /**
+   * Reset zoom and pan to default state
+   */
+  resetZoom(): void {
+    this.scale.set(1);
+    this.translateX.set(0);
+    this.translateY.set(0);
+    this.isZoomed.set(false);
+  }
+
+  /**
+   * Handle image load success
+   */
+  onImageLoad(): void {
+    console.log('[Lightbox] Image loaded successfully');
+    this.isLoading.set(false);
+    this.hasError.set(false);
+  }
+
+  /**
+   * Handle image load error
+   */
+  onImageError(): void {
+    console.error('[Lightbox] Image failed to load');
+    this.isLoading.set(false);
+    this.hasError.set(true);
+  }
+}
+

package/src/components/lightbox/index.ts

@@ -0,0 +1,22 @@
+// Components
+export { DsMobileLightboxImageComponent } from './ds-mobile-lightbox-image';
+export { DsMobileLightboxPdfComponent } from './ds-mobile-lightbox-pdf';
+export { DsMobileLightboxHeaderComponent } from './ds-mobile-lightbox-header';
+export { DsMobileLightboxFooterComponent } from './ds-mobile-lightbox-footer';
+
+// Service and Types
+export { 
+  DsMobileLightboxService,
+  type LightboxImage,
+  type LightboxPdf,
+  type LightboxMediaFile,
+  type LightboxMediaType,
+  type LightboxAuthor,
+  type LightboxOptions,
+  type LightboxImageOptions,
+  type LightboxPdfOptions
+} from './ds-mobile-lightbox.service';
+
+// Legacy export for backward compatibility
+export { DsMobileLightboxImageComponent as DsMobileLightboxComponent } from './ds-mobile-lightbox-image';
+