First functional resizing demo

Fix #211

demo/index.html

@@ -5,6 +5,7 @@
         <link rel="stylesheet" href="../src/xterm.css" />
         <link rel="stylesheet" href="../addons/fullscreen/fullscreen.css" />
         <link rel="stylesheet" href="style.css" />
+      	<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
         <script src="../src/xterm.js" ></script>
         <script src="../addons/attach/attach.js" ></script>
         <script src="../addons/fit/fit.js" ></script>
@@ -18,6 +19,19 @@
         <div>
           <h2>Options</h2>
           <label><input type="checkbox" id="option-cursor-blink"> cursorBlink</label>
+          <div>
+          	<h3>Size</h3>
+            <div>
+              <div style="display: inline-block; margin-right: 16px;">
+                <label for="cols">Columns</label>
+                <input type="number" id="cols" />
+              </div>
+              <div style="display: inline-block; margin-right: 16px;">
+                <label for="rows">Rows</label>
+                <input type="number" id="rows" />
+              </div>
+            </div>
+          </div>
         </div>
         <script src="main.js" defer ></script>
     </body>

demo/main.js

@@ -2,12 +2,30 @@ var term,
     protocol,
     socketURL,
     socket,
-    pid;
+    pid,
+    charWidth,
+    charHeight;
 
-var terminalContainer = document.getElementById('terminal-container');
-var optionElements = {
-  cursorBlink: document.querySelector('#option-cursor-blink')
-};
+var terminalContainer = document.getElementById('terminal-container'),
+    optionElements = {
+      cursorBlink: document.querySelector('#option-cursor-blink')
+    },
+    colsElement = document.getElementById('cols'),
+    rowsElement = document.getElementById('rows');
+
+function setTerminalSize () {
+  var cols = parseInt(colsElement.value),
+      rows = parseInt(rowsElement.value),
+      width = (cols * charWidth).toString() + 'px',
+      height = (rows * charHeight).toString() + 'px';
+
+  terminalContainer.style.width = width;
+  terminalContainer.style.height = height;
+  term.resize(cols, rows);
+}
+
+colsElement.addEventListener('change', setTerminalSize);
+rowsElement.addEventListener('change', setTerminalSize);
 
 optionElements.cursorBlink.addEventListener('change', createTerminal);
 
@@ -25,17 +43,30 @@ function createTerminal() {
     if (!pid) {
       return;
     }
+    var cols = size.cols,
+        rows = size.rows,
+        url = '/terminals/' + pid + '/size?cols=' + cols + '&rows=' + rows;
+
+    fetch(url, {method: 'POST'});
   });
   protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://';
   socketURL = protocol + location.hostname + ((location.port) ? (':' + location.port) : '') + '/terminals/';
 
   term.open(terminalContainer);
+  term.fit();
 
   var initialGeometry = term.proposeGeometry(),
       cols = initialGeometry.cols,
       rows = initialGeometry.rows;
 
+  colsElement.value = cols;
+  rowsElement.value = rows;
+
   fetch('/terminals?cols=' + cols + '&rows=' + rows, {method: 'POST'}).then(function (res) {
+
+    charWidth = Math.ceil(term.element.offsetWidth / cols);
+    charHeight = Math.ceil(term.element.offsetHeight / rows);
+
     res.text().then(function (pid) {
       window.pid = pid;
       socketURL += pid;
@@ -45,8 +76,6 @@ function createTerminal() {
       socket.onerror = runFakeTerminal;
     });
   });
-
-  term.fit();
 }
 
 
@@ -82,9 +111,7 @@ function runFakeTerminal() {
     if (ev.keyCode == 13) {
       term.prompt();
     } else if (ev.keyCode == 8) {
-      /*
-     * Do not delete the prompt
-     */
+     // Do not delete the prompt
       if (term.x > 2) {
         term.write('\b \b');
       }

demo/style.css

@@ -9,8 +9,8 @@ h1 {
 }
 
 #terminal-container {
-    width: 960px;
-    height: 600px;
+    width: 800px;
+    height: 450px;
     margin: 0 auto;
     padding: 2px;
 }