Skip to content

Add keyboard accessibility #269

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
miffens-dx wants to merge 2 commits into from
Closed

Add keyboard accessibility #269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8f8b6ee
add keyboard controls
miffens-dx Oct 21, 2020
847c204
add keyboard controls - address comments
miffens-dx Oct 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions projects/angular-split/src/lib/component/split.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
height: 100%;

& > .as-split-gutter {
border: none;
flex-grow: 0;
flex-shrink: 0;
background-color: #eeeeee;
Expand Down
67 changes: 49 additions & 18 deletions projects/angular-split/src/lib/component/split.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
getElementPixelSize,
getGutterSideAbsorptionCapacity,
updateAreaSize,
getKeyboardEndpoint
} from '../utils'

/**
Expand Down Expand Up @@ -68,19 +69,20 @@ import {
styleUrls: [`./split.component.scss`],
template: ` <ng-content></ng-content>
<ng-template ngFor [ngForOf]="displayedAreas" let-index="index" let-last="last">
<div
<button
*ngIf="last === false"
#gutterEls
class="as-split-gutter"
[style.flex-basis.px]="gutterSize"
[style.order]="index * 2 + 1"
(mousedown)="startDragging($event, index * 2 + 1, index + 1)"
(touchstart)="startDragging($event, index * 2 + 1, index + 1)"
(keydown)= "startKeyboardDrag($event, index * 2 + 1, index + 1)"
(mousedown)="startMouseDrag($event, index * 2 + 1, index + 1)"
(touchstart)="startMouseDrag($event, index * 2 + 1, index + 1)"
(mouseup)="clickGutter($event, index + 1)"
(touchend)="clickGutter($event, index + 1)"
>
<div class="as-split-gutter-icon"></div>
</div>
</button>
</ng-template>`,
encapsulation: ViewEncapsulation.Emulated,
})
Expand Down Expand Up @@ -521,7 +523,28 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
}
}

public startDragging(event: MouseEvent | TouchEvent, gutterOrder: number, gutterNum: number): void {
public startKeyboardDrag(event: KeyboardEvent, gutterOrder: number, gutterNum: number) {
if (this.disabled === true || this.isWaitingClear === true) {
return
}

const endPoint = getKeyboardEndpoint(event, this.direction)
if (endPoint === null) {
return
}
this.endPoint = endPoint
this.startPoint = getPointFromEvent(event)

event.preventDefault()
event.stopPropagation()

this.setupForDragEvent(gutterOrder, gutterNum)
this.startDragging()
this.drag()
this.stopDragging()
}

public startMouseDrag(event: MouseEvent | TouchEvent, gutterOrder: number, gutterNum: number): void {
event.preventDefault()
event.stopPropagation()

Expand All @@ -530,6 +553,21 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
return
}

this.setupForDragEvent(gutterOrder, gutterNum)

this.dragListeners.push(this.renderer.listen('document', 'mouseup', this.stopDragging.bind(this)))
this.dragListeners.push(this.renderer.listen('document', 'touchend', this.stopDragging.bind(this)))
this.dragListeners.push(this.renderer.listen('document', 'touchcancel', this.stopDragging.bind(this)))

this.ngZone.runOutsideAngular(() => {
this.dragListeners.push(this.renderer.listen('document', 'mousemove', this.mouseDragEvent.bind(this)))
this.dragListeners.push(this.renderer.listen('document', 'touchmove', this.mouseDragEvent.bind(this)))
})

this.startDragging()
}

private setupForDragEvent(gutterOrder: number, gutterNum: number) {
this.snapshot = {
gutterNum,
lastSteppedOffset: 0,
Expand Down Expand Up @@ -569,16 +607,9 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
if (this.snapshot.areasBeforeGutter.length === 0 || this.snapshot.areasAfterGutter.length === 0) {
return
}
}

this.dragListeners.push(this.renderer.listen('document', 'mouseup', this.stopDragging.bind(this)))
this.dragListeners.push(this.renderer.listen('document', 'touchend', this.stopDragging.bind(this)))
this.dragListeners.push(this.renderer.listen('document', 'touchcancel', this.stopDragging.bind(this)))

this.ngZone.runOutsideAngular(() => {
this.dragListeners.push(this.renderer.listen('document', 'mousemove', this.dragEvent.bind(this)))
this.dragListeners.push(this.renderer.listen('document', 'touchmove', this.dragEvent.bind(this)))
})

private startDragging() {
this.displayedAreas.forEach((area) => area.component.lockEvents())

this.isDragging = true
Expand All @@ -588,7 +619,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
this.notify('start', this.snapshot.gutterNum)
}

private dragEvent(event: MouseEvent | TouchEvent): void {
private mouseDragEvent(event: MouseEvent | TouchEvent): void {
event.preventDefault()
event.stopPropagation()

Expand All @@ -602,10 +633,10 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
}

this.endPoint = getPointFromEvent(event)
if (this.endPoint === null) {
return
}
this.drag()
}

private drag() {
// Calculate steppedOffset

let offset =
Expand Down
48 changes: 47 additions & 1 deletion projects/angular-split/src/lib/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { ElementRef } from '@angular/core'

import { IArea, IPoint, IAreaSnapshot, ISplitSideAbsorptionCapacity, IAreaAbsorptionCapacity } from './interface'

export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint {
export function getPointFromEvent(event: MouseEvent | TouchEvent | KeyboardEvent): IPoint {
// TouchEvent
if ((<TouchEvent>event).changedTouches !== undefined && (<TouchEvent>event).changedTouches.length > 0) {
return {
Expand All @@ -17,9 +17,55 @@ export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint {
y: (<MouseEvent>event).clientY,
}
}
// KeyboardEvent
else if ((<KeyboardEvent>event).currentTarget !== undefined) {
const gutterEl = event.currentTarget as HTMLElement
return {
x: gutterEl.offsetLeft,
y: gutterEl.offsetTop
}
}
return null
}

export function getKeyboardEndpoint(event: KeyboardEvent, direction: 'horizontal' | 'vertical'): IPoint | null {
// Return null if direction keys on the opposite axis were pressed
if (direction === 'horizontal') {
switch (event.key) {
case 'ArrowLeft':
case 'ArrowRight':
break
default:
return null
}
}
if (direction === 'vertical') {
switch (event.key) {
case 'ArrowUp':
case 'ArrowDown':
break
default:
return null
}
}

const gutterEl = event.currentTarget as HTMLElement
const offset = 50;
let offsetX = gutterEl.offsetLeft, offsetY = gutterEl.offsetTop
switch (event.key) {
case 'ArrowLeft': offsetX -= offset; break
case 'ArrowRight': offsetX += offset; break
case 'ArrowUp': offsetY -= offset; break
case 'ArrowDown': offsetY += offset; break
default: return null
}

return {
x: offsetX,
y: offsetY
}
}

export function getElementPixelSize(elRef: ElementRef, direction: 'horizontal' | 'vertical'): number {
const rect = (<HTMLElement>elRef.nativeElement).getBoundingClientRect()

Expand Down