refactor: Layers/Keyboard component (#82)

src/components/layers/index.ts

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

src/components/layers/layers.component.html

@@ -0,0 +1,16 @@
+<div class="text-center">
+    <span class="uhk__layer-switcher--wrapper" data-title="Layers: ">
+        <button #baseButton type="button" class="btn btn-default btn-lg btn-primary" (click)="selectLayer(0)">
+            Base
+        </button>
+        <button #modButton type="button" class="btn btn-default btn-lg" (click)="selectLayer(1)">
+            Mod
+        </button>
+        <button #fnButton type="button" class="btn btn-default btn-lg" (click)="selectLayer(2)">
+            Fn
+        </button>
+        <button #mouseButton type="button" class="btn btn-default btn-lg" (click)="selectLayer(3)">
+            Mouse
+        </button>
+    </span>
+</div>

src/components/layers/layers.component.scss

@@ -0,0 +1,27 @@
+:host {
+    display: block;
+}
+
+button {
+    margin: 2px;
+}
+
+.uhk {
+    &__layer-switcher {
+        &--wrapper {
+            position: relative;
+            margin-bottom: 2rem;
+
+            &:before {
+                content: attr(data-title);
+                display: inline-block;
+                position: absolute;
+                bottom: -0.3em;
+                right: 100%;
+                font-size: 2.4rem;
+                padding-right: 0.25em;
+                margin: 0;
+            }
+        }
+    }
+}

src/components/layers/layers.component.ts

@@ -0,0 +1,51 @@
+import {
+    Component, Output, EventEmitter, ElementRef, QueryList, ViewChildren, Renderer, Input
+} from '@angular/core';
+
+@Component({
+    selector: 'layers',
+    template: require('./layers.component.html'),
+    styles: [require('./layers.component.scss')]
+})
+export class LayersComponent {
+    @Input() current: number;
+    @Output() selected = new EventEmitter();
+
+    @ViewChildren('baseButton,modButton,fnButton,mouseButton')
+    buttonsQueryList: QueryList<ElementRef>;
+
+    private buttons: ElementRef[];
+    private selectedLayerIndex: number;
+
+    constructor(private renderer: Renderer) {
+        this.buttons = [];
+        this.selectedLayerIndex = 0;
+    }
+
+    ngOnChanges() {
+        if (this.buttons.length > 0 && this.current !== this.selectedLayerIndex) {
+            this.buttons.forEach((button: ElementRef) => {
+                this.renderer.setElementClass(button.nativeElement, 'btn-primary', false);
+            });
+            this.renderer.setElementClass(this.buttons[this.current].nativeElement, 'btn-primary', true);
+            this.selectedLayerIndex = 0;
+        }
+    }
+
+    selectLayer(index: number) {
+        if (index === this.selectedLayerIndex) {
+            return;
+        }
+
+        this.buttons = this.buttonsQueryList.toArray();
+        this.selected.emit({
+            oldIndex: this.selectedLayerIndex,
+            index: index
+        });
+
+        this.renderer.setElementClass(this.buttons[this.selectedLayerIndex].nativeElement, 'btn-primary', false);
+        this.renderer.setElementClass(this.buttons[index].nativeElement, 'btn-primary', true);
+
+        this.selectedLayerIndex = index;
+    }
+}