Console

Simple console with div and editable span

by francisfortier

HTML

<table id="shell" class="shell shell32"><tbody></tbody></table>

CSS

.shell { font-family: consolas, monospace; table-layout: fixed; border-collapse: collapse; }
.shell32 { font-size: 20pt; }
.shell40 { font-size: 16pt; }
.shell64 { font-size: 10pt; }
.shell80 { font-size: 8pt; }

.shell .cursor { background-color: #000; }

JavaScript

Console = new function() {
    
    this.DISPLAYMODE_SHELL32 = DISPLAYMODE_SHELL32 = "shell32";
    this.DISPLAYMODE_SHELL40 = DISPLAYMODE_SHELL40 = "shell40";
    this.DISPLAYMODE_SHELL64 = DISPLAYMODE_SHELL64 = "shell64";
    this.DISPLAYMODE_SHELL80 = DISPLAYMODE_SHELL80 = "shell80";
    
    var _mode;
    var _shell = document.getElementById("shell");
    var _rowIndex = 0;
    var _colIndex = 0;
    var _numberOfColumns;
    
    var _createGrid = function(rows, cols) {
        shell.tBodies[0].innerHTML = "";
        
        for (var i = 0; i < rows; i++)
        {
            var tr = document.createElement("tr");
            
            for (var j = 0; j < cols; j++)
            {
                var td = document.createElement("td");
                
                td.innerHTML = '&nbsp;';
                tr.appendChild(td);
            }
            
            shell.tBodies[0].appendChild(tr);
        }    
        
        _numberOfColumns = cols;
    };
    
    var _backspace = function() {
        _colIndex--;
        
        if (_colIndex < 0) 
        {
            _colIndex = _numberOfColumns - 1;
            
            if (--_rowIndex < 0)
            {
                _colIndex = 0;
                _rowIndex = 0;
            }
        }
shell.tBodies[0].rows[_rowIndex].cells[_colIndex].innerHTML = '&nbsp;';
    };
        
    var _nextLine = function() {
        _colIndex = 0;
        
        if (++_rowIndex >= shell.tBodies[0].rows.length)
        {
            _rowIndex--;
            
            var row = shell.tBodies[0].rows[0];
            
            shell.tBodies[0].removeChild(shell.tBodies[0].rows[0]);
            shell.tBodies[0].appendChild(row);
            
            for (var i = 0; i < row.cells.length; i++)
            {
                row.cells[i].innerHTML = '&nbsp;';
            }
        }
    };
    
    Object.defineProperty(this, "write", {
        value: function(text) {
            for (var i = 0; i <...