From 908b06cfa783142bcff899b9e55378caa53323dc Mon Sep 17 00:00:00 2001 From: Daniel Imms Date: Sun, 3 Jun 2018 11:18:34 +0100 Subject: [PATCH] Some polish --- demo/index.html | 125 +++++++++++++----------------------------------- demo/main.js | 75 +++-------------------------- 2 files changed, 39 insertions(+), 161 deletions(-) diff --git a/demo/index.html b/demo/index.html index 168f56e4..41a77205 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,95 +1,36 @@ - - xterm.js demo - - - - - - - -

xterm.js: A terminal for the web

-
-
-

Actions

-

- - -

-
-
-

Options

-

- -

-

- -

-

- -

-

- -

-

- -

-

- -

-

- -

-

- -

-
-

Size

-
-
- - -
-
- - -
-
- - -
-
-
-
-

Accessibility

-

- -

-
-

Attention: The demo is a barebones implementation and is designed for the development and evaluation of xterm.js only. Exposing the demo to the public as is would introduce security risks for the host.

- - + + xterm.js demo + + + + + + + +

xterm.js: A terminal for the web

+
+
+

Actions

+

+ + +

+
+
+

Options

+

These options can be set in the Terminal constructor or using the Terminal.setOption function.

+
+
+
+

Style

+
+ + +
+
+

Attention: The demo is a barebones implementation and is designed for the development and evaluation of xterm.js only. Exposing the demo to the public as is would introduce security risks for the host.

+ + diff --git a/demo/main.js b/demo/main.js index ef4a0437..e4d0bb2b 100644 --- a/demo/main.js +++ b/demo/main.js @@ -26,38 +26,13 @@ var terminalContainer = document.getElementById('terminal-container'), findNext: document.querySelector('#find-next'), findPrevious: document.querySelector('#find-previous') }, - optionElements = { - cursorBlink: document.querySelector('#option-cursor-blink'), - cursorStyle: document.querySelector('#option-cursor-style'), - macOptionIsMeta: document.querySelector('#option-mac-option-is-meta'), - scrollback: document.querySelector('#option-scrollback'), - transparency: document.querySelector('#option-transparency'), - tabstopwidth: document.querySelector('#option-tabstopwidth'), - experimentalCharAtlas: document.querySelector('#option-experimental-char-atlas'), - bellStyle: document.querySelector('#option-bell-style'), - screenReaderMode: document.querySelector('#option-screen-reader-mode') - }, - colsElement = document.getElementById('cols'), - rowsElement = document.getElementById('rows'), paddingElement = document.getElementById('padding'); -function setTerminalSize() { - var cols = parseInt(colsElement.value, 10); - var rows = parseInt(rowsElement.value, 10); - var width = (cols * term.renderer.dimensions.actualCellWidth + term.viewport.scrollBarWidth).toString() + 'px'; - var height = (rows * term.renderer.dimensions.actualCellHeight).toString() + 'px'; - terminalContainer.style.width = width; - terminalContainer.style.height = height; - term.fit(); -} - function setPadding() { term.element.style.padding = parseInt(paddingElement.value, 10).toString() + 'px'; term.fit(); } -colsElement.addEventListener('change', setTerminalSize); -rowsElement.addEventListener('change', setTerminalSize); paddingElement.addEventListener('change', setPadding); actionElements.findNext.addEventListener('keypress', function (e) { @@ -73,36 +48,6 @@ actionElements.findPrevious.addEventListener('keypress', function (e) { } }); -optionElements.cursorBlink.addEventListener('change', function () { - term.setOption('cursorBlink', optionElements.cursorBlink.checked); -}); -optionElements.macOptionIsMeta.addEventListener('change', function () { - term.setOption('macOptionIsMeta', optionElements.macOptionIsMeta.checked); -}); -optionElements.transparency.addEventListener('change', function () { - var checked = optionElements.transparency.checked; - term.setOption('allowTransparency', checked); - term.setOption('theme', checked ? {background: 'rgba(0, 0, 0, .5)'} : {}); -}); -optionElements.cursorStyle.addEventListener('change', function () { - term.setOption('cursorStyle', optionElements.cursorStyle.value); -}); -optionElements.bellStyle.addEventListener('change', function () { - term.setOption('bellStyle', optionElements.bellStyle.value); -}); -optionElements.scrollback.addEventListener('change', function () { - term.setOption('scrollback', parseInt(optionElements.scrollback.value, 10)); -}); -optionElements.tabstopwidth.addEventListener('change', function () { - term.setOption('tabStopWidth', parseInt(optionElements.tabstopwidth.value, 10)); -}); -optionElements.experimentalCharAtlas.addEventListener('change', function () { - term.setOption('experimentalCharAtlas', optionElements.experimentalCharAtlas.value); -}); -optionElements.screenReaderMode.addEventListener('change', function () { - term.setOption('screenReaderMode', optionElements.screenReaderMode.checked); -}); - createTerminal(); function createTerminal() { @@ -110,13 +55,7 @@ function createTerminal() { while (terminalContainer.children.length) { terminalContainer.removeChild(terminalContainer.children[0]); } - term = new Terminal({ - macOptionIsMeta: optionElements.macOptionIsMeta.enabled, - cursorBlink: optionElements.cursorBlink.checked, - scrollback: parseInt(optionElements.scrollback.value, 10), - tabStopWidth: parseInt(optionElements.tabstopwidth.value, 10), - screenReaderMode: optionElements.screenReaderMode.checked - }); + term = new Terminal({}); window.term = term; // Expose `term` to window for debugging purposes term.on('resize', function (size) { if (!pid) { @@ -145,7 +84,7 @@ function createTerminal() { paddingElement.value = 0; // Set terminal size again to set the specific dimensions on the demo - setTerminalSize(); + updateTerminalSize(); fetch('/terminals?cols=' + term.cols + '&rows=' + term.rows, {method: 'POST'}).then(function (res) { @@ -247,7 +186,7 @@ function initOptions(term) { } }); - var html = '

Options

'; + var html = ''; booleanOptions.forEach(o => { html += `
`; }); @@ -262,21 +201,19 @@ function initOptions(term) { } }); - const container = document.createElement('div'); + var container = document.getElementById('options-container'); container.innerHTML = html; - document.body.appendChild(container); // Attach listeners - // var allOptions = booleanOptions.concat(numberOptions, Object.keys(stringOptions)); booleanOptions.forEach(o => { - const input = document.getElementById(`opt-${o}`); + var input = document.getElementById(`opt-${o}`); input.addEventListener('change', () => { console.log('change', o, input.checked); term.setOption(o, input.checked); }); }); numberOptions.concat(Object.keys(stringOptions)).forEach(o => { - const input = document.getElementById(`opt-${o}`); + var input = document.getElementById(`opt-${o}`); input.addEventListener('change', () => { console.log('change', o, input.value); if (o === 'cols' || o === 'rows') {