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

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;
}
}