-
Notifications
You must be signed in to change notification settings - Fork 328
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(console): fix webtty tips no hidden (#940)
- Loading branch information
Showing
1 changed file
with
115 additions
and
114 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,123 +1,124 @@ | ||
| <!DOCTYPE html> | ||
| <html xmlns="http://www.w3.org/1999/xhtml" style="padding:0;margin:0"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>TKEStack WebTTY</title> | ||
| <link href="/static/css/xterm/xterm.css" rel="stylesheet" data-role="global" /> | ||
| <style> | ||
| body { | ||
| margin: 0; | ||
| background-color: #000; | ||
| } | ||
|
|
||
| #terminal { | ||
| height: 100vh; | ||
| } | ||
|
|
||
| .xterm .xterm-viewport { | ||
| overflow-y: hidden; | ||
| } | ||
| </style> | ||
| <link rel="apple-touch-icon" sizes="57x57" href="/static/image/apple-icon-57x57.png"> | ||
| <link rel="apple-touch-icon" sizes="60x60" href="/static/image/apple-icon-60x60.png"> | ||
| <link rel="apple-touch-icon" sizes="72x72" href="/static/image/apple-icon-72x72.png"> | ||
| <link rel="apple-touch-icon" sizes="76x76" href="/static/image/apple-icon-76x76.png"> | ||
| <link rel="apple-touch-icon" sizes="114x114" href="/static/image/apple-icon-114x114.png"> | ||
| <link rel="apple-touch-icon" sizes="120x120" href="/static/image/apple-icon-120x120.png"> | ||
| <link rel="apple-touch-icon" sizes="144x144" href="/static/image/apple-icon-144x144.png"> | ||
| <link rel="apple-touch-icon" sizes="152x152" href="/static/image/apple-icon-152x152.png"> | ||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/image/apple-icon-180x180.png"> | ||
| <link rel="icon" type="image/png" sizes="192x192" href="/static/image/android-icon-192x192.png"> | ||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/image/favicon-32x32.png"> | ||
| <link rel="icon" type="image/png" sizes="96x96" href="/static/image/favicon-96x96.png"> | ||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/image/favicon-16x16.png"> | ||
| <link rel="manifest" href="/static/image/manifest.json"> | ||
| <meta name="msapplication-TileColor" content="#262626"> | ||
| <meta name="msapplication-TileImage" content="/static/image/ms-icon-144x144.png"> | ||
| <meta name="theme-color" content="#262626"> | ||
| <script src="/static/js/base64.min.js"></script> | ||
| <script src="/static/js/xterm.js"></script> | ||
| <script src="/static/js/xterm-addon-fit.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="terminal-tips" style="font-size:24px; color: #0efdff; text-align: center"></div> | ||
| <div id="terminal"></div> | ||
| <script> | ||
| const termElem = document.getElementById('terminal'); | ||
| const tipsElem = document.getElementById('terminal-tips'); | ||
| termElem.oncontextmenu = () => false; | ||
|
|
||
| const term = new Terminal({ | ||
| fontSize: 14, | ||
| cursorBlink: true, | ||
| fontFamily: "'Courier New', 'Courier', monospace", | ||
| lineHeight: 1 | ||
| }); | ||
| term.open(termElem); | ||
|
|
||
| const fitAddon = new FitAddon.FitAddon(); | ||
| term.loadAddon(fitAddon); | ||
|
|
||
| fitAddon.fit(); | ||
| term.focus(); | ||
| <html xmlns="http://www.w3.org/1999/xhtml" style="padding: 0; margin: 0;"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>TKEStack WebTTY</title> | ||
| <link href="/static/css/xterm/xterm.css" rel="stylesheet" data-role="global" /> | ||
| <style> | ||
| body { | ||
| margin: 0; | ||
| background-color: #000; | ||
| } | ||
|
|
||
| const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; | ||
| const sock = new WebSocket(proto + '//' + window.location.host + '/webtty' + window.location.search); | ||
| sock.onopen = function (event) { | ||
| setTips("Connected") | ||
| var msg = { type: "resize", rows: term.rows, cols: term.cols }; | ||
| sock.send(JSON.stringify(msg)); | ||
| msg = { type: "input", input: Base64.encode("export TERM=xterm && clear \r") }; | ||
| sock.send(JSON.stringify(msg)); | ||
| if (!termElem.hidden) { | ||
| termElem.hidden = true | ||
| #terminal { | ||
| height: 100vh; | ||
| } | ||
| } | ||
| sock.onclose = function (event) { | ||
| if (event.wasClean) { | ||
| console.log("[close] Connection closed cleanly, code: " + event.code + ", reason: " + event.reason); | ||
| } else { | ||
| console.log("[close] Connection died"); | ||
| term.write("\r"); | ||
|
|
||
| .xterm .xterm-viewport { | ||
| overflow-y: hidden; | ||
| } | ||
| term.write("Connection Reset By Peer! Try Refresh"); | ||
| } | ||
| sock.onmessage = function (event) { | ||
| term.write(Base64.decode(event.data)); | ||
| } | ||
| sock.onerror = function (event) { | ||
| console.log('[error] Connection error'); | ||
| term.write("error: " + event.message); | ||
| term.destroy(); | ||
| } | ||
| </style> | ||
| <link rel="apple-touch-icon" sizes="57x57" href="/static/image/apple-icon-57x57.png" /> | ||
| <link rel="apple-touch-icon" sizes="60x60" href="/static/image/apple-icon-60x60.png" /> | ||
| <link rel="apple-touch-icon" sizes="72x72" href="/static/image/apple-icon-72x72.png" /> | ||
| <link rel="apple-touch-icon" sizes="76x76" href="/static/image/apple-icon-76x76.png" /> | ||
| <link rel="apple-touch-icon" sizes="114x114" href="/static/image/apple-icon-114x114.png" /> | ||
| <link rel="apple-touch-icon" sizes="120x120" href="/static/image/apple-icon-120x120.png" /> | ||
| <link rel="apple-touch-icon" sizes="144x144" href="/static/image/apple-icon-144x144.png" /> | ||
| <link rel="apple-touch-icon" sizes="152x152" href="/static/image/apple-icon-152x152.png" /> | ||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/image/apple-icon-180x180.png" /> | ||
| <link rel="icon" type="image/png" sizes="192x192" href="/static/image/android-icon-192x192.png" /> | ||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/image/favicon-32x32.png" /> | ||
| <link rel="icon" type="image/png" sizes="96x96" href="/static/image/favicon-96x96.png" /> | ||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/image/favicon-16x16.png" /> | ||
| <link rel="manifest" href="/static/image/manifest.json" /> | ||
| <meta name="msapplication-TileColor" content="#262626" /> | ||
| <meta name="msapplication-TileImage" content="/static/image/ms-icon-144x144.png" /> | ||
| <meta name="theme-color" content="#262626" /> | ||
| <script src="/static/js/base64.min.js"></script> | ||
| <script src="/static/js/xterm.js"></script> | ||
| <script src="/static/js/xterm-addon-fit.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="terminal-tips" style="font-size: 24px; color: #0efdff; text-align: center;"></div> | ||
| <div id="terminal"></div> | ||
| <script> | ||
| const termElem = document.getElementById('terminal'); | ||
| const tipsElem = document.getElementById('terminal-tips'); | ||
| termElem.oncontextmenu = () => false; | ||
|
|
||
| const term = new Terminal({ | ||
| fontSize: 14, | ||
| cursorBlink: true, | ||
| fontFamily: "'Courier New', 'Courier', monospace", | ||
| lineHeight: 1 | ||
| }); | ||
| term.open(termElem); | ||
|
|
||
| const fitAddon = new FitAddon.FitAddon(); | ||
| term.loadAddon(fitAddon); | ||
|
|
||
| window.addEventListener("resize", function () { | ||
| fitAddon.fit(); | ||
| var msg = { type: "resize", rows: term.rows, cols: term.cols }; | ||
| sock.send(JSON.stringify(msg)); | ||
| }) | ||
|
|
||
| term.onData(input => { | ||
| var msg = { type: "input", input: Base64.encode(input) }; | ||
| sock.send(JSON.stringify(msg)); | ||
| }); | ||
|
|
||
| term.onTitleChange(evt => { document.title = evt; }); | ||
|
|
||
| function setTips(content) { | ||
| if (typeof content === "undefined") { | ||
| return | ||
| term.focus(); | ||
|
|
||
| termElem.hidden = true; | ||
|
|
||
| const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; | ||
| const sock = new WebSocket(proto + '//' + window.location.host + '/webtty' + window.location.search); | ||
| sock.onopen = function (event) { | ||
| setTips('Connected'); | ||
| var msg = { type: 'resize', rows: term.rows, cols: term.cols }; | ||
| sock.send(JSON.stringify(msg)); | ||
| msg = { type: 'input', input: Base64.encode('export TERM=xterm && clear \r') }; | ||
| sock.send(JSON.stringify(msg)); | ||
| setTimeout(function () { | ||
| setTips(); | ||
| termElem.hidden = false; | ||
| }, 500); | ||
| }; | ||
| sock.onclose = function (event) { | ||
| if (event.wasClean) { | ||
| console.log('[close] Connection closed cleanly, code: ' + event.code + ', reason: ' + event.reason); | ||
| } else { | ||
| console.log('[close] Connection died'); | ||
| term.write('\r'); | ||
| } | ||
| term.write('Connection Reset By Peer! Try Refresh'); | ||
| }; | ||
| sock.onmessage = function (event) { | ||
| term.write(Base64.decode(event.data)); | ||
| }; | ||
| sock.onerror = function (event) { | ||
| console.log('[error] Connection error'); | ||
| term.write('error: ' + event.message); | ||
| term.destroy(); | ||
| }; | ||
|
|
||
| window.addEventListener('resize', function () { | ||
| fitAddon.fit(); | ||
| var msg = { type: 'resize', rows: term.rows, cols: term.cols }; | ||
| sock.send(JSON.stringify(msg)); | ||
| }); | ||
|
|
||
| term.onData(input => { | ||
| var msg = { type: 'input', input: Base64.encode(input) }; | ||
| sock.send(JSON.stringify(msg)); | ||
| }); | ||
|
|
||
| term.onTitleChange(evt => { | ||
| document.title = evt; | ||
| }); | ||
|
|
||
| function setTips(content) { | ||
| if (typeof content === 'undefined') { | ||
| tipsElem.hidden = true; | ||
| } | ||
| console.log('setTips:' + content); | ||
| tipsElem.innerText = content; | ||
| } | ||
| console.log("setTips:" + content) | ||
| tipsElem.innerText = content | ||
| } | ||
|
|
||
| setTips("Connecting...") | ||
|
|
||
| </script> | ||
| </body> | ||
|
|
||
| setTips('Connecting...'); | ||
| </script> | ||
| </body> | ||
| </html> | ||
|
|