2. Advanced Usage
These are all the default settings for Termino.js
allow_scroll: true, // allow scroll up & down on terminal
prompt: "> ", // default prompt
command_key: 13, // default command key
terminal_killed_placeholder: "TERMINAL DISABLED", // default terminal input placeholder when kill.
terminal_output: ".termino-console", // default output query selector
terminal_input: ".termino-input", // default input query selector
disable_terminal_input: false // disable any user commands / inputs. --- Useful for making terminal animations etc!
You can over-ride these settings by simply passing your custom settings to your Termino.js instance like so -
let YOUR_CUSTOM_SETTINGS = {
allow_scroll: false, // disable scroll up & down on terminal
prompt: ">> ", // custom prompt
command_key: 18, // custom command key
terminal_killed_placeholder: "CUSTOM DISABLED PLACEHOLDER", // custom terminal input placeholder when kill.
terminal_output: ".termino-custom-console", // custom output query selector
terminal_input: ".termino--custom-input", // custom input query selector
disable_terminal_input: true // disable any user commands / inputs. --- Useful for making terminal animations etc!
}
Termino(terminalSelector, null, YOUR_CUSTOM_SETTINGS) You can also change the default scroll up & down keys - see key-codes
Note: To change the default "command" key see - Settings.
These are the default key codes for a Termino.js instance.
[{
"id": "SCROLL_UP_KEY", /// DEFAULT SCROLL UP KEY - "SCROLL_UP_KEY" ID NAME IS REQUIRED.
"key_code": 38
// "function": example() // you can add your own custom function to the scroll up button if needed!
}, {
"id": "SCROLL_DOWN_KEY", // DFEAULT SCROLL DOWN KEY - "SCROLL_DOWN_KEY" ID NAME IS REQUIRED.
"key_code": 40
// "function": example() // you can add your own custom function to the scroll down button if needed!
}];You can pass your own keycodes & functions to execute in a Termino.js instance like the example below -
/// CUSTOM TERMINAL KEY CODES
let YOUR_CUSTOM_KEYCODES = [{
"id": "CLEAR_TERM", // DESCRIBE YOUR KEY CODE FUNCTION BUTTON (OPTIONAL)
"function": "termClear()", // FUNCTION TO EXECUTE ON BUTTON
"key_code": 46 // KEYCODE FOR BUTTON
}, {
"id": "SCROLL_UP_KEY", /// CUSTOM SCROLL UP KEY - "SCROLL_UP_KEY" ID NAME IS REQUIRED.
"key_code": 12,
// "function": example() // you can add your own custom function to the scroll up button if needed!
}, {
"id": "SCROLL_DOWN_KEY", // CUSTOM SCROLL DOWN KEY - "SCROLL_DOWN_KEY" ID NAME IS REQUIRED.
"key_code": 15,
// "function": example() // you can add your own custom function to the scroll down button if needed!
}];
/// YOUR TERMINAL / TERMINO INSTANCE WITH CUSTOM KEYCODES
let term= Termino(document.getElementById("YOUR_TERMINAL"), YOUR_CUSTOM_KEYCODES)Note: To add your own commands to execute via KeyCodes / Keyboard Buttons see - keycodes.
You can add your own commands to a Termino.js instance example below -
// Termino.js - Terminal App Demo (Basic)
// initialize a Terminal via Termino.js
let term2= Termino(document.getElementById("Example_Terminal_2"))
function print_hello_world(){
term2.output("hello world")
}
async function add_numbers(){
let number1 = await term2.input("First number to add")
let number2 = await term2.input("Second number to add")
term2.output(Number(number1) + Number(number2))
}
async function basicTerminalApp(){
term2.output(`1. Print Hello Wolrd
2. Add Two Numbers
3. Exit`)
// call Termino.js / your terminal for inital input
let termvalue = await term2.input("What would you like to do?")
if(termvalue === "1"){
print_hello_world() // example of running your own custom function
}
if(termvalue === "2"){
add_numbers() // example of running your own custom function
}
if(termvalue === "3"){
term2.output("You chose option 3, exiting terminal")
await term2.delay(2000)
term2.kill() // exit terminal
}
if(termvalue != "1" && termvalue != "2" && termvalue != "3"){
term2.output("Invalid choice")
}
// after called - repeat function again (if not exit menu)
if(termvalue != "3"){
//// NOTE TO DEV!: To repeat / loop the terminal inputs - you need to loop your Termino.js instance / function.
await (basicTerminalApp)
}
}
basicTerminalApp()See also the Termino.js default commands that include (delay, input & etc) - Termino Functions
These are the functions you can call via the Termino.js API
// DEFAULT TERMINO FUNCTIONS FOR DEVELOPER USAGE
echo: termEcho, // ECHO MESSAGE TO TERM WITH CAROT
output: termOutput, // ECHO MESSAGE TO TERM WITHOUT CAROT
clear: termClear, // CLEAR THE TERMINAL
delay: delay, // DELAY FUNCTION BY X VALUE OF SECONDS
disable_input: termDisable, // DISABLE TERMINAL INPUT
enable_input: termEnable, // ENABLE TERMINAL INPUT
input: ask, // ASK USER QUESTION & RETURN VALUE - AWAIT BASED / PROMISED BASED VALUE
scroll_to_bottom: scrollTerminalToBottom, // SCROLL TERMINAL TO THE BOTTOM
scroll_to_top: scrollTerminalToTop, // SCROLL TERMINAL TO TOP
add_element: addElementWithID, // ADD HTML ELEMENT WITH ID TO TERMINAL,
remove_element: removeElementWithID, // REMOVE HTML ELEMENT WITH ID TO TERMINAL,
kill: termKill, // KILL THE TERMIMAL - IE.. SET INPUT TO DISABLED & CLEAR THE TERMINAL.
Example of usage below -
// YOUR TERMINO INSTANCE
let term = Termino(document.getElementById("Example_Terminal"))
term.echo("hello world")ANSI Escape Codes are special characters which can be used to control formatting, colors or other output preferences in a text terminal. Escape Codes are non-printing code and will not appear in a Termino.js console output directly.
Tho you can add support to render these codes via a library such as ansi_up - A javascript library that converts text with ANSI terminal codes into colorful HTML Zero dependencies.
Here is a provided example how you can add support for ANSI escape codes in a Termino.js browser based environment.
<!DOCTYPE html>
<html>
<head>
<title>Termino.js ANSI Escape Code Example</title>
</head>
<body>
<div id="terminal">
<pre><code class="termino-console"></code></pre>
<textarea class="termino-input" rows="1" wrap="hard"></textarea>
</div>
<script type="module">
import { Termino } from "https://cdn.jsdelivr.net/gh/MarketingPipeline/[email protected]/dist/termino.min.js";
import ansiUp from "https://cdn.skypack.dev/[email protected]";
let ansi_up = new ansiUp();
let term = Termino(document.getElementById("terminal"));
let html = ansi_up.ansi_to_html(
`\x1b[48;5;120mHello from Termino.js using ANSI\x1b[0m \u001B]8;;https://github.com/MarketingPipeline/Termino.js\u0007clickable\u001B]8;;\u0007\n\n\x1B[1;33;40m 33;40 \x1B[1;33;41m 33;41 \x1B[1;33;42m 33;42 \x1B[1;33;43m 33;43 \x1B[1;33;44m 33;44 \x1B[1;33;45m 33;45 \x1B[1;33;46m 33;46 \x1B[1m\x1B[0\n\n\x1B[1;33;42m >> Tests OK\n\n`
);
term.echo(html);
</script>
</body>
</html>You can also find a complete table of ANSI Escape Codes available at https://en.wikipedia.org/wiki/ANSI_escape_code
Since Termino.js allows you to bring your own CSS styling & HTML! You can customize the looks of your terminal the way you want it! A awesome CSS / SCSS library that will work awesome with Termino.js is TuiCss - a Text-based user interface CSS library.
Tho you can literally bring any CSS framework etc you prefer!
You can find a live demo of a custom styled Termino.js instance here
You might want to add accessibility features to your Termino.js app (in the browser), here is a example of how you might do so!
To submit a Termino.js input value with a button click etc, you can use a keyboard event. Example below -
document.querySelector(".termino-input").dispatchEvent(new KeyboardEvent('keypress', {'keyCode':13}));You can localize your apps by doing something like the following example below -
const en = {
WELCOME_MESSAGE: "Welcome to my app!",
GOODBYE_MESSAGE: "Goodbye, have a nice day!"
};
const fr = {
WELCOME_MESSAGE: "Bienvenue sur mon application !",
GOODBYE_MESSAGE: "Au revoir, passez une bonne journée !"
};
// Your logic here to determine which language to choose via location etc...You can create a plugin to share with the community! Here is an basic example of making a plugin for Termino.js
// Create your plugin
Termino.yourPlugin = function(pluginFn) {
pluginFn();
}Most modern browsers support Termino.js features and functions out of the box. However, to ensure compatibility with all devices and browsers, including those lacking built-in support for Termino.js, you can easily add polyfill support.
async function checkAndLoadPolyfills(url) {
const features = {
"Array.prototype.filter": typeof Array.prototype.filter === 'function',
"console": typeof console === 'object' && typeof console.log === 'function',
"document": typeof document === 'object' && document !== null,
"JSON": typeof JSON === 'object' && typeof JSON.parse === 'function' && typeof JSON.stringify === 'function',
"Promise": typeof Promise === 'function'
};
// Check if all required features are supported
const allSupported = Object.values(features).every(Boolean);
// Load polyfills if any feature is not supported
if (!allSupported) {
await import(url);
return true; // Indicates that polyfills were loaded
}
return false; // Indicates that no polyfills were needed
}
// Usage example
(async () => {
const polyfillUrl = 'https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=Array.prototype.filter,console,document,JSON,Promise'; // Replace with your polyfill URL
const result = await checkAndLoadPolyfills(polyfillUrl);
console.log(result); // Returns true if polyfills were loaded, false if not needed
})();