jquery-console

A terminal emulator for making command consoles written in JavaScript with jQuery.

See LICENSE for the license.

Example

For a list of examples, see the demo file, and for a live demo, see live demo on my home page.

Simple example:

var container = $('<div class="console">');
$('body').append(container);
var controller = container.console({
  promptLabel: 'Demo> ',
  commandValidate:function(line){
    if (line == "") return false;
    else return true;
  },
  commandHandle:function(line){
      return [{msg:"=> [12,42]",
               className:"jquery-console-message-value"},
              {msg:":: [a]",
               className:"jquery-console-message-type"}]
  },
  autofocus:true,
  animateScroll:true,
  promptHistory:true,
  charInsertTrigger:function(keycode,line){
     // Let you type until you press a-z
     // Never allow zero.
     return !line.match(/[a-z]+/) && keycode != '0'.charCodeAt(0);
  }
});

Some CSS for your console:

div.console { font-size: 14px }
div.console div.jquery-console-inner
 { width:900px; height:200px; background:#333; padding:0.5em;
   overflow:auto }
div.console div.jquery-console-prompt-box
 { color:#fff; font-family:monospace; }
div.console div.jquery-console-focus span.jquery-console-cursor
 { background:#fefefe; color:#333; font-weight:bold }
div.console div.jquery-console-message-error
 { color:#ef0505; font-family:sans-serif; font-weight:bold;
   padding:0.1em; }
div.console div.jquery-console-message-value
 { color:#1ad027; font-family:monospace;
   padding:0.1em; }
div.console div.jquery-console-message-type
 { color:#52666f; font-family:monospace;
   padding:0.1em; }
div.console span.jquery-console-prompt-label { font-weight:bold }

Usage options

Here are options which can be passed to console:

Option	Type	Description
autofocus	bool	Autofocus the terminal, rather than having to click on it.
promptHistory	bool	Provide history support (kind of crappy, needs doing properly.)
historyPreserveColumn	bool	Preserve the column you were one when switching between history.
welcomeMessage	string	Just a first message to display on the terminal.
promptLabel	string	Prompt string like `'JavaScript> '`.
cols	integer	The number of cols, this value is only used by the command completion to format the list of results.
commandValidate	function	When user hits return, validate whether to trigger commandHandle and re-prompt.
commandHandle	function	Handle the command line, return a string, boolean, or list of `{msg:"foo",className:"my-css-class"}`. `commandHandle(line,report)` is called. Report function is for you to report a result of the command asynchronously.
completeHandle	function	Handle the command completion when the tab key is pressed. It returns a list of string completion suffixes.
animateScroll	bool	Whether to animate the scroll to top. Currently disabled.
charInsertTrigger	function	Predicate for whether to allow character insertion. `charInsertTrigger(char,line)` is called.
cancelHandle	function	Handle a user-signaled interrupt.
fadeOnReset	bool	Whether to trigger a fade in/out when the console is reset. Defaults to `true`.

jez / jquery-console Goto Github PK

jquery-console's Introduction

jquery-console

Example

Usage options

Uses in the wild

jquery-console's People

Contributors

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent