Add on screen control for some hot keys. To toggle it, click/tap curr…

…ently opened tab.
nirui · Sep 11, 2019 · 6585810 · 6585810
1 parent c5927a5
commit 6585810
Show file tree

Hide file tree

Showing 9 changed files with 843 additions and 19 deletions.
diff --git a/ui/commands/common.js b/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++) {

diff --git a/ui/common.css b/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;

diff --git a/ui/control/ssh.js b/ui/control/ssh.js
@@ -80,7 +80,7 @@ class Control {
     this.enable = false;
   }
 
-  retap() {}
+  retap(isOn) {}
 
   receive() {
     return this.subs.subscribe();

diff --git a/ui/control/telnet.js b/ui/control/telnet.js
@@ -399,7 +399,7 @@ class Control {
     this.enable = false;
   }
 
-  retap() {}
+  retap(isOn) {}
 
   receive() {
     return this.subs.subscribe();

diff --git a/ui/home.vue b/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) {

diff --git a/ui/widgets/screen_console.css b/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 {
 }
diff --git a/ui/widgets/screen_console.vue b/ui/widgets/screen_console.vue
@@ -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));
     }
   }
 };