idan/sshwifty-udp-telnet-http
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add on screen control for some hot keys. To toggle it, click/tap currently opened tab.

Browse Source
This commit is contained in:
NI
2019-09-11 11:31:08 +08:00
parent c5927a5b5d
commit 6585810cc4
9 changed files with 843 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
ui/widgets/screen_console.css
View File

@@ -20,4 +20,116 @@
@charset "utf-8";
#home-content > .screen > .screen-screen > .screen-console {
position: relative;
}
#home-content > .screen > .screen-screen > .screen-console > .console-toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
max-height: 100%;
overflow: auto;
background: #222;
color: #fff;
box-shadow: 0 0 5px #0006;
}
#home-content
> .screen
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-item {
padding: 15px;
float: left;
}
#home-content
> .screen
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-item
.tb-title {
font-size: 0.8em;
text-transform: uppercase;
margin: 0 0 5px 10px;
color: #fff9;
text-shadow: 1px 1px 1px #0005;
}
#home-content
> .screen
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-item
.tb-item {
display: block;
font-size: 0.7em;
padding: 10px;
text-decoration: none;
color: inherit;
border-radius: 3px;
}
#home-content
> .screen
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-item
.tb-item:active {
background: #fff3;
}
#home-content
> .screen
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-item
.tb-item
> .tb-key-icon {
margin: 0 5px;
background: #fff2;
color: #fff;
}
#home-content
> .screen
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-item
.tb-item
> .tb-key-icon:first-child {
margin-left: 0;
}
#home-content
> .screen
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-item
.tb-item
> .tb-key-icon:last-child {
margin-right: 0;
}
#home-content
> .screen
> .screen-screen
> .screen-console
> .console-toolbar
> .console-toolbar-item
.tb-item:active
.tb-key-icon {
opacity: 0.5;
}
#home-content > .screen > .screen-screen > .screen-console > .console-console {
}

109
ui/widgets/screen_console.vue
View File

