Merge pull request #497 from sourcelair/issue-#488-tabstopwidth

Implement configurable tab stop width

demo/index.html

@@ -20,7 +20,10 @@
             <label><input type="checkbox" id="option-cursor-blink"> cursorBlink</label>
           </p>
           <p>
-            <label>Scrollback <input type="number" id="option-scrollback" value="1000" /></label>
+            <label>scrollback <input type="number" id="option-scrollback" value="1000" /></label>
+          </p>
+          <p>
+            <label>tabStopWidth <input type="number" id="option-tabstopwidth" value="8" /></label>
           </p>
           <div>
           	<h3>Size</h3>

demo/main.js

@@ -9,14 +9,15 @@ var term,
 var terminalContainer = document.getElementById('terminal-container'),
     optionElements = {
       cursorBlink: document.querySelector('#option-cursor-blink'),
-      scrollback: document.querySelector('#option-scrollback')
+      scrollback: document.querySelector('#option-scrollback'),
+      tabstopwidth: document.querySelector('#option-tabstopwidth')
     },
     colsElement = document.getElementById('cols'),
     rowsElement = document.getElementById('rows');
 
 function setTerminalSize () {
-  var cols = parseInt(colsElement.value),
-      rows = parseInt(rowsElement.value),
+  var cols = parseInt(colsElement.value, 10),
+      rows = parseInt(rowsElement.value, 10),
       width = (cols * charWidth).toString() + 'px',
       height = (rows * charHeight).toString() + 'px';
 
@@ -32,7 +33,10 @@ optionElements.cursorBlink.addEventListener('change', function () {
   term.setOption('cursorBlink', optionElements.cursorBlink.checked);
 });
 optionElements.scrollback.addEventListener('change', function () {
-  terminal.setOption('scrollback', parseInt(optionElements.scrollback.value, 10));
+  term.setOption('scrollback', parseInt(optionElements.scrollback.value, 10));
+});
+optionElements.tabstopwidth.addEventListener('change', function () {
+  term.setOption('tabStopWidth', parseInt(optionElements.tabstopwidth.value, 10));
 });
 
 createTerminal();
@@ -44,7 +48,8 @@ function createTerminal() {
   }
   term = new Terminal({
     cursorBlink: optionElements.cursorBlink.checked,
-    scrollback: parseInt(optionElements.scrollback.value, 10)
+    scrollback: parseInt(optionElements.scrollback.value, 10),
+    tabStopWidth: parseInt(optionElements.tabstopwidth.value, 10)
   });
   term.on('resize', function (size) {
     if (!pid) {

src/xterm.js

@@ -360,7 +360,8 @@ Terminal.defaults = {
   screenKeys: false,
   debug: false,
   cancelEvents: false,
-  disableStdin: false
+  disableStdin: false,
+  tabStopWidth: 8
   // programFeatures: false,
   // focusKeys: false,
 };
@@ -433,6 +434,7 @@ Terminal.prototype.setOption = function(key, value) {
       this.element.classList.toggle(`xterm-cursor-style-underline`, value === 'underline');
       this.element.classList.toggle(`xterm-cursor-style-bar`, value === 'bar');
       break;
+    case 'tabStopWidth': this.setupStops(); break;
   }
 };
 
@@ -2118,7 +2120,7 @@ Terminal.prototype.setupStops = function(i) {
     i = 0;
   }
 
-  for (; i < this.cols; i += 8) {
+  for (; i < this.cols; i += this.getOption('tabStopWidth')) {
     this.tabs[i] = true;
   }
 };