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

Refactor: extract keyboard-slider

Browse Source
This commit is contained in:
Farkas József
2016-12-12 20:58:42 +01:00
parent 5f5bb0b266
commit a0d5a58f8b
9 changed files with 130 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/keyboard/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './slider';

1
src/components/keyboard/slider/index.ts Normal file
View File

@@ -0,0 +1 @@
export { KeyboardSliderComponent } from './keyboard-slider.component';

6
src/components/keyboard/slider/keyboard-slider.component.html Normal file
View File

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

After

Width:  |  Height:  |  Size: 304 B

8
src/components/keyboard/slider/keyboard-slider.component.scss Normal file
View File

@@ -0,0 +1,8 @@
svg-keyboard {
width: 95%;
max-width: 1400px;
position: absolute;
left: 0;
transform: translateX(-101%);
user-select: none;
}

101
src/components/keyboard/slider/keyboard-slider.component.ts Normal file
View File

@@ -0,0 +1,101 @@
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
OnChanges,
Output,
SimpleChanges,
animate,
keyframes,
state,
style,
transition,
trigger
} from '@angular/core';
import { Layer } from '../../../config-serializer/config-items/Layer';
@Component({
selector: 'keyboard-slider',
template: require('./keyboard-slider.component.html'),
styles: [require('./keyboard-slider.component.scss')],
changeDetection: ChangeDetectionStrategy.Default,
// We use 101%, because there was still a trace of the keyboard in the screen when animation was done
animations: [
trigger('layerState', [
state('leftIn, rightIn', style({
transform: 'translateX(-50%)',
left: '50%'
})),
state('leftOut', style({
transform: 'translateX(-101%)',
left: '0'
})),
state('rightOut', style({
transform: 'translateX(0)',
left: '101%'
})),
transition('leftOut => leftIn, rightOut => leftIn', [
animate('400ms ease-out', keyframes([
style({ transform: 'translateX(0%)', left: '101%', offset: 0 }),
style({ transform: 'translateX(-50%)', left: '50%', offset: 1 })
]))
]),
transition('leftIn => leftOut, rightIn => leftOut', [
animate('400ms ease-out', keyframes([
style({ transform: 'translateX(-50%)', left: '50%', offset: 0 }),
style({ transform: 'translateX(-101%)', left: '0%', offset: 1 })
]))
]),
transition('* => rightIn', [
animate('400ms ease-out', keyframes([
style({ transform: 'translateX(-101%)', left: '0%', offset: 0 }),
style({ transform: 'translateX(-50%)', left: '50%', offset: 1 })
]))
]),
transition('* => rightOut', [
animate('400ms ease-out', keyframes([
style({ transform: 'translateX(-50%)', left: '50%', offset: 0 }),
style({ transform: 'translateX(0%)', left: '101%', offset: 1 })
]))
]),
transition(':leave', [
animate('2000ms ease-out', keyframes([
style({ opacity: 1, offset: 0 }),
style({ opacity: 0, offset: 1 })
]))
])
])
]
})
export class KeyboardSliderComponent implements OnChanges {
@Input() layers: Layer[];
@Input() currentLayer: number;
@Output() keyClick = new EventEmitter();
@Output() keyHover = new EventEmitter();
ngOnChanges(changes: SimpleChanges) {
const layerChange = changes['currentLayer'];
if (layerChange) {
const prevValue = layerChange.isFirstChange() ? layerChange.currentValue : layerChange.previousValue;
this.onLayerChange(prevValue, layerChange.currentValue);
}
}
trackKeyboard(index: number) {
return index;
}
onLayerChange(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';
}
}
}

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

@@ -1,14 +1,9 @@
<template ngIf="layers">
<layers [class.disabled]="popoverShown" (select)="selectLayer($event.oldIndex, $event.index)" [current]="currentLayer"></layers>
<div class="keyboard-slider">
<svg-keyboard *ngFor="let layer of layers; trackBy: trackKeyboard"
[@layerState]="layer.animation"
[moduleConfig]="layer.modules"
(keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"
(keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"
>
</svg-keyboard>
</div>
<keyboard-slider [layers]="layers"
[currentLayer]="currentLayer"
(keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"
(keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"></keyboard-slider>
<popover [visible]="popoverShown" [keyPosition]="keyPosition" [wrapPosition]="wrapPosition" [defaultKeyAction]="popoverInitKeyAction" [currentKeymap]="keymap" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
<div class="tooltip bottom"
[class.in]="tooltipData.show"

13
src/components/svg/wrap/svg-keyboard-wrap.component.scss
View File

@@ -7,22 +7,15 @@
}
}
svg-keyboard {
width: 95%;
max-width: 1400px;
position: absolute;
left: 0;
transform: translateX(-101%);
user-select: none;
}
.keyboard-slider {
keyboard-slider {
display: block;
position: relative;
overflow: hidden;
/* TODO create dynamic */
height: 500px;
margin-top: 30px;
}
.tooltip {
position: fixed;
transform: translate(-50%, -6px);

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

@@ -7,13 +7,7 @@ import {
Input,
OnChanges,
OnInit,
SimpleChanges,
animate,
keyframes,
state,
style,
transition,
trigger
SimpleChanges
} from '@angular/core';
import { Store } from '@ngrx/store';
@@ -42,48 +36,7 @@ import { KeymapActions } from '../../../store/actions';
selector: 'svg-keyboard-wrap',
template: require('./svg-keyboard-wrap.component.html'),
styles: [require('./svg-keyboard-wrap.component.scss')],
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', [
state('leftIn, rightIn', style({
transform: 'translateX(-50%)',
left: '50%'
})),
state('leftOut', style({
transform: 'translateX(-101%)',
left: '0'
})),
state('rightOut', style({
transform: 'translateX(0)',
left: '101%'
})),
transition('leftOut => leftIn, rightOut => leftIn', [
animate('400ms ease-out', keyframes([
style({ transform: 'translateX(0%)', left: '101%', offset: 0 }),
style({ transform: 'translateX(-50%)', left: '50%', offset: 1 })
]))
]),
transition('leftIn => leftOut, rightIn => leftOut', [
animate('400ms ease-out', keyframes([
style({ transform: 'translateX(-50%)', left: '50%', offset: 0 }),
style({ transform: 'translateX(-101%)', left: '0%', offset: 1 })
]))
]),
transition('* => rightIn', [
animate('400ms ease-out', keyframes([
style({ transform: 'translateX(-101%)', left: '0%', offset: 0 }),
style({ transform: 'translateX(-50%)', left: '50%', offset: 1 })
]))
]),
transition('* => rightOut', [
animate('400ms ease-out', keyframes([
style({ transform: 'translateX(-50%)', left: '50%', offset: 0 }),
style({ transform: 'translateX(0%)', left: '101%', offset: 1 })
]))
])
])
]
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
@Input() keymap: Keymap;
@@ -324,4 +277,5 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
trackKeyboard(index: number) {
return index;
}
}