command line-like interface for custom commands only in browser, where the user can type "help" to see possible commands. user can also use arrow keys to access command history.
http://muratkemaldar.github.io/komandojs/
you should have two things: an input (where the user enters commands) and a div, or any kind of container where the lines are displayed. if you have that, just call the init method of the window.komando object, and pass some properties inside an object, like so:
komando.init({
// input for entering commands, required
input: document.getElementById('komando-input'),
// display for displaying user-input and reactions, optional, but recommended
display: document.getElementById('komando-display'),
// array of custom commands
commands: [
{
// base command
command: "hello",
// the action after the command has been entered
// see below for more details on the arguments
action: function(command, display, parameters){
display.print("hello to you");
}
},
{
command: 'goodbye',
parameterHint: '(name)',
action: function(command, display, parameters){
if (parameters) {
display.print("see you soon " + parameters.string);
} else {
display.print("güle güle");
}
}
}
],
// options, these are the defaults
options: {
focusInput: false,
defaultCommandNotFoundMessage: '¯\\_(ツ)_/¯'
},
// after init callback
callback: function(){
console.log("komando initialized");
}
});the input DOM element, which the user uses to enter commands. required.
the DOM element for containing lines rendered by komando. will be cleaned after first command, so you can put hints in there if you want.
an array of command objects, to which komando will react to. a command has following built-in properties:
command string
the base command. when the user enters this command, regardless whether the command has follow-up (parameters) or not, the corresponding action will be called.
parameterHint string
the hint which will be shown after the command property when user types 'help'
action function (command, display, parameters)
the action which will be called when user enters the corresponding command. this gets called by komando, and it gets following arguments:
-
command
string
the command string of the command object -
display
object
an object with special methods and properties to react on a command. this is how it looks like:
display: {
panel: // the DOM element
mostRecentLine: // the most recently rendered DOM element of the display
print: function(content, lineClass, robot){} // adds a new line to the display. lineClass is "default" by default, other options are 'error' and 'info'. robot is true by default. if you want to react on a command in the action function, just use display.print(yourContent), or see the example code above.
}- parameters
object
object containing the words entered after the base command. contains astringandarrayproperty, first being everything after the accepted base command, the second being the same, but split by spaces.
some options to change behavior of komando. these are defaults:
focusInput boolean, default false
true if you want to focus input on komando.init().
defaultCommandNotFoundMessage string, default ¯\\_(ツ)_/¯
message which is displayed when user enters a command unknown.
callback method which will be called after komando has initialized.
this is how you listen to komando specific events:
komando.on('[eventname]', function(e){
// e = event, which gets custom properties by komando. see below.
});every event has event-specific properties attached with the event object passed to the function.
gets called after a command has been handled by komando (after action was called).
e.command: the base command which was handled.
gets called after the display has printed a line.
e.line: the DOM object (p) which was added to the display.
e.robot: true if added by komando, false if it the user input
gets called after a command is added to the history.
e.command: the base command which was handled.
komandojs is released under the MIT License.