uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Select2 implementation Popover (#59)

Browse Source 
Closes #45
This commit is contained in:
Nejc Zdovc
2016-06-21 18:44:51 +02:00
committed by József Farkas
parent 9726139e7e
commit 99ac66f87a
16 changed files with 519 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -5,3 +5,5 @@ typings
build
bundle
css
.idea
*.iml

3
index.html
View File

@@ -6,9 +6,9 @@
<title>Ultimate Hacking Keyboard Configurator</title>
<link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="node_modules/select2/dist/css/select2.min.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<link href="css/macro.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script>
// This js function is here to make sure it loads before any iframe content on the page.
@@ -174,6 +174,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/sortablejs/Sortable.js"></script>
<script src="node_modules/handlebars/dist/handlebars.js"></script>
<script src="node_modules/select2/dist/js/select2.min.js"></script>
<script src="app.js"></script>
<script src="macro.js"></script>
<script src="build/uhk.js"></script>

1
package.json
View File

@@ -38,6 +38,7 @@
"handlebars": "^4.0.5",
"jquery": "^2.2.2",
"json-loader": "^0.5.4",
"ng2-select2": "0.3.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"select2": "^4.0.3",

12
sass/style.scss
View File

@@ -46,6 +46,10 @@
z-index: 100000;
}
.nav-tabs > li > a {
cursor: pointer;
}
.scancode--searchterm {
color: lightgray;
float: right;
@@ -187,3 +191,11 @@
}
}
}
.select2-results {
text-align: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 26px !important;
}

9
src/components/popover/tab/keymap-tab.component.scss
View File

