17 changed files with 221 additions and 22 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,141 @@ |
|||
import {AbsApp} from "./AbsApp"; |
|||
import {Component} from "@angular/core"; |
|||
|
|||
@Component({ |
|||
selector: "app-keyboard", |
|||
template: ` |
|||
<div mat-dialog-content> |
|||
<div> |
|||
<div style="display: flex; justify-content: center; height: 150px; word-break: break-all; align-items: center; border: 1px solid rgb(0 242 0 / 30%)"> |
|||
<p>{{text}}</p> |
|||
</div> |
|||
<div > |
|||
<div style="display: flex; flex-direction: row; justify-content: space-between" *ngFor="let kp of keyboard; index as kpi"> |
|||
<p |
|||
*ngFor="let kk of kp; index as kki" |
|||
class="keyboard_key" |
|||
[class.keyboard_current]="isCurrentKey(kpi, kki)" |
|||
[style.text-transform]="caps?'uppercase':''" |
|||
>{{kk}}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
` |
|||
}) |
|||
export class KeyboardAppComponent extends AbsApp { |
|||
keyboard:any[] = []; |
|||
keyboards: any = {ru:[ |
|||
"йцукенгшщзхъ".split(""), |
|||
"фывапролджэ".split(""), |
|||
"ячсмитьбю.,".split("") |
|||
], en:[ |
|||
"qwertyuiop[]".split(""), |
|||
"asdfghjkl;'\"".split(""), |
|||
"zxcvbnm,./".split("") |
|||
]}; |
|||
current: "ru" | "en" = "ru"; |
|||
text = ""; |
|||
caps: boolean = false; |
|||
|
|||
x = 0; |
|||
y = 0; |
|||
|
|||
isCurrentKey(x:number, y:number):boolean { |
|||
return x == this.x && y == this.y; |
|||
} |
|||
|
|||
createKeyboard() { |
|||
this.x = 0; this.y = 0; |
|||
this.keyboard = []; |
|||
this.keyboard.push("1234567890-=".split("").concat(["<--"])) |
|||
this.keyboards[this.current].forEach( |
|||
(keys:any) => { |
|||
this.keyboard.push(keys); |
|||
} |
|||
) |
|||
this.keyboard.push(["change", "caps", "space", "wipe", "exit", "save"]) |
|||
} |
|||
|
|||
closeKeyboard(save: boolean = false) { |
|||
this.ref.close(save ? this.text : null); |
|||
} |
|||
|
|||
override ngOnInit(): void { |
|||
this.createKeyboard(); |
|||
this.sub = this.io.keys.subscribe((code) => { |
|||
switch (code) { |
|||
case "KeyW":{ |
|||
if (this.x <= 0) { |
|||
this.x = this.keyboard.length; |
|||
} |
|||
this.x--; |
|||
if (this.keyboard[this.x].length < this.y) { |
|||
this.y = this.keyboard[this.x].length -1; |
|||
} |
|||
return; |
|||
} |
|||
case "KeyS":{ |
|||
if (this.x >= this.keyboard.length -1) { |
|||
this.x = -1; |
|||
} |
|||
this.x++; |
|||
if (this.keyboard[this.x].length < this.y) { |
|||
this.y = this.keyboard[this.x].length -1; |
|||
} |
|||
break;} |
|||
case "KeyA":{ |
|||
if (this.y <= 0) { |
|||
this.y = this.keyboard[this.x].length; |
|||
} |
|||
this.y--; |
|||
break;} |
|||
case "KeyD":{ |
|||
if (this.y >= this.keyboard[this.x].length -1) this.y = -1; |
|||
this.y++; |
|||
break;} |
|||
case "Enter":{ |
|||
const key: string = this.keyboard[this.x][this.y] |
|||
switch (key) { |
|||
case "change": { |
|||
switch (this.current) { |
|||
case "en": {this.current = "ru"; break} |
|||
case "ru": {this.current = "en"; break} |
|||
} |
|||
this.createKeyboard(); |
|||
break; |
|||
} |
|||
case "caps": { |
|||
this.caps = !this.caps; |
|||
break; |
|||
} |
|||
case "wipe": { |
|||
this.text = ""; |
|||
break; |
|||
} |
|||
case "space": { |
|||
this.text += " "; |
|||
break;} |
|||
case "exit": { |
|||
this.closeKeyboard(); |
|||
break; |
|||
} |
|||
case "save": { |
|||
this.closeKeyboard(true); |
|||
break; |
|||
} |
|||
case "<--": { |
|||
this.text = this.text.slice(0, -1); |
|||
break; |
|||
} |
|||
default: { |
|||
this.text += this.caps ? key.toUpperCase() : key; |
|||
break; |
|||
} |
|||
} |
|||
break; |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
import {Injectable} from "@angular/core"; |
|||
|
|||
@Injectable({ |
|||
providedIn: 'root' |
|||
}) |
|||
export class AppsService { |
|||
inApp: boolean = false; |
|||
} |
|||
Loading…
Reference in new issue