@propbinder/mobile-design 0.2.50 → 0.2.52

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

@@ -1,296 +0,0 @@
-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;
-  /** Show like & comment action buttons */
-  showActions?: 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.showActions = options.showActions ?? 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;
-  }
-}
-