display PDF document preview in lightbox's iframe

.gitignore

@@ -8,4 +8,7 @@ src/*.js
 *.log
 /dist
 *.d.ts
-*.ngsummary.json
+*.ngsummary.json
+.idea
+.DS_Store
+package-lock.json

demo/app.component.ts

@@ -44,6 +44,12 @@ export class AppComponent {
       this.albums.push(album);
     }
 
+    this.albums.push({
+      src: 'demo/img/image5.pdf',
+      thumb: 'demo/img/image5-thumb.jpg',
+      iframe: true
+    });
+
     // set default config
     this._lighboxConfig.fadeDuration = 1;
   }

demo/app.module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
+import {CommonModule} from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { LightboxModule } from '../src';
 import { AppComponent } from './app.component';
 
 @NgModule({
-  imports: [ BrowserModule, LightboxModule ],
+  imports: [ BrowserModule, CommonModule, LightboxModule ],
   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "ngx-lightbox",
-  "version": "2.4.0",
+  "name": "@piotrmocek/ngx-lightbox",
+  "version": "2.4.4",
   "description": "A port >= angular5 for lightbox2",
   "main": "index.js",
   "dependencies": {},
@@ -42,7 +42,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/themyth92/ngx-lightbox.git"
+    "url": "git+https://github.com/piotrmocek/ngx-lightbox.git"
   },
   "keywords": [
     "lightbox2",
@@ -52,7 +52,7 @@
     "angular",
     "directives"
   ],
-  "author": "themyth92",
+  "author": "themyth92 & piotrmocek",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/themyth92/ngx-lightbox/issues"

src/lightbox-event.service.ts

@@ -11,6 +11,7 @@ export interface IAlbum {
   src: string;
   caption?: string;
   thumb: string;
+  iframe?: boolean;
 }
 
 export const LIGHTBOX_EVENT = {
@@ -20,7 +21,8 @@ export const LIGHTBOX_EVENT = {
   ZOOM_IN: 4,
   ZOOM_OUT: 5,
   ROTATE_LEFT: 6,
-  ROTATE_RIGHT: 7
+  ROTATE_RIGHT: 7,
+  FILE_NOT_FOUND: 8
 };
 
 @Injectable()

src/lightbox.component.ts

@@ -1,25 +1,27 @@
-import { DOCUMENT } from '@angular/common';
+import {DOCUMENT} from '@angular/common';
 import {
   AfterViewInit,
   Component,
   ElementRef,
   Inject,
   Input,
   OnDestroy,
-  OnInit,
+  OnInit, Pipe, PipeTransform,
   Renderer2,
   SecurityContext,
   ViewChild,
 } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
+import {DomSanitizer} from '@angular/platform-browser';
 
-import {
-  IAlbum,
-  IEvent,
-  LIGHTBOX_EVENT,
-  LightboxEvent,
-  LightboxWindowRef,
-} from './lightbox-event.service';
+import {IAlbum, IEvent, LIGHTBOX_EVENT, LightboxEvent, LightboxWindowRef,} from './lightbox-event.service';
+
+@Pipe({ name: 'safe' })
+export class SafePipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+  transform(url) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+}
 
 @Component({
   template: `
@@ -30,7 +32,14 @@ import {
              [src]="album[currentImageIndex].src"
              class="lb-image animation fadeIn"
              [hidden]="ui.showReloader"
-             #image>
+             #image *ngIf="!album[currentImageIndex].iframe && !needsIframe(album[currentImageIndex].src)">
+        <iframe class="lb-image"
+             id="iframe"
+             [src]="album[currentImageIndex].src | safe"
+             class="lb-image lb-iframe animation fadeIn"
+             [hidden]="ui.showReloader"
+             #iframe *ngIf="album[currentImageIndex].iframe || needsIframe(album[currentImageIndex].src)">
+        </iframe>
         <div class="lb-nav" [hidden]="!ui.showArrowNav" #navArrow>
           <a class="lb-prev" [hidden]="!ui.showLeftArrow" (click)="prevImage()" #leftArrow></a>
           <a class="lb-next" [hidden]="!ui.showRightArrow" (click)="nextImage()" #rightArrow></a>
@@ -80,6 +89,7 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
   @ViewChild('navArrow', { static: false }) _navArrowElem: ElementRef;
   @ViewChild('dataContainer', { static: false }) _dataContainerElem: ElementRef;
   @ViewChild('image', { static: false }) _imageElem: ElementRef;
+  @ViewChild('iframe', { static: false }) _iframeElem: ElementRef;
   @ViewChild('caption', { static: false }) _captionElem: ElementRef;
   @ViewChild('number', { static: false }) _numberElem: ElementRef;
   public content: any;
@@ -155,10 +165,10 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
       containerRightPadding: Math.round(this._getCssStyleValue(this._containerElem, 'padding-right')),
       containerBottomPadding: Math.round(this._getCssStyleValue(this._containerElem, 'padding-bottom')),
       containerLeftPadding: Math.round(this._getCssStyleValue(this._containerElem, 'padding-left')),
-      imageBorderWidthTop: Math.round(this._getCssStyleValue(this._imageElem, 'border-top-width')),
-      imageBorderWidthBottom: Math.round(this._getCssStyleValue(this._imageElem, 'border-bottom-width')),
-      imageBorderWidthLeft: Math.round(this._getCssStyleValue(this._imageElem, 'border-left-width')),
-      imageBorderWidthRight: Math.round(this._getCssStyleValue(this._imageElem, 'border-right-width'))
+      imageBorderWidthTop: Math.round(this._getCssStyleValue(this._imageElem || this._iframeElem, 'border-top-width')),
+      imageBorderWidthBottom: Math.round(this._getCssStyleValue(this._imageElem || this._iframeElem, 'border-bottom-width')),
+      imageBorderWidthLeft: Math.round(this._getCssStyleValue(this._imageElem || this._iframeElem, 'border-left-width')),
+      imageBorderWidthRight: Math.round(this._getCssStyleValue(this._imageElem || this._iframeElem, 'border-right-width'))
     };
 
     if (this._validateInputData()) {
@@ -246,8 +256,12 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
 
   private _resetImage(): void {
     this.rotate = 0;
-    this._documentRef.getElementById('image').style.transform = `rotate(${this.rotate}deg)`;
-    this._documentRef.getElementById('image').style.webkitTransform = `rotate(${this.rotate}deg)`;
+    const image = this._documentRef.getElementById('image');
+    if (image) {
+      image.style.transform = `rotate(${this.rotate}deg)`;
+      image.style.webkitTransform = `rotate(${this.rotate}deg)`;
+    }
+
   }
 
   private _calcTransformPoint(): void {
@@ -315,13 +329,25 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
   }
 
   private _registerImageLoadingEvent(): void {
+    const src: any = this.album[this.currentImageIndex].src;
+
+    if (this.album[this.currentImageIndex].iframe || this.needsIframe(src)) {
+      setTimeout( () => {
+        this._onLoadImageSuccess();
+      });
+      return;
+    }
+
     const preloader = new Image();
 
     preloader.onload = () => {
       this._onLoadImageSuccess();
     }
 
-    const src: any = this.album[this.currentImageIndex].src;
+    preloader.onerror = (e) => {
+      this._lightboxEvent.broadcastLightboxEvent({ id: LIGHTBOX_EVENT.FILE_NOT_FOUND, data: e });
+    }
+
     preloader.src = this._sanitizer.sanitize(SecurityContext.URL, src);
   }
 
@@ -344,8 +370,8 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
     let naturalImageHeight;
 
     // set default width and height of image to be its natural
-    imageWidth = naturalImageWidth = this._imageElem.nativeElement.naturalWidth;
-    imageHeight = naturalImageHeight = this._imageElem.nativeElement.naturalHeight;
+    imageWidth = naturalImageWidth = this._imageElem ? this._imageElem.nativeElement.naturalWidth : this._windowRef.innerWidth * .8;
+    imageHeight = naturalImageHeight = this._imageElem ? this._imageElem.nativeElement.naturalHeight : this._windowRef.innerHeight * .8;
     if (this.options.fitImageInViewPort) {
       windowWidth = this._windowRef.innerWidth;
       windowHeight = this._windowRef.innerHeight;
@@ -365,8 +391,8 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
         }
       }
 
-      this._rendererRef.setStyle(this._imageElem.nativeElement, 'width', `${imageWidth}px`);
-      this._rendererRef.setStyle(this._imageElem.nativeElement, 'height', `${imageHeight}px`);
+      this._rendererRef.setStyle((this._imageElem || this._iframeElem).nativeElement, 'width', `${imageWidth}px`);
+      this._rendererRef.setStyle((this._imageElem || this._iframeElem).nativeElement, 'height', `${imageHeight}px`);
     }
 
     this._sizeContainer(imageWidth, imageHeight);
@@ -495,9 +521,9 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
       '-webkit-animation-duration', `${fadeDuration}s`);
     this._rendererRef.setStyle(this._dataContainerElem.nativeElement,
       'animation-duration', `${fadeDuration}s`);
-    this._rendererRef.setStyle(this._imageElem.nativeElement,
+    this._rendererRef.setStyle((this._imageElem || this._iframeElem).nativeElement,
       '-webkit-animation-duration', `${fadeDuration}s`);
-    this._rendererRef.setStyle(this._imageElem.nativeElement,
+    this._rendererRef.setStyle((this._imageElem || this._iframeElem).nativeElement,
       'animation-duration', `${fadeDuration}s`);
     this._rendererRef.setStyle(this._captionElem.nativeElement,
       '-webkit-animation-duration', `${fadeDuration}s`);
@@ -667,4 +693,13 @@ export class LightboxComponent implements OnInit, AfterViewInit, OnDestroy, OnIn
         break;
     }
   }
-}
+
+  public needsIframe(src: string) {
+    // const sanitizedUrl = this._sanitizer.sanitize(SecurityContext.URL, src);
+    if (src.match(/\.pdf$/)) {
+      return true;
+    }
+    return false;
+  }
+}
+

src/lightbox.css

@@ -31,6 +31,14 @@ html.lb-disable-scrolling {
   border-radius: 3px;
 }
 
+.lightbox .lb-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .lightbox a img {
   border: none;
 }
@@ -81,6 +89,16 @@ html.lb-disable-scrolling {
   z-index: 10;
 }
 
+.lb-iframe ~ .lb-nav {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: 45px;
+  width: 100%;
+  z-index: 10;
+  transform: translateY(-50%);
+}
+
 .lb-container > .nav {
   left: 0;
 }
@@ -109,6 +127,10 @@ html.lb-disable-scrolling {
   transition: opacity 0.6s;
 }
 
+.lb-iframe ~ .lb-nav a.lb-prev {
+  width: 55px;
+}
+
 .lb-nav a.lb-prev:hover {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   opacity: 1;
@@ -127,6 +149,10 @@ html.lb-disable-scrolling {
   transition: opacity 0.6s;
 }
 
+.lb-iframe ~ .lb-nav a.lb-next {
+  width: 55px;
+}
+
 .lb-nav a.lb-next:hover {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   opacity: 1;

src/lightbox.module.ts

@@ -1,12 +1,14 @@
 import { Lightbox } from './lightbox.service';
-import { LightboxComponent } from './lightbox.component';
+import {LightboxComponent, SafePipe} from './lightbox.component';
 import { LightboxConfig } from './lightbox-config.service';
 import { LightboxEvent, LightboxWindowRef } from './lightbox-event.service';
 import { LightboxOverlayComponent } from './lightbox-overlay.component';
 import { NgModule } from '@angular/core';
+import {CommonModule} from '@angular/common';
 
 @NgModule({
-  declarations: [ LightboxOverlayComponent, LightboxComponent ],
+  imports: [ CommonModule ],
+  declarations: [ LightboxOverlayComponent, LightboxComponent, SafePipe ],
   providers: [
     Lightbox,
     LightboxConfig,