Bash shell modeling in the browser

Question

Is there a way to simulate a Bash shell in a browser using Javascript / JQuery? I would like to have a demo on our website where it mimics someone using our new Bash shell database system. It would be preferable to look as if someone were typing shell commands, and the output would be displayed in turn, as usual, with the usual Bash shell. I was GOOGLING without finding anything, so how do I implement it - with which jQuery plugin to make my work easier.

Answer 1

I made a decision based on an example made by Kos , you can see a fully functional demo.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/q.js/1.0.0/q.js"></script>
<div id="wnd"></div>
<div id="log"></div>

<textarea rows="11" cols="50">
% cat example.c
#include <stdio.h>
int main()
{
  printf("Goodbye Cruel World!\n");
  return 0;
}
% make example.c -o example
% ./example
Goodbye Cruel World!
</textarea>

CSS

body {
  background: black;
}
#wnd {
  background: #232;
  border-radius: .2em;
  white-space: pre-wrap;
  padding: .5em;
  font-family: "Consolas", "Ubuntu Mono", "Monaco", monospace;
  color: white;
}
.prompt {
  color: #99aaee;
}
.cmd {
  color: #9e9e9C;
}

JQuery

var prompt;

function setPrompt(usr, domain)
{
  prompt = usr + '@' + domain + ' %';
}

function addOutput(s) {
  $('<div>').text(s).appendTo(wnd);
  return Q.delay(100);
//  return addPrompt();
}

function addInput(s) {
  var l = $('.prompt:last');
var e = $('<span>').addClass('cmd').appendTo(l);

  return addLettersRecursive(e, s);
}

function addPrompt() {
  var l = $('<div>').text(prompt).addClass('prompt').appendTo(wnd);
  return Q.delay(900);
}

function addLettersRecursive(container, s) {
  container.append(s.charAt(0)); // dangerous :(
  var row_complete = Q.defer();
  Q.delay(100).then(function() {
    if (s.length <= 1) {
      row_complete.resolve();
    }
    addLettersRecursive(container, s.substr(1)).then(function() {
      row_complete.resolve();
    })
  });
  return row_complete.promise;
}

$( document ).ready(function() {
  $('textarea').hide();

  setPrompt('inge', 'sparkledb.net');

  var lines = $('textarea').val().split('\n');

  var promise = new Q();

  promise = promise.then(function() 
  {  
    lines.forEach( function(item) {
      if (item[0] == '%')
      {
        promise = promise.then(function() 
        { return addPrompt(); })
        promise = promise.then(function() 
        { return addInput(item.substr(1)); })
      }
      else
      {
        promise = promise.then(function() 
        { return addOutput(item); })
      }
    })
  })
  promise.done();

});

Answer 2

Asciinema:

Asciinema - .

Answer 3

, . ,

HTML:

<div id='window'></div>
<div id='command-line'>
    [user@computer folder]$ <input type='text' id='command-input/>'
</div>

CSS

body{
    background-color:black;
    color:green;
}
#window{
    position:absolute;
    top:0;
    left:0;
    width:100%:
    height:95%;
}
#command-line{
    position:absolute;
    top:95%;
    left:0;
    width:100%;
    height:5%;
}

JavaScript/jQuery, , .

function appendOutput(message){
    var window = $('#window');
    window.append("<div>"+message+"</div>");
}    

, ,

function typeMessage(message){
    var input = $('#command-input');
    for(var i=0; i<message.length; i++){
        setTimeout(function(){
            var formerValue = input.val();
            input.val(formerValue + message[i]);
        });
    }
}

.. , , , - . , !