xtermjs.tpl 4.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="{$appUrl}/xterm/css/xterm.css" />
  5. <link rel="stylesheet" href="{$appUrl}/xterm/css/style.css" />
  6. <script src="{$appUrl}/xterm/lib/xterm.js"></script>
  7. <script src="{$appUrl}/xterm/lib/util.js"></script>
  8. <script src="{$appUrl}/xterm-addon-fit/lib/xterm-addon-fit.js"></script>
  9. </head>
  10. <body>
  11. <div id="status_bar" class="normal"></div>
  12. <div id="wrap">
  13. <div id="terminal-container"><div dir="ltr" class="terminal xterm" tabindex="0"><div class="xterm-viewport" style="background-color: rgb(0, 0, 0);"><div class="xterm-scroll-area" style="height: 457px;"></div></div><div class="xterm-screen"><div class="xterm-helpers"><textarea class="xterm-helper-textarea" aria-label="Terminal input" aria-multiline="false" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style=""></textarea><span class="xterm-char-measure-element" aria-hidden="true" style="font-family: courier-new, courier, monospace; font-size: 15px;">W</span><div class="composition-view"></div></div><canvas class="xterm-text-layer" width="1827" height="500" style="z-index: 0; width: 1670px; height: 457px;"></canvas><canvas class="xterm-selection-layer" width="1827" height="500" style="z-index: 1; width: 1670px; height: 457px;"></canvas><canvas class="xterm-link-layer" width="1827" height="500" style="z-index: 2; width: 1670px; height: 457px;"></canvas><canvas class="xterm-cursor-layer" width="1827" height="500" style="z-index: 3; width: 1670px; height: 457px;"></canvas></div></div></div>
  14. </div>
  15. {literal}
  16. <script type="module">
  17. var states = {
  18. start: 1,
  19. connecting: 2,
  20. connected: 3,
  21. disconnecting: 4,
  22. disconnected: 5,
  23. reconnecting: 6,
  24. };
  25. var term, socket, state = states.start, ping, fitAddon;
  26. try{
  27. term = new Terminal();
  28. fitAddon = new FitAddon.FitAddon();
  29. term.loadAddon(fitAddon)
  30. var error = "{/literal}{$error}{literal}";
  31. if (error && error !== undefined && error !== null) {
  32. throw new Error(error);
  33. }
  34. socket = new WebSocket('{/literal}{$websocketUrl}{literal}', 'binary');
  35. socket.binaryType = 'arraybuffer';
  36. term.open(document.getElementById('terminal-container'), true);
  37. socket.onopen = runTerminal;
  38. socket.onerror = onError;
  39. state = states.connecting;
  40. showMsg("Connecting...", 1500,"warning");
  41. }catch (e) {
  42. showMsg(e, 20*1000,"error");
  43. }
  44. function runTerminal() {
  45. socket.onmessage = function(event) {
  46. var answer = new Uint8Array(event.data);
  47. if (state === states.connected) {
  48. term.write(answer);
  49. } else if(state === states.connecting) {
  50. if (answer[0] === 79 && answer[1] === 75) { // "OK"
  51. state = states.connected;
  52. showMsg("Connected", 1000,"normal");
  53. term.write(answer.slice(2));
  54. } else {
  55. socket.close();
  56. }
  57. }
  58. };
  59. term.onData(function(data) {
  60. if (state === states.connected) {
  61. socket.send("0:" + unescape(encodeURIComponent(data)).length.toString() + ":" + data);
  62. }
  63. });
  64. ping = setInterval(function() {
  65. socket.send("2");
  66. }, 30*1000);
  67. window.addEventListener('resize', function() {
  68. clearTimeout(resize);
  69. resize = setTimeout(function() {
  70. // done resizing
  71. fitAddon.fit();
  72. }, 250);
  73. });
  74. var user = "{/literal}{$user}{literal}";
  75. var password = "{/literal}{$password}{literal}";
  76. socket.send(user + ':' + password + "\n");
  77. // initial focus and resize
  78. setTimeout(function() {
  79. term.focus();
  80. fitAddon.fit();
  81. }, 250);
  82. }
  83. function onError(event) {
  84. showMsg("Connection failed", 20*1000,"error");
  85. socket.close();
  86. }
  87. </script>
  88. {/literal}
  89. </body>
  90. </html>