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

Remapping: Popover tabs initialization accordance with the key action

Browse Source
This commit is contained in:
József Farkas
2016-08-06 17:26:36 +02:00
parent a09bc3cccc
commit b0b76fe1c2
19 changed files with 320 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/popover/tab/mouse/mouse-tab.component.html
View File

@@ -1,35 +1,39 @@
<div class="mouse-action col-sm-4">
<ul class="nav nav-pills nav-stacked">
<li (click)="changePage(0)" [ngClass]="{active: selectedIndex===0}"><a> Move </a></li>
<li (click)="changePage(1)" [ngClass]="{active: selectedIndex===1}"><a> Scroll </a></li>
<li (click)="changePage(2)" [ngClass]="{active: selectedIndex===2}"><a> Click </a></li>
<li (click)="changePage(3)" [ngClass]="{active: selectedIndex===3}"><a> Speed </a></li>
<li (click)="changePage(0)" [class.active]="selectedPageIndex === 0"><a> Move </a></li>
<li (click)="changePage(1)" [class.active]="selectedPageIndex === 1"><a> Scroll </a></li>
<li (click)="changePage(2)" [class.active]="selectedPageIndex === 2"><a> Click </a></li>
<li (click)="changePage(3)" [class.active]="selectedPageIndex === 3"><a> Speed </a></li>
</ul>
</div>
<div class="details col-sm-8" [ngSwitch]="selectedIndex">
<div class="details col-sm-8" [ngSwitch]="selectedPageIndex">
<div *ngSwitchCase="0" class="mouse__config mouse__config--move text-center">
<div class="row">
<button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.moveUp)">
[class.btn-primary]="mouseActionParam === MouseActionParam.moveUp"
(click)="setMouseActionParam(MouseActionParam.moveUp)">
<i class="fa fa-arrow-up"></i>
</button>
</div>
<div class="row">
<button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.moveLeft)">
[class.btn-primary]="mouseActionParam === MouseActionParam.moveLeft"
(click)="setMouseActionParam(MouseActionParam.moveLeft)">
<i class="fa fa-arrow-left"></i>
</button>
<button type="button" class="btn btn-default btn-lg btn-placeholder">
<i class="fa fa-square"></i>
</button>
<button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.moveRight)">
[class.btn-primary]="mouseActionParam === MouseActionParam.moveRight"
(click)="setMouseActionParam(MouseActionParam.moveRight)">
<i class="fa fa-arrow-right"></i>
</button>
</div>
<div class="row">
<button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.moveDown)">
[class.btn-primary]="mouseActionParam === MouseActionParam.moveDown"
(click)="setMouseActionParam(MouseActionParam.moveDown)">
<i class="fa fa-arrow-down"></i>
</button>
</div>
@@ -37,26 +41,30 @@
<div *ngSwitchCase="1" class="mouse__config mouse__config--scroll text-center">
<div class="row">
<button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.scrollUp)">
[class.btn-primary]="mouseActionParam === MouseActionParam.scrollUp"
(click)="setMouseActionParam(MouseActionParam.scrollUp)">
<i class="fa fa-angle-double-up"></i>
</button>
</div>
<div class="row">
<button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.scrollLeft)">
[class.btn-primary]="mouseActionParam === MouseActionParam.scrollLeft"
(click)="setMouseActionParam(MouseActionParam.scrollLeft)">
<i class="fa fa-angle-double-left"></i>
</button>
<button type="button" class="btn btn-default btn-lg btn-placeholder">
<i class="fa fa-square"></i>
</button>
<button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.scrollRight)">
[class.btn-primary]="mouseActionParam === MouseActionParam.scrollRight"
(click)="setMouseActionParam(MouseActionParam.scrollRight)">
<i class="fa fa-angle-double-right"></i>
</button>
</div>
<div class="row">
<button type="button" class="btn btn-default btn-lg"
(click)="onMouseActionClick($event.target, MouseActionParam.scrollDown)">
[class.btn-primary]="mouseActionParam === MouseActionParam.scrollDown"
(click)="setMouseActionParam(MouseActionParam.scrollDown)">
<i class="fa fa-angle-double-down"></i>
</button>
</div>
@@ -64,11 +72,14 @@
<div *ngSwitchCase="2" class="mouse__config mouse__config--click">
<div class="btn-group col-xs-12" role="group">
<button type="button" class="btn btn-default col-xs-4"
(click)="onMouseActionClick($event.target, MouseActionParam.leftClick)">Left</button>
[class.btn-primary]="mouseActionParam === MouseActionParam.leftClick"
(click)="setMouseActionParam(MouseActionParam.leftClick)">Left</button>
<button type="button" class="btn btn-default col-xs-4"
(click)="onMouseActionClick($event.target, MouseActionParam.middleClick)">Middle</button>
[class.btn-primary]="mouseActionParam === MouseActionParam.middleClick"
(click)="setMouseActionParam(MouseActionParam.middleClick)">Middle</button>
<button type="button" class="btn btn-default col-xs-4"
(click)="onMouseActionClick($event.target, MouseActionParam.rightClick)">Right</button>
[class.btn-primary]="mouseActionParam === MouseActionParam.rightClick"
(click)="setMouseActionParam(MouseActionParam.rightClick)">Right</button>
</div>
</div>
<div *ngSwitchCase="3" class="mouse__config mouse__config--speed text-center">
@@ -78,9 +89,11 @@
</div>
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-default"
(click)="onMouseActionClick($event.target, MouseActionParam.decelerate)">-</button>
[class.btn-primary]="mouseActionParam === MouseActionParam.decelerate"
(click)="setMouseActionParam(MouseActionParam.decelerate)">-</button>
<button type="button" class="btn btn-default"
(click)="onMouseActionClick($event.target, MouseActionParam.accelerate)">+</button>
[class.btn-primary]="mouseActionParam === MouseActionParam.acelerate"
(click)="setMouseActionParam(MouseActionParam.accelerate)">+</button>
</div>
</div>
<div *ngSwitchDefault>

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

