JQuery Terminal Emulator Plugin

__ _____ ________ __ / // _ /__ __ _____ ___ __ _/__ ___/__ ___ ______ __ __ __ ___ / / __ / // // // // // _ // _// // / / // _ // _// // // \/ // _ \/ / / / // // // // // ___// / / // / / // ___// / / / / // // /\ // // / /__ \___//____ \\___//____//_/ _\_ / /_//____//_/ /_/ /_//_//_/ /_/ \__\_\___/ \/ /____/ 0.11.23
__ ____ ________ __ / // _ /__ ___/__ ___ ______ __ __ __ ___ / / __ / // // / / // _ // _// // // \/ // _ \/ / / / // // / / // ___// / / / / // // /\ // // / /__ \___//____ \ /_//____//_/ /_/ /_//_//_/ /_/ \__\_\___/ \/ 0.11.23
__ ____ ________ / // _ /__ ___/__ ___ ______ __ / // // / / // _ // _// / / / // // / / // ___// / / / / / \___//____ \ /_//____//_/ /_/ /_/ \/ 0.11.23
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Fork JQuery Terminal Emulator on GitHub

API Reference

Advertisement

Interpreter

To create terminal you must pass interpreter function (as first argument) which will be called when you type enter. Function has two argumentss command that user type in terminal and terminal instance. Optionally you can pass string as first argument, in this case interpreter function will be created for you using passed string as URI (path to file) of JSON-RPC service (it's ajax so must be on the same server).

$('#some_id').terminal(function(command, term) {
    if (command == 'test') {
        term.echo("you just typed 'test'");
    } else {
        term.echo('unknown command');
    }
}, { prompt: '>', name: 'test' });
        

You can pass object as first argument - the methods will be invoked by commands typed by a user. In those methods this will point to terminal object.

$('#some_id').terminal({
    echo: function(arg1) {
        this.echo(arg1);
    },
    rpc: 'some_file.php',
    calc: {
        add: function(a, b) {
            this.echo(a+b);
        },
        sub: function(a, b) {
            this.echo(a-b);
        }
    }
}, { prompt: '>', greeting: false });
        

This code will create two command echo that will print first argument and add that will add two integers.

From version 0.8.0 you can also use array with strings, objects and functions. You can use multiple number of objects and strings and one function (that will be called last if no other commands found). If you have ignoreSystemDescribe function enabled you will be able to use only one string (JSON-RPC url). If you have completion enabled then your commands will be that from objects and JSON-RPC that have system.describe

$('#some_id').terminal(["rpc.php", {
    "mysql": function() {
        this.push(function(command, term) {
            $.jrpc("rpc.php", 'mysql', [command], function(json) {
                term.echo(json.result);
            });
        }, {
            prompt: 'mysql> '
        );
    }
}], { prompt: '>', greeting: false });
        

In previous example mysql will be exception, even that rpc have that method it will not call it but create new interpreter.

Terminal will always process numbers if processArguments is set to true (by default).

Options

This is list of options (for second argument):

Terminal object

You will have access to terminal object in this object when you put object as first argument. In second argument if you put a function. That object is also returned by the plugin itself. The terminal is created only once so you can call that plugin multiple times. The terminal object is jQuery object extended by methods listed below.

Instance Methods

This is list of available methods (you can also use jQuery methods):

Terminal Utilites

Object $.terminal contain bunch of utilities use by terminal, but they can also be used by user code.

Command Line

Command Line is created as separate plugin, so you can create instance of it (if you don't want whole terminal):

$('#some_id').cmd({
    prompt: '$> ',
    width: '100%',
    commands: function(command) {
        //process user commands
    }
});

Command Line options: name, keypress, keydown, mask, enabled, width, prompt, commands.

Command Line Methods

This is a list of methods if you are what to use only command line.

Keyboard shortcuts

This is list of keyboard shortcuts (mostly taken from bash):

Additional terminal controls

All interpreters have attached mousewheel event so you can stroll them using mouse. To swich between terminals you can just click on terminal that you want to activate (you can also use focus method).

If you select text using mouse you can paste it using middle mouse button (from version 0.8.0).

Changing Colors

To change color of terminal simply modify "jquery.terminal.css" file it's really short and not complicated, but you should set inverted class background-color to be the same as color of text.

To change color of one line you can call css jquery method in finalize function passed to echo function.

terminal.echo("hello blue", {
    finalize: function(div) {
        div.css("color", "blue");
    }
});

You can also use formating using echo function. To change whole terminal colors see style section.

Translation

All strings used by the plugin are located in $.terminal.defaults.strings object, so you can translate them and have i18n.

Error Handling

All exceptions in user functions (interpreter, prompt, and greetings) are catch and proper error is displayed on terminal.

Style

From version 0.8.0 blinking cursor is created using CSS3 animations (if available) so you can change that animation anyway you like, just look at jquery.terminal.css file. If browser don't support CSS3 animation blinking is created using JavaScript.

To change color of the cursor to green and backgroud to white you can use this css:

.terminal, .cmd {
    background: white;
    color: #0f0;
}
.terminal .inverted, .cmd .inverted, .cmd .cursor.blink {
    background-color: #0f0;
    color: white;
}
@-webkit-keyframes terminal-blink {
  0%, 100% {
      background-color: #fff;
      color: #0f0;
  }
  50% {
      background-color: #0e0;
      color: #fff;
  }
}

@-ms-keyframes terminal-blink {
  0%, 100% {
      background-color: #fff;
      color: #0f0;
  }
  50% {
      background-color: #0e0;
      color: #fff;
  }
}

@-moz-keyframes terminal-blink {
  0%, 100% {
      background-color: #fff;
      color: #0f0;
  }
  50% {
      background-color: #0e0;
      color: #fff;
  }
}
@keyframes terminal-blink {
  0%, 100% {
      background-color: #fff;
      color: #0f0;
  }
  50% {
      background-color: #0e0;
      color: #fff;
  }
}

If you use devel version of the css file you can use css variables with code like this:

.terminal {
  --color: green;
  --background: white;
}

The only caveat is that css variables are not supported by IE nor Edge.

To change cursor to vertical bar you can use this css:

.cmd .cursor.blink {
  color: #aaa;
  border-left: 1px solid #aaa;
  background-color: black;
  margin-left: -1px;
}
.terminal .inverted, .cmd .inverted, .cmd .cursor.blink {
    border-left-color: #000;
}
@-webkit-keyframes terminal-blink {
  0%, 100% {
      border-left-color: #aaa;
  }
  50% {
      border-left-color: #000;
  }
}

@-ms-keyframes terminal-blink {
  0%, 100% {
      border-left-color: #aaa;
  }
  50% {
      border-left-color: #000;
  }
}

@-moz-keyframes terminal-blink {
  0%, 100% {
      border-left-color: #aaa;
  }
  50% {
      border-left-color: #000;
  }
}
@keyframes terminal-blink {
  0%, 100% {
      border-left-color: #aaa;
  }
  50% {
      border-left-color: #000;
  }
}

With devel version you can simplify this using this css:

.terminal {
  --color: green;
  --background: white;
  --animation: terminal-bar;
}

If you need to support IE or Edge you can set animation using:

.cmd .cursor.blink {
    -webkit-animation-name: terminal-underline;
       -moz-animation-name: terminal-underline;
        -ms-animation-name: terminal-underline;
            animation-name: terminal-underline;
}
.terminal .inverted, .cmd .inverted {
    border-bottom-color: #aaa;
}

Or this css for bar cursor:

.cmd .cursor.blink {
    -webkit-animation-name: terminal-bar;
       -moz-animation-name: terminal-bar;
        -ms-animation-name: terminal-bar;
            animation-name: terminal-bar;
}
.terminal .inverted, .cmd .inverted {
    border-left-color: #aaa;
}

To change the color of the cursor with differerent animation that will work in IE or Edge you will need to create new @keyframes with different colors, like in previous examples.

To font size of the terminal you can use this code:

.terminal, .cmd, .terminal .terminal-output div div, .cmd .prompt {
    font-size: 20px;
    line-height: 24px;
}

Or if you use devel version (and don't care about IE or Edge) you can simplify the code using --size css variables like this:

.terminal {
  --size: 2;
}

The size is relative to original size so 1 is normal size 2 is double size.

You can take a look at the demo.

Authentication

You can provide your authentication function which will be called when user enter login and password. Function must have 3 arguments first is user name, second his password and third is callback function which must be called with token or falsy value if user enter wrong user and password. (You should call server via AJAX to authenticate the user).

You can retrieve token from terminal using token method on terminal instance. You can pass this token to functions on the server as first parameter and check if it's valid token.

If you set interpreter to string (it will use this string as URI for JSON-RPC service) you can set login function to string (to call custom method on service passed as interpreter) or true (it will call login method).

If you set URI of JSON-RPC service and login to true or string, it will always pass token as first argument to every JSON-RPC method.

Third party code and additional plugis

Terminal include this 3rd party libraries:

terminal also define 2 helper functions: