demo/main.js

   1 var term,
   2     protocol,
   3     socketURL,
   4     socket,
   5     pid,
   6     charWidth,
   7     charHeight;
   8
   9 var terminalContainer = document.getElementById('terminal-container'),
  10     actionElements = {
  11       findNext: document.querySelector('#find-next'),
  12       findPrevious: document.querySelector('#find-previous')
  13     },
  14     optionElements = {
  15       cursorBlink: document.querySelector('#option-cursor-blink'),
  16       cursorStyle: document.querySelector('#option-cursor-style'),
  17       scrollback: document.querySelector('#option-scrollback'),
  18       tabstopwidth: document.querySelector('#option-tabstopwidth')
  19     },
  20     colsElement = document.getElementById('cols'),
  21     rowsElement = document.getElementById('rows');
  22
  23 function setTerminalSize () {
  24   var cols = parseInt(colsElement.value, 10),
  25       rows = parseInt(rowsElement.value, 10),
  26       width = (cols * charWidth).toString() + 'px',
  27       height = (rows * charHeight).toString() + 'px';
  28
  29   terminalContainer.style.width = width;
  30   terminalContainer.style.height = height;
  31   term.resize(cols, rows);
  32 }
  33
  34 colsElement.addEventListener('change', setTerminalSize);
  35 rowsElement.addEventListener('change', setTerminalSize);
  36
  37 actionElements.findNext.addEventListener('keypress', function (e) {
  38   if (e.key === "Enter") {
  39     e.preventDefault();
  40     term.findNext(actionElements.findNext.value);
  41   }
  42 });
  43 actionElements.findPrevious.addEventListener('keypress', function (e) {
  44   if (e.key === "Enter") {
  45     e.preventDefault();
  46     term.findPrevious(actionElements.findPrevious.value);
  47   }
  48 });
  49
  50 optionElements.cursorBlink.addEventListener('change', function () {
  51   term.setOption('cursorBlink', optionElements.cursorBlink.checked);
  52 });
  53 optionElements.cursorStyle.addEventListener('change', function () {
  54   term.setOption('cursorStyle', optionElements.cursorStyle.value);
  55 });
  56 optionElements.scrollback.addEventListener('change', function () {
  57   term.setOption('scrollback', parseInt(optionElements.scrollback.value, 10));
  58 });
  59 optionElements.tabstopwidth.addEventListener('change', function () {
  60   term.setOption('tabStopWidth', parseInt(optionElements.tabstopwidth.value, 10));
  61 });
  62
  63 createTerminal();
  64
  65 function createTerminal() {
  66   // Clean terminal
  67   while (terminalContainer.children.length) {
  68     terminalContainer.removeChild(terminalContainer.children[0]);
  69   }
  70   term = new Terminal({
  71     cursorBlink: optionElements.cursorBlink.checked,
  72     scrollback: parseInt(optionElements.scrollback.value, 10),
  73     tabStopWidth: parseInt(optionElements.tabstopwidth.value, 10)
  74   });
  75   term.on('resize', function (size) {
  76     if (!pid) {
  77       return;
  78     }
  79     var cols = size.cols,
  80         rows = size.rows,
  81         url = '/terminals/' + pid + '/size?cols=' + cols + '&rows=' + rows;
  82
  83     fetch(url, {method: 'POST'});
  84   });
  85   protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://';
  86   socketURL = protocol + location.hostname + ((location.port) ? (':' + location.port) : '') + '/terminals/';
  87
  88   term.open(terminalContainer);
  89   term.fit();
  90
  91   var initialGeometry = term.proposeGeometry(),
  92       cols = initialGeometry.cols,
  93       rows = initialGeometry.rows;
  94
  95   colsElement.value = cols;
  96   rowsElement.value = rows;
  97
  98   fetch('/terminals?cols=' + cols + '&rows=' + rows, {method: 'POST'}).then(function (res) {
  99
 100     charWidth = Math.ceil(term.element.offsetWidth / cols);
 101     charHeight = Math.ceil(term.element.offsetHeight / rows);
 102
 103     res.text().then(function (pid) {
 104       window.pid = pid;
 105       socketURL += pid;
 106       socket = new WebSocket(socketURL);
 107       socket.onopen = runRealTerminal;
 108       socket.onclose = runFakeTerminal;
 109       socket.onerror = runFakeTerminal;
 110     });
 111   });
 112 }
 113
 114 function runRealTerminal() {
 115   term.attach(socket);
 116   term._initialized = true;
 117 }
 118
 119 function runFakeTerminal() {
 120   if (term._initialized) {
 121     return;
 122   }
 123
 124   term._initialized = true;
 125
 126   var shellprompt = '$ ';
 127
 128   term.prompt = function () {
 129     term.write('\r\n' + shellprompt);
 130   };
 131
 132   term.writeln('Welcome to xterm.js');
 133   term.writeln('This is a local terminal emulation, without a real terminal in the back-end.');
 134   term.writeln('Type some keys and commands to play around.');
 135   term.writeln('');
 136   term.prompt();
 137
 138   term.on('key', function (key, ev) {
 139     var printable = (
 140       !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey
 141     );
 142
 143     if (ev.keyCode == 13) {
 144       term.prompt();
 145     } else if (ev.keyCode == 8) {
 146      // Do not delete the prompt
 147       if (term.x > 2) {
 148         term.write('\b \b');
 149       }
 150     } else if (printable) {
 151       term.write(key);
 152     }
 153   });
 154
 155   term.on('paste', function (data, ev) {
 156     term.write(data);
 157   });
 158 }