uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Cleanup unused functionality in keyboard wrap

Browse Source
This commit is contained in:
Farkas József
2016-12-14 21:12:31 +01:00
parent a0d5a58f8b
commit 42686f4221
7 changed files with 21 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/keyboard/slider/keyboard-slider.component.html
View File

@@ -1,5 +1,5 @@
<svg-keyboard *ngFor="let layer of layers; trackBy: trackKeyboard"
[@layerState]="layer.animation"
<svg-keyboard *ngFor="let layer of layers; let index = index; trackBy: trackKeyboard"
[@layerState]="layerAnimationState[index]"
[moduleConfig]="layer.modules"
(keyClick)="keyClick.emit($event)"
(keyHover)="keyHover.emit($event)">
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 304 B

After

Width:  |  Height:  |  Size: 334 B

22
src/components/keyboard/slider/keyboard-slider.component.ts
View File

@@ -16,11 +16,17 @@ import {
import { Layer } from '../../../config-serializer/config-items/Layer';
type AnimationKeyboard =
'leftIn' |
'leftOut' |
'rightIn' |
'rightOut';
@Component({
selector: 'keyboard-slider',
template: require('./keyboard-slider.component.html'),
styles: [require('./keyboard-slider.component.scss')],
changeDetection: ChangeDetectionStrategy.Default,
changeDetection: ChangeDetectionStrategy.OnPush,
// We use 101%, because there was still a trace of the keyboard in the screen when animation was done
animations: [
trigger('layerState', [
@@ -75,7 +81,13 @@ export class KeyboardSliderComponent implements OnChanges {
@Output() keyClick = new EventEmitter();
@Output() keyHover = new EventEmitter();
private layerAnimationState: AnimationKeyboard[];
ngOnChanges(changes: SimpleChanges) {
if (changes['layers']) {
this.layerAnimationState = this.layers.map<AnimationKeyboard>(() => 'leftOut');
this.layerAnimationState[this.currentLayer] = 'leftIn';
}
const layerChange = changes['currentLayer'];
if (layerChange) {
const prevValue = layerChange.isFirstChange() ? layerChange.currentValue : layerChange.previousValue;
@@ -89,11 +101,11 @@ export class KeyboardSliderComponent implements OnChanges {
onLayerChange(oldIndex: number, index: number): void {
if (index > oldIndex) {
this.layers[oldIndex].animation = 'leftOut';
this.layers[index].animation = 'leftIn';
this.layerAnimationState[oldIndex] = 'leftOut';
this.layerAnimationState[index] = 'leftIn';
} else {
this.layers[oldIndex].animation = 'rightOut';
this.layers[index].animation = 'rightIn';
this.layerAnimationState[oldIndex] = 'rightOut';
this.layerAnimationState[index] = 'rightIn';
}
}

5
src/components/svg/wrap/animation.ts
View File

@@ -1,5 +0,0 @@
export type AnimationKeyboard =
'leftIn' |
'leftOut' |
'rightIn' |
'rightOut';

1
src/components/svg/wrap/index.ts
View File

@@ -1,2 +1 @@
export * from './svg-keyboard-wrap.component';
export * from './animation';

2
src/components/svg/wrap/svg-keyboard-wrap.component.html
View File

@@ -1,5 +1,5 @@
<template ngIf="layers">
<layers [class.disabled]="popoverShown" (select)="selectLayer($event.oldIndex, $event.index)" [current]="currentLayer"></layers>
<layers [class.disabled]="popoverShown" (select)="selectLayer($event.index)" [current]="currentLayer"></layers>
<keyboard-slider [layers]="layers"
[currentLayer]="currentLayer"
(keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"

19
src/components/svg/wrap/svg-keyboard-wrap.component.ts
View File

@@ -93,11 +93,6 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
this.layers = this.keymap.layers;
this.currentLayer = 0;
this.popoverShown = false;
if (this.layers.length > 0) {
this.layers.forEach(element => element.animation = 'leftOut');
this.layers[0].animation = 'leftIn';
}
} else if (changes['keymap']) {
this.popoverShown = false;
}
@@ -262,20 +257,8 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
this.popoverShown = false;
}
selectLayer(oldIndex: number, index: number): void {
if (index > oldIndex) {
this.layers[oldIndex].animation = 'leftOut';
this.layers[index].animation = 'leftIn';
} else {
this.layers[oldIndex].animation = 'rightOut';
this.layers[index].animation = 'rightIn';
}
selectLayer(index: number): void {
this.currentLayer = index;
}
trackKeyboard(index: number) {
return index;
}
}