refactor: Layers/Keyboard component (#82)

src/components/svg/popover/index.ts

@@ -1 +0,0 @@
-export * from './svg-keyboard-popover.component';

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

@@ -1,4 +0,0 @@
-<svg-keyboard [moduleConfig]="moduleConfig"
-            (keyClick)="onKeyClick($event.moduleId, $event.keyId)">
-</svg-keyboard>
-<popover *ngIf="popoverEnabled" [defaultKeyAction]="popoverInitKeyAction" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>

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

@@ -1,6 +0,0 @@
-:host {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    position: relative;
-}

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

@@ -1,63 +0,0 @@
-import { Component, OnInit, Input} from '@angular/core';
-
-import {Module} from '../../../../config-serializer/config-items/Module';
-import {KeyAction} from '../../../../config-serializer/config-items/KeyAction';
-import {SvgKeyboardComponent} from '../keyboard';
-import {PopoverComponent} from '../../popover';
-
-@Component({
-    selector: 'svg-keyboard-popover',
-    template: require('./svg-keyboard-popover.component.html'),
-    styles: [require('./svg-keyboard-popover.component.scss')],
-    directives: [SvgKeyboardComponent, PopoverComponent]
-})
-export class SvgKeyboardPopoverComponent implements OnInit {
-    @Input() moduleConfig: Module[];
-
-    private popoverEnabled: boolean;
-    private keyEditConfig: { moduleId: number, keyId: number };
-    private popoverInitKeyAction: KeyAction;
-
-    constructor() {
-        this.keyEditConfig = {
-            moduleId: undefined,
-            keyId: undefined
-        };
-    }
-
-    ngOnInit() { }
-
-    onKeyClick(moduleId: number, keyId: number): void {
-        if (!this.popoverEnabled) {
-            this.keyEditConfig = {
-                moduleId,
-                keyId
-            };
-
-            let keyActionToEdit: KeyAction = this.moduleConfig[moduleId].keyActions.elements[keyId];
-            this.showPopover(keyActionToEdit);
-        }
-    }
-
-    onRemap(keyAction: KeyAction): void {
-        this.changeKeyAction(keyAction);
-        this.hidePopover();
-    }
-
-    showPopover(keyAction?: KeyAction): void {
-        this.popoverInitKeyAction = keyAction;
-        this.popoverEnabled = true;
-    }
-
-    hidePopover(): void {
-        this.popoverEnabled = false;
-        this.popoverInitKeyAction = undefined;
-    }
-
-    changeKeyAction(keyAction: KeyAction): void {
-        let moduleId = this.keyEditConfig.moduleId;
-        let keyId = this.keyEditConfig.keyId;
-        this.moduleConfig[moduleId].keyActions.elements[keyId] = keyAction;
-    }
-
-}

src/components/svg/wrap/animation.ts

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

src/components/svg/wrap/index.ts

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

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

@@ -0,0 +1,12 @@
+<template ngIf="layers">
+    <layers (selected)="selectLayer($event.oldIndex, $event.index)" [current]="currentLayer"></layers>
+    <div class="keyboard-slider" >
+        <svg-keyboard *ngFor="let layer of layers"
+                      [@layerState]="layer.animation"
+                      [moduleConfig]="layer.modules.elements"
+                      (keyClick)="onKeyClick($event.moduleId, $event.keyId)"
+        >
+        </svg-keyboard>
+    </div>
+    <popover *ngIf="popoverShown && popoverEnabled" [defaultKeyAction]="popoverInitKeyAction" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
+</template>

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

@@ -0,0 +1,21 @@
+:host {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: block;
+}
+
+svg-keyboard {
+    width: 95%;
+    max-width: 1400px;
+    position: absolute;
+    left: 0;
+    transform: translateX(-100%);
+}
+
+.keyboard-slider {
+    height: calc(100% - 145px);
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+}

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

@@ -0,0 +1,153 @@
+import {
+    Component, Input, OnInit, style,
+    state, animate, transition, trigger
+} from '@angular/core';
+
+import { KeyAction } from '../../../../config-serializer/config-items/KeyAction';
+import { Layer } from '../../../../config-serializer/config-items/Layer';
+
+@Component({
+    selector: 'svg-keyboard-wrap',
+    template: require('./svg-keyboard-wrap.component.html'),
+    styles: [require('./svg-keyboard-wrap.component.scss')],
+    animations: [
+        trigger('layerState', [
+            /* Right -> Left animation*/
+            state('leftIn', style({
+                transform: 'translateX(-50%)',
+                left: '50%'
+            })),
+            state('leftOut', style({
+                transform: 'translateX(-100%)',
+                left: '0'
+            })),
+            /* Right -> Left animation */
+            state('rightIn', style({
+                transform: 'translateX(-50%)',
+                left: '50%'
+            })),
+            state('rightOut', style({
+                transform: 'translateX(0%)',
+                left: '100%'
+            })),
+            /* Transitions */
+            transition('none => leftIn, leftOut => leftIn', [
+                style({
+                    opacity: 0,
+                    transform: 'translateX(0%)',
+                    left: '100%'
+                }),
+                style({
+                    opacity: 1
+                }),
+                animate('400ms ease-out')
+            ]),
+            transition('* => none', [
+                style({
+                    opacity: 0,
+                    transform: 'translateX(-100%)',
+                    left: '0'
+                }),
+                style({
+                    opacity: 1
+                })
+            ]),
+            transition('none => rightIn, rightOut => rightIn', [
+                style({
+                    opacity: 0,
+                    transform: 'translateX(-100%)',
+                    left: '0'
+                }),
+                style({
+                    opacity: 1
+                }),
+                animate('400ms ease-out')
+            ]),
+            transition(
+                'leftIn => leftOut,' +
+                'rightIn => rightOut,' +
+                'leftIn <=> rightOut,' +
+                'rightIn <=> leftOut',
+                animate('400ms ease-out')
+            )
+        ])
+    ]
+})
+export class SvgKeyboardWrapComponent implements OnInit {
+    @Input() layers: Layer[];
+    @Input() popoverEnabled: boolean = true;
+    @Input() animationEnabled: boolean = true;
+
+    private popoverShown: boolean;
+    private keyEditConfig: { moduleId: number, keyId: number };
+    private popoverInitKeyAction: KeyAction;
+    private currentLayer: number = 0;
+
+    constructor() {
+        this.keyEditConfig = {
+            moduleId: undefined,
+            keyId: undefined
+        };
+    }
+
+    ngOnInit() {
+        this.layers[0].animation = 'leftIn';
+    }
+
+    ngOnChanges() {
+        this.currentLayer = 0;
+        if (this.layers.length > 0) {
+            this.layers.forEach((element) => {
+                element.animation = 'none';
+
+                return element;
+            });
+            this.layers[0].animation = 'leftIn';
+        }
+    }
+
+    onKeyClick(moduleId: number, keyId: number): void {
+        if (!this.popoverShown) {
+            this.keyEditConfig = {
+                moduleId,
+                keyId
+            };
+
+            let keyActionToEdit: KeyAction = this.layers[this.currentLayer].modules.elements[moduleId].keyActions.elements[keyId];
+            this.showPopover(keyActionToEdit);
+        }
+    }
+
+    onRemap(keyAction: KeyAction): void {
+        this.changeKeyAction(keyAction);
+        this.hidePopover();
+    }
+
+    showPopover(keyAction?: KeyAction): void {
+        this.popoverInitKeyAction = keyAction;
+        this.popoverShown = true;
+    }
+
+    hidePopover(): void {
+        this.popoverShown = false;
+        this.popoverInitKeyAction = undefined;
+    }
+
+    changeKeyAction(keyAction: KeyAction): void {
+        let moduleId = this.keyEditConfig.moduleId;
+        let keyId = this.keyEditConfig.keyId;
+        this.layers[this.currentLayer].modules.elements[moduleId].keyActions.elements[keyId] = keyAction;
+    }
+
+    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';
+        }
+
+        this.currentLayer = index;
+    }
+}