canterm v1.0.6

CanTerm

Replaces specified <div> elements with a Canvas-drawn terminal.

Installation

npm install canterm

Usage

Require the module and initiate the object with the element.

var CanTerm = require('canterm');

var terminal = new CanTerm(element, path)

Give a <div> element the specified class.

<div class='element'></div>

It will be replaced with a container <div> with the .repl class that contains the canvas elements used to draw the terminal.

<div class="element">
    <div class="repl" tabindex="-1" style="height: 150px;">
        <canvas id="background" class="canvas-helper" width="384" style="transform: translateY(0px);"></canvas>
        <canvas id="cursor" class="canvas-helper" width="367" style="transform: translateY(-156px);"></canvas>
        <canvas id="text" class="canvas-helper" width="367" style="transform: translateY(-312px);"></canvas>
        <canvas id="history" class="canvas-helper" width="367" style="transform: translateY(-468px);"></canvas>
        <canvas id="cursorHelper" class="canvas-helper" width="367" style="transform: translateY(-624px);"></canvas>
        <canvas id="counter" class="canvas-helper" width="367" style="transform: translateY(-780px);"></canvas>
    </div>
</div>

API

terminal.hide()

Hide the terminal.

terminal.show()

Show the terminal.

terminal.toggle()

Toggle the terminal display on and off.

terminal.log(data)

Logs data to the terminal history view.

• data: Data to submit. If left blank, logs whatever has been typed into the terminal.

terminal.submit(data)

Submits data, then emits a submit event and logs the data.

• data: Data to submit. If left blank, submits whatever has been typed into the terminal.

terminal.addKeyEvent(keys, callback)

• keys: Key or keys to register callback to.
• callback: Function to register to keypress. Defaults to (event) => {return;}.

Adds a callback to a keypress on the terminal. Example usage:

terminal.addKeyEvent('Enter', (e) => {
    terminal.submit();
    terminal.submitHistory.index = terminal.submitHistory.history.length;
    return;
});

terminal.addKeyEvent(['Tab', 'Control', 'Alt', 'Shift'], (e) => {
    e.preventDefault();
    return;
});

Adding a key event to 'default' will fire the callback for any key that is not registered.

terminal.addKeyEvent('default', (e) => {
    terminal.data.splice(terminal.position, 0, e.key);
    terminal.position+=e.key.length;

    terminal.drawText(terminal.text);
    return;
});

The following key events are registered by default:

Tab, Control, Shift, Alt

(e) => {
    e.preventDefault();
    return;
}

Enter

(e) => {
    terminal.submit();
    terminal.submitHistory.index = terminal.submitHistory.history.length;
    return;
}

ArrowUp

(e) => {
    if (terminal.submitHistory.index == null) {

        terminal.submitHistory.index = terminal.submitHistory.history.length;

    }
    if (terminal.submitHistory.index > 0) {

        terminal.submitHistory.index--;

    }

    terminal.data = terminal.submitHistory.history[terminal.submitHistory.index].split('');

    terminal.position = terminal.data.length;

    terminal.drawText(terminal.text);
    return;
}

ArrowDown

(e) => {
    if (terminal.submitHistory.index == null) {

        terminal.submitHistory.index = terminal.submitHistory.history.length;

    }
    if (terminal.submitHistory.index < terminal.submitHistory.history.length-1) {

        terminal.submitHistory.index++;
        terminal.data = terminal.submitHistory.history[terminal.submitHistory.index].split('');

    } else {
        terminal.data = [];
    }

    terminal.position = terminal.data.length;

    terminal.drawText(terminal.text);
    return;
}

ArrowLeft

(e) => {
    if (terminal.position > 0) {
        terminal.position--;
        terminal.drawCursor('fill');
    }
    return;
}

ArrowRight

(e) => {
    if (terminal.position < terminal.data.length) {
        terminal.position++;
        terminal.drawCursor('fill');
    }
    return;
}

Backspace

(e) => {
    if (terminal.data.length) {

        terminal.data.splice(terminal.position-1, 1);
        terminal.position--;

        terminal.drawText(terminal.text);

    }    
    return;
}

Delete

(e) => {
    if (terminal.data.length) {

        terminal.data.splice(terminal.position, 1);

        terminal.drawText(terminal.text);

    }
    return;
}

default

(e) => {
    terminal.data.splice(terminal.position, 0, e.key);
    terminal.position+=e.key.length;

    terminal.drawText(terminal.text);
    return;
}