Select2 implementation Popover (#59)

Closes #45

.gitignore

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

index.html

@@ -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>

package.json

@@ -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",

sass/style.scss

@@ -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;
+}

src/components/popover/tab/keymap-tab.component.scss

@@ -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;
         }
     }

src/components/popover/tab/keymap-tab.component.ts

@@ -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">
+            <select2 [data]="keymapOptions" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
-                <option [ngValue]="-1"> Select keymap </option>
-                <option *ngFor="let keymap of keymaps; let index=index" [ngValue]="index"> {{ keymap.name }} </option>
-            </select>
         </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;
     }
-
 }

src/components/popover/tab/keypress-tab.component.scss

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

src/components/popover/tab/keypress-tab.component.ts

@@ -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">
+            <select2 [data]="scanCodeGroups" [templateResult]="scanCodeTemplateResult" [width]="200"></select2>
-                    <optgroup *ngFor="let group of scancodeGroups" [label]="group.groupName">
-                        <option *ngFor="let item of group.groupValues">
-                            {{ item.label }}
-                        </option>
-                    </optgroup>
-            </select>
             <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">
+            <select2 [data]="longPressGroups" [width]="140"></select2>
-                    <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>
             <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: {
+    private scanCodeGroups: Array<OptionData>;
-        groupName: string;
+    private longPressGroups: Array<OptionData>;
-        groupValues: any[];
-    }[];
 
     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>');
+        }
+    }
 }

src/components/popover/tab/layer-tab.component.scss

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

src/components/popover/tab/layer-tab.component.ts

@@ -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">
+        <select2 [data]="toggleData" (valueChanged)="toggleChanged($event)"></select2>
-            <option [ngValue]="false"> Activate </option>
-            <option [ngValue]="true"> Toggle </option>
-        </select>
         <span>the</span>
-        <select [(ngModel)]="layer">
+        <select2 [data]="layerData" (valueChanged)="layerChanged($event)"></select2>
-            <option [ngValue]="0"> Mod </option>
+        <span [ngSwitch]="toggle">
-            <option [ngValue]="1"> Fn </option>
+             <template ngSwitchWhen="true">layer by pressing this key.</template>
-            <option [ngValue]="2"> Mouse </option>
+             <template ngSwitchDefault="false">layer by holding this key.</template>
-        </select>
-        <span>
-        layer by holding this key.
         </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;
+    }
 }

src/components/popover/tab/longPress.json

@@ -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"
+            }
+        ]
+    }
+]

src/components/popover/tab/macro-tab.component.scss

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

src/components/popover/tab/macro-tab.component.ts

@@ -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">
+            <select2 [data]="macrosOptions" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
-                <option [ngValue]="-1"> Select macro </option>
-                <option *ngFor="let macro of macros; let index=index" [ngValue]="index"> {{ macro.name }} </option>
-            </select>
         </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;

src/components/popover/tab/mouse-tab.component.ts

@@ -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;

typings.json

@@ -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"
   }
 }