155 lines
5.0 KiB
TypeScript
155 lines
5.0 KiB
TypeScript
import {
|
|
Component,
|
|
OnInit,
|
|
AfterViewInit,
|
|
Output,
|
|
EventEmitter,
|
|
ViewChildren,
|
|
ElementRef,
|
|
Renderer,
|
|
QueryList,
|
|
ChangeDetectorRef
|
|
} from '@angular/core';
|
|
|
|
import {NgSwitch, NgSwitchWhen} from '@angular/common';
|
|
|
|
import {KeypressEditComponent} from './keypress-edit.component';
|
|
|
|
@Component({
|
|
moduleId: module.id,
|
|
selector: 'popover',
|
|
template:
|
|
`
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="popover-title menu-tabs">
|
|
<ul class="nav nav-tabs popover-menu">
|
|
<li #keypress (click)="onListItemClick(0)">
|
|
<a class="menu-tabs--item">
|
|
<i class="fa fa-keyboard-o"></i>
|
|
Keypress
|
|
</a>
|
|
</li>
|
|
<li #layer (click)="onListItemClick(1)">
|
|
<a class="menu-tabs--item">
|
|
<i class="fa fa-clone"></i>
|
|
Layer
|
|
</a>
|
|
</li>
|
|
<li #mouse (click)="onListItemClick(2)">
|
|
<a class="menu-tabs--item">
|
|
<i class="fa fa-mouse-pointer"></i>
|
|
Mouse
|
|
</a>
|
|
</li>
|
|
<li #macro (click)="onListItemClick(3)">
|
|
<a class="menu-tabs--item">
|
|
<i class="fa fa-play"></i>
|
|
Macro
|
|
</a>
|
|
</li>
|
|
<li #keymap (click)="onListItemClick(4)">
|
|
<a class="menu-tabs--item">
|
|
<i class="fa fa-keyboard-o"></i>
|
|
Keymap
|
|
</a>
|
|
</li>
|
|
<li #none (click)="onListItemClick(5)">
|
|
<a class="menu-tabs--item">
|
|
<i class="fa fa-ban"></i>
|
|
None
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="row" [ngSwitch]="activeListItemIndex">
|
|
<div class="popover-content">
|
|
<keypress-edit *ngSwitchWhen="0"></keypress-edit>
|
|
<div *ngSwitchWhen="1"> Layer </div>
|
|
<div *ngSwitchWhen="2"> Mouse </div>
|
|
<div *ngSwitchWhen="3"> Macro </div>
|
|
<div *ngSwitchWhen="4"> Keymap </div>
|
|
<div *ngSwitchWhen="5"> None </div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="popover-action">
|
|
<button class="btn btn-sm btn-default" type="button" (click)="onCancelClick()"> Cancel </button>
|
|
<button class="btn btn-sm btn-primary" type="button" (click)="onRemapKey()"> Remap Key </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
styles:
|
|
[`
|
|
:host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 577px;
|
|
padding: 0;
|
|
}
|
|
|
|
.popover-action {
|
|
padding: 8px 14px;
|
|
margin: 0;
|
|
font-size: 14px;
|
|
background-color: #f7f7f7;
|
|
border-top: 1px solid #ebebeb;
|
|
border-radius: 0 0 5px 5px;
|
|
text-align: right;
|
|
}
|
|
|
|
.popover-title.menu-tabs {
|
|
padding: .5rem .5rem 0;
|
|
display: block;
|
|
}
|
|
|
|
.popover-title.menu-tabs .nav-tabs {
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
.popover-content {
|
|
padding: 10px 24px;
|
|
}
|
|
`],
|
|
host: { 'class': 'popover' },
|
|
directives: [NgSwitch, NgSwitchWhen, KeypressEditComponent]
|
|
})
|
|
export class PopoverComponent implements OnInit, AfterViewInit {
|
|
@Output() cancel = new EventEmitter<any>();
|
|
@ViewChildren('keypress,layer,mouse,macro,keymap,none') liElementRefs: QueryList<ElementRef>;
|
|
|
|
private activeListItemIndex: number;
|
|
|
|
constructor(private renderer: Renderer, private changeDetectorRef: ChangeDetectorRef) {
|
|
this.activeListItemIndex = -1;
|
|
}
|
|
|
|
ngOnInit() { }
|
|
|
|
ngAfterViewInit() {
|
|
this.onListItemClick(0);
|
|
this.changeDetectorRef.detectChanges();
|
|
}
|
|
|
|
onCancelClick(): void {
|
|
this.cancel.emit(undefined);
|
|
}
|
|
|
|
onRemapKey(): void {
|
|
|
|
}
|
|
|
|
onListItemClick(index: number): void {
|
|
let listItems: HTMLLIElement[] = this.liElementRefs.toArray().map(liElementRef => liElementRef.nativeElement);
|
|
if (this.activeListItemIndex >= 0) {
|
|
this.renderer.setElementClass(listItems[this.activeListItemIndex], 'active', false);
|
|
}
|
|
this.renderer.setElementClass(listItems[index], 'active', true);
|
|
this.activeListItemIndex = index;
|
|
}
|
|
|
|
}
|