Skip to content

Commit 9166eec

Browse files
kdimatteokdimatteo
authored
Merge pull request #14 from clarivate/kd/merge-1.2.12-ng7-to-master
Kd/merge 1.2.12 ng7 to master
2 parents 0a7a58f + 0f3b0fa commit 9166eec

File tree

10 files changed

+281
-139
lines changed

10 files changed

+281
-139
lines changed

‎README.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@ The configuration object is structured as below. All values are optional, and if
6161
{
6262
btnClass: 'default', // The CSS class(es) that will apply to the buttons
6363
zoomFactor: 0.1, // The amount that the scale will be increased by
64-
containerBackgroundColor: '#ccc', // The color to use for the background. This can provided in hex, or rgb(a).
64+
containerBackgroundColor: '#e4dede', // The color to use for the background. This can provided in hex, or rgb(a).
65+
primaryColor: '', // Color to use for all buttons image.
6566
wheelZoom: true, // If true, the mouse wheel can be used to zoom in
6667
allowFullscreen: true, // If true, the fullscreen button will be shown, allowing the user to enter fullscreen mode
6768
allowKeyboardNavigation: true, // If true, the left / right arrow keys can be used for navigation
@@ -106,6 +107,13 @@ handleEvent(event: customImageEvent) {
106107
}
107108
```
108109

110+
## Local setup for this branch:
111+
112+
* Add respective version of this component. yarn add @clarivate/angular-image-viewer.
113+
* yarn serve-lib is to compile your changes in projects\angular-image-viewer and it will update in dist folder. But to reflect in UI, update projects\angular-image-viewer\ng-package.json file dest to node_module location. "dest": "../../node_modules/@clarivate/angular-image-viewer",
114+
* yarn start to get the application up.
115+
116+
109117
Note: This package is built using the idea from ngx-image-viewer(https://github.com/jpilfold/ngx-image-viewer). It has advantage that it uses latest dependencies which fixes Issue #23 & #29 i.e related to FullScreen Image.
110118

111119

‎projects/angular-image-viewer/src/lib/angular-image-viewer.component.html‎

Lines changed: 52 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,68 @@
1-
<div [appScreenfull]="fullscreen" class="img-container"
2-
[style.backgroundColor]="config.containerBackgroundColor" (wheel)="scrollZoom($event)"
3-
(dragover)="onDragOver($event)">
4-
<img [src]="src[index]" [ngStyle]="style" alt="Image not found..." (dragstart)="onDragStart($event)"
5-
(load)="onLoad(src[index])" (error)="imageNotFound(src[index])" (loadstart)="onLoadStart(src[index])" />
6-
<!-- Div below will be used to hide the 'ghost' image when dragging -->
7-
<div></div>
1+
<div [appScreenfull]="fullscreen" class="img-container" [style.backgroundColor]="config.containerBackgroundColor"
2+
(wheel)="scrollZoom($event)">
3+
<div class="image-name" *ngIf="imageName">
4+
<span>{{imageName}}</span>
5+
</div>
6+
7+
<div cdkDrag class="drag-element">
8+
<img [src]="src[index]" [ngStyle]="style" alt=""
9+
(cdkDragStarted)="onDragStart($event)"
10+
(load)="onLoad()" (loadstart)="onLoadStart()" (error)="imageNotFound()" />
11+
</div>
12+
813
<div class="spinner-container" *ngIf="loading">
914
<div class="spinner"></div>
1015
</div>
1116

12-
<button type="button" [class]="config.btnClass" *ngIf="config.btnShow.rotateCounterClockwise"
13-
(click)="rotateCounterClockwise()">
14-
<span [class]="config.btnIcons.rotateCounterClockwise"></span>
15-
</button>
16-
<button type="button" [class]="config.btnClass" *ngIf="config.btnShow.rotateClockwise" (click)="rotateClockwise()">
17-
<span [class]="config.btnIcons.rotateClockwise"></span>
18-
</button>
17+
<div class="button-container">
18+
<button type="button" id="ngx-fs-btn" [class]="config.btnClass" (click)="toggleFullscreen()"
19+
[style.color]="config.primaryColor" *ngIf="config.allowFullscreen">
20+
<span [class]="config.btnIcons.fullscreen"></span>
21+
</button>
1922

20-
<button type="button" [class]="config.btnClass" *ngIf="config.btnShow.zoomOut" (click)="zoomOut()">
21-
<span [class]="config.btnIcons.zoomOut"></span>
22-
</button>
23-
<button type="button" [class]="config.btnClass" *ngIf="config.btnShow.zoomIn" (click)="zoomIn()">
24-
<span [class]="config.btnIcons.zoomIn"></span>
25-
</button>
23+
<div class="button-container-bottom">
24+
<button type="button" [class]="config.btnClass" *ngFor="let cBtn of config.customBtns"
25+
[style.color]="config.primaryColor" (click)="fireCustomEvent(cBtn.name, index)">
26+
<span [class]="cBtn.icon"></span>
27+
</button>
2628

27-
<button type="button" [class]="config.btnClass" *ngFor="let cBtn of config.customBtns"
28-
(click)="fireCustomEvent(cBtn.name, index)">
29-
<span [class]="cBtn.icon"></span>
30-
</button>
29+
<button type="button" [class]="config.btnClass" *ngIf="config.btnShow.rotateCounterClockwise"
30+
[style.color]="config.primaryColor" (click)="rotateCounterClockwise()">
31+
<span [class]="config.btnIcons.rotateCounterClockwise"></span>
32+
</button>
33+
<button type="button" [class]="config.btnClass" *ngIf="config.btnShow.rotateClockwise"
34+
[style.color]="config.primaryColor" (click)="rotateClockwise()">
35+
<span [class]="config.btnIcons.rotateClockwise"></span>
36+
</button>
3137

32-
<button type="button" id="ngx-fs-btn" [class]="config.btnClass" (click)="toggleFullscreen()"
33-
*ngIf="config.allowFullscreen">
34-
<span [class]="config.btnIcons.fullscreen"></span>
35-
</button>
38+
<div class="button-zoom-in-out-container">
39+
<button type="button" [class]="config.btnClass" *ngIf="config.btnShow.zoomIn"
40+
[style.color]="config.primaryColor" (click)="zoomIn()">
41+
<span [class]="config.btnIcons.zoomIn"></span>
42+
</button>
43+
<button type="button" [class]="config.btnClass" *ngIf="config.btnShow.zoomOut"
44+
[style.color]="config.primaryColor" (click)="zoomOut()">
45+
<span [class]="config.btnIcons.zoomOut"></span>
46+
</button>
47+
</div>
48+
</div>
49+
</div>
3650

3751
<div class="nav-button-container" *ngIf="src.length > 1">
38-
<button type="button" [class]="config.btnClass" (click)="prevImage($event)" [disabled]="index === 0">
52+
<button type="button" [class]="config.btnClass" (click)="prevImage($event)"
53+
[style.color]="config.primaryColor" [disabled]="index === 0">
3954
<span [class]="config.btnIcons.prev"></span>
4055
</button>
4156
<button type="button" [class]="config.btnClass" (click)="nextImage($event)"
42-
[disabled]="index === src.length - 1">
57+
[style.color]="config.primaryColor" [disabled]="index === src.length - 1">
4358
<span [class]="config.btnIcons.next"></span>
4459
</button>
4560
</div>
61+
<div class="footer-section">
62+
<div class="image-txt-count-left-align"><span>{{footerTexts[0]}} {{index + 1}} {{footerTexts[1]}} {{src.length}}</span></div>
63+
<div class="footer-txt-right-align">
64+
<span class="footer-txt-right-align-title" [style.color]="config.primaryColor">{{footerTexts[2]}}</span>
65+
<span class="footer-txt-right-align-note">{{footerTexts[3]}}</span>
66+
</div>
67+
</div>
4668
</div>

‎projects/angular-image-viewer/src/lib/angular-image-viewer.component.scss‎

Lines changed: 138 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,73 @@
1-
// .img-container {
2-
// max-width: 100vw;
3-
// max-height: 98vh;
4-
// overflow: hidden;
5-
// position: relative;
6-
// width: 100% !important;
7-
// overflow-y: auto !important;
8-
9-
// & img {
10-
// z-index: 2;
11-
// margin: 0 auto;
12-
// display: block;
13-
// max-width: 100%;
14-
// width: 100%;
15-
// }
16-
17-
// & button {
18-
// z-index: 99;
19-
// position: absolute;
20-
// right: 15px;
21-
22-
// &:not(:disabled) {
23-
// cursor: pointer;
24-
// }
25-
// }
26-
27-
// }
28-
291
.img-container {
2+
position: relative;
303
width: 100%;
31-
// height: 98vh;
4+
height: 100%;
325
display: flex;
336
justify-content: center;
347
align-items: center;
358
overflow: hidden;
369

37-
& img {
38-
// flex-shrink: 0;
39-
// -webkit-flex-shrink: 0;
40-
max-width: 90%;
41-
max-height: 95%;
10+
.drag-element {
11+
position: absolute;
12+
top: 35px;
13+
right: 78px;
14+
width: calc(100% - 156px);
15+
height: calc(100% - 85px);
16+
cursor: grab;
17+
text-align: center;
18+
19+
img {
20+
padding: 0;
21+
max-width: 100%;
22+
max-height: 100%;
23+
}
24+
25+
&:active {
26+
cursor:grabbing;
27+
}
4228
}
4329

4430
& button {
4531
z-index: 99;
46-
position: absolute;
47-
right: 15px;
4832

4933
&:not(:disabled) {
5034
cursor: pointer;
5135
}
5236
}
53-
54-
}
55-
56-
@for $i from 1 through 7 {
57-
.img-container>button:nth-of-type(#{$i}):not(#ngx-fs-btn) {
58-
bottom: 15px + (50px * ($i - 1))
59-
}
6037
}
6138

6239
#ngx-fs-btn {
6340
top: 15px;
6441
}
6542

6643
button.default {
67-
height: 40px;
68-
width: 40px;
69-
border: 1px solid #555;
44+
height: 24px;
45+
width: 24px;
7046
border-radius: 50%;
7147
background-color: white;
72-
opacity: 0.7;
48+
opacity: 0.9;
7349
transition: opacity 200ms;
74-
}
50+
font-size: 12px;
51+
background: inherit;
52+
background-color: rgba(255, 255, 255, 1);
53+
border: none;
54+
border-radius: 31px;
55+
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
56+
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
57+
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.349019607843137);
58+
59+
&:focus {
60+
outline: none;
61+
opacity: 1;
62+
}
7563

76-
button.default:hover {
77-
opacity: 1;
78-
}
64+
&:hover {
65+
opacity: 1;
66+
}
7967

80-
button.default:disabled {
81-
opacity: 0.25;
68+
&:disabled {
69+
opacity: 0.3;
70+
}
8271
}
8372

8473
.nav-button-container>button {
@@ -88,12 +77,59 @@ button.default:disabled {
8877
}
8978

9079
.nav-button-container {
91-
text-align: center;
80+
text-align: right;
9281
position: absolute;
9382
z-index: 98;
94-
bottom: 10px;
83+
bottom: 60px;
9584
left: 0;
96-
right: 0;
85+
right: 10px;
86+
87+
button.default {
88+
height: 30px;
89+
margin: 0;
90+
font-size: 14px;
91+
92+
&:first-child {
93+
border-radius: 4px 0 0 4px;
94+
}
95+
96+
&:last-child {
97+
margin-left: 10px;
98+
border-radius: 0 4px 4px 0;
99+
}
100+
}
101+
}
102+
103+
.button-container {
104+
position: absolute;
105+
top: 10px;
106+
right: 10px;
107+
width: 24px;
108+
height: calc(100% - 115px);
109+
z-index: 98;
110+
111+
.button-container-bottom {
112+
position: absolute;
113+
bottom: 0;
114+
115+
button.default {
116+
margin-top: 10px;
117+
}
118+
119+
.button-zoom-in-out-container {
120+
margin-top: 15px;
121+
122+
button.default {
123+
margin: 0;
124+
border-radius: 0;
125+
height: 30px;
126+
127+
&:first-child {
128+
margin-bottom: 1px;
129+
}
130+
}
131+
}
132+
}
97133
}
98134

99135
.spinner-container {
@@ -129,6 +165,51 @@ button.default:disabled {
129165
/* IE 10+, Fx 29+ */
130166
}
131167

168+
.footer-section {
169+
position: absolute;
170+
bottom: 10px;
171+
left: 0;
172+
width: 100%;
173+
line-height: 18px;
174+
z-index: 98;
175+
176+
.image-txt-count-left-align {
177+
float: left;
178+
padding: 0 10px;
179+
font-family: 'Source Sans Pro SemiBold';
180+
font-size: 14;
181+
color: #333333;
182+
}
183+
184+
.footer-txt-right-align {
185+
float: right;
186+
padding: 0 10px;
187+
text-align: right;
188+
189+
span.footer-txt-right-align-title {
190+
display: block;
191+
font-family: 'Source Sans Pro SemiBold';
192+
font-size: 14;
193+
}
194+
195+
span.footer-txt-right-align-note {
196+
color: #767676;
197+
font-family: 'Source Sans Pro';
198+
font-size: 12;
199+
}
200+
}
201+
}
202+
203+
.image-name {
204+
position: absolute;
205+
top: 10px;
206+
left: 10px;
207+
z-index: 98;
208+
font-family: 'Source Sans Pro SemiBold';
209+
font-size: 16;
210+
color: #333333;
211+
}
212+
132213
@keyframes rotation {
133214
from {
134215
-webkit-transform: rotate(0deg);
@@ -167,4 +248,4 @@ button.default:disabled {
167248
to {
168249
-webkit-transform: rotate(359deg);
169250
}
170-
}
251+
}

0 commit comments

Comments
 (0)