/
still-image.component.html
78 lines (71 loc) · 3.85 KB
/
still-image.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<div class="still-image-viewer">
<!-- main content with navigation and osd viewer -->
<div class="content">
<!-- openseadragon (osd) viewer -->
<div class="osd-container">
<div class="action horizontal top overlay">
<!-- caption -->
<span class="caption mat-caption">{{imageCaption}}</span>
<span class="fill-remaining-space"></span>
<!-- image action tools e.g. zoom, rotate and flip -->
<!-- zoom buttons -->
<span>
<button mat-icon-button id="DSP_OSD_ZOOM_OUT" matTooltip="Zoom out">
<mat-icon>remove_circle_outline</mat-icon>
</button>
<button mat-icon-button id="DSP_OSD_HOME" matTooltip="Reset zoom">
<mat-icon>adjust</mat-icon>
</button>
<button mat-icon-button id="DSP_OSD_ZOOM_IN" matTooltip="Zoom in">
<mat-icon>add_circle_outline</mat-icon>
</button>
<!-- window button -->
<button mat-icon-button id="DSP_OSD_FULL_PAGE" matTooltip="Open in fullscreen">
<mat-icon>fullscreen</mat-icon>
</button>
</span>
</div>
<!-- navigation in case of compound object: previous and next page -->
<div class="navigation vertical previous" *ngIf="compoundNavigation">
<button mat-button class="full-size" [disabled]="compoundNavigation.page <= 1"
(click)="goToPage.emit(compoundNavigation.page - 1)">
<mat-icon>keyboard_arrow_left</mat-icon>
</button>
</div>
<div class="navigation vertical next" *ngIf="compoundNavigation">
<button mat-button class="full-size"
[disabled]="compoundNavigation.page >= compoundNavigation.totalPages"
(click)="goToPage.emit(compoundNavigation.page + 1)">
<mat-icon>keyboard_arrow_right</mat-icon>
</button>
</div>
</div>
<!-- footer with image caption e.g. copyright information -->
<div class="navigation horizontal bottom" *ngIf="compoundNavigation">
<span class="compound-nav">
<button mat-icon-button [disabled]="compoundNavigation.page <= 1" matTooltip="First page"
(click)="goToPage.emit(1)">
<mat-icon>first_page</mat-icon>
</button>
<button mat-icon-button [disabled]="compoundNavigation.page <= 1" matTooltip="Previous page"
(click)="goToPage.emit(compoundNavigation.page - 1)">
<mat-icon>navigate_before</mat-icon>
</button>
<mat-slider [color]="'primary'" [disabled]="compoundNavigation.totalPages < 2"
[max]="compoundNavigation.totalPages" [min]="1" [step]="1" [thumbLabel]="true"
[tickInterval]="'auto'" [(ngModel)]="compoundNavigation.page"
(change)="goToPage.emit($event.value)">
</mat-slider>
<button mat-icon-button [disabled]="compoundNavigation.page >= compoundNavigation.totalPages"
matTooltip="Next page" (click)="goToPage.emit(compoundNavigation.page + 1)">
<mat-icon>navigate_next</mat-icon>
</button>
<button mat-icon-button [disabled]="compoundNavigation.page === compoundNavigation.totalPages"
matTooltip="Last page" (click)="goToPage.emit(compoundNavigation.totalPages)">
<mat-icon>last_page</mat-icon>
</button>
</span>
</div>
<!-- /openseadragon (osd) -->
</div>
</div>