Refactor: extract keyboard-slider

src/app.module.ts

@@ -11,6 +11,7 @@ import { DragulaModule } from 'ng2-dragula/ng2-dragula';
 import { Select2Module } from 'ng2-select2/ng2-select2';
 
 import { AddOnComponent } from './components/add-on';
+import { KeyboardSliderComponent } from './components/keyboard/slider';
 import { KeymapAddComponent, KeymapEditComponent, KeymapHeaderComponent } from './components/keymap';
 import { LayersComponent } from './components/layers';
 import {
@@ -57,7 +58,7 @@ import {
 } from './components/svg/keys';
 import { SvgModuleComponent } from './components/svg/module';
 import { SvgKeyboardWrapComponent } from './components/svg/wrap';
-import { MainAppComponent, appRoutingProviders, routing }  from './main-app';
+import { MainAppComponent, appRoutingProviders, routing } from './main-app';
 
 import { CancelableDirective } from './directives';
 
@@ -126,6 +127,7 @@ const storeConfig = {
         MacroNotFoundComponent,
         AddOnComponent,
         SettingsComponent,
+        KeyboardSliderComponent,
         CancelableDirective
     ],
     imports: [

src/components/keyboard/index.ts

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

src/components/keyboard/slider/index.ts

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

src/components/keyboard/slider/keyboard-slider.component.html

@@ -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>

src/components/keyboard/slider/keyboard-slider.component.scss

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

src/components/keyboard/slider/keyboard-slider.component.ts

@@ -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';
+        }
+
+    }
+
+}

src/components/svg/wrap/svg-keyboard-wrap.component.html

@@ -1,14 +1,9 @@
 <template ngIf="layers">
     <layers [class.disabled]="popoverShown" (select)="selectLayer($event.oldIndex, $event.index)" [current]="currentLayer"></layers>
-    <div class="keyboard-slider">
+    <keyboard-slider [layers]="layers"
-        <svg-keyboard *ngFor="let layer of layers; trackBy: trackKeyboard"
+                     [currentLayer]="currentLayer"
-                      [@layerState]="layer.animation"
+                     (keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"
-                      [moduleConfig]="layer.modules"
+                     (keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"></keyboard-slider>
-                      (keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"
-                      (keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"
-        >
-        </svg-keyboard>
-    </div>
     <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"

src/components/svg/wrap/svg-keyboard-wrap.component.scss

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

src/components/svg/wrap/svg-keyboard-wrap.component.ts

@@ -7,13 +7,7 @@ import {
     Input,
     OnChanges,
     OnInit,
-    SimpleChanges,
+    SimpleChanges
-    animate,
-    keyframes,
-    state,
-    style,
-    transition,
-    trigger
 } 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,
+    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 })
-                ]))
-            ])
-        ])
-    ]
 })
 export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     @Input() keymap: Keymap;
@@ -324,4 +277,5 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     trackKeyboard(index: number) {
         return index;
     }
+
 }