Created
April 20, 2018 01:31
-
-
Save tabirkeland/426e1ba59ede87843830677b4fda388e to your computer and use it in GitHub Desktop.
ng2-pdf-viewer zoom implementation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ion-header> | |
<ion-navbar> | |
<ion-title>{{ title }}</ion-title> | |
<ion-buttons end> | |
<button ion-button icon-only (click)="dismiss()"> | |
<ion-icon name="close"></ion-icon> | |
</button> | |
</ion-buttons> | |
</ion-navbar> | |
</ion-header> | |
<ion-content fullscreen> | |
<div *ngIf="pdfSrc"> | |
<pdf-viewer [src]="pdfSrc" [zoom]="pdfZoom" [fit-to-page]="true" [render-text]="true"></pdf-viewer> | |
<ion-fab bottom right> | |
<button ion-fab mini (click)="zoomIn()"> | |
<ion-icon name="add"></ion-icon> | |
</button> | |
<button ion-fab mini (click)="zoomOut()"> | |
<ion-icon name="remove"></ion-icon> | |
</button> | |
<button ion-fab mini (click)="resetZoom()"> | |
<ion-icon name="refresh"></ion-icon> | |
</button> | |
</ion-fab> | |
</div> | |
<video width="100%" controls *ngIf="videoSrc"> | |
<source [src]="videoSrc"> | |
</video> | |
</ion-content> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
page-documentation-modal { | |
pdf-viewer { | |
display:inline-block; | |
max-width:100%; | |
} | |
ion-fab { | |
position:fixed; | |
} | |
video { | |
max-width: 100%; | |
max-height: 100%; | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from '@angular/core'; | |
import { NavParams, ViewController } from 'ionic-angular'; | |
const ZOOM_STEP:number = 0.25; | |
const DEFAULT_ZOOM:number = 1; | |
@Component({ | |
selector: 'page-documentation-modal', | |
templateUrl: 'documentation-modal.html', | |
}) | |
export class DocumentationModalPage | |
{ | |
public pdfSrc:string = ''; | |
public videoSrc:string = ''; | |
public title:string = ''; | |
public pdfZoom:number = DEFAULT_ZOOM; | |
public constructor(navParams: NavParams, private viewCtrl: ViewController) | |
{ | |
const doc = navParams.get('document'); | |
const video = navParams.get('video'); | |
if (doc) { | |
this.pdfSrc = doc.source_dir; | |
this.title = doc.name; | |
} else if (video) { | |
this.videoSrc = video.source_dir; | |
this.title = video.name; | |
} else { | |
} | |
} | |
public zoomIn() | |
{ | |
this.pdfZoom += ZOOM_STEP; | |
} | |
public zoomOut() | |
{ | |
if (this.pdfZoom > DEFAULT_ZOOM) { | |
this.pdfZoom -= ZOOM_STEP; | |
} | |
} | |
public resetZoom() | |
{ | |
this.pdfZoom = DEFAULT_ZOOM; | |
} | |
public dismiss() | |
{ | |
this.viewCtrl.dismiss(); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
amazing pdf viewer! congrats