Seperate electron and web target building

shared/src/components/keyboard/index.ts

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

shared/src/components/keyboard/slider/index.ts

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

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

@@ -0,0 +1,10 @@
+<svg-keyboard *ngFor="let layer of layers; let index = index; trackBy: trackKeyboard"
+    [@layerState]="layerAnimationState[index]"
+    [moduleConfig]="layer.modules"
+    [keybindAnimationEnabled]="keybindAnimationEnabled"
+    [capturingEnabled]="capturingEnabled"
+    (keyClick)="keyClick.emit($event)"
+    (keyHover)="keyHover.emit($event)"
+    (capture)="capture.emit($event)"
+>
+</svg-keyboard>

shared/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;
+}

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

@@ -0,0 +1,116 @@
+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';
+
+type AnimationKeyboard =
+    'leftIn' |
+    'leftOut' |
+    'rightIn' |
+    'rightOut';
+
+@Component({
+    selector: 'keyboard-slider',
+    template: require('./keyboard-slider.component.html'),
+    styles: [require('./keyboard-slider.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 })
+                ]))
+            ]),
+            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;
+    @Input() keybindAnimationEnabled: boolean;
+    @Input() capturingEnabled: boolean;
+    @Output() keyClick = new EventEmitter();
+    @Output() keyHover = new EventEmitter();
+    @Output() capture = 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;
+            this.onLayerChange(prevValue, layerChange.currentValue);
+        }
+    }
+
+    trackKeyboard(index: number) {
+        return index;
+    }
+
+    onLayerChange(oldIndex: number, index: number): void {
+        if (index > oldIndex) {
+            this.layerAnimationState[oldIndex] = 'leftOut';
+            this.layerAnimationState[index] = 'leftIn';
+        } else {
+            this.layerAnimationState[oldIndex] = 'rightOut';
+            this.layerAnimationState[index] = 'rightIn';
+        }
+
+    }
+
+}