Skip to content
Permalink
Browse files
feat(document): changes to pdf viewer (DEV-1149) (#789)
* move tool bar to the bottom

* mat-menu, downloading document with org name

* fullscreen function

* style

* expanding input field

* update filename after replacement
  • Loading branch information
Vijeinath committed Aug 5, 2022
1 parent 9ec6870 commit d39ed1471fc9b513e98e2a8ce5578d258f213fe4
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 22 deletions.
@@ -1,21 +1,34 @@
<div class="pdf-container">
<div class="action horizontal top overlay">
<div class="action horizontal bottom overlay">
<!-- caption -->
<span class="caption mat-caption">
<input
#queryInp
type="text"
id="searchbox"
name="searchbox"
class="pdf-searchbox"
placeholder="Search in pdf..."
[value]="pdfQuery"
[disabled]="failedToLoad"
(input)="searchQueryChanged($event.target.value)"
(keyup.enter)="searchQueryChanged(queryInp.value)"
/>
<span>
<button mat-icon-button [matMenuTriggerFor]="more">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #more="matMenu">
<a mat-menu-item (click)="downloadDocument(src.fileValue.fileUrl)">
Download file
</a>
<button mat-menu-item (click)="openReplaceFileDialog()">
Replace file
</button>
</mat-menu>
</span>
<span class="fill-remaining-space"></span>

<!-- input field for searching through document -->
<input matInput
#queryInp
type="text"
id="searchbox"
name="searchbox"
class="pdf-searchbox fill-remaining-space"
placeholder="Search in pdf..."
[value]="pdfQuery"
[disabled]="failedToLoad"
(input)="searchQueryChanged($event.target.value)"
(keyup.enter)="searchQueryChanged(queryInp.value)"
/>

<!-- image action tools e.g. zoom, rotate and flip -->
<span>
<!-- zoom buttons -->
@@ -28,18 +41,25 @@
<button mat-icon-button id="DSP_PDF_ZOOM_IN" matTooltip="Zoom in" (click)="zoomFactor = zoomFactor + 0.2" [disabled]="failedToLoad">
<mat-icon>add_circle_outline</mat-icon>
</button>
<button mat-icon-button id="DSP_PDF_REPLACE_FILE" class="replace-file" matTooltip="Replace PDF file" (click)="openReplaceFileDialog()">
<mat-icon>cloud_upload</mat-icon>
</span>

<!-- empty placeholders to center the zoom buttons -->
<span class="fill-remaining-space"></span>
<span class="empty-space"></span>
<span class="empty-space"></span>
<span class="empty-space"></span>

<!-- full screen button -->
<span>
<button mat-icon-button id="DSP_PDF_FULL_SCREEN" matTooltip="Fullscreen" (click)="openFullscreen()" [disabled]="failedToLoad">
<mat-icon>fullscreen</mat-icon>
</button>
<a [href]="src.fileValue.fileUrl" download mat-icon-button id="DSP_PDF_DOWNLOAD" matTooltip="Open pdf in new tab">
<mat-icon>launch</mat-icon>
</a>
</span>
</div>
<!-- in case of an error -->
<app-status [status]="404" [url]="src.fileValue.fileUrl" [representation]="'document'" *ngIf="failedToLoad"></app-status>

<pdf-viewer [src]="src.fileValue.fileUrl" [original-size]="false" [autoresize]="true" [show-all]="true"
<pdf-viewer class="pdf-viewer" [src]="src.fileValue.fileUrl" [original-size]="false" [autoresize]="true" [show-all]="true"
[show-borders]="true" [zoom]="zoomFactor" [zoom-scale]="'page-width'">
</pdf-viewer>
</div>
@@ -36,7 +36,8 @@ $osd-height: 460px;
.pdf-searchbox {
border-radius: $border-radius;
border: none;
padding: 4px;
padding: 4px 12px;
margin: 4px;

&:active {
border: none;
@@ -19,6 +19,8 @@ import { ErrorHandlerService } from 'src/app/main/services/error-handler.service
import { EmitEvent, Events, UpdatedFileEventValue, ValueOperationEventService } from '../../services/value-operation-event.service';
import { FileRepresentation } from '../file-representation';
import { RepresentationService } from '../representation.service';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { DOCUMENT } from '@angular/common';

@Component({
selector: 'app-document',
@@ -35,21 +37,29 @@ export class DocumentComponent implements OnInit, AfterViewInit {

@ViewChild(PdfViewerComponent) private _pdfComponent: PdfViewerComponent;

originalFilename: string;

zoomFactor = 1.0;

pdfQuery = '';

failedToLoad = false;

elem: any;

constructor(
@Inject(DOCUMENT) private document: any,
@Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
private readonly _http: HttpClient,
private _dialog: MatDialog,
private _errorHandler: ErrorHandlerService,
private _rs: RepresentationService,
private _valueOperationEventService: ValueOperationEventService
) { }

ngOnInit(): void {
this.elem = document.getElementsByClassName('pdf-viewer')[0];
this._getOriginalFilename();
this.failedToLoad = !this._rs.doesFileExist(this.src.fileValue.fileUrl);
}

@@ -72,6 +82,32 @@ export class DocumentComponent implements OnInit, AfterViewInit {
}
}

async downloadDocument(url: string) {
try {
const res = await this._http.get(url, { responseType: 'blob' }).toPromise();
this.downloadFile(res);
} catch (e) {
this._errorHandler.showMessage(e);
}
}

downloadFile(data) {
const url = window.URL.createObjectURL(data);
const e = document.createElement('a');
e.href = url;

// set filename
if (this.originalFilename === undefined) {
e.download = url.substr(url.lastIndexOf('/') + 1);
} else {
e.download = this.originalFilename;
}

document.body.appendChild(e);
e.click();
document.body.removeChild(e);
}

openReplaceFileDialog(){
const propId = this.parentResource.properties[Constants.HasDocumentFileValue][0].id;

@@ -96,6 +132,36 @@ export class DocumentComponent implements OnInit, AfterViewInit {
});
}

openFullscreen() {
if (this.elem.requestFullscreen) {
this.elem.requestFullscreen();
} else if (this.elem.mozRequestFullScreen) {
// firefox
this.elem.mozRequestFullScreen();
} else if (this.elem.webkitRequestFullscreen) {
// chrome, safari and opera
this.elem.webkitRequestFullscreen();
} else if (this.elem.msRequestFullscreen) {
// edge, ie
this.elem.msRequestFullscreen();
}
}

private _getOriginalFilename() {
const requestOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
withCredentials: true
};

const pathToJson = this.src.fileValue.fileUrl.substring(0, this.src.fileValue.fileUrl.lastIndexOf('/')) + '/knora.json';

this._http.get(pathToJson, requestOptions).subscribe(
res => {
this.originalFilename = res['originalFilename'];
}
);
}

private _replaceFile(file: UpdateFileValue) {
const updateRes = new UpdateResource();
updateRes.id = this.parentResource.id;
@@ -113,6 +179,8 @@ export class DocumentComponent implements OnInit, AfterViewInit {
this.src.fileValue.strval = (res2.properties[Constants.HasDocumentFileValue][0] as ReadDocumentFileValue).strval;
this.src.fileValue.valueCreationDate = (res2.properties[Constants.HasDocumentFileValue][0] as ReadDocumentFileValue).valueCreationDate;

this._getOriginalFilename();

this.zoomFactor = 1.0;
this.pdfQuery = '';

0 comments on commit d39ed14

Please sign in to comment.