@@ -1,15 +1,18 @@
:host {
display: flex;
flex-direction: column;
margin-top: 2px;
> div {
display: flex;
margin-top: 2px;
b {
padding-right: 10px;
display: flex;
align-items: center;
margin-right: 7px;
}
select {
select2 {
flex: 1;
}
}

28
src/components/popover/tab/keymap-tab.component.ts
View File

@@ -6,6 +6,9 @@ import {SvgKeyboardComponent} from '../../svg-keyboard.component';
import {KeyActionSaver} from '../key-action-saver';
import {SwitchKeymapAction} from '../../../../config-serializer/config-items/SwitchKeymapAction';
import {OptionData} from 'ng2-select2/dist/select2';
import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
@Component({
moduleId: module.id,
selector: 'keymap-tab',
@@ -13,10 +16,7 @@ import {SwitchKeymapAction} from '../../../../config-serializer/config-items/Swi
`
<div>
<b>Switch to keymap:</b>
<select class="layout-switcher" [(ngModel)]="selectedKeymapIndex">
<option [ngValue]="-1"> Select keymap </option>
<option *ngFor="let keymap of keymaps; let index=index" [ngValue]="index"> {{ keymap.name }} </option>
</select>
<select2 [data]="keymapOptions" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
</div>
<div>
<div>
@@ -28,11 +28,12 @@ import {SwitchKeymapAction} from '../../../../config-serializer/config-items/Swi
</div>
`,
styles: [require('./keymap-tab.component.scss')],
directives: [SvgKeyboardComponent]
directives: [SvgKeyboardComponent, SELECT2_DIRECTIVES]
})
export class KeymapTabComponent implements OnInit, KeyActionSaver {
private keymaps: Keymap[];
private keymapOptions: Array<OptionData> = [];
private selectedKeymapIndex: number;
constructor(private uhkConfigurationService: UhkConfigurationService) {
@@ -42,6 +43,22 @@ export class KeymapTabComponent implements OnInit, KeyActionSaver {
ngOnInit() {
this.keymaps = this.uhkConfigurationService.getUhkConfiguration().keymaps.elements;
this.keymapOptions.push({
id: '-1',
text: 'Switch to keymap'
});
this.keymapOptions = this.keymapOptions.concat(this.keymaps.map(function(keymap: Keymap): OptionData {
return {
id: keymap.id.toString(),
text: keymap.name
};
}));
}
onChange(event) {
this.selectedKeymapIndex = parseInt(event.value, 10);
}
keyActionValid(): boolean {
@@ -56,5 +73,4 @@ export class KeymapTabComponent implements OnInit, KeyActionSaver {
keymapAction.keymapId = this.keymaps[this.selectedKeymapIndex].id;
return keymapAction;
}
}

2
src/components/popover/tab/keypress-tab.component.scss
View File

@@ -8,6 +8,8 @@
b {
margin-right: 0.6em;
align-items: center;
display: flex;
}
.secondary-role {

59
src/components/popover/tab/keypress-tab.component.ts
View File

@@ -10,6 +10,9 @@ import { KeyActionSaver } from '../key-action-saver';
import {IconComponent} from '../widgets/icon.component';
import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
import {OptionData} from 'ng2-select2/dist/select2';
@Component({
moduleId: module.id,
selector: 'keypress-tab',
@@ -17,13 +20,7 @@ import {IconComponent} from '../widgets/icon.component';
`
<div class="scancode-options" style="margin-bottom:10px; margin-top:2px">
<b class="setting-label" style="position:relative; top:2px;">Scancode:</b>
<select class="scancode" style="width: 200px">
<optgroup *ngFor="let group of scancodeGroups" [label]="group.groupName">
<option *ngFor="let item of group.groupValues">
{{ item.label }}
</option>
</optgroup>
</select>
<select2 [data]="scanCodeGroups" [templateResult]="scanCodeTemplateResult" [width]="200"></select2>
<capture-keystroke-button></capture-keystroke-button>
</div>
<div class="scancode-options">
@@ -43,29 +40,12 @@ import {IconComponent} from '../widgets/icon.component';
</div>
<div class="long-press-container">
<b class="setting-label" style="position:relative;">Long press action:</b>
<select class="secondary-role">
<option> None </option>
<optgroup label="Modifiers">
<option> LShift </option>
<option> LCtrl </option>
<option> LSuper </option>
<option> LAlt </option>
<option> RShift </option>
<option> RCtrl </option>
<option> RSuper </option>
<option> RAlt </option>
</optgroup>
<optgroup label="Layer switcher">
<option> Mod </option>
<option> Mouse </option>
<option> Fn </option>
</optgroup>
</select>
<select2 [data]="longPressGroups" [width]="140"></select2>
<icon name="question-circle" title="This action happens when the key is being held along with another key."></icon>
</div>
`,
styles: [require('./keypress-tab.component.scss')],
directives: [CaptureKeystrokeButtonComponent, IconComponent]
directives: [CaptureKeystrokeButtonComponent, IconComponent, SELECT2_DIRECTIVES]
})
export class KeypressTabComponent implements OnInit, KeyActionSaver {
private leftModifiers: string[];
@@ -74,15 +54,14 @@ export class KeypressTabComponent implements OnInit, KeyActionSaver {
private leftModifierSelects: boolean[];
private rightModifierSelects: boolean[];
private scancodeGroups: {
groupName: string;
groupValues: any[];
}[];
private scanCodeGroups: Array<OptionData>;
private longPressGroups: Array<OptionData>;
constructor() {
this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt'];
this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt'];
this.scancodeGroups = require('json!./scancodes.json');
this.scanCodeGroups = require('json!./scancodes.json');
this.longPressGroups = require('json!./longPress.json');
}
ngOnInit() { }
@@ -98,4 +77,22 @@ export class KeypressTabComponent implements OnInit, KeyActionSaver {
toKeyAction(): KeyAction {
return undefined;
}
scanCodeTemplateResult: Function = (state: any) => {
if (!state.id) {
return state.text;
}
if (state.additional && state.additional.explanation) {
return jQuery(
'<span class="select2-item">'
+ state.text
+ '<span class="scancode--searchterm"> '
+ state.additional.explanation
+ '</span></span>'
);
} else {
return jQuery('<span class="select2-item">' + state.text + '</span>');
}
}
}

6
src/components/popover/tab/layer-tab.component.scss
View File

@@ -1,7 +1,11 @@
:host {
display: flex;
margin: 0 -5px;
span {
> span,
> select2 {
margin: 0 5px;
display: flex;
align-items: center;
}
}

57
src/components/popover/tab/layer-tab.component.ts
View File

@@ -1,33 +1,59 @@
import { Component, OnInit } from '@angular/core';
import {NgSwitch, NgSwitchWhen, 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:
`
<select [(ngModel)]="toggle">
<option [ngValue]="false"> Activate </option>
<option [ngValue]="true"> Toggle </option>
</select>
<select2 [data]="toggleData" (valueChanged)="toggleChanged($event)"></select2>
<span>the</span>
<select [(ngModel)]="layer">
<option [ngValue]="0"> Mod </option>
<option [ngValue]="1"> Fn </option>
<option [ngValue]="2"> Mouse </option>
</select>
<span>
layer by holding this key.
<select2 [data]="layerData" (valueChanged)="layerChanged($event)"></select2>
<span [ngSwitch]="toggle">
<template ngSwitchWhen="true">layer by pressing this key.</template>
<template ngSwitchDefault="false">layer by holding this key.</template>
</span>
`,
styles: [require('./layer-tab.component.scss')]
styles: [require('./layer-tab.component.scss')],
directives: [SELECT2_DIRECTIVES, NgSwitch, NgSwitchWhen, 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;
@@ -46,4 +72,11 @@ export class LayerTabComponent implements OnInit, KeyActionSaver {
return keyAction;
}
private toggleChanged(event) {
this.toggle = event.value;
}
private layerChanged(event) {
this.layer = event.value;
}
}

60
src/components/popover/tab/longPress.json Normal file
View File

@@ -0,0 +1,60 @@
[
{
"id": "none",
"text": "None"
},
{
"text": "Modifiers",
"children": [
{
"id": "LShift",
"text": "LShift"
},
{
"id": "LCtrl",
"text": "LCtrl"
},
{
"id": "LSuper",
"text": "LSuper"
},
{
"id": "LAlt",
"text": "LAlt"
},
{
"id": "RShift",
"text": "RShift"
},
{
"id": "RCtrl",
"text": "RCtrl"
},
{
"id": "RSuper",
"text": "RSuper"
},
{
"id": "RAlt",
"text": "RAlt"
}
]
},
{
"text": "Layer switcher",
"children": [
{
"id": "Mod",
"text": "Mod"
},
{
"id": "Mouse",
"text": "Mouse"
},
{
"id": "Fn",
"text": "Fn"
}
]
}
]

4
src/components/popover/tab/macro-tab.component.scss
View File

@@ -7,10 +7,12 @@
margin-top: 2px;
b {
display: flex;
align-items: center;
margin-right: 7px;
}
select {
select2 {
flex: 1;
}
}

31
src/components/popover/tab/macro-tab.component.ts
View File

@@ -7,17 +7,16 @@ import { PlayMacroAction } from '../../../../config-serializer/config-items/Play
import { KeyActionSaver } from '../key-action-saver';
import { MacroItemComponent } from './macro-item.component';
import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
import {OptionData} from 'ng2-select2/dist/select2';
@Component({
moduleId: module.id,
selector: 'macro-tab',
template:
`
template: `
<div class="macro-selector">
<b> Play macro: </b>
<select [(ngModel)]="selectedMacroIndex">
<option [ngValue]="-1"> Select macro </option>
<option *ngFor="let macro of macros; let index=index" [ngValue]="index"> {{ macro.name }} </option>
</select>
<select2 [data]="macrosOptions" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
</div>
<div class="macro-action-container">
<template [ngIf]="selectedMacroIndex >= 0">
@@ -28,11 +27,12 @@ import { MacroItemComponent } from './macro-item.component';
</div>
`,
styles: [require('./macro-tab.component.scss')],
directives: [MacroItemComponent]
directives: [MacroItemComponent, SELECT2_DIRECTIVES]
})
export class MacroTabComponent implements OnInit, KeyActionSaver {
private macros: Macro[];
private macrosOptions: Array<OptionData> = [];
private selectedMacroIndex: number;
constructor(private uhkConfigurationService: UhkConfigurationService) {
@@ -42,6 +42,22 @@ export class MacroTabComponent implements OnInit, KeyActionSaver {
ngOnInit() {
this.macros = this.uhkConfigurationService.getUhkConfiguration().macros.elements;
this.macrosOptions.push({
id: '-1',
text: 'Select macro'
});
this.macrosOptions = this.macrosOptions.concat(this.macros.map(function(macro: Macro): OptionData {
return {
id: macro.id.toString(),
text: macro.name
};
}));
}
onChange(event) {
this.selectedMacroIndex = event.value;
}
keyActionValid(): boolean {
@@ -52,6 +68,7 @@ export class MacroTabComponent implements OnInit, KeyActionSaver {
if (!this.keyActionValid()) {
throw new Error('KeyAction is not valid. No selected macro!');
}
let keymapAction = new PlayMacroAction();
keymapAction.macroId = this.macros[this.selectedMacroIndex].id;
return keymapAction;

1
src/components/popover/tab/mouse-tab.component.ts
View File

@@ -102,7 +102,6 @@ import {MouseAction, MouseActionParam} from '../../../../config-serializer/confi
directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
})
export class MouseTabComponent implements OnInit, KeyActionSaver {
private MouseActionParam = MouseActionParam;
private mouseActionParam: MouseActionParam;
private selectedIndex: number;
private selectedButton: HTMLButtonElement;

636
src/components/popover/tab/scancodes.json
View File

File diff suppressed because it is too large Load Diff

5
typings.json
View File

@@ -1,6 +1,7 @@
{
"globalDependencies": {
"node": "registry:dt/node#4.0.0+20160319033040",
"es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
"es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
"jquery": "registry:dt/jquery#1.10.0+20160417213236",
"node": "registry:dt/node#4.0.0+20160319033040"
}
}