jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rename plain to cliView, have max height on console output and fix scroll to bottom

Browse source
This commit is contained in:
Joe Walker 2010-12-13 14:39:32 +00:00
commit 71e069dec1
4 changed files with 34 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
plugins/cockpit/lib/index.js
View file

@ -42,7 +42,7 @@ exports.startup = function(data, reason) {
window.testCli = require('cockpit/test/testCli');
require('cockpit/ui/settings').startup(data, reason);
require('cockpit/ui/plain').startup(data, reason);
require('cockpit/ui/cliView').startup(data, reason);
};
/*

12
plugins/cockpit/lib/ui/plain.css → plugins/cockpit/lib/ui/cliView.css
View file

@ -4,6 +4,7 @@
border: none; outline: none;
font-family: consolas, courier, monospace;
font-size: 120%;
padding-left: 16px;
}
.cptOutput {
@ -14,7 +15,7 @@
padding: 10px;
margin: 0 15px;
background: #DDD; color: #000;
overflow: hidden;
overflow: auto;
position: absolute;
z-index: 999;
font-family: consolas, courier, monospace;
@ -26,7 +27,7 @@
}
.cptCompletion {
color: #666;
color: #999;
padding: 0 0 5px 2px;
position: absolute;
z-index: -1000;
@ -65,6 +66,7 @@
.cptCompletion span.INCOMPLETE { color: #DDD; border-bottom: 2px dotted #F80; }
.cptCompletion span.INVALID { color: #DDD; border-bottom: 2px dotted #F00; }
span.cptPrompt { color: #66F; font-weight: bold; }
@ -142,12 +144,6 @@
height: 25px; right: 0; bottom: 0; left: 0;
}
.cptPrompt {
width: 40px; padding-left: 5px;
position: absolute;
top: 0; width: 40px; bottom: 0; left: 0;
}
.cptKbd {
position: absolute;
top: 0; right: 0; bottom: 0; left: 40px;

31
plugins/cockpit/lib/ui/plain.js → plugins/cockpit/lib/ui/cliView.js
View file

@ -38,7 +38,7 @@
define(function(require, exports, module) {
var editorCss = require("text!cockpit/ui/plain.css");
var editorCss = require("text!cockpit/ui/cliView.css");
var dom = require("pilot/dom").dom;
dom.importCssString(editorCss);
@ -61,7 +61,7 @@ var NO_HINT = new Hint(Status.VALID, '', 0, 0);
* 2. Attach a set of events so the command line works
*/
exports.startup = function(data, reason) {
var plainUi = new CliView(data);
var cliView = new CliView(data);
};
/**
@ -74,7 +74,7 @@ function CliView(data) {
// TODO: we should have a better way to specify command lines???
this.element = this.doc.getElementById('cockpit');
if (!this.element) {
console.log('No element with an id of cockpit. Bailing on plain cli');
console.log('No element with an id of cockpit. Bailing on cli');
return;
}
@ -88,6 +88,7 @@ function CliView(data) {
this.hints = [];
this.createElements();
this.update();
}
CliView.prototype = {
/**
@ -113,6 +114,12 @@ CliView.prototype = {
this.outputDirection.addEventListener('change', this.resizer.bind(this));
this.resizer();
var setMaxOutputHeight = function() {
this.output.style.maxHeight = this.outputHeight.get() + 'px';
}.bind(this);
this.outputHeight.addEventListener('change', setMaxOutputHeight);
setMaxOutputHeight();
canon.addEventListener('output', function(ev) {
new RequestView(ev.request, this);
}.bind(this));
@ -125,6 +132,16 @@ CliView.prototype = {
}.bind(this), false);
},
/**
* We need to see the output of the latest command entered
*/
scrollOutputToBottom: function() {
// Certain browsers have a bug such that scrollHeight is too small
// when content does not fill the client area of the element
var scrollHeight = Math.max(this.output.scrollHeight, this.output.clientHeight);
this.output.scrollTop = scrollHeight - this.output.clientHeight;
},
/**
* To be called on window resize or any time we want to align the elements
* with the input box.
@ -146,7 +163,7 @@ CliView.prototype = {
this.hinter.style.bottom = (this.win.innerHeight - rect.top) + 'px';
}
this.hinter.style.left = (rect.left + 30) + 'px';
this.hinter.style.maxWidth = (rect.width - 90) + 'px';
this.hinter.style.maxWidth = (rect.width - 110) + 'px';
if (this.outputDirection.get() === 'below') {
this.output.style.top = rect.bottom + 'px';
@ -157,7 +174,7 @@ CliView.prototype = {
this.output.style.bottom = (this.win.innerHeight - rect.top) + 'px';
}
this.output.style.left = rect.left + 'px';
this.output.style.width = (rect.width - 60) + 'px';
this.output.style.width = (rect.width - 80) + 'px';
},
/**
@ -240,7 +257,7 @@ CliView.prototype = {
this.hints = this.cli.getHints();
// Create a marked up version of the input
var highlightedInput = '';
var highlightedInput = '<span class="cptPrompt">&gt;</span> ';
if (this.element.value.length > 0) {
// 'scores' is an array which tells us what chars are errors
// Initialize with everything VALID
@ -292,7 +309,7 @@ CliView.prototype = {
var onTab = display.predictions[0];
onTab = onTab.name ? onTab.name : onTab;
this.completer.innerHTML = highlightedInput + ' &nbsp;&#x2192; ' + onTab;
this.completer.innerHTML = highlightedInput + ' &nbsp;&#x21E5; ' + onTab;
}
else {
this.completer.innerHTML = highlightedInput;

11
plugins/cockpit/lib/ui/requestView.js
View file

@ -40,18 +40,18 @@ define(function(require, exports, module) {
var util = require('pilot/util');
var editorCss = require("text!cockpit/ui/requestView.css");
var requestViewCss = require("text!cockpit/ui/requestView.css");
var dom = require("pilot/dom").dom;
dom.importCssString(editorCss);
dom.importCssString(requestViewCss);
var plainRow = require("text!cockpit/ui/requestView.html");
var requestViewHtml = require("text!cockpit/ui/requestView.html");
var Templater = require("pilot/domtemplate").Templater;
/**
* Pull the HTML into the DOM, but don't add it to the document
*/
var templates = document.createElement('div');
templates.innerHTML = plainRow;
templates.innerHTML = requestViewHtml;
var row = templates.querySelector('.cptRow');
/**
@ -138,8 +138,7 @@ RequestView.prototype = {
}
this.output.appendChild(node);
}, this);
// TODO: Fix this
// this.cliView.scrollToBottom();
this.cliView.scrollOutputToBottom();
util.setClass(this.output, 'cmd_error', this.request.error);