85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
import { Component, OnInit } from '@angular/core';
|
|
|
|
import {NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
|
|
|
|
import { LayerName, SwitchLayerAction } from '../../../../config-serializer/config-items/SwitchLayerAction';
|
|
import { KeyActionSaver } from '../key-action-saver';
|
|
|
|
import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
|
|
import {OptionData} from 'ng2-select2/dist/select2';
|
|
|
|
@Component({
|
|
moduleId: module.id,
|
|
selector: 'layer-tab',
|
|
template:
|
|
`
|
|
<select2 [data]="toggleData" (valueChanged)="toggleChanged($event)"></select2>
|
|
<span>the</span>
|
|
<select2 [data]="layerData" (valueChanged)="layerChanged($event)"></select2>
|
|
<span [ngSwitch]="toggle">
|
|
<template ngSwitchCase="true">layer by pressing this key.</template>
|
|
<template ngSwitchDefault="false">layer by holding this key.</template>
|
|
</span>
|
|
`,
|
|
styles: [require('./layer-tab.component.scss')],
|
|
directives: [SELECT2_DIRECTIVES, NgSwitch, NgSwitchCase, NgSwitchDefault]
|
|
})
|
|
export class LayerTabComponent implements OnInit, KeyActionSaver {
|
|
private toggle: boolean;
|
|
private layer: LayerName;
|
|
|
|
private toggleData: Array<OptionData> = [
|
|
{
|
|
id: 'false',
|
|
text: 'Activate'
|
|
},
|
|
{
|
|
id: 'true',
|
|
text: 'Toggle'
|
|
}
|
|
];
|
|
|
|
private layerData: Array<OptionData> = [
|
|
{
|
|
id: '0',
|
|
text: 'Mod'
|
|
},
|
|
{
|
|
id: '1',
|
|
text: 'Fn'
|
|
},
|
|
{
|
|
id: '2',
|
|
text: 'Mouse'
|
|
}
|
|
];
|
|
|
|
constructor() {
|
|
this.toggle = false;
|
|
this.layer = LayerName.mod;
|
|
}
|
|
|
|
ngOnInit() { }
|
|
|
|
keyActionValid(): boolean {
|
|
return true;
|
|
}
|
|
|
|
toKeyAction(): SwitchLayerAction {
|
|
let keyAction = new SwitchLayerAction();
|
|
keyAction.isLayerToggleable = this.toggle;
|
|
keyAction.layer = this.layer;
|
|
return keyAction;
|
|
}
|
|
|
|
// TODO: change to the correct type when the wrapper has added it.
|
|
private toggleChanged(event: any) {
|
|
this.toggle = event.value;
|
|
}
|
|
|
|
// TODO: change to the correct type when the wrapper has added it.
|
|
private layerChanged(event: any) {
|
|
this.layer = +event.value;
|
|
}
|
|
}
|