refactor: Layers (#85)

src/components/layers/layers.component.html

@@ -1,16 +1,8 @@
 <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 type="button" class="btn btn-default btn-lg" *ngFor="let button of buttons; let index = index" (click)="selectLayer(index)"
+            [class.btn-primary]="index === current">
+            {{ button }}
         </button>
     </span>
 </div>

src/components/layers/layers.component.ts

@@ -1,6 +1,4 @@
-import {
-    Component, Output, EventEmitter, ElementRef, QueryList, ViewChildren, Renderer, Input
-} from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
     selector: 'layers',
@@ -9,43 +7,25 @@ import {
 })
 export class LayersComponent {
     @Input() current: number;
-    @Output() selected = new EventEmitter();
+    @Output() select = new EventEmitter();
 
-    @ViewChildren('baseButton,modButton,fnButton,mouseButton')
-    buttonsQueryList: QueryList<ElementRef>;
+    private buttons: string[];
 
-    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;
-        }
+    constructor() {
+        this.buttons = ['Base', 'Mod', 'Fn', 'Mouse'];
+        this.current = 0;
     }
 
     selectLayer(index: number) {
-        if (index === this.selectedLayerIndex) {
+        if (this.current === index) {
             return;
         }
 
-        this.buttons = this.buttonsQueryList.toArray();
-        this.selected.emit({
-            oldIndex: this.selectedLayerIndex,
+        this.select.emit({
+            oldIndex: this.current,
             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;
+        this.current = index;
     }
 }

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

@@ -1,5 +1,5 @@
 <template ngIf="layers">
-    <layers (selected)="selectLayer($event.oldIndex, $event.index)" [current]="currentLayer"></layers>
+    <layers (select)="selectLayer($event.oldIndex, $event.index)" [current]="currentLayer"></layers>
     <div class="keyboard-slider" >
         <svg-keyboard *ngFor="let layer of layers"
                       [@layerState]="layer.animation"