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

ui/commands/common.js

@@ -99,7 +99,7 @@ const hostnameCharators = {
  * @returns {boolean} Return true if given string is all number, false otherwise
  *
  */
-function isNumber(d) {
+export function isNumber(d) {
   for (let i = 0; i < d.length; i++) {
     if (!numCharators[d[i]]) {
       return false;
@@ -117,7 +117,7 @@ function isNumber(d) {
  * @returns {boolean} Return true if given string is all hex, false otherwise
  *
  */
-function isHex(d) {
+export function isHex(d) {
   let dd = d.toLowerCase();
 
   for (let i = 0; i < dd.length; i++) {

ui/common.css

@@ -276,6 +276,15 @@ body {
   content: "\25CF";
 }
 
+.icon.icon-keyboardkey1 {
+  background: #fff;
+  color: #999;
+  padding: 4px 6px;
+  display: inline-block;
+  border-radius: 3px;
+  box-shadow: 1px 1px 0 2px #0003;
+}
+
 /* Windows */
 .window {
   position: absolute;

ui/control/ssh.js

@@ -80,7 +80,7 @@ class Control {
     this.enable = false;
   }
 
-  retap() {}
+  retap(isOn) {}
 
   receive() {
     return this.subs.subscribe();

ui/control/telnet.js

@@ -399,7 +399,7 @@ class Control {
     this.enable = false;
   }
 
-  retap() {}
+  retap(isOn) {}
 
   receive() {
     return this.subs.subscribe();

ui/home.vue

@@ -448,6 +448,7 @@ export default {
           name: data.name,
           info: data.info,
           control: data.control,
+          toolbar: false,
           indicator: {
             error: "",
             updated: false
@@ -475,7 +476,9 @@ export default {
       await this.tab.tabs[this.tab.current].control.enabled();
     },
     async retapTab(tab) {
-      await this.tab.tabs[tab].control.retap();
+      this.tab.tabs[tab].toolbar = !this.tab.tabs[tab].toolbar;
+
+      await this.tab.tabs[tab].control.retap(this.tab.tabs[tab].toolbar);
     },
     async closeTab(index) {
       if (this.tab.tabs[index].status.closing) {

ui/widgets/screen_console.css

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

ui/widgets/screen_console.vue

@@ -18,21 +18,58 @@
 -->
 
 <template>
+  <div class="screen-console">
     <div
-    class="screen-console"
+      class="console-console"
-    :style="'background-color: ' + control.activeColor()"
+      style="top: 0; right: 0; left: 0; bottom: 0; padding： 0; margin: 0; z-index: 0; position: absolute; overflow: hidden"
-    style="top: 0; right: 0; left: 0; bottom: 0; padding： 0; margin: 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,13 +115,20 @@ class Term {
         !ev.domEvent.ctrlKey &&
         !ev.domEvent.metaKey;
 
-      if (ev.domEvent.keyCode === 13) {
+      switch (ev.domEvent.key.toLowerCase()) {
+        case "enter":
           this.writeStr("\r\n");
-      } else if (ev.domEvent.keyCode === 8) {
+          break;
+
+        case "backspace":
           this.writeStr("\b \b");
-      } else if (printable) {
+          break;
+
+        default:
+          if (printable) {
             this.writeStr(ev.key);
           }
+      }
     });
 
     let resizeDelay = null,
@@ -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));
     }
   }
 };

ui/widgets/screen_console_keys.js

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

ui/widgets/screens.vue

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