Add keymap page (#80)

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

@@ -1,12 +1,25 @@
 <template ngIf="layers">
     <layers (select)="selectLayer($event.oldIndex, $event.index)" [current]="currentLayer"></layers>
-    <div class="keyboard-slider" >
+    <div class="keyboard-slider" (mouseout)="hideTooltip($event)">
         <svg-keyboard *ngFor="let layer of layers"
                       [@layerState]="layer.animation"
                       [moduleConfig]="layer.modules.elements"
                       (keyClick)="onKeyClick($event.moduleId, $event.keyId)"
+                      (keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"
         >
         </svg-keyboard>
     </div>
-    <popover *ngIf="popoverShown && popoverEnabled" [defaultKeyAction]="popoverInitKeyAction" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
+    <popover *ngIf="popoverShown" [defaultKeyAction]="popoverInitKeyAction" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
+    <div class="tooltip top fade" role="tooltip"
+         [class.in]="tooltipData.shown"
+         [style.top.px]="tooltipData.posTop"
+         [style.left.px]="tooltipData.posLeft"
+    >
+        <div class="tooltip-arrow"></div>
+        <div class="tooltip-inner">
+            <p *ngFor="let item of tooltipData.content">
+                {{ item.name }}: {{ item.value }}
+            </p>
+        </div>
+    </div>
 </template>

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

@@ -10,12 +10,42 @@ svg-keyboard {
     max-width: 1400px;
     position: absolute;
     left: 0;
-    transform: translateX(-100%);
+    transform: translateX(-101%);
 }
 
 .keyboard-slider {
-    height: calc(100% - 145px);
     position: relative;
     overflow: hidden;
-    width: 100%;
+    /* TODO create dynamic */
+    height: 500px;
+    margin-top: 30px;
+}
+.tooltip {
+    position: fixed;
+    transform: translate(-50%, -85%);
+
+    &-inner {
+        background: #fff;
+        color: #000;
+        box-shadow: 0 1px 5px #000;
+        text-align: left;
+
+        p {
+            margin-bottom: 2px;
+
+            &:last-of-type {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    &.top {
+        .tooltip-arrow {
+            border-top-color: #fff;
+        }
+    }
+
+    &.in {
+        opacity: 1;
+    }
 }

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

@@ -1,15 +1,17 @@
 import {
     Component, Input, OnInit, style,
-    state, animate, transition, trigger
+    state, animate, transition, trigger, OnChanges
 } from '@angular/core';
 
 import { KeyAction } from '../../../config-serializer/config-items/KeyAction';
 import { Layer } from '../../../config-serializer/config-items/Layer';
+import { NoneAction } from '../../../config-serializer/config-items/NoneAction';
 
 @Component({
     selector: 'svg-keyboard-wrap',
     template: require('./svg-keyboard-wrap.component.html'),
     styles: [require('./svg-keyboard-wrap.component.scss')],
+    // We use 101%, because there was still a trace of the keyboard in the screen when animation was done
     animations: [
         trigger('layerState', [
             /* Right -> Left animation*/
@@ -18,7 +20,7 @@ import { Layer } from '../../../config-serializer/config-items/Layer';
                 left: '50%'
             })),
             state('leftOut', style({
-                transform: 'translateX(-100%)',
+                transform: 'translateX(-101%)',
                 left: '0'
             })),
             /* Right -> Left animation */
@@ -28,14 +30,14 @@ import { Layer } from '../../../config-serializer/config-items/Layer';
             })),
             state('rightOut', style({
                 transform: 'translateX(0%)',
-                left: '100%'
+                left: '101%'
             })),
             /* Transitions */
             transition('none => leftIn, leftOut => leftIn', [
                 style({
                     opacity: 0,
                     transform: 'translateX(0%)',
-                    left: '100%'
+                    left: '101%'
                 }),
                 style({
                     opacity: 1
@@ -45,7 +47,7 @@ import { Layer } from '../../../config-serializer/config-items/Layer';
             transition('* => none', [
                 style({
                     opacity: 0,
-                    transform: 'translateX(-100%)',
+                    transform: 'translateX(-101%)',
                     left: '0'
                 }),
                 style({
@@ -55,7 +57,7 @@ import { Layer } from '../../../config-serializer/config-items/Layer';
             transition('none => rightIn, rightOut => rightIn', [
                 style({
                     opacity: 0,
-                    transform: 'translateX(-100%)',
+                    transform: 'translateX(-101%)',
                     left: '0'
                 }),
                 style({
@@ -73,21 +75,29 @@ import { Layer } from '../../../config-serializer/config-items/Layer';
         ])
     ]
 })
-export class SvgKeyboardWrapComponent implements OnInit {
+export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     @Input() layers: Layer[];
     @Input() popoverEnabled: boolean = true;
-    @Input() animationEnabled: boolean = true;
+    @Input() tooltipEnabled: boolean = false;
 
     private popoverShown: boolean;
     private keyEditConfig: { moduleId: number, keyId: number };
     private popoverInitKeyAction: KeyAction;
     private currentLayer: number = 0;
+    private tooltipData: { posTop: number, posLeft: number, content: {name: string, value: string}[], shown: boolean };
 
     constructor() {
         this.keyEditConfig = {
             moduleId: undefined,
             keyId: undefined
         };
+
+        this.tooltipData = {
+            posTop: 0,
+            posLeft: 0,
+            content: [],
+            shown: false
+        };
     }
 
     ngOnInit() {
@@ -107,7 +117,7 @@ export class SvgKeyboardWrapComponent implements OnInit {
     }
 
     onKeyClick(moduleId: number, keyId: number): void {
-        if (!this.popoverShown) {
+        if (!this.popoverShown && this.popoverEnabled) {
             this.keyEditConfig = {
                 moduleId,
                 keyId
@@ -118,6 +128,18 @@ export class SvgKeyboardWrapComponent implements OnInit {
         }
     }
 
+    onKeyHover(moduleId: number, event: MouseEvent, over: boolean, keyId: number): void {
+        let keyActionToEdit: KeyAction = this.layers[this.currentLayer].modules.elements[moduleId].keyActions.elements[keyId];
+
+        if (this.tooltipEnabled) {
+            if (over) {
+                this.showTooltip(keyActionToEdit, event);
+            } else {
+                this.hideTooltip(event);
+            }
+        }
+    }
+
     onRemap(keyAction: KeyAction): void {
         this.changeKeyAction(keyAction);
         this.hidePopover();
@@ -128,6 +150,56 @@ export class SvgKeyboardWrapComponent implements OnInit {
         this.popoverShown = true;
     }
 
+    showTooltip(keyAction: KeyAction, event: MouseEvent): void {
+
+        if (keyAction instanceof NoneAction || keyAction === undefined) {
+            return;
+        }
+
+        let el: Element = event.target as Element || event.srcElement;
+        let position: ClientRect = el.getBoundingClientRect();
+        let posLeft: number = this.tooltipData.posLeft;
+        let posTop: number = this.tooltipData.posTop;
+
+        if (el.tagName === 'rect') {
+            posLeft = position.left + (position.width / 2);
+            posTop = position.top;
+        }
+
+        // TODO connect with real data
+        let dummyData = [
+            {
+                name: 'Key action',
+                value: 'o'
+            },
+            {
+                name: 'Scancode',
+                value: '55'
+            }
+        ];
+
+        this.tooltipData = {
+            posLeft: posLeft,
+            posTop:  posTop,
+            content: dummyData,
+            shown: true
+        };
+    }
+
+    hideTooltip(event: MouseEvent) {
+        let target: HTMLElement = event.relatedTarget as HTMLElement;
+        if (!target) {
+            this.tooltipData.shown = false;
+            return;
+        }
+
+        // Check if we are hovering tooltip
+        let list: DOMTokenList = target.classList;
+        if (!list.contains('tooltip') && !list.contains('tooltip-inner')) {
+            this.tooltipData.shown = false;
+        }
+    }
+
     hidePopover(): void {
         this.popoverShown = false;
         this.popoverInitKeyAction = undefined;