display: none;

height: 400px;

width: 97.0%;

opacity: 0.9;

position: fixed;

top: 0;

left: 0;

z-index: 1000;

font-family: 'Source Code Pro', sans-serif;

font-size: 0.9em;

<div id="shell-panel">

<div>Type <code>help</code> or hit <code>TAB</code> for a list of commands. Hit

<code>Ctrl-C</code> to hide the shell

</div>

<div id="shell-view"></div>

<code>pathhandler.js</code> - provide cd, ls, pwd and path completion toolikit

<p id="demo"><em>Hit the <span style="color: #ffcc00; font-weight: bold; font-size: 1.2em">~</span> key to show a demo console ( <a href="docs/example.html">Annotated source of demo</a>)</em></p>

<li>base shell UI should get some basic behaviors

<ul>

<li>

<code>more</code>-like handling for output that exceeds the shell viewport size

</li>

<li>resizing and close chrome</li>

</ul>

</li>

<li>help - list all known commands (including user added)</li>

<li>clear - clear the "screen" i.e. viewport</li>

<li>history - show the command history captured by <code>readline.js</code> in <code>history.js</code>

// the shell config parameter `shell-view-id`. The `Shell` display model relies on a div to contain a 'view'. The

// acts as the view-port, i.e. the visible portion of the shell content, while the view is appended to and

// scrolled up as new content is added.

// Wire up a the keypress handler. This will be used only for shell activation.

$(document).keypress(function(event) {

// If the shell is already active drop out of the keyhandler, since all keyhandling happens in `Readline`.

if(shell.isActive()) {

return;

}

// Mimicking *Quake*-style dropdown consoles, we activate and show on `~`.

_console.log("activating shell");

if(event.keyCode == 126) {

event.preventDefault();

shell.activate();

$consolePanel.slideDown();

$consolePanel.focus();

}

});

// Whenever we get either a `EOT` (`Ctrl-D` on empty line) or a `Cancel` (`Ctrl-C`) signal from the shell,

// we deactivate the shell and hide the console.

function hideAndDeactivate() {

_console.log("deactivating shell");

shell.deactivate();

$consolePanel.slideUp();

$consolePanel.blur();

}

// Attach our hide function to the EOT and Cancel events.

shell.onEOT(hideAndDeactivate);

shell.onCancel(hideAndDeactivate);