@propbinder/mobile-design 0.0.1 → 0.0.2

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

@@ -0,0 +1,293 @@
+import { Injectable, ApplicationRef, ComponentRef, createComponent, EnvironmentInjector, Injector } from '@angular/core';
+import { DsMobileLightboxImageComponent } from './ds-mobile-lightbox-image';
+import { DsMobileLightboxPdfComponent } from './ds-mobile-lightbox-pdf';
+
+/**
+ * Media file types supported by the lightbox
+ */
+export type LightboxMediaType = 'image' | 'pdf';
+
+/**
+ * Base media file interface
+ */
+export interface LightboxMediaFile {
+  /** File source URL */
+  src: string;
+  /** Media type - determines which viewer to use */
+  type: LightboxMediaType;
+  /** File title */
+  title?: string;
+  /** File description */
+  description?: string;
+}
+
+/**
+ * Image data for lightbox display
+ */
+export interface LightboxImage extends LightboxMediaFile {
+  type: 'image';
+  /** Alt text for accessibility */
+  alt?: string;
+  /** Thumbnail URL for faster loading (optional) */
+  thumbnail?: string;
+  /** Whether the image is liked */
+  isLiked?: boolean;
+  /** Number of likes */
+  likeCount?: number;
+  /** Number of comments */
+  commentCount?: number;
+}
+
+/**
+ * PDF document data for lightbox display
+ */
+export interface LightboxPdf extends LightboxMediaFile {
+  type: 'pdf';
+  /** File size in bytes (optional, for display) */
+  fileSize?: number;
+  /** Number of pages (optional, for display) */
+  pageCount?: number;
+}
+
+/**
+ * Author metadata for the lightbox
+ */
+export interface LightboxAuthor {
+  /** Author name */
+  name: string;
+  /** Author role/subtitle */
+  role?: string;
+  /** Author avatar URL */
+  avatarSrc?: string;
+  /** Author avatar initials (if no photo) */
+  avatarInitials?: string;
+  /** Avatar type */
+  avatarType?: 'photo' | 'initials';
+  /** Timestamp */
+  timestamp?: string;
+}
+
+/**
+ * Configuration options for image lightbox
+ */
+export interface LightboxImageOptions {
+  /** Array of images to display */
+  images: LightboxImage[];
+  /** Author information to display in header */
+  author?: LightboxAuthor;
+  /** Initial image index to show (0-based) */
+  initialIndex?: number;
+  /** Enable pinch-to-zoom and double-tap zoom */
+  enableZoom?: boolean;
+  /** Show navigation controls (arrows, counter) */
+  showControls?: boolean;
+  /** Enable swipe gestures to navigate between images */
+  enableSwipe?: boolean;
+  /** Show image info (title, description) */
+  showInfo?: boolean;
+  /** Animation type for opening */
+  animation?: 'fade' | 'zoom' | 'slide';
+}
+
+/**
+ * Configuration options for PDF lightbox
+ */
+export interface LightboxPdfOptions {
+  /** PDF document to display */
+  pdf: LightboxPdf;
+  /** Author information to display */
+  author?: LightboxAuthor;
+}
+
+/**
+ * Generic lightbox options (for backward compatibility)
+ */
+export type LightboxOptions = LightboxImageOptions;
+
+/**
+ * DsMobileLightboxService
+ * 
+ * Service for displaying media files (images and PDFs) in full-screen viewers.
+ * - Images: Full-screen modal with gestures (pinch-zoom, swipe navigation)
+ * - PDFs: Native device PDF viewer (iOS/Android)
+ * 
+ * Features:
+ * - Full-screen image viewing with gestures
+ * - Native PDF viewing
+ * - Swipe navigation between images
+ * - Pinch-to-zoom and double-tap zoom for images
+ * - Mobile-optimized touch gestures
+ * - Share functionality
+ * 
+ * @example
+ * ```typescript
+ * constructor(private lightbox: DsMobileLightboxService) {}
+ * 
+ * // Open images
+ * async openImages() {
+ *   const modal = await this.lightbox.openImages({
+ *     images: [
+ *       {
+ *         type: 'image',
+ *         src: 'https://example.com/image1.jpg',
+ *         title: 'Beautiful Sunset'
+ *       }
+ *     ]
+ *   });
+ *   
+ *   // Listen for when lightbox is dismissed
+ *   const { data } = await modal.onDidDismiss();
+ *   if (data?.action === 'comment') {
+ *     // Open post detail modal with comment focus
+ *     this.openPostDetail({ focusComment: true });
+ *   }
+ * }
+ * 
+ * // Open PDF
+ * async openPdf() {
+ *   await this.lightbox.openPdf({
+ *     pdf: {
+ *       type: 'pdf',
+ *       src: 'https://example.com/document.pdf',
+ *       title: 'Document'
+ *     }
+ *   });
+ * }
+ * ```
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class DsMobileLightboxService {
+  private currentLightbox: ComponentRef<any> | null = null;
+
+  constructor(
+    private appRef: ApplicationRef,
+    private injector: EnvironmentInjector
+  ) {}
+
+  /**
+   * Open the lightbox with images (backward compatible method)
+   * 
+   * @param options Configuration options for the image lightbox
+   * @returns Promise that resolves to a dismiss function
+   */
+  async open(options: LightboxOptions): Promise<() => void> {
+    return this.openImages(options);
+  }
+
+  /**
+   * Open the image lightbox with one or more images
+   * 
+   * @param options Configuration options for the image lightbox
+   * @returns Promise that resolves to a dismiss function
+   */
+  async openImages(options: LightboxImageOptions): Promise<() => void> {
+    console.log('[Lightbox] Opening images with options:', options);
+    
+    // Close any existing lightbox
+    if (this.currentLightbox) {
+      this.close();
+    }
+
+    // Create the component
+    const componentRef = createComponent(DsMobileLightboxImageComponent, {
+      environmentInjector: this.injector
+    });
+
+    // Set component props
+    componentRef.instance.images = options.images;
+    componentRef.instance.author = options.author;
+    componentRef.instance.initialIndex = options.initialIndex ?? 0;
+    componentRef.instance.enableZoom = options.enableZoom !== false;
+    componentRef.instance.showControls = options.showControls !== false;
+    componentRef.instance.enableSwipe = options.enableSwipe !== false;
+    componentRef.instance.showInfo = options.showInfo !== false;
+    componentRef.instance.animation = options.animation ?? 'fade';
+    
+    // Set up close callback
+    componentRef.instance.onCloseRequested = () => {
+      this.close();
+    };
+
+    // Attach to application
+    this.appRef.attachView(componentRef.hostView);
+    
+    // Append to body
+    const domElem = (componentRef.hostView as any).rootNodes[0] as HTMLElement;
+    document.body.appendChild(domElem);
+    
+    // Store reference
+    this.currentLightbox = componentRef;
+
+    console.log('[Lightbox] Image lightbox rendered');
+    
+    // Return dismiss function
+    return () => this.close();
+  }
+
+  /**
+   * Open the PDF lightbox (opens native PDF viewer)
+   * 
+   * @param options Configuration options for the PDF lightbox
+   * @returns Promise that resolves to a dismiss function
+   */
+  async openPdf(options: LightboxPdfOptions): Promise<() => void> {
+    console.log('[Lightbox] Opening PDF with options:', options);
+    
+    // Close any existing lightbox
+    if (this.currentLightbox) {
+      this.close();
+    }
+
+    // Create the component
+    const componentRef = createComponent(DsMobileLightboxPdfComponent, {
+      environmentInjector: this.injector
+    });
+
+    // Set component props
+    componentRef.instance.pdf = options.pdf;
+    componentRef.instance.author = options.author;
+    
+    // Set up close callback
+    componentRef.instance.onCloseRequested = () => {
+      this.close();
+    };
+
+    // Attach to application
+    this.appRef.attachView(componentRef.hostView);
+    
+    // Append to body
+    const domElem = (componentRef.hostView as any).rootNodes[0] as HTMLElement;
+    document.body.appendChild(domElem);
+    
+    // Store reference
+    this.currentLightbox = componentRef;
+
+    console.log('[Lightbox] PDF lightbox rendered');
+    
+    // Return dismiss function
+    return () => this.close();
+  }
+
+  /**
+   * Close the currently open lightbox
+   */
+  close(): void {
+    if (this.currentLightbox) {
+      const domElem = (this.currentLightbox.hostView as any).rootNodes[0] as HTMLElement;
+      domElem.remove();
+      this.appRef.detachView(this.currentLightbox.hostView);
+      this.currentLightbox.destroy();
+      this.currentLightbox = null;
+    }
+  }
+
+  /**
+   * Check if a lightbox is currently open
+   */
+  isOpen(): boolean {
+    return this.currentLightbox !== null;
+  }
+}
+