inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-4937] Viewer - Drag and Drop is not operable with keyboard alone (#5126)

Browse Source 
* add keyboard event logic

* tests

* fix outline visibility
This commit is contained in:
Cilibiu Bogdan
2019-10-09 19:52:26 +03:00
committed by Denys Vuika
parent e0b1a3fe03
commit 8da16ea1a7
4 changed files with 64 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/core/viewer/components/imgViewer.component.html
View File

@@ -1,4 +1,4 @@
<div id="adf-image-container" class="adf-image-container" tabindex="0" role="img" [attr.aria-label]="nameFile" [style.transform]="transform" data-automation-id="adf-image-container">
<div id="adf-image-container" (keydown)="onKeyDown($event)" class="adf-image-container" tabindex="0" role="img" [attr.aria-label]="nameFile" [style.transform]="transform" data-automation-id="adf-image-container">
<img id="viewer-image" [src]="urlFile" [alt]="nameFile" [ngStyle]="{ 'cursor' : isDragged ? 'move': 'default' } " />
</div>

5
lib/core/viewer/components/imgViewer.component.scss
View File

@@ -1,8 +1,13 @@
@mixin adf-image-viewer-theme($theme) {
$background: map-get($theme, background);
$viewer-image-outline: 1px solid mat-color($alfresco-ecm-blue, A200) !default;
.adf-image-viewer {
.adf-image-container {
&:focus {
outline-offset: -1px;
outline: $viewer-image-outline;
}
display: flex;
flex: 1;
text-align: center;

36
lib/core/viewer/components/imgViewer.component.spec.ts
View File

@@ -147,6 +147,42 @@ describe('Test Img viewer component ', () => {
expect(component.isDragged).toBeFalsy();
});
it('should update offset on keydown ArrowDown event', () => {
const arrowDownEvent = new KeyboardEvent('keydown', { key : 'ArrowDown' });
component.onKeyDown(arrowDownEvent);
expect(component.offsetY).toBe(4);
component.onKeyDown(arrowDownEvent);
expect(component.offsetY).toBe(8);
});
it('should update offset on keydown ArrowUp event', () => {
const arrowUpEvent = new KeyboardEvent('keydown', { key : 'ArrowUp' });
component.onKeyDown(arrowUpEvent);
expect(component.offsetY).toBe(-4);
component.onKeyDown(arrowUpEvent);
expect(component.offsetY).toBe(-8);
});
it('should update offset on keydown ArrowLeft event', () => {
const arrowLeftEvent = new KeyboardEvent('keydown', { key : 'ArrowLeft' });
component.onKeyDown(arrowLeftEvent);
expect(component.offsetX).toBe(-4);
component.onKeyDown(arrowLeftEvent);
expect(component.offsetX).toBe(-8);
});
it('should update offset on keydown ArrowRight event', () => {
const arrowRightEvent = new KeyboardEvent('keydown', { key : 'ArrowRight' });
component.onKeyDown(arrowRightEvent);
expect(component.offsetX).toBe(4);
component.onKeyDown(arrowRightEvent);
expect(component.offsetX).toBe(8);
});
it('should update scales on zoom in', () => {
component.scaleX = 1.0;

22
lib/core/viewer/components/imgViewer.component.ts
View File

@@ -55,6 +55,7 @@ export class ImgViewerComponent implements OnInit, OnChanges, OnDestroy {
scaleY: number = 1.0;
offsetX: number = 0;
offsetY: number = 0;
step: number = 4;
isDragged: boolean = false;
private drag = { x: 0, y: 0 };
@@ -108,6 +109,27 @@ export class ImgViewerComponent implements OnInit, OnChanges, OnDestroy {
}
}
onKeyDown(event: KeyboardEvent) {
const scaleX = (this.scaleX !== 0 ? this.scaleX : 1.0);
const scaleY = (this.scaleY !== 0 ? this.scaleY : 1.0);
if (event.key === 'ArrowDown') {
this.offsetY += (this.step / scaleY);
}
if (event.key === 'ArrowUp') {
this.offsetY -= (this.step / scaleY);
}
if (event.key === 'ArrowRight') {
this.offsetX += (this.step / scaleX);
}
if (event.key === 'ArrowLeft') {
this.offsetX -= (this.step / scaleX);
}
}
onMouseDown(event: MouseEvent) {
event.preventDefault();
this.isDragged = true;