Skip to content

Implement configurable tab stop width #497

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
parisk merged 3 commits into from
Jan 20, 2017
Merged

Implement configurable tab stop width #497

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f4293a6
Fix #488: Implement configurable tab width
parisk Jan 20, 2017
8cb46f2
Move `tabStopWidth` option callback into `setOption`
parisk Jan 20, 2017
6e1628b
Fixes on demo based on configurable `tabStopWidth`
parisk Jan 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,13 @@ <h1>xterm.js: xterm, in the browser</h1>
<div>
<h2>Options</h2>
<p>
<label><input type="checkbox" id="option-cursor-blink"> cursorBlink</label>
<label>cursorBlink <input type="checkbox" id="option-cursor-blink"></label>
Copy link
Member

@Tyriar Tyriar Jan 20, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Normally checkboxes are at the start of the line?

Copy link
Contributor Author

@parisk parisk Jan 20, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did this to keep uniformity with the rest. Will revert.

</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="4" /></label>
Copy link
Member

@Tyriar Tyriar Jan 20, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

value=8 as the default?

Copy link
Contributor Author

@parisk parisk Jan 20, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nah, forgot it from testing.

</p>
<div>
<h3>Size</h3>
Expand Down
11 changes: 8 additions & 3 deletions demo/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ 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');
Expand All @@ -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));
Copy link
Member

@Tyriar Tyriar Jan 20, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add radix of 10 as second arg as it's a mandatory arg https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

});

createTerminal();
Expand All @@ -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)
Copy link
Member

@Tyriar Tyriar Jan 20, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Radix arg

});
term.on('resize', function (size) {
if (!pid) {
Expand Down
6 changes: 4 additions & 2 deletions src/xterm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,7 +360,8 @@ Terminal.defaults = {
screenKeys: false,
debug: false,
cancelEvents: false,
disableStdin: false
disableStdin: false,
tabStopWidth: 8
// programFeatures: false,
// focusKeys: false,
};
Expand Down Expand Up @@ -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;
Copy link
Member

@Tyriar Tyriar Jan 20, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Eventually we could move this to event listeners which would probably be a better structure.

Copy link
Contributor Author

@parisk parisk Jan 20, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep. It does the job for now, so let's keep this for another PR.

}
};

Expand Down Expand Up @@ -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;
}
};
Expand Down