@@ -18,21 +18,58 @@
-->
<template>
<div
class="screen-console"
:style="'background-color: ' + control.activeColor()"
style="top: 0; right: 0; left: 0; bottom: 0; padding： 0; margin: 0; position: absolute; overflow: hidden"
/>
<div class="screen-console">
<div
class="console-console"
style="top: 0; right: 0; left: 0; bottom: 0; padding： 0; margin: 0; z-index: 0; position: absolute; overflow: hidden"
>
<h2 style="display:none;">Console</h2>
</div>
<!--
Tell you this: the background transparent below is probably the most
important transparent setting in the entire application. Make sure user
can see through it so they can operate the console while keep the toolbar
open.
-->
<div
v-if="toolbar"
class="console-toolbar"
:style="'background-color: ' + control.activeColor() + 'ee'"
>
<h2 style="display:none;">Tool bar</h2>
<div
v-for="(keyType, keyTypeIdx) in screenKeys"
:key="keyTypeIdx"
class="console-toolbar-item"
>
<h3 class="tb-title">{{ keyType.title }}</h3>
<ul class="hlst lst-nostyle">
<li v-for="(key, keyIdx) in keyType.keys" :key="keyIdx">
<a
class="tb-item"
href="javascript:;"
@click="sendSpecialKey(key[1])"
v-html="$options.filters.specialKeyHTML(key[0])"
></a>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import { Terminal } from "xterm";
import { WebLinksAddon } from "xterm-addon-web-links";
import { FitAddon } from "xterm-addon-fit";
import { isNumber } from "../commands/common.js";
import { consoleScreenKeys } from "./screen_console_keys.js";
import "./screen_console.css";
import "xterm/css/xterm.css";
import { isNumber } from "util";
class Term {
constructor(control) {
@@ -54,6 +91,16 @@ class Term {
});
this.term.onData(data => {
if (process.env.NODE_ENV === "development") {
let keyCodes = [];
for (let i = 0; i < data.length; i++) {
keyCodes.push(data.charCodeAt(i));
}
console.log("Sending", keyCodes);
}
control.send(data);
});
@@ -68,12 +115,19 @@ class Term {
!ev.domEvent.ctrlKey &&
!ev.domEvent.metaKey;
if (ev.domEvent.keyCode === 13) {
this.writeStr("\r\n");
} else if (ev.domEvent.keyCode === 8) {
this.writeStr("\b \b");
} else if (printable) {
this.writeStr(ev.key);
switch (ev.domEvent.key.toLowerCase()) {
case "enter":
this.writeStr("\r\n");
break;
case "backspace":
this.writeStr("\b \b");
break;
default:
if (printable) {
this.writeStr(ev.key);
}
}
});
@@ -156,6 +210,14 @@ class Term {
this.refit();
}
dispatch(event) {
try {
this.term.textarea.dispatchEvent(event);
} catch (e) {
process.env.NODE_ENV === "development" && console.trace(e);
}
}
writeStr(d) {
try {
this.term.write(d);
@@ -210,6 +272,14 @@ class Term {
// like to keep it that way.
export default {
filters: {
specialKeyHTML(key) {
const head = '<span class="tb-key-icon icon icon-keyboardkey1">',
tail = "</span>";
return head + key.split("+").join(tail + "+" + head) + tail;
}
},
props: {
active: {
type: Boolean,
@@ -222,10 +292,15 @@ export default {
change: {
type: Object,
default: () => null
},
toolbar: {
type: Boolean,
default: false
}
},
data() {
return {
screenKeys: consoleScreenKeys,
term: new Term(this.control),
runner: null
};
@@ -258,7 +333,7 @@ export default {
init() {
let self = this;
this.term.init(this.$el, {
this.term.init(this.$el.getElementsByClassName("console-console")[0], {
focus(e) {
document.addEventListener("keyup", self.localKeypress);
document.addEventListener("keydown", self.localKeypress);
@@ -326,6 +401,14 @@ export default {
this.runner = null;
await runner;
},
sendSpecialKey(key) {
if (!this.term) {
return;
}
this.term.dispatch(new KeyboardEvent("keydown", key));
this.term.dispatch(new KeyboardEvent("keyup", key));
}
}
};

613
ui/widgets/screen_console_keys.js Normal file
View File

@@ -0,0 +1,613 @@
// Sshwifty - A Web SSH client
//
// Copyright (C) 2019 Rui NI <nirui@gmx.com>
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as
// published by the Free Software Foundation, either version 3 of the
// License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
// Generated by:
//
// <!doctype html>
// <html>
// <meta charset="UTF-8" />
// <title>KEYBOARDEVENT KEY DUMP</title>
// <input name="key" id="input" />
// <script>
// var keyHistory = [];
// var targetProps = [
// "altKey",
// "char",
// "charCode",
// "code",
// "ctrlKey",
// "key",
// "keyCode",
// "location",
// "metaKey",
// "repeat",
// "shiftKey",
// "which",
// ]
// document.getElementById("input").addEventListener("keydown", function(e) {
// e.preventDefault();
// var ev = {};
// for (var i in targetProps) {
// ev[targetProps[i]] = e[targetProps[i]];
// }
// keyHistory.push([e.key, ev])
// document.getElementById("result").innerHTML = JSON.stringify(keyHistory);
// })
// </script>
// <div id="result">
// </div>
// </html>
export const consoleScreenKeys = [
{
title: "Function Keys",
keys: [
[
"F1",
{
altKey: false,
charCode: 0,
code: "F1",
ctrlKey: false,
key: "F1",
keyCode: 112,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 112
}
],
[
"F2",
{
altKey: false,
charCode: 0,
code: "F2",
ctrlKey: false,
key: "F2",
keyCode: 113,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 113
}
],
[
"F3",
{
altKey: false,
charCode: 0,
code: "F3",
ctrlKey: false,
key: "F3",
keyCode: 114,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 114
}
],
[
"F4",
{
altKey: false,
charCode: 0,
code: "F4",
ctrlKey: false,
key: "F4",
keyCode: 115,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 115
}
],
[
"F5",
{
altKey: false,
charCode: 0,
code: "F5",
ctrlKey: false,
key: "F5",
keyCode: 116,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 116
}
],
[
"F6",
{
altKey: false,
charCode: 0,
code: "F6",
ctrlKey: false,
key: "F6",
keyCode: 117,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 117
}
],
[
"F7",
{
altKey: false,
charCode: 0,
code: "F7",
ctrlKey: false,
key: "F7",
keyCode: 118,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 118
}
],
[
"F8",
{
altKey: false,
charCode: 0,
code: "F8",
ctrlKey: false,
key: "F8",
keyCode: 119,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 119
}
],
[
"F9",
{
altKey: false,
charCode: 0,
code: "F9",
ctrlKey: false,
key: "F9",
keyCode: 120,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 120
}
],
[
"F10",
{
altKey: false,
charCode: 0,
code: "F10",
ctrlKey: false,
key: "F10",
keyCode: 121,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 121
}
],
[
"F11",
{
altKey: false,
charCode: 0,
code: "F11",
ctrlKey: false,
key: "F11",
keyCode: 122,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 122
}
],
[
"F12",
{
altKey: false,
charCode: 0,
code: "F12",
ctrlKey: false,
key: "F12",
keyCode: 123,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 123
}
]
]
},
{
title: "Misc Keys",
keys: [
[
"Escape",
{
altKey: false,
charCode: 0,
code: "Escape",
ctrlKey: false,
key: "Escape",
keyCode: 27,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 27
}
],
[
"Tab",
{
altKey: false,
charCode: 0,
code: "Tab",
ctrlKey: false,
key: "Tab",
keyCode: 9,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 9
}
],
[
"Insert",
{
altKey: false,
charCode: 0,
code: "Insert",
ctrlKey: false,
key: "Insert",
keyCode: 45,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 45
}
],
[
"Delete",
{
altKey: false,
charCode: 0,
code: "Delete",
ctrlKey: false,
key: "Delete",
keyCode: 46,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 46
}
]
]
},
{
title: "Navigation Keys",
keys: [
[
"Home",
{
altKey: false,
charCode: 0,
code: "Home",
ctrlKey: false,
key: "Home",
keyCode: 36,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 36
}
],
[
"End",
{
altKey: false,
charCode: 0,
code: "End",
ctrlKey: false,
key: "End",
keyCode: 35,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 35
}
],
[
"Up " + String.fromCharCode(8593),
{
altKey: false,
charCode: 0,
code: "ArrowUp",
ctrlKey: false,
key: "ArrowUp",
keyCode: 38,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 38
}
],
[
"Down " + String.fromCharCode(8595),
{
altKey: false,
charCode: 0,
code: "ArrowDown",
ctrlKey: false,
key: "ArrowDown",
keyCode: 40,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 40
}
],
[
"Left " + String.fromCharCode(8592),
{
altKey: false,
charCode: 0,
code: "ArrowLeft",
ctrlKey: false,
key: "ArrowLeft",
keyCode: 37,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 37
}
],
[
"Right " + String.fromCharCode(8594),
{
altKey: false,
charCode: 0,
code: "ArrowRight",
ctrlKey: false,
key: "ArrowRight",
keyCode: 39,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 39
}
],
[
"Page Up " + String.fromCharCode(9652),
{
altKey: false,
charCode: 0,
code: "PageUp",
ctrlKey: false,
key: "PageUp",
keyCode: 33,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 33
}
],
[
"Page Down " + String.fromCharCode(9662),
{
altKey: false,
charCode: 0,
code: "PageDown",
ctrlKey: false,
key: "PageDown",
keyCode: 34,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 34
}
]
]
},
{
title: "Control Keys",
keys: [
[
"Ctrl+C",
{
altKey: false,
charCode: 0,
code: "KeyC",
ctrlKey: true,
key: "c",
keyCode: 67,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 67
}
],
[
"Ctrl+Z",
{
altKey: false,
charCode: 0,
code: "KeyZ",
ctrlKey: true,
key: "z",
keyCode: 90,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 90
}
],
[
"Ctrl+R",
{
altKey: false,
charCode: 0,
code: "KeyR",
ctrlKey: true,
key: "r",
keyCode: 82,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 82
}
],
[
"Ctrl+L",
{
altKey: false,
charCode: 0,
code: "KeyL",
ctrlKey: true,
key: "l",
keyCode: 76,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 76
}
],
[
"Ctrl+A",
{
altKey: false,
charCode: 0,
code: "KeyA",
ctrlKey: true,
key: "a",
keyCode: 65,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 65
}
],
[
"Ctrl+E",
{
altKey: false,
charCode: 0,
code: "KeyE",
ctrlKey: true,
key: "e",
keyCode: 69,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 69
}
],
[
"Ctrl+W",
{
altKey: false,
charCode: 0,
code: "KeyW",
ctrlKey: true,
key: "w",
keyCode: 87,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 87
}
],
[
"Ctrl+U",
{
altKey: false,
charCode: 0,
code: "KeyU",
ctrlKey: true,
key: "u",
keyCode: 85,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 85
}
],
[
"Ctrl+K",
{
altKey: false,
charCode: 0,
code: "KeyK",
ctrlKey: true,
key: "k",
keyCode: 75,
location: 0,
metaKey: false,
repeat: false,
shiftKey: false,
which: 75
}
]
]
}
];

6
ui/widgets/screens.vue
View File

@@ -23,12 +23,13 @@
<div
v-for="(screenInfo, idx) in screens"
v-if="screens.length > 0"
:key="screenInfo.id"
:style="'visibility: ' + (screen === idx ? 'visible' : 'hidden')"
class="screen"
style="top: 0; right: 0; left: 0; bottom: 0; padding： 0; margin: 0; overflow: auto; position: absolute;"
>
<h1 style="display:none;">Main Interface</h1>
<div v-if="screenInfo.indicator.error.length > 0" class="screen-error">
{{ screenInfo.indicator.error }}
</div>
@@ -39,6 +40,9 @@
:active="screen === idx"
:control="screenInfo.control"
:change="screenInfo.indicator"
:toolbar="screenInfo.toolbar"
:style="'background-color: ' + screenInfo.control.activeColor()"
style="top: 0; right: 0; left: 0; bottom: 0; padding： 0; margin: 0; position: absolute; overflow: hidden"
@stopped="stopped(idx, $event)"
@updated="updated(idx)"
></component>