@@ -1,7 +1,8 @@
import { Component, OnInit, Renderer} from '@angular/core';
import {Component, OnInit, Input} from '@angular/core';
import {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common';
import { KeyActionSaver } from '../../key-action-saver';
import {Tab} from '../tab';
import {KeyAction} from '../../../../../config-serializer/config-items/KeyAction';
import {MouseAction, MouseActionParam} from '../../../../../config-serializer/config-items/MouseAction';
@Component({
@@ -11,20 +12,61 @@ import {MouseAction, MouseActionParam} from '../../../../../config-serializer/co
styles: [require('./mouse-tab.component.scss')],
directives: [NgSwitch, NgSwitchCase, NgSwitchDefault]
})
export class MouseTabComponent implements OnInit, KeyActionSaver {
export class MouseTabComponent implements OnInit, Tab {
@Input() defaultKeyAction: KeyAction;
private mouseActionParam: MouseActionParam;
private selectedIndex: number;
private selectedButton: HTMLButtonElement;
private selectedPageIndex: number;
private MouseActionParam = MouseActionParam;
constructor(private renderer: Renderer) {
this.selectedIndex = 0;
constructor() {
this.selectedPageIndex = 0;
}
ngOnInit() { }
ngOnInit() {
this.fromKeyAction(this.defaultKeyAction);
}
keyActionValid(): boolean {
return !!this.mouseActionParam;
return this.mouseActionParam !== undefined;
}
fromKeyAction(keyAction: KeyAction): boolean {
if (!(keyAction instanceof MouseAction)) {
return false;
}
let mouseAction: MouseAction = <MouseAction>keyAction;
this.mouseActionParam = mouseAction.mouseAction;
if (mouseAction.mouseAction === MouseActionParam.moveUp) {
this.selectedPageIndex = 0;
}
switch (mouseAction.mouseAction) {
case MouseActionParam.moveDown:
case MouseActionParam.moveUp:
case MouseActionParam.moveLeft:
case MouseActionParam.moveRight:
this.selectedPageIndex = 0;
break;
case MouseActionParam.scrollDown:
case MouseActionParam.scrollUp:
case MouseActionParam.scrollLeft:
case MouseActionParam.scrollRight:
this.selectedPageIndex = 1;
break;
case MouseActionParam.leftClick:
case MouseActionParam.middleClick:
case MouseActionParam.rightClick:
this.selectedPageIndex = 2;
break;
case MouseActionParam.decelerate:
case MouseActionParam.accelerate:
this.selectedPageIndex = 3;
break;
default:
return false;
}
return true;
}
toKeyAction(): MouseAction {
@@ -41,17 +83,11 @@ export class MouseTabComponent implements OnInit, KeyActionSaver {
console.error(`Invalid index error: ${index}`);
return;
}
this.selectedIndex = index;
this.selectedPageIndex = index;
this.mouseActionParam = undefined;
this.selectedButton = undefined;
}
onMouseActionClick(target: HTMLButtonElement, mouseActionParam: MouseActionParam) {
if (this.selectedButton) {
this.renderer.setElementClass(this.selectedButton, 'btn-primary', false);
}
this.selectedButton = target;
this.renderer.setElementClass(target, 'btn-primary', true);
setMouseActionParam(mouseActionParam: MouseActionParam) {
this.mouseActionParam = mouseActionParam